/* =============================================================================
   layout.css — Contenedores, cabecera, menú lateral, pie y barra inferior

   Mobile primero: lo que está fuera de un `@media` es el celular.
   ============================================================================= */

/* El relleno va como `padding-left` y `padding-right`, **nunca como el atajo
   `padding`**. `.contenedor` comparte elemento con otra clase en varios lugares
   —`class="contenedor pie__interior"`— y esa otra clase puede poner su propio
   relleno vertical. Con el atajo, cada `@media` que vuelve a declarar
   `padding: 0 …` acá le pone el vertical en cero.

   Le pasaba al pie, que declara su relleno en este mismo archivo y antes de los
   `@media`: de 600 px en adelante perdía el aire de arriba y el logo quedaba
   pegado al borde de la franja navy, con el valor correcto escrito en su regla.
   Las clases de `paginas.css` se salvaban de casualidad, porque ese archivo
   carga después; no es algo en lo que convenga confiar. */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding-left: var(--e4);
  padding-right: var(--e4);
}

.contenedor--angosto { max-width: 680px; }

/* ─── Cabecera ──────────────────────────────────────────────────────────────
   En celular: logo a la izquierda, botón de menú a la derecha. El menú
   horizontal y los botones de acción están en el marcado pero no se muestran:
   sus destinos viven en la barra inferior (§0.5, una sola navegación).

   Al bajar, `.cabecera--compacta` cambia el logo por el símbolo y saca el
   buscador chico; `.cabecera--oculta` la corre fuera de pantalla. Las dos
   clases las pone `app.js`. */

.cabecera {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
  transition: transform .2s ease;
}

.cabecera--oculta { transform: translateY(-100%); }

.cabecera__interior {
  display: flex;
  align-items: center;
  gap: var(--e3);
  /* 71 del logo + 16 arriba y 16 abajo. La cabecera se esconde al bajar
     (`.cabecera--oculta`), así que estos píxeles se pagan una sola vez. */
  min-height: 104px;
}

/* Compactada vuelve a los 64 de siempre: ahí queda el símbolo solo. */
.cabecera--compacta .cabecera__interior { min-height: 64px; }

/* `flex: none`: la marca no se encoge. Sin esto, el buscador chico de la
   cabecera compactada le come ancho al logo y lo deja por debajo del tamaño
   que se le fijó, que es justamente lo que el manual no admite. */
.marca { display: flex; align-items: center; flex: none; text-decoration: none; }
.marca img { flex: none; }
.marca:hover { text-decoration: none; }

/* ─── Las tres versiones del logo ──────────────────────────────────────────
   El eslogan viene **dibujado adentro** del archivo del logo completo, no es
   texto de la página: su tamaño es una proporción fija del ancho del logo y no
   se puede agrandar aparte. Medido, el renglón del eslogan ocupa 20 de las 142
   unidades de alto del SVG, o sea que equivale a un cuerpo de unos 15 unidades:
   a 200 px de ancho de logo son 7,5 px de cuerpo, que es donde empieza a leerse.
   Por debajo de eso no hay ajuste de CSS que lo salve, solo más ancho.

   De ahí sale toda esta regla: **la cabecera es alta porque el logo lo pide**,
   no al revés. Antes era al revés —la cabecera medía 64 px y el logo se metía
   adentro como podía— y el resultado era un eslogan de 4 px que parecía un
   archivo mal exportado.

     · celular               → completo, 200 px de ancho (53 mm)
     · celular compactada    → solo el símbolo
     · escritorio            → completo, 200 px de ancho (53 mm)
     · escritorio compactada → sin eslogan, 150 px

   El mínimo del manual para la versión con eslogan es 30 mm, unos 113 px de
   ancho. Los 200 px están muy por encima en las dos pantallas. La versión sin
   eslogan queda para lo único para lo que existe: la cabecera compactada de
   escritorio, donde hay ancho pero no alto. */

