/* ============================================================================
   Vitta — base compartida
   ----------------------------------------------------------------------------
   Reset, tipografía y los componentes que aparecen en TODAS las páginas de la
   web (cabecera, pie, botones, tarjetas) o que se reutilizan en más de un
   sitio (WordPress + intranet). Construido enteramente sobre las variables de
   tokens.css — ni un color ni una medida escritos a pelo aquí.

   Lo que es propio de una sola página (login, portada de clientes, avisos
   "próximamente"...) NO vive aquí: sigue en la hoja de estilos de cada sitio
   (shared.css de la intranet, style.css del tema de WordPress), que a su vez
   consume este archivo.

   Igual que tokens.css, se monta de solo lectura en los dos contenedores.
   ========================================================================== */

/* Satoshi (Fontshare, libre para uso personal y comercial) — antes solo la
   cargaba la intranet, redeclarando --font-sans por encima de esto; ahora
   es la fuente base de todo el proyecto, así que vive aquí. */
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/satoshi/Satoshi-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/satoshi/Satoshi-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/satoshi/Satoshi-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Satoshi';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/satoshi/Satoshi-Black.woff2') format('woff2');
}

/* ── Reset mínimo ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base de página: cabecera y pie siempre pegados a los bordes del
   viewport, con el contenido propio de cada página estirándose entre medias
   (patrón "sticky footer"), sin recurrir a alturas fijas. ── */
html { min-height: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--navy);
}

/* ============================================================================
   Botones
   ========================================================================== */
.btn-primary {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: .3px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--navy);
  color: var(--white);
  transition: opacity .15s, transform .1s;
}
.btn-primary:hover { opacity: .88; transform: translateY(-1px); }
.btn-primary:disabled { opacity: .6; cursor: default; transform: none; }

.btn-outline {
  display: inline-block;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--navy);
  background: transparent;
  color: var(--navy);
  text-decoration: none;
  transition: background .15s;
}
.btn-outline:hover { background: rgba(35, 35, 70, .05); }

/* ============================================================================
   Tarjetas — el mismo selector visual que usa la calculadora pública
   ========================================================================== */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .cards-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .cards-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.card-link {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
}
.card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card-link .card-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--teal-l);
  font-size: 19px;
  margin-bottom: .7rem;
}
.card-link .card-title { font-size: 14.5px; font-weight: 700; color: var(--navy); margin-bottom: .25rem; letter-spacing: -.1px; }
.card-link .card-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* ============================================================================
   Cabecera — igual en WordPress y en la intranet
   ========================================================================== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .9rem 1rem;
  background: var(--white);
  border-bottom: 2px solid var(--teal);
}
.app-header__brand { display: flex; align-items: center; text-decoration: none; }
.app-header__logo { height: 30px; width: auto; object-fit: contain; }
/* En pantallas estrechas se enseña el isotipo en vez del logotipo completo,
   para que la cabecera quepa en una sola línea junto con el acceso o el
   nombre de cuenta. */
.app-header__logo--mark { display: none; }
@media (max-width: 420px) {
  .app-header__logo--full { display: none; }
  .app-header__logo--mark { display: block; }
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.app-header__access { flex-shrink: 0; }

/* WordPress: desde la tanda 1 del rediseño, la cabecera es el patrón
   vitta/header-contenido con bloques reales (sin core/html) -- el logo es
   un core/image (figure > a > img, las clases van en la figure) y los
   botones "Área cliente"/"Área staff" son core/button (la clase va en el
   div, el aspecto en el <a> de dentro). La intranet sigue con su <img> y
   su <a class="btn-outline"> de siempre: estas reglas no la tocan. */
.wp-block-image.app-header__logo { margin: 0; height: auto; }
.wp-block-image.app-header__logo a { display: block; }
.wp-block-image.app-header__logo img { display: block; height: 30px; width: auto; }
.app-header__brand { gap: 0; }
.app-header__actions { gap: var(--space-3); }
.app-header__buttons { gap: .5rem; flex-wrap: nowrap; }
.app-header__access .wp-block-button__link {
  display: inline-block;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
  line-height: 1.2;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--navy);
  background: transparent;
  color: var(--navy);
  text-decoration: none;
  transition: background .15s;
}
.app-header__access .wp-block-button__link:hover { background: rgba(35, 35, 70, .05); }

