/* ===================================================================
   CTH MyDay · el teléfono como app (≤ 900 px). Carga al final, después de tema.css.

   La mitad de la gente trabaja desde el celular: ahí la aplicación se porta como una app
   instalada. Barra superior corta con el sello y el título que sube al desplazarse, pestañas
   abajo con una pastilla que viaja a la activa, el menú y los paneles como hojas que suben y
   se cierran deslizándolas, pantallas que entran según cómo se llegó a ellas y todo lo que se
   toca responde bajo el dedo (js/navegacion.js). El mismo mundo de siempre: cielo, hojas
   blancas, pastel sólido e iconos ilustrados. El escritorio no cambia.
   =================================================================== */

:root {
  /* La pastilla de las pestañas llega con un pequeño impulso y se asienta: el único resorte del
     sistema, a propósito, y solo en dos momentos (la pastilla con el salto del icono y la respuesta
     elegida en un cuestionario). Todo lo demás frena sin rebote. */
  --ease-resorte: cubic-bezier(.34, 1.3, .64, 1);
  --dur-hoja: 420ms;
  --dur-pantalla: 320ms;
  --sombra-barra: 0 6px 18px rgba(22, 56, 79, .10);
  --sombra-pestanas: 0 -1px 0 var(--color-border), 0 -10px 28px rgba(22, 56, 79, .07);
  --sombra-hoja: 0 -12px 40px rgba(22, 56, 79, .18);
  --velo: rgba(15, 23, 42, .42);
}
:root[data-theme="dark"] {
  --sombra-barra: 0 6px 18px rgba(0, 0, 0, .45);
  --sombra-pestanas: 0 -1px 0 var(--color-border), 0 -10px 28px rgba(0, 0, 0, .35);
  --sombra-hoja: 0 -12px 40px rgba(0, 0, 0, .55);
  --velo: rgba(0, 0, 0, .55);
}

/* Piezas que existen solo en una de las dos formas. */
.solo-movil { display: none; }
.solo-escritorio { display: contents; }
.topbar-titulo-pagina { display: none; }