.marca__logo,
.marca__compacto,
.marca__simbolo { display: none; width: auto; }

/* En celular **también entra el logo completo**, y se midió antes de decidirlo:
   a 360 px de pantalla quedan 272 px libres al lado del botón de menú y el logo
   necesita 200. Entra con 72 px de sobra, que además cubre el área de seguridad
   por ese lado.

   Lo que no entra en un teléfono es el área de seguridad **arriba y abajo**: los
   57 px de cada lado darían una cabecera de 185 px, casi una cuarta parte de una
   pantalla de 760. Acá va reducida a 16 px, y es una desviación consciente del
   manual. La alternativa era la versión sin eslogan, y el eslogan es la promesa
   de la marca justo en la pantalla donde entra casi todo el tráfico. */
.marca__logo { display: block; width: 200px; }

/* Al compactarse, en celular no hay lugar ni para el nombre: queda el símbolo,
   que se reconoce por la forma. */
.marca__simbolo { height: 40px; }

.marca__nombre  { font-weight: 800; font-size: 1.1rem; color: var(--primary); line-height: 1.2; }
.marca__eslogan { font-size: .75rem; color: var(--text-soft); display: block; }

/* El buscador chico solo existe cuando el del hero salió de pantalla. */
.buscador-mini { display: none; }

.cabecera--compacta .marca__logo    { display: none; }
.cabecera--compacta .marca__simbolo { display: block; }
.cabecera--compacta .buscador-mini  { display: flex; }

.buscador-mini {
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: var(--e2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radio-pastilla);
  padding: 0 var(--e2) 0 var(--e3);
  height: var(--tactil);
  box-shadow: var(--sombra);
}
.buscador-mini__lupa  { color: var(--text-soft); }
.buscador-mini__campo {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
  outline-offset: 4px;
}
.buscador-mini__boton {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
}

/* Botón cuadrado de ícono: 44 × 44, el mínimo táctil de §0.5. */
.boton-icono {
  display: grid;
  place-items: center;
  width: var(--tactil);
  height: var(--tactil);
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  background: transparent;
  color: var(--primary);
  cursor: pointer;
}
.boton-icono:hover { background: var(--muted); }

.cabecera__menu     { margin-left: auto; }
.menu               { display: none; }
.cabecera__acciones { display: none; }

/* ─── Menú lateral ─────────────────────────────────────────────────────────── */

.panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(9, 18, 26, .55);
  display: flex;
  justify-content: flex-end;
}
.panel[hidden] { display: none; }

.panel__caja {
  width: min(88%, 380px);
  background: var(--primary);
  color: #fff;
  padding: var(--e4) var(--e4) var(--e7);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
}

.panel__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.panel__cabecera img { width: auto; height: 44px; }
.panel__nombre   { font-weight: 800; font-size: 1.05rem; }
.panel__cerrar   { color: #fff; }
.panel__cerrar:hover { background: rgba(255, 255, 255, .1); }

.panel__lista { display: grid; gap: var(--e1); }

.panel__link {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: var(--tactil);
  padding: var(--e2) var(--e2);
  border-radius: var(--radio);
  color: #fff;
  font-weight: 600;
}
.panel__link:hover { background: rgba(255, 255, 255, .1); text-decoration: none; }
.panel__flecha { margin-left: auto; color: var(--sobre-primary-suave); }

.panel__titulo {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--linea-primary);
  color: var(--accent);
  font-size: .95rem;
}

.panel__lista--red .panel__link { font-weight: 400; color: var(--sobre-primary); }
.panel__vacio { color: var(--sobre-primary-suave); font-size: .9rem; padding: var(--e2); }

/* ─── Secciones ────────────────────────────────────────────────────────────── */

.seccion { padding: var(--e6) 0; }
.seccion--gris { background: var(--muted); }
.seccion--centrada { text-align: center; padding: var(--e8) 0; }

/* En pantalla chica el enlace de la derecha baja a su propia línea en vez de
   empujar el título fuera del contenedor. */