/* Menú de cabecera: bloque Navigation real (wp_navigation "Navegación"/
   "Navigation", traducido por idioma vía Polylang -- ver el filtro
   pll_get_post_types y render_block_data en functions.php del tema).
   El propio bloque ya resetea la lista (sin viñetas/margen); aquí solo se
   ajustan color, tamaño y separación al resto del sistema. Oculto en
   móvil, igual criterio que .hero__nav-links en front-page.css: cabecera
   estrecha, prioridad para marca + acceso + selector de idioma. */
.app-header__nav .wp-block-navigation-item__content {
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  /* Mayúsculas de la maqueta por CSS, no en el rótulo guardado
     ("Bombas", no "BOMBAS"): así el lector de pantalla no lo deletrea. */
  text-transform: uppercase;
  letter-spacing: .04em;
}
.app-header__nav .wp-block-navigation-item__content:hover { text-decoration: underline; }
.app-header__nav .wp-block-navigation__container { gap: var(--space-4); }

/* Menú desplegable (overlayMenu "mobile" del bloque Navigation, ver
   patterns/header-contenido.php). El núcleo pasa a menú en línea a 600px,
   pero la cabecera de escritorio (logo + 5 entradas + idioma + 2 botones)
   no cabe en una línea hasta 1024px -- medido: entre 700 y 1000px el menú
   saltaba a dos líneas y la cabecera crecía a 110px. Estas dos reglas
   alargan el comportamiento de móvil del núcleo (botón visible, menú en
   línea oculto) hasta 1023px; por debajo de 600px ya lo hace el núcleo. */
@media (min-width: 600px) and (max-width: 1023px) {
  .app-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
  .app-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (max-width: 1023px) {
  /* Botón pegado al logo; idioma y botones de área, a la derecha. */
  nav.app-header__nav { margin-right: auto; }
}
/* Botón de abrir: 44x44 de área táctil (el icono del núcleo es de 24). */
.app-header__nav .wp-block-navigation__responsive-container-open,
.app-header__nav .wp-block-navigation__responsive-container-close {
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  border-radius: var(--radius-sm);
}
/* ...pero sin agrandar la cabecera: el margen negativo deja que esos 44px
   se metan en el relleno de .app-header, así cuenta solo 30px de alto
   (lo mismo que el logo) y --header-h sigue valiendo. */
.app-header__nav .wp-block-navigation__responsive-container-open { margin-block: -7px; }
.app-header__nav .wp-block-navigation__responsive-container-open:focus-visible,
.app-header__nav .wp-block-navigation__responsive-container-close:focus-visible,
.app-header__nav .is-menu-open .wp-block-navigation-item__content:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
/* Diálogo abierto: navy de marca a pantalla completa, enlaces en blanco y
   grandes. Selectores largos a propósito: el núcleo pinta el diálogo con
   ".wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open"
   (fondo blanco, texto negro, 0,4,0) y los enlaces con
   ".wp-block-navigation-item__content.wp-block-navigation-item__content"
   (color: inherit) -- con menos especificidad, el diálogo salía blanco
   con los enlaces blancos (medido: 1:1). */
.app-header .app-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--navy);
  color: var(--white);
  padding: var(--space-4);
}
.app-header .app-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  color: var(--white);
}
.app-header .app-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: calc(44px + var(--space-5));
}
.app-header .app-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: var(--space-2);
}
.app-header .app-header__nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--white);
  font-size: 20px;
  padding: .35rem 0;
}

/* El núcleo (wp-includes/blocks/navigation/style.css, no se toca) pone
   background-color:inherit en cada <li> (.wp-block-navigation-item) --
   sobre la pastilla "cristal" de la cabecera transparente (front-page.css,
   .wp-block-navigation__container con background:rgba(255,255,255,.08)),
   eso significa que cada item vuelve a pintar ESE MISMO rgba encima del
   que ya pinta el contenedor: el tramo bajo cada enlace queda más opaco
   que el hueco entre enlaces (gap), una pastilla con bandas en vez de
   opacidad uniforme -- comprobado en captura real, no a ojo (ver
   verificación de esta tanda). Sin esta regla no dependía nada: ni el
   hover (text-decoration, arriba) ni el estado activo/current-menu-item
   (color, ver front-page.css) tocan background-color en ningún sitio. */
.wp-block-navigation .wp-block-navigation-item {
  background-color: initial;
}