@media screen and (max-width: 900px) {
  /* ---------- Lo que no se ve pero se siente ---------- */
  html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
  a, button, label, summary, select, [role="button"] { touch-action: manipulation; }
  .solo-escritorio, .solo-escritorio-boton { display: none; }
  /* Con menos de 16 px el iPhone acerca la página al tocar un campo y no la devuelve. */
  input, select, textarea, .form-control, select.form-control, textarea.form-control { font-size: 16px; }
  .content {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  /* ---------- Barra superior ----------
     Sello de la marca a la izquierda; al desplazarse, el título de la página sube a la barra
     (el nombre de la app sale por arriba y el título entra desde abajo). A la derecha solo lo
     urgente: bitácora, emergencia, campana y cuenta. */
  :root { --topbar-height: 56px; }
  .topbar {
    gap: .25rem;
    padding: env(safe-area-inset-top) max(.5rem, env(safe-area-inset-right)) 0 max(.75rem, env(safe-area-inset-left));
    transition: box-shadow var(--dur-2) var(--ease-out);
  }
  .desplazado .topbar { box-shadow: var(--sombra-barra); }
  .btn-menu { display: none; }
  .topbar-izquierda { flex: 1 1 auto; gap: .55rem; }
  .topbar-actions { flex: none; gap: 2px; }
  .topbar-marca { display: inline-flex; flex: none; border-radius: 12px; text-decoration: none; }
  .topbar-marca:hover { text-decoration: none; }
  .topbar-marca .marca-sello { width: 34px; height: 34px; border-radius: 11px; box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
  .topbar-marca:active .marca-sello { transform: scale(.92); }
  .topbar-marca .marca-sello { transition: transform var(--dur-1) var(--ease-out); }
  .topbar-title { position: relative; flex: 1 1 auto; min-width: 0; height: 30px; overflow: hidden; }
  .topbar-titulo-app, .topbar-titulo-pagina {
    position: absolute; inset: 0;
    display: flex; align-items: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: transform 260ms var(--ease-out), opacity 200ms var(--ease-out);
  }
  .topbar-titulo-app { font-size: 1.02rem; letter-spacing: -.02em; }
  .topbar-titulo-pagina {
    display: block; line-height: 30px;
    font-family: var(--font-titulo); font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em;
    opacity: 0; transform: translateY(80%);
  }
  .titulo-en-barra .topbar-titulo-app { opacity: 0; transform: translateY(-80%); }
  .titulo-en-barra .topbar-titulo-pagina { opacity: 1; transform: none; }

  /* Los botones de la barra, todos del mismo tamaño: círculos de 40 px. La bitácora y la
     emergencia se distinguen por su tinte (azul y rojo pastel), no por un aro. Con una
     actividad en curso la bitácora se vuelve píldora para mostrar su reloj. */
  .topbar-actions .btn-icono, .topbar-actions .notif-boton, .topbar .btn-emergencia, .topbar .bitacora-boton:not(.activo) {
    width: 40px; height: 40px; min-height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
  }
  .topbar .solo-escritorio-boton, .topbar .cuentas-flecha { display: none; }
  .topbar .bitacora-boton { border: none; background: var(--color-primary-light); color: var(--color-primary); }
  .topbar .bitacora-boton.activo { height: 40px; padding: 0 .8rem; border-radius: 999px; background: var(--color-primary); color: var(--color-sobre-relleno); }
  .topbar .btn-emergencia { gap: 0; border: none; background: var(--color-danger-bg); color: var(--color-danger-tinta); }
  .topbar .cuentas-boton { min-height: 40px; padding: 0; }
  .topbar .cuentas-avatar { width: 34px; height: 34px; }

  /* ---------- Pestañas ----------
     La pastilla pastel viaja a la pestaña activa (con :has, sin JavaScript) y el icono da un
     salto corto al llegar. Es el momento de movimiento del armazón: se ve a cada cambio de
     sección y por eso dura poco. */
  .nav-inferior {
    height: calc(var(--nav-inferior) + env(safe-area-inset-bottom));
    border-top: none;
    box-shadow: var(--sombra-pestanas);
    isolation: isolate;
    -webkit-user-select: none; user-select: none;
  }
  .nav-inferior a, .nav-inferior button {
    justify-content: flex-start;
    padding-top: 7px;
    gap: 2px;
    font-size: .68rem; font-weight: 700;
    color: var(--color-text-soft);
    text-decoration: none;
    transition: color var(--transicion);
  }
  .nav-inferior a:active, .nav-inferior button:active { transform: none; }
  .nav-inferior a:active .icono, .nav-inferior button:active .icono { transform: scale(.88); }
  .nav-inferior .icono { width: 30px; height: 30px; transition: transform var(--dur-2) var(--ease-out); }
  .nav-inferior a.active, .nav-inferior .nav-boton-menu.activo { color: var(--color-primary); font-weight: 800; }
  .nav-inferior a.active::before { content: none; }
  .nav-inferior a.active .icono, .nav-inferior .nav-boton-menu.activo .icono { animation: pestana-salto 440ms var(--ease-resorte); }
  /* «Menú» es una utilidad, no una sección: su icono es de línea, del tamaño visual de los otros. */
  .nav-boton-menu .icono:not(.icono-color) { padding: 3px; }
  .nav-pastilla {
    position: absolute; z-index: -1;
    top: 5px; left: 0;
    width: 20%; height: 36px;
    display: flex; justify-content: center;
    pointer-events: none;
    transition: transform 460ms var(--ease-resorte), opacity var(--dur-2) var(--ease-out);
  }
  .nav-pastilla::before { content: ""; width: 58px; height: 100%; border-radius: 999px; background: var(--color-primary-light); }
  .nav-inferior:has(> :nth-child(1).active) .nav-pastilla { transform: translateX(0); }
  .nav-inferior:has(> :nth-child(2).active) .nav-pastilla { transform: translateX(100%); }
  .nav-inferior:has(> :nth-child(3).active) .nav-pastilla { transform: translateX(200%); }
  .nav-inferior:has(> :nth-child(4).active) .nav-pastilla { transform: translateX(300%); }
  .nav-inferior:has(> .nav-boton-menu.activo) .nav-pastilla { transform: translateX(400%); }
  .nav-inferior:not(:has(> .active, > .activo)) .nav-pastilla { opacity: 0; }
  .nav-inferior .nav-globo { top: 3px; left: calc(50% + 8px); border: 2px solid var(--color-surface); box-sizing: content-box; animation: globo-llega 300ms var(--ease-out); }

  /* ---------- El menú: una hoja que sube desde su pestaña ---------- */
  .sidebar {
    inset: auto 0 0 0;
    width: 100%;
    height: calc(100dvh - env(safe-area-inset-top) - 22px);
    border-radius: 26px 26px 0 0;
    padding-top: 8px;
    transform: translateY(104%);
    visibility: hidden;
    transition: transform var(--dur-hoja) var(--ease-drawer), visibility 0s linear var(--dur-hoja);
    box-shadow: var(--sombra-hoja);
    overscroll-behavior: contain;
  }
  .app-shell.menu-abierto .sidebar { transform: none; visibility: visible; transition: transform var(--dur-hoja) var(--ease-drawer), visibility 0s; }
  .velo-menu { background: var(--velo); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hoja-asa { display: block; width: 44px; height: 5px; margin: 0 auto 2px; border-radius: 3px; background: rgba(255, 255, 255, .45); flex: none; }
  .sidebar-brand { min-height: 0; padding: .55rem .9rem .8rem 1.1rem; }
  .sidebar-cerrar { display: inline-flex; margin-left: auto; color: #fff; background: rgba(255, 255, 255, .16); }
  .sidebar-nav { overscroll-behavior: contain; }
  .sidebar-footer { padding-bottom: calc(.8rem + env(safe-area-inset-bottom)); }
  /* Los enlaces del menú entran escalonados cuando se abre, como en una app. */
  .app-shell.menu-abierto .nav-grupo { animation: menu-grupo 380ms var(--ease-out) both; }
  .app-shell.menu-abierto .nav-grupo:nth-child(2) { animation-delay: 30ms; }
  .app-shell.menu-abierto .nav-grupo:nth-child(3) { animation-delay: 60ms; }
  .app-shell.menu-abierto .nav-grupo:nth-child(4) { animation-delay: 90ms; }
  .app-shell.menu-abierto .nav-grupo:nth-child(n+5) { animation-delay: 120ms; }
  /* La pestaña del enlace activo se mide sin la cascada: aparece cuando los enlaces ya llegaron. */
  .app-shell.menu-abierto .nav-indicador { animation: desvanecer 200ms var(--ease-out) 380ms backwards; }

  /* ---------- Paneles de la barra (campana, chat, cuenta, bitácora): hojas desde abajo ---------- */
  .topbar:has(.notif-velo) { z-index: 130; }
  .topbar .notif-velo { background: var(--velo); animation: desvanecer var(--dur-2) var(--ease-out) both; }
  .notif-panel, .cuentas-panel, .bitacora-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    width: auto;
    max-height: min(86dvh, 760px);
    border: none;
    border-radius: 26px 26px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: var(--sombra-hoja);
    overscroll-behavior: contain;
    transform-origin: bottom center;
    animation: hoja-sube var(--dur-hoja) var(--ease-drawer) both;
  }
  .notif-panel::before, .cuentas-panel::before, .bitacora-panel::before, .modal-box::before {
    content: ""; display: block; flex: none;
    width: 44px; height: 5px; border-radius: 3px;
    margin: 9px auto 3px;
    background: var(--color-border-strong); opacity: .5;
  }
  .notif-cabecera { padding: .5rem 1rem .75rem 1.25rem; }
  .notif-item { padding: .95rem 1.25rem; }
  .cuentas-item, .cuentas-accion { min-height: 52px; }
  .bitacora-panel { padding-top: 0; }

  /* ---------- Ventanas: hoja que sube, con asa ---------- */
  .modal-overlay { background: var(--velo); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .modal-box {
    border-radius: 26px 26px 0 0;
    padding-top: 0;
    overscroll-behavior: contain;
    animation: hoja-sube var(--dur-hoja) var(--ease-drawer) both;
  }
  .modal-box::before { margin: 9px auto 10px; }
  .modal-header { position: sticky; top: -1px; z-index: 2; background: var(--color-surface); padding-top: .2rem; }

  /* ---------- Pantallas ----------
     Solo entran los bloques nuevos de la página (js/navegacion.js les pone .entrando): por el
     menú y las pestañas la página sube en su sitio; al ir adelante entra desde la derecha y al
     volver, desde la izquierda. */
  main.content > .entrando { animation: pantalla-sube var(--dur-pantalla) var(--ease-out) both; }
  [data-nav="adelante"] main.content > .entrando { animation-name: pantalla-adelante; }
  [data-nav="atras"] main.content > .entrando { animation-name: pantalla-atras; }
  /* Los bloques de la página llegan uno tras otro (título, guía, hojas), sin pasar de 140 ms. */
  main.content > .entrando:nth-child(2) { animation-delay: 35ms; }
  main.content > .entrando:nth-child(3) { animation-delay: 70ms; }
  main.content > .entrando:nth-child(4) { animation-delay: 105ms; }
  main.content > .entrando:nth-child(n+5) { animation-delay: 140ms; }

  /* El título grande de la página, el que luego sube a la barra. */
  .content h1 { font-size: 1.7rem; letter-spacing: -.025em; }
  .content h1.saludo { font-size: 1.75rem; }
  .content h1 .icono-color { width: 34px; height: 34px; }

  /* ---------- Respuesta al tacto ---------- */
  .tocando { scale: .965; transition: scale 110ms var(--ease-out); }
  .tocando-grande { scale: .985; transition: scale 110ms var(--ease-out); }
  .tocando-texto { opacity: .55; transition: opacity 110ms var(--ease-out); }
  .soltando { transition: scale 260ms var(--ease-out), opacity 200ms var(--ease-out); }

  /* ---------- Botón flotante: la acción principal de la pantalla, a mano del pulgar ---------- */
  .fab-movil {
    position: fixed; z-index: 94;
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(var(--nav-inferior) + env(safe-area-inset-bottom) + 14px);
    min-height: 54px; padding: 0 1.3rem;
    font-size: 1rem; font-weight: 800;
    /* !important: el botón de caramelo de base.css trae su sombra con un selector de nueve
       :not(); aquí se le suma la elevación de lo que flota. */
    box-shadow: 0 3px 0 var(--color-primary-dark), var(--elev-3) !important;
    transition: translate 320ms var(--ease-drawer), opacity var(--dur-2) var(--ease-out);
    animation: fab-llega 420ms var(--ease-out) 360ms both;
  }
  .bajando .fab-movil { translate: 0 calc(100% + var(--nav-inferior) + 30px); }

  /* ---------- Guía de módulo: más compacta en la pantalla chica ---------- */
  .alerta-info:has(> ul) { font-size: .9rem; line-height: 1.5; padding: .8rem .95rem; }
  .alerta-info ul { padding-left: 1.1rem; }
  .alerta-info li { margin: .25rem 0; }
}

/* Indicadores en tira: en el teléfono se deslizan de lado (con la siguiente asomando) en vez
   de apilarse uno debajo del otro a todo el ancho. */
@media screen and (max-width: 600px) {
  .ev-kpis {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(72%, 1fr); grid-template-columns: none;
    gap: .75rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 1rem;
    margin-inline: -1rem; padding: .15rem 1rem .5rem;
    scrollbar-width: none;
  }
  .ev-kpis::-webkit-scrollbar { display: none; }
  .ev-kpis > * { scroll-snap-align: start; }
  .card .ev-kpis { margin-inline: -1.1rem; padding-inline: 1.1rem; scroll-padding-inline: 1.1rem; }

  /* Tendencia de un mes (Reportes): treinta etiquetas de día no caben en 340 px y empujaban la
     página de lado. Las columnas se estrechan y se rotula un día de cada cinco; el resto de las
     etiquetas queda oculto para no montarse unas sobre otras. Las de una semana no cambian. */
  .tendencia:has(> .tendencia-dia:nth-child(20)) { gap: 2px; }
  .tendencia:has(> .tendencia-dia:nth-child(20)) > .tendencia-dia { min-width: 0; }
  .tendencia:has(> .tendencia-dia:nth-child(20)) .tendencia-etiqueta { visibility: hidden; }
  .tendencia:has(> .tendencia-dia:nth-child(20)) > .tendencia-dia:nth-child(5n+1) .tendencia-etiqueta { visibility: visible; }

  /* Grupos de botones de cabecera (Agenda, Monitoreo, Carrera, Empleado del mes): bajan de
     línea en vez de empujar la página de lado. */
  .cal-vistas { flex-wrap: wrap; }
}

@keyframes hoja-sube { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pantalla-sube { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes pantalla-adelante { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes pantalla-atras { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
@keyframes pestana-salto {
  0%   { transform: none; }
  35%  { transform: scale(.84) translateY(1px); }
  70%  { transform: scale(1.12) translateY(-3px); }
  100% { transform: none; }
}
@keyframes globo-llega { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes menu-grupo { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fab-llega { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }

/* Menos movimiento: las hojas y las pantallas aparecen con opacidad, la pastilla salta sin
   viajar y nada rebota. */
@media (prefers-reduced-motion: reduce) {
  .nav-pastilla, .topbar-titulo-app, .topbar-titulo-pagina, .sidebar, .fab-movil { transition-duration: 1ms !important; }
  main.content > .entrando, .notif-panel, .cuentas-panel, .bitacora-panel, .modal-box, .fab-movil, .app-shell.menu-abierto .nav-grupo {
    animation: desvanecer 150ms ease-out both !important;
  }
  .nav-inferior a.active .icono, .nav-inferior .nav-boton-menu.activo .icono { animation: none !important; }
  .tocando, .tocando-grande { scale: 1; }
}