/* ============================================================
   Lo que solo hace falta dentro de WordPress

   1) Los avisos de WooCommerce (acceso, recuperación de contraseña, carrito),
      que no existen en la versión estática y llegan sin estilo porque el tema
      no carga las hojas de WooCommerce.
   2) La barra de administración, que tapa lo que va pegado arriba. Solo afecta
      a quien ha iniciado sesión: lo demás está bajo body.admin-bar.
   ============================================================ */

/* ---------------- avisos de WooCommerce ---------------- */

.woocommerce-notices-wrapper:empty { display: none; }

.woocommerce-notices-wrapper {
  max-width: 1200px;
  margin: 20px auto 0;
  padding: 0 20px;
}

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  list-style: none;
  margin: 0;
  padding: 14px 18px;
  border-radius: 8px;
  border: 1px solid;
  font-size: 14px;
  line-height: 1.6;
}

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li { list-style: none; }

.woocommerce-error {
  background: #FDECEF;
  border-color: #F2A7B7;
  color: #8E1D38;
}

.woocommerce-message {
  background: #E9F8EF;
  border-color: #A6DEBE;
  color: #14603C;
}

.woocommerce-info {
  background: #E8F6F9;
  border-color: #9BD8E2;
  color: #105660;
}

/* Dentro de la caja de acceso, el aviso va pegado al formulario. */
.acceso-in .woocommerce-notices-wrapper {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* ---------------- barra de administración ---------------- */
/*
   Alturas reales: 32px desde 783px de ancho y 46px entre 601 y 782px.
   Por debajo de 601px WordPress deja de fijarla y no hay nada que corregir.
*/

@media screen and (min-width: 783px) { body.admin-bar { --wpbar: 32px; } }
@media screen and (min-width: 601px) and (max-width: 782px) { body.admin-bar { --wpbar: 46px; } }

@media screen and (min-width: 601px) {
  /* La cabecera va pegada arriba: empieza debajo de la barra. */
  body.admin-bar .cab { top: var(--wpbar, 0px); }

  /* Las capas a pantalla completa, también. */
  body.admin-bar .menu-movil,
  body.admin-bar .cajon,
  body.admin-bar .modal { top: var(--wpbar, 0px); }

  /* Y lo que se queda pegado al bajar dentro de una columna. */
  body.admin-bar .galeria,
  body.admin-bar .resumen,
  body.admin-bar .res-pedido,
  body.admin-bar .filtros-cp { top: calc(var(--wpbar, 0px) + 20px); }
}