/* ==========================================================================
   ELYSIUM — comportamiento en pantallas chicas
   Va último, después de site.css / admin.css y marca.css.

   Dos problemas se arreglan acá:

   1. El desborde horizontal. `.contenido` y las columnas de los grids son
      ítems de grid, y un ítem de grid arranca con min-width:auto: en vez de
      dejar que la tabla ancha scrollee adentro de su caja, el ítem se estira
      para contenerla y arrastra toda la página. Por eso hay que poner
      minmax(0,1fr) en las columnas y min-width:0 en los hijos.

   2. Las tablas. Aunque no desborden, siete columnas en un celular no se
      leen. En pantalla chica las tablas marcadas con .tabla-cont--tarjetas se
      reacomodan como fichas, una debajo de la otra, usando el data-etiqueta
      de cada celda como rótulo.
   ========================================================================== */

/* ── 1. El desborde, de raíz ────────────────────────────────────────────── */
.app{grid-template-columns:236px minmax(0, 1fr)}
.contenido{min-width:0}
/* Todos los contenedores de grilla del proyecto: sus hijos no pueden crecer
   más que la columna. Si agregás una grilla nueva, sumala acá. */
.grid2 > *,.grid3 > *,.fila > *,.fila3 > *,
.reserva > *,.perfil__grid > *,.portada__grid > *,
.pie__grid > *,.seccion--tinta .contenedor > *{min-width:0}
.tabla-cont{max-width:100%}

/* Nada de texto largo empujando la caja */
.turno__t,.turno__s,.celda-pro,.consulta p,.opinion p,
.kpi b,.enc h1,.enc p{overflow-wrap:anywhere}

@media (max-width:900px){
  .app{grid-template-columns:minmax(0, 1fr)}
}

/* ── 2. El menú del panel en celular ────────────────────────────────────── */
/* En el escritorio la lista va a la vista en la columna izquierda. En el
   teléfono, diez secciones una debajo de la otra ocupaban media pantalla
   antes de llegar al contenido, así que se guardan detrás de un botón que
   además dice en qué sección estás parada. */
.lateral__barra{display:contents}
.lateral__btn{display:none}

@media (max-width:900px){
  .lateral{
    display:block;padding:0;position:sticky;top:0;z-index:60;
    height:auto;box-shadow:0 10px 26px -20px rgba(0,0,0,.7);
  }
  .lateral__barra{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:9px 14px;
  }
  .lateral__marca{padding:0}
  .lateral__marca .logo__sello{width:38px;height:38px}
  .lateral__marca small{display:none}

  .lateral__btn{
    display:flex;align-items:center;gap:10px;flex:none;
    background:rgba(255,255,255,.1);color:#fff;border:0;border-radius:999px;
    padding:9px 16px;font:inherit;font-size:.86rem;font-weight:600;
    cursor:pointer;min-height:40px;
  }
  .lateral__btn-txt{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .lateral__btn-icono{display:grid;gap:3.5px;flex:none}
  .lateral__btn-icono span{display:block;width:16px;height:2px;background:#fff;border-radius:2px;
                           transition:transform .25s var(--curva), opacity .2s ease}
  .lateral__btn[aria-expanded="true"] .lateral__btn-icono span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .lateral__btn[aria-expanded="true"] .lateral__btn-icono span:nth-child(2){opacity:0}
  .lateral__btn[aria-expanded="true"] .lateral__btn-icono span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

  /* El desplegable: cerrado no ocupa nada */
  .lateral__menu{
    display:grid;grid-template-columns:1fr 1fr;gap:6px;
    max-height:0;overflow:hidden;padding:0 12px;
    transition:max-height .32s var(--curva), padding .32s var(--curva);
  }
  .lateral__menu.abierto{max-height:70vh;overflow-y:auto;padding:6px 12px 14px}
  .lateral a.item{
    padding:11px 14px;font-size:.88rem;border-radius:10px;
    background:rgba(255,255,255,.07);
  }
  .lateral a.item:hover{padding-left:14px}
  .lateral a.item.on{background:var(--lavanda);color:var(--carbon)}
  .lateral hr,.lateral__menu hr{display:none}
  .lateral__pie{display:none}
}

/* Recién en pantallas muy angostas conviene una sola columna: a 375 px las dos
   columnas entran bien y el menú pasa de 13 renglones a 7. */
@media (max-width:340px){
  .lateral__menu{grid-template-columns:1fr}
  .lateral__marca .logo__bajada{display:none}
}

/* Objetivos táctiles cómodos: nada de botones de 35 px en un celular */
@media (max-width:900px){
  .btn{min-height:42px}
  .btn--chico{min-height:38px}
  .campo input,.campo select,.campo textarea{font-size:16px}  /* evita el zoom de iOS */
}

/* ── 3. Tablas que se vuelven fichas ────────────────────────────────────── */
@media (max-width:700px){
  .tabla-cont--tarjetas{border:0;background:transparent;overflow:visible}
  .tabla-cont--tarjetas table,
  .tabla-cont--tarjetas tbody,
  .tabla-cont--tarjetas tr,
  .tabla-cont--tarjetas td{display:block;width:100%}
  .tabla-cont--tarjetas thead{display:none}

  .tabla-cont--tarjetas tr{
    background:var(--blanco);border:1px solid var(--linea);border-radius:12px;
    padding:12px 14px;margin-bottom:10px;
  }
  .tabla-cont--tarjetas tr:hover{background:var(--blanco)}
  .tabla-cont--tarjetas td{
    border:0;padding:5px 0;display:flex;gap:12px;align-items:baseline;
    text-align:left;
  }
  .tabla-cont--tarjetas td.num{text-align:left}
  .tabla-cont--tarjetas td::before{
    content:attr(data-etiqueta);flex:0 0 40%;max-width:40%;
    font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--humo);
  }
  /* Las celdas sin rótulo (la primera y la de botones) ocupan todo el ancho */
  .tabla-cont--tarjetas td:not([data-etiqueta]){display:block}
  .tabla-cont--tarjetas td:not([data-etiqueta])::before{content:none}
  .tabla-cont--tarjetas td[data-etiqueta=""]::before{content:none;display:none}

  /* La fila de encabezado de categoría que separa grupos */
  .tabla-cont--tarjetas td[colspan]{
    display:block;border-radius:8px;padding:7px 10px;margin:-2px 0 6px;
  }
  .tabla-cont--tarjetas td[colspan]::before{content:none}
}