.seccion__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2) var(--e3);
  margin-bottom: var(--e4);
}
.seccion__titulo { margin: 0; }
.seccion__pie { margin-top: var(--e5); }

/* ─── Rejillas ─────────────────────────────────────────────────────────────── */

.rejilla { display: grid; gap: var(--e4); }
.rejilla--3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ─── Pie ──────────────────────────────────────────────────────────────────── */

.pie { background: var(--primary); color: #fff; margin-top: var(--e7); }

.pie__interior {
  display: grid;
  gap: var(--e4);
  /* El pie arrancaba pegado al contenido de arriba. El aire de separación es lo
     que lo hace leer como cierre y no como una sección más. */
  padding-top: var(--e8);
  padding-bottom: var(--e6);
}

/* El pie usa la versión sin eslogan sobre navy (`-oscuro`), que es la única
   aprobada para fondo oscuro. Se mide **por ancho**, que es como lo fija el
   manual: 200 px son 53 mm, muy por encima del mínimo de 30, y son los mismos
   200 de la cabecera, así que la marca no cambia de tamaño entre el principio
   y el final de la página. */
.pie__logo { width: 200px; height: auto; margin-bottom: var(--e4); }
.pie__nombre { font-weight: 800; font-size: 1.05rem; margin-bottom: var(--e2); }
.pie__texto { color: var(--sobre-primary-suave); font-size: .9rem; margin-bottom: var(--e2); }

.pie__redes { display: flex; gap: var(--e2); margin-top: var(--e3); }
.pie__red {
  display: grid;
  place-items: center;
  width: var(--tactil); height: var(--tactil);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.pie__red:hover { background: rgba(255, 255, 255, .2); }

/* Acordeón. En el marcado los grupos van `<details open>`: sin JavaScript el pie
   queda abierto y los enlaces a categorías siguen ahí, que es lo que pide §0.4.
   `app.js` los cierra solo en celular. */
.pie__grupo { border-top: 1px solid var(--linea-primary); }

.pie__titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-height: var(--tactil);
  padding: var(--e2) 0;
  margin: 0;
  color: var(--accent);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.pie__titulo::-webkit-details-marker { display: none; }
.pie__chevron { transition: transform .15s ease; }
.pie__grupo[open] > .pie__titulo .pie__chevron { transform: rotate(180deg); }

.pie__lista { display: grid; gap: var(--e1); font-size: .92rem; padding-bottom: var(--e3); }
.pie__lista a {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: 32px;
  color: var(--sobre-primary);
}
.pie__lista a:hover { color: #fff; }
.pie__destacado { color: var(--accent) !important; font-weight: 700; }
.pie__vacio { color: var(--sobre-primary-suave); font-size: .9rem; }

.pie__legal {
  border-top: 1px solid var(--linea-primary);
  padding: var(--e4) 0;
  font-size: .85rem;
  color: var(--sobre-primary-suave);
  text-align: center;
}

/* ─── Barra inferior ────────────────────────────────────────────────────────
   La única navegación de celular (§0.5). Cinco destinos, siempre visible, con
   el activo diferenciado por color y también por forma —el ícono se rellena—,
   no solo por color. */

.barra-inferior {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 10px rgba(26, 36, 48, .06);
}

/* Tantas columnas iguales como destinos haya: hoy cuatro, cinco cuando vuelva
   «Mapa» (pie.php). Con un número fijo, un destino menos deja un hueco. */
.barra-inferior__lista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.barra-inferior__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--barra);
  padding: var(--e1) 2px;
  color: var(--text-soft);
  font-size: .7rem;
  line-height: 1.2;
  text-align: center;
}
.barra-inferior__link:hover { text-decoration: none; color: var(--primary); }

.barra-inferior__link--activo { color: var(--primary); font-weight: 700; }
.barra-inferior__link--activo .ico {
  fill: var(--accent);
  color: var(--primary);
}

.barra-inferior__texto { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* =============================================================================
   sm — 600 px
   ============================================================================= */

@media (min-width: 600px) {
  .contenedor { padding-left: var(--e5); padding-right: var(--e5); }
  .seccion { padding: var(--e7) 0; }
  .pie__interior { grid-template-columns: 1fr 1fr; column-gap: var(--e6); }
  .pie__col--marca { grid-column: 1 / -1; }
}

/* =============================================================================
   md — 900 px · layout de escritorio
   ============================================================================= */

@media (min-width: 900px) {

  /* La cabecera deja de esconderse: en escritorio no molesta y estorba menos
     tenerla siempre a mano. */
  .cabecera--oculta { transform: none; }

  /* ─── La cabecera alta, para que el logo entre completo ──────────────────
     El área de seguridad del manual es el ancho del símbolo, que medido sobre el
     SVG es el **28,3 % del ancho total del logo**. O sea que crece con el logo:
     no es un número suelto, es una proporción.

     Entre 900 y 1.199 px la barra tiene que meter el logo, seis opciones de
     menú, «Ingresar» y el botón verde. Ahí el logo va a 170 px (45 mm, todavía
     una vez y media el mínimo del manual) y el eslogan sigue leyéndose. De
     1.200 para arriba sobra ancho y el logo va a 280. */
  .cabecera__interior {
    /* El aire de arriba y abajo sale del `min-height` y del centrado vertical,
       no de un `padding`: `.contenedor` ya fija el suyo horizontal y pisarlo acá
       obligaría a repetir el valor.

       61 de logo + 48 y 48 = 157. Los 48 son los que pide el área de seguridad
       para un logo de 170, y acá coinciden con lo que la barra necesita; en el
       tramo de 1.200 no coinciden y manda la barra (ver más abajo). */
    min-height: 157px;
    /* 16 y no 24 entre logo, menú y acciones: en este tramo son 24 px que le
       faltan al botón verde para entrar en un renglón. En 1.200 vuelve a 24. */
    gap: var(--e4);
  }

  /* El área de seguridad al costado va como margen **de la marca**, no como
     `gap` del contenedor: el `gap` se lo aplica también a la separación entre el
     menú, «Ingresar» y el botón verde, y ahí no hace falta. El manual pide aire
     alrededor del logo, no entre las opciones del menú. */
  .marca { margin-right: 48px; }

  .marca__logo { width: 170px; }

  /* Compactada: la versión sin eslogan, que es para lo que existe. Sin el
     renglón de abajo el logo puede achicarse sin perder nada, y la cabecera
     baja a 84 px, que es lo que hace tolerable tenerla siempre a la vista. */
  .cabecera--compacta .cabecera__interior { min-height: 84px; }

  /* 150 px de logo → 42 px de área de seguridad. */
  .cabecera--compacta .marca { margin-right: 42px; }
  .cabecera--compacta .marca__logo     { display: none; }
  .cabecera--compacta .marca__compacto { display: block; width: 150px; }
  .cabecera--compacta .marca__simbolo  { display: none; }
  .cabecera--compacta .buscador-mini   { max-width: 320px; }

  .cabecera__menu { display: none; }

  .menu { display: block; margin-left: auto; }
  /* Entre 900 y 1.199 la barra tiene que meter el logo grande, seis opciones,
     «Ingresar» y un botón de cuatro palabras. El menú cede el aire que le
     sobra: con 24 px entre opciones el botón se parte en tres renglones. */
  .menu__lista { display: flex; gap: var(--e3); }
  .menu__link {
    display: flex;
    align-items: center;
    min-height: var(--tactil);
    color: var(--text);
    font-size: .95rem;
  }
  .menu__link:hover { color: var(--primary); }
  .menu__link--activo { color: var(--primary); font-weight: 700; }

  .cabecera__acciones { display: flex; align-items: center; gap: var(--e3); }

  /* «Sumá tu comercio o servicio» en un solo renglón, siempre. Sin esto, entre
     900 y 980 px el botón se encogía para hacerle lugar al menú y se partía en
     tres o cuatro líneas. Para que entre, en este tramo cede la cuenta: con
     sesión iniciada se ve solo el avatar, y el «Hola, {nombre}» —que con un
     nombre largo desbordaba la barra 90 px— queda para lectores de pantalla
     (mismas reglas que `.solo-lectores`) y vuelve a verse desde 1.200. */
  .cabecera__acciones .boton { white-space: nowrap; flex: none; }
  .cabecera .usuario__nombre {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
  }

  .panel { display: none; }
  .barra-inferior { display: none; }

  .seccion { padding: var(--e8) 0; }

  .pie { margin-top: var(--e8); }
  .pie__interior {
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: var(--e6);
    /* Mismo aire arriba y abajo: en escritorio las cuatro columnas son un solo
       bloque, y un bloque con 56 arriba y 32 abajo se lee caído. El renglón
       legal va aparte —tiene su línea y su propio relleno— y no entra en esta
       cuenta. */
    padding-top: var(--e8);
    padding-bottom: var(--e8);
  }
  .pie__col--marca { grid-column: auto; }

  /* En escritorio los grupos son columnas, no acordeones: `app.js` los deja
     abiertos y acá se apaga la interacción del encabezado. */
  .pie__grupo { border-top: 0; }
  .pie__titulo { cursor: default; pointer-events: none; min-height: 0; margin-bottom: var(--e2); }
  .pie__chevron { display: none; }

  .pie__legal { text-align: left; }
}

/* =============================================================================
   lg — 1200 px
   ============================================================================= */

@media (min-width: 1200px) {
  .contenedor { padding-left: var(--e6); padding-right: var(--e6); }

  /* Acá sobra ancho, así que el logo va a 280 px (74 mm), que es donde el
     eslogan se lee cómodo y no al límite. El logo mide 398 × 142, así que a ese
     ancho son exactamente 100 px de alto.

     El área de seguridad del manual es el 28,3 % del ancho —lo que mide el
     símbolo—, o sea 79 px. **Al costado se respeta; arriba y abajo, no.** Con
     los 79 verticales la cabecera daba 258 px y se veía como un hueco: eso es
     un área pensada para una pieza impresa, donde el logo está solo en la hoja,
     y no para una barra donde convive con el menú, «Ingresar» y el botón verde.
     El aire de una barra lo fija la barra.

     100 de logo + 25 y 25 = 150. Es la misma desviación que en celular y por la
     misma razón, y está anotada en ASSETS.md junto con aquella. */
  .cabecera__interior { min-height: 150px; gap: var(--e5); }
  .marca              { margin-right: 79px; }

  /* Hay lugar: vuelve a verse «Hola, {nombre}». */
  .cabecera .usuario__nombre {
    position: static;
    width: auto; height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
  }
  .marca__logo        { width: 280px; }

  .cabecera--compacta .cabecera__interior { min-height: 84px; }
  .cabecera--compacta .marca { margin-right: 42px; }

  /* Acá sobra ancho: el menú recupera su separación. */
  .menu__lista { gap: var(--e5); }
}

/* El renglón legal del pie: copyright a un lado, institucionales al otro. */
.pie__legal-interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2) var(--e4);
}

.pie__legales {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
}
.pie__legales a { color: inherit; }

/* Cualquier enlace suelto del pie hereda el color del pie. El color global de
   enlace es el primario, que en el pie **es el fondo**: el de UMX, y cualquier
   otro que se escriba adentro de un párrafo, quedaba en tinta invisible
   (23-09-2026). Los que ya tienen clase propia —`.pie__lista a`, `.pie__red`,
   `.pie__destacado`— no se tocan. */
.pie a:not([class]) {
  color: inherit;
  text-decoration: underline;
}
.pie a:not([class]):hover { color: #fff; }