/* Selector de idioma (multiidioma de la web pública vía Polylang, ver
   vitta_render_lang_switcher() en functions.php del tema) -- hoy solo lo
   usa WordPress, pero vive aquí junto al resto del cromado de marca de
   cabecera/pie, común a las dos apps. Sin banderas ("un idioma no es un
   país"): solo el código de idioma en mayúsculas, mismo tratamiento que
   .app-footer__links de aquí abajo. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
.lang-switch__link {
  color: var(--text-muted);
  text-decoration: none;
  padding: .15rem .1rem;
}
.lang-switch__link:hover { color: var(--navy); }
.lang-switch__link.is-current { color: var(--navy); }
.lang-switch__link + .lang-switch__link {
  border-left: 1px solid var(--teal);
  padding-left: .35rem;
}

.app-header .who {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  margin-right: .25rem;
}
.app-header .btn-logout { flex-shrink: 0; }

/* ============================================================================
   Pie — igual en WordPress y en la intranet (hoy solo lo usa WordPress --
   la intranet no tiene pie propio, ver el comentario en .app-footer__links
   más abajo)
   ----------------------------------------------------------------------------
   Rehecho entero (tanda de contenido real): antes era un pie de una sola
   fila (logo + nombre + dos enlaces); ahora son tres franjas -- logo +
   línea de marca arriba, tres columnas de sede en medio, copyright +
   legal abajo. El contenido de las tres franjas es
   patterns/footer-contenido.php, referenciado desde parts/footer.html
   con un bloque de referencia (no aplanado) para poder usar __() -- ver
   ese patrón para el porqué. Sin iconos sociales (pedido explícito).
   ========================================================================== */
.app-footer {
  margin-top: auto; /* empuja el pie al fondo cuando el contenido es corto */
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-4) var(--space-5);
  /* Antes blanco con texto navy -- pedido explícito: navy con texto
     blanco. --text-muted (rgba navy) estaba pensado para un fondo claro,
     así que el texto secundario de aquí abajo pasa a un blanco atenuado
     propio (mismo mecanismo, rgba sobre var(--white), no un color nuevo
     -- ya se usa igual en front-page.css) en vez de --text-muted. */
  background: var(--navy);
  border-top: 2px solid var(--teal);
}

.app-footer__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 900px) {
  /* Marca a la izquierda, las dos columnas de enlaces a la derecha. */
  .app-footer__main { grid-template-columns: 1fr auto; align-items: start; }
}
.app-footer__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
/* Logotipo: core/image (figure > img) desde la tanda 1 del rediseño. */
.app-footer__logo-full { margin: 0; }
.app-footer__logo-full img {
  display: block;
  height: 28px;
  width: auto;
  object-fit: contain;
  /* El SVG es azul marino sólido -- se fuerza a blanco en vez de
     duplicar el archivo, mismo criterio que el resto de logos del
     proyecto sobre fondo oscuro. */
  filter: brightness(0) invert(1);
}
.app-footer__tagline { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .75); margin: 0; max-width: 42ch; }

/* Columnas VITTA / PLATAFORMA. La de VITTA es un bloque Navigation
   (menú "pie-vitta", vertical); la de PLATAFORMA una core/list -- mismo
   aspecto para las dos. */
.app-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: var(--space-6);
}
@media (min-width: 900px) {
  .app-footer__cols { gap: var(--space-7); }
}
.app-footer__col-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 var(--space-3);
}
.app-footer__col-links,
.app-footer__col-links .wp-block-navigation__container {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}
/* Color en el CONTENEDOR (lo heredan <li> y <a>), no en el <a>: el
   núcleo pinta los enlaces del bloque Navigation con
   .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
   { color: inherit } (especificidad 0,3,0) -- una regla sobre el <a>
   perdía contra esa y el enlace heredaba el navy del body: navy sobre
   navy, invisible (medido: 1:1). Heredando del contenedor, ese "inherit"
   del núcleo trabaja a favor. Hover sobre el <li>, por la misma razón. */
.app-footer .app-footer__col-links { color: rgba(255, 255, 255, .75); }
.app-footer .app-footer__col-links a {
  display: inline-block;
  padding: .2rem 0; /* área táctil más cómoda en móvil */
  font-size: 13px;
  color: inherit;
  text-decoration: none;
}
.app-footer .app-footer__col-links li:hover { color: var(--white); }
.app-footer .app-footer__col-links li:hover a { text-decoration: underline; }

/* Sedes: ya no están en el pie (maqueta nueva), pero sus estilos se quedan
   para el patrón vitta/sedes (patterns/sedes.php), guardado tal cual para
   la futura página de Contacto. */