/* ── 3 bis. Marcar "lo hace" y campos numéricos de las tablas ───────────── */
.marcar{display:flex;align-items:center;gap:9px;cursor:pointer}
.marcar input{width:19px;height:19px;flex:none;accent-color:var(--indigo)}
.marcar__txt{display:none;font-size:.86rem;font-weight:600}
.campo-num{width:110px;text-align:right;padding:8px 10px;
           border:1.5px solid var(--linea);border-radius:8px;background:var(--blanco)}
.campo-num--corto{width:82px}

@media (max-width:700px){
  /* En ficha, el checkbox necesita decir qué es */
  .marcar__txt{display:inline}
  .celda-marcar{padding-bottom:8px !important;border-bottom:1px solid var(--linea) !important;
                margin-bottom:6px}
  .campo-num,.campo-num--corto{width:100%;text-align:left}
  .tabla-cont--tarjetas td input[type=text],
  .tabla-cont--tarjetas td input:not([type]){width:100%}
}

/* ── 4. Panel: encabezados, filtros y acciones ──────────────────────────── */
@media (max-width:700px){
  .enc{flex-direction:column;align-items:stretch;gap:12px}
  .enc h1{font-size:1.45rem}
  .acciones{width:100%}
  .acciones .btn{flex:1 1 auto;justify-content:center}
  .barra-filtros{flex-direction:column;align-items:stretch}
  .barra-filtros .campo,.barra-filtros .btn{width:100%}
  .barra-filtros .btn{justify-content:center}

  /* El turno pasa a dos renglones: hora y color arriba, datos abajo */
  .turno{grid-template-columns:64px 4px 1fr;gap:10px;row-gap:8px}
  .turno__acc{grid-column:1 / -1;justify-content:flex-start}
  .turno__acc .btn{flex:1 1 auto;justify-content:center}
  .turno:hover{transform:none}

  .grid3{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
  .kpi{padding:14px}
  .kpi b{font-size:1.6rem}
  .tarjeta{padding:16px}
  .consulta__enc{gap:8px}
  .consulta__enc > span[style]{margin-left:0 !important;width:100%}
  .gal{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
}

/* Las tablas que sí conviene dejar como tabla (dos columnas, tipo ficha)
   igual necesitan poder deslizarse si el contenido es ancho. */
@media (max-width:700px){
  .tabla-cont:not(.tabla-cont--tarjetas){overflow-x:auto}
  .tabla-cont:not(.tabla-cont--tarjetas) table{min-width:0}
}

/* ── 5. Sitio público ───────────────────────────────────────────────────── */
@media (max-width:900px){
  /* La cabecera baja de alto, así que lo pegajoso tiene que bajar con ella */
  .perfil__foto,.resumen{top:80px}
}

@media (max-width:700px){
  .seccion{padding:46px 0}
  .seccion__enc{flex-direction:column;align-items:flex-start;gap:16px}
  .cabezal{padding-top:34px}

  /* Los datos de la portada: tres columnas no entran, pero dos sí. Antes se
     apilaban en una sola y ocupaban media pantalla. */
  .portada__dato{display:grid;grid-template-columns:1fr 1fr;gap:16px 0;row-gap:18px}
  .portada__dato > div{padding-inline:0}
  .portada__dato > div + div{padding-left:16px}
  .portada__dato > div:nth-child(odd){padding-left:0}
  .portada__dato > div:nth-child(odd)::before{display:none}
  .portada__dato b{font-size:1.7rem}
  .portada__acciones .btn{flex:1 1 auto;justify-content:center}

  /* Las tarjetas de categoría respiran un poco menos en el teléfono */
  .cat{padding:22px 20px 20px}
  .cat__nombre{font-size:1.4rem}
  .grupo{margin-top:34px;gap:10px}

  /* Los días y las horas: que se vean todos sin tener que correr nada */
  .horas{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))}
  .dias{grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:7px}
  .dia{padding:10px 4px}
  .dia b{font-size:1.3rem}

  .panel{padding:20px 17px}
  .resumen{padding:22px 19px}
  .ticket{padding:28px 20px}
  .ticket__codigo{letter-spacing:.2em;padding-left:14px}
  .galeria{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .fichas{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}

  /* Deja lugar para la barra fija de abajo */
  .pie{padding-bottom:96px}
  .pie__base{flex-direction:column;gap:8px}
}

@media (max-width:520px){
  /* Una sola columna de fichas, pero acostadas: la foto a la izquierda y los
     datos al lado. Con la tarjeta vertical cada profesional medía 600 px de
     alto y el equipo entero se volvía un scroll interminable; así entra más de
     una por pantalla y se sigue viendo la cara. */
  .fichas{grid-template-columns:1fr;gap:12px}
  .ficha{flex-direction:row}
  .ficha__foto{flex:0 0 39%;max-width:150px}
  .ficha__foto img,.ficha__foto .sinfoto{height:100%;aspect-ratio:auto;min-height:158px}
  .ficha__foto .sinfoto{font-size:2rem}
  .ficha__cuerpo{padding:15px 16px;gap:5px;min-width:0}
  .ficha__nombre{font-size:1.24rem}
  .ficha__bio{-webkit-line-clamp:2;font-size:.85rem}
  .ficha__pie{padding-top:11px;flex-wrap:wrap;gap:8px}
  .ficha__ir{font-size:.8rem}

  .opinion{padding:20px}
}

@media (max-width:420px){
  .contenedor{padding-inline:17px}
  .contenido{padding:14px 12px 60px}
  .turno{grid-template-columns:56px 4px 1fr;padding:11px 12px}
  .btn{padding:12px 18px;font-size:.88rem}
  .btn--chico{padding:9px 15px;font-size:.8rem}
  .serv-datos span{padding:7px 13px;font-size:.66rem}
}

/* En pantallas grandes, que el panel no quede angosto al pedo */
@media (min-width:1500px){
  .contenido{max-width:1440px}
}

/* ── 6. En pantallas táctiles no existe el hover ────────────────────────── */
/* Todos los efectos lindos del sitio están en :hover, y en un celular nunca
   se disparan. Acá se reemplazan por respuesta al toque y por movimiento que
   ocurre solo, sin que haga falta apuntar con el mouse. */
@media (hover:none){
  .ficha:active,.serv:active,.opcion:active,.tarjeta:active,.cat:active{
    transform:scale(.985);
    transition:transform .12s ease;
  }
  .dia:active,.hora:active,.btn:active,.chip:active{
    transform:scale(.95);
    transition:transform .1s ease;
  }
  /* El hover de las tarjetas no tiene sentido acá y dejaba estados pegados */
  .ficha:hover,.serv:hover,.turno:hover,.cat:hover{transform:none}

  /* La flecha de "ver perfil" late despacio, para que se note que se toca */
  .ficha__ir{animation:latidoFlecha 2.6s ease-in-out infinite}
}
@keyframes latidoFlecha{
  0%,100%{transform:translateX(0)}
  50%    {transform:translateX(4px)}
}

/* Que el navegador sepa que estos elementos responden al toque enseguida */
.ficha,.serv,.opcion,.dia,.hora,.btn,.chip,.lateral a.item{touch-action:manipulation}

@media (prefers-reduced-motion:reduce){
  .ficha__ir{animation:none}
}

/* ── 7. El mapa y los horarios por franja ───────────────────────────────── */

/* Google entrega el iframe con width="600" height="450" escritos a mano. En una
   pantalla de 331 px eso queda recortado y el pin del salón se ve corrido a un
   costado. Acá se le impone el ancho real y una proporción propia. */
.mapa{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--linea);
  background:var(--lavanda-humo);aspect-ratio:16/9;
}
.mapa iframe,.mapa embed,.mapa object{
  width:100% !important;height:100% !important;border:0;display:block;
}
@media (max-width:700px){
  .mapa{aspect-ratio:4/3}
}

/* Los horarios agrupados por franja */
.horas__dia{font-weight:600;margin:18px 0 4px}
.horas__franja{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--humo);margin:16px 0 8px;display:flex;align-items:center;gap:10px;
}
.horas__franja::after{content:"";flex:1;height:1px;background:var(--linea)}
.horas + .horas__franja{margin-top:20px}