.app-footer__sedes-wrap { max-width: 1200px; margin: 0 auto; width: 100%; }
.app-footer__sedes-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
  margin: 0 0 var(--space-5);
}
.app-footer__sedes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  text-align: left;
}
@media (min-width: 700px) {
  .app-footer__sedes { grid-template-columns: repeat(3, 1fr); }
}
.app-footer__sede h3 { font-size: 14px; font-weight: 700; color: var(--white); margin: 0 0 var(--space-2); }
.app-footer__sede p { font-size: 13px; color: rgba(255, 255, 255, .75); margin: 0 0 var(--space-1); line-height: 1.5; }
.app-footer__sede a {
  color: var(--white);
  text-decoration: none;
  display: inline-block;
  padding: .2rem 0; /* área táctil algo más cómoda en móvil (el tel:/mailto: real ya funciona sin esto, pero 16px de alto de línea era ajustado) */
}
.app-footer__sede a:hover { text-decoration: underline; }

.app-footer__bottom {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, .18);
  text-align: center;
}
.app-footer__copyright { font-size: 11.5px; color: rgba(255, 255, 255, .75); margin: 0; }
@media (min-width: 700px) {
  .app-footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}
/* .app-footer__links es hoy solo de WordPress (la intranet no tiene pie
   propio) y es el className de un bloque Navigation real (wp_navigation
   "Legal" #17 es / #19 en, traducido por Polylang igual que el menú de
   cabecera). */
.app-footer__links {
  display: flex;
  gap: var(--space-4);
}
/* Mismo motivo que .app-footer__col-links: color en el contenedor. Hover
   solo si el enlace tiene destino -- Aviso legal, Privacidad y Cookies
   todavía no lo tienen (bin/seed-menus.php) y no deben parecer
   pulsables. */
.app-footer .app-footer__links { color: rgba(255, 255, 255, .75); }
.app-footer .app-footer__links a {
  font-size: 11.5px;
  color: inherit;
  text-decoration: none;
}
.app-footer .app-footer__links li:has(> a[href]):hover { color: var(--white); }
.app-footer .app-footer__links li:has(> a[href]):hover a { text-decoration: underline; }

/* ============================================================================
   Páginas interiores de WordPress (templates/page.html) -- hoy solo lo usa
   WordPress. El reset de arriba (* { margin: 0 }) deja el contenido de
   una página sin ningún espacio entre bloques; esto le da márgenes
   laterales, título h1 y ritmo vertical legible (pensado primero para la
   política de privacidad, texto largo; vale para cualquier página).
   ========================================================================== */
.pagina {
  width: 100%;
  padding: var(--space-6) var(--space-4) var(--space-7);
}
.pagina__titulo {
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.15;
  margin-bottom: var(--space-5);
}
.pagina__contenido { font-size: 16px; line-height: 1.6; }
.pagina__contenido > * + * { margin-top: var(--space-3); }
.pagina__contenido > h2 { margin-top: var(--space-6); font-size: 22px; line-height: 1.25; }
.pagina__contenido ul { padding-left: 1.25em; }
.pagina__contenido li + li { margin-top: var(--space-1); }
.pagina__contenido a { color: var(--navy); text-decoration: underline; }
.pagina__contenido > h3 { margin-top: var(--space-5); font-size: 18px; line-height: 1.3; }
/* Nombres de cookies y similares: tipografía única (Satoshi), también aquí. */
.pagina__contenido code { font-family: inherit; font-weight: 700; overflow-wrap: anywhere; }

/* Tablas de los textos legales (bin/seed-legales.php, clase tabla-legal):
   encima del estilo del bloque Tabla del núcleo (bordes de 1px). */
.tabla-legal table { width: 100%; }
.tabla-legal th,
.tabla-legal td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3); }
.tabla-legal thead { border-bottom-width: 2px; }
.tabla-legal tbody th { font-weight: 700; width: 34%; }
/* En el móvil, cada fila se apila como una ficha (primera celda en
   negrita y el resto debajo), sin desplazamiento lateral: con tres
   columnas a 390px la última quedaba fuera de la vista. */
@media (max-width: 599px) {
  .tabla-legal thead { display: none; }
  .tabla-legal table,
  .tabla-legal tbody,
  .tabla-legal tr,
  .tabla-legal th,
  .tabla-legal td,
  .tabla-legal tbody th { display: block; width: auto; }
  .tabla-legal tr { border: 1px solid; }
  .tabla-legal tr + tr { border-top: 0; }
  .tabla-legal th,
  .tabla-legal td { border: 0 !important; padding: var(--space-1) var(--space-3); }
  .tabla-legal tr > :first-child { padding-top: var(--space-3); font-weight: 700; }
  .tabla-legal tr > :last-child { padding-bottom: var(--space-3); }
}