/* ============================================================================
   Casa Nogal · teléfono — patrones de app nativa
   ----------------------------------------------------------------------------
   Andy, 26-jul-2026:
     · "no tienes que hacer una vista especial, debe ser funcional"  → nada
       recortado: la misma aplicación, todo se puede usar.
     · "los textos deben ser más grandes, todo más simplificado"
     · "que imite diseños de app nativas de iPhone"

   Lo que hace que una app se sienta nativa en el teléfono no es un adorno:
     1. Tipografía GRANDE. El cuerpo es 17px, no 12. Los títulos son 28-34px.
     2. Listas agrupadas: fondo gris, tarjetas blancas redondeadas, separadores
        finos que arrancan después del texto. Nada de cajas con borde grueso.
     3. Una acción por fila, con el chevron que indica que se entra.
     4. Barra de pestañas abajo, al alcance del pulgar.
     5. Las ventanas suben desde abajo con un asa, no aparecen al costado.
     6. Aire. Menos cosas a la vez, más espacio entre ellas.

   Tamaños:  teléfono ≤640 · tablet 641-1024 · escritorio 1025+
   ========================================================================== */

/* ==========================================================================
   1 · BASE TÁCTIL (teléfono y tablet)
   ========================================================================== */
@media (max-width: 1024px) {
  .btn-icon, .icon-btn, .eval-sem-flecha, .pa-week-btn, .disp-sem-btn,
  .panel-close, .nav-toggle, .cal-nav-btn {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .ed-diag-chk, .eval-chk, .reu-ter-chk, .eval-kine-chk, .notif-regla, .cfg-disp-chk {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .ed-diag-chk input, .eval-chk input, .reu-ter-chk input, .eval-kine-chk input {
    width: 22px; height: 22px;
  }
  input, select, textarea, .field-input,
  .cfg-field input, .cfg-field select, .cfg-field textarea,
  .armador-form-field input, .armador-form-field select { font-size: 17px; }
  .cfg-field input, .cfg-field select, .field-input { min-height: 46px; }
  textarea { min-height: 96px; }
}

html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 1024px) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .tour-pop { width: auto; max-width: calc(100vw - 24px); }
  img, svg, video, canvas { max-width: 100%; }
  .panel-field-value, .ficha-contacto, .pendiente-ir-txt { overflow-wrap: anywhere; }
}

@supports not (height: 100dvh) {
  .layout, .detail-panel { height: calc(100vh - var(--header-h)); }
}

@media (hover: none) {
  .panel-reasignar-link, .pendiente-ir-cta, .eval-equipo-chip small {
    opacity: 1 !important; visibility: visible !important;
  }
  .session:hover:not(.dragging) { transform: none; box-shadow: none; filter: none; }
  .ficha-card:hover, .data-table tr:hover td { background: inherit; }
}
@media (prefers-reduced-motion: reduce) { .session { animation: none; opacity: 1; } }


/* ==========================================================================
   2 · TELÉFONO — app nativa
   ========================================================================== */
@media (max-width: 640px) {

  /* --- 2.1 Escala tipográfica ----------------------------------------------
     La del escritorio baja hasta 10-11px. En la mano eso no se lee. Se sube
     todo un escalón y el cuerpo queda en 17px, que es el estándar de iOS. */
  :root {
    --ios-title:    28px;   /* título de pantalla */
    --ios-big:      34px;   /* título grande del inicio */
    --ios-headline: 17px;   /* título de fila, semibold */
    --ios-body:     17px;   /* cuerpo */
    --ios-sub:      15px;   /* secundario */
    --ios-foot:     13px;   /* al pie, el más chico que se permite */
    --ios-bg:       #F2F2F7;  /* gris de fondo del sistema */
    --ios-sep:      rgba(60,60,67,.20);
    --header-h: 52px;
  }
  body { background: var(--ios-bg); font-size: var(--ios-body); }
  .main { background: var(--ios-bg); padding: 0 0 92px; }

  /* Nada por debajo de 13px */
  .session-sub, .ficha-prog, .panel-field-label, .eval-muted,
  .ficha-section-hint, .pa-cp-esp, .nav-section-title,
  .badge, .ter-card-disc, .eval-caso-meta { font-size: var(--ios-foot); }
  .session-name, .ficha-name, .pa-cp-fecha, .panel-field-value,
  .pendiente-ir-txt, .nav-item { font-size: var(--ios-body); }

  /* --- 2.2 Barra de arriba: título grande, nada más -------------------------
     Traía hamburguesa + logo de 58px + tres pastillas de rol + inicio +
     buscador + campana + avatar. Queda el menú, la marca y el avatar. */
  .header { background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(18px); }
  .header-inner { grid-template-columns: 44px 1fr 44px; padding: 0 6px; gap: 6px; }
  .header-inner .brand { display: flex; justify-content: center; }
  .brand-logo-full { height: 30px; }
  .role-switcher, .search-box, #homeBtn { display: none; }
  .header-actions { gap: 0; justify-self: end; }
  .header-actions .icon-btn:not(#userChip) { display: none; }
  .user-chip { padding: 0; background: none; border: none; }
  .user-chip #userName { display: none; }
  .user-avatar { width: 32px; height: 32px; font-size: 13px; }

  /* Título grande de la pantalla, como en iOS */
  .hero {
    background: none; color: var(--text); border-radius: 0;
    padding: 14px 16px 8px; margin: 0 0 6px; box-shadow: none;
  }
  .hero::before, .hero::after { display: none; }
  .hero-title, .hero h1 {
    font-size: var(--ios-big); font-weight: 800; line-height: 1.14;
    letter-spacing: -.022em; color: var(--text);
  }
  .hero-sub, .hero-eyebrow { font-size: var(--ios-sub); color: var(--text-2); }
  .hero-eyebrow { text-transform: none; letter-spacing: 0; }
  .hero .btn, .hero-actions .btn { min-height: 46px; }

  /* --- 2.3 Menú lateral ----------------------------------------------------- */
  .sidebar { width: min(84vw, 320px); background: var(--bg); }
  .nav-item {
    min-height: 50px; font-size: var(--ios-body); padding: 0 18px; gap: 14px;
    border-radius: 0;
  }
  .nav-section-title { font-size: var(--ios-foot); padding: 16px 18px 6px; text-transform: uppercase; }
  .sidebar .role-switcher { display: flex; margin: 12px; padding: 3px; width: calc(100% - 24px); }
  .sidebar .role-pill { flex: 1; text-align: center; padding: 11px 6px; font-size: var(--ios-sub); }

  /* --- 2.4 Secciones como listas agrupadas de iOS ---------------------------
     Tarjeta blanca sobre gris, esquinas de 12px, sin borde. Es lo que hace que
     se lea como Ajustes del iPhone y no como una web encogida. */
  .ficha-section, .armador-card, .pa-card, .cfg-card, .eval-caso {
    background: var(--bg);
    border: none; border-radius: 12px;
    margin: 0 12px 14px; padding: 16px;
    box-shadow: 0 1px 2px rgba(10,16,24,.05);
  }
  .ficha-section-title, .armador-card-head, .pa-card-title, .section-title {
    font-size: var(--ios-headline); font-weight: 700; letter-spacing: -.01em;
  }
  .section-head, .armador-card-head, .pa-card-head, .eval-caso-head {
    flex-direction: column; align-items: flex-start; gap: 10px;
  }

  /* Filas de dato: etiqueta a la izquierda, valor a la derecha, separador fino
     que arranca donde arranca el texto. Igual que una celda de iOS. */
  .info-grid { display: block !important; }
  .info-grid .panel-field {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 12px 0; border-bottom: 1px solid var(--ios-sep);
  }
  .info-grid .panel-field:last-child { border-bottom: none; }
  .panel-field-label { color: var(--text-2); flex-shrink: 0; }
  .panel-field-value { text-align: right; font-size: var(--ios-body); }
  .ficha-datos-sub { margin: 18px 0 2px; }
  .ficha-datos-sub > span { font-size: var(--ios-foot); text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); }
  .ficha-datos-sub::after { display: none; }

  /* --- 2.5 Todo lo de dos columnas pasa a una ------------------------------- */
  .kpi-grid, .ficha-detail-grid, .armador-form-grid, .cfg-grid,
  .ter-layout, .pa-cols, .fichas-grid, .equipo-grid, .ter-grid, .salas-grid {
    grid-template-columns: 1fr !important; display: grid !important; gap: 12px;
  }
  .pendiente-modal-body[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .cfg-field[style*="grid-column"], .armador-form-field[style*="grid-column"] { grid-column: 1 / -1 !important; }

  /* Tarjeta de KPI: la cifra manda */
  .kpi-card { padding: 16px; border-radius: 12px; border: none; box-shadow: 0 1px 2px rgba(10,16,24,.05); }
  .kpi-value { font-size: 32px; letter-spacing: -.02em; }
  .kpi-label { font-size: var(--ios-sub); }

  /* --- 2.6 Fichas de niño y de profesional: una fila cada una --------------- */
  .ficha-card, .ter-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; margin: 0; border: none; border-radius: 0;
    border-bottom: 1px solid var(--ios-sep); background: var(--bg);
  }
  .fichas-grid, .equipo-grid, .ter-grid {
    gap: 0 !important; margin: 0 12px 14px; border-radius: 12px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(10,16,24,.05);
  }
  .fichas-grid .ficha-card:last-child, .ter-grid .ter-card:last-child { border-bottom: none; }
  .ficha-card-head { flex: 1; min-width: 0; gap: 12px; }
  .ficha-name { font-weight: 600; }
  .ficha-avatar { width: 42px; height: 42px; font-size: 15px; }
  /* Chevron: se ve que la fila se abre */
  .ficha-card::after {
    content: ''; width: 8px; height: 8px; flex-shrink: 0;
    border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
    transform: rotate(-45deg); opacity: .55;
  }
  .ficha-diag, .ficha-stats { display: none; }   /* el detalle está en la ficha */

  .ficha-detail-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ficha-detail-name { font-size: var(--ios-title); letter-spacing: -.02em; }
  .ficha-detail-meta { flex-wrap: wrap; gap: 6px 14px; font-size: var(--ios-sub); }
  .ficha-avatar-lg { width: 64px; height: 64px; font-size: 24px; }

  /* --- 2.7 Calendario: un día a la vez -------------------------------------
     La grilla pide 620px. En vez de encogerla hasta lo ilegible, el teléfono
     muestra el día a lo alto. La semana sigue en el selector: no se pierde. */
  .cal-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cal-grid-wrap .cal-grid { min-width: 620px; }
  body.cal-dia .cal-grid-wrap .cal-grid { min-width: 0; }
  body.cal-dia .cal-grid { grid-template-columns: 66px 1fr; }
  .cal-time { font-size: var(--ios-foot); padding: 8px 6px; }
  .cal-cell { min-height: 62px; padding: 4px; }
  .cal-day-name { font-size: 12px; }

  /* La sesión, como una celda: nombre grande, el resto abajo en gris */
  .session { padding: 11px 12px; border-radius: 10px; border-left-width: 4px; }
  .session-name { font-weight: 600; letter-spacing: -.01em; }
  .session-sub { color: var(--text-2); margin-top: 2px; }

  /* Selector de vista: control segmentado */
  .cal-toolbar, .cal-head-row { flex-wrap: wrap; gap: 10px; padding: 0 12px; }
  .view-switch {
    width: 100%; background: rgba(118,118,128,.12); border: none;
    border-radius: 9px; padding: 2px; gap: 2px;
  }
  .view-switch button {
    flex: 1; min-height: 34px; border-radius: 7px; font-size: var(--ios-sub); font-weight: 600;
  }
  .view-switch button.active { background: var(--bg); box-shadow: 0 1px 3px rgba(10,16,24,.14); }

  /* --- 2.8 Panel de sesión: hoja que sube desde abajo ----------------------- */
  .detail-panel {
    top: auto; right: 0; left: 0; bottom: 0;
    width: 100%; max-width: 100%;
    height: auto; max-height: 90dvh;
    border-radius: 14px 14px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -8px 34px rgba(10,16,24,.26);
    display: flex; flex-direction: column;
  }
  .detail-panel.open { transform: translateY(0); }
  .detail-panel::before {
    content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 5px; border-radius: 3px; background: rgba(60,60,67,.3);
  }
  .panel-header { padding: 22px 18px 12px; }
  .panel-title { font-size: var(--ios-title); letter-spacing: -.02em; }
  .panel-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 18px 18px; }
  .panel-field { padding: 12px 0; border-bottom: 1px solid var(--ios-sep); }
  .panel-footer {
    position: sticky; bottom: 0; background: var(--bg);
    border-top: 1px solid var(--ios-sep);
    padding: 12px 18px max(14px, env(safe-area-inset-bottom));
    display: flex; gap: 10px;
  }
  .panel-footer .btn { flex: 1; min-height: 48px; font-size: var(--ios-body); border-radius: 11px; }

  /* --- 2.9 Modales a pantalla completa -------------------------------------- */
  .pendiente-modal-overlay { padding: 0; align-items: stretch; }
  .pendiente-modal {
    width: 100% !important; max-width: 100%;
    height: 100dvh; max-height: 100dvh;
    border-radius: 0; display: flex; flex-direction: column;
  }
  .pendiente-modal-head {
    position: sticky; top: 0; background: var(--bg); z-index: 2;
    padding: 16px 18px; border-bottom: 1px solid var(--ios-sep);
  }
  .pendiente-modal-title { font-size: 21px; letter-spacing: -.015em; }
  .pendiente-modal-body { flex: 1; max-height: none !important; overflow-y: auto; padding: 16px 18px; font-size: var(--ios-body); }
  .pendiente-modal-foot {
    position: sticky; bottom: 0; background: var(--bg); gap: 10px;
    padding: 12px 18px max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--ios-sep); display: flex;
  }
  .pendiente-modal-foot .btn { flex: 1; min-height: 48px; font-size: var(--ios-body); border-radius: 11px; }
  .pendiente-ir-row { min-height: 54px; padding: 12px 14px; border-radius: 10px; }
  .doc-preview-overlay { padding: 0; }

  /* --- 2.10 Tablas: cada fila es una tarjeta -------------------------------
     Ninguna tabla de datos se lee en 390px por muy bien que scrollee. Las
     filas se apilan y cada celda lleva su etiqueta. No se pierde ninguna
     columna: se ven todas, una debajo de otra. */
  .data-table.tabla-tarjetas,
  .data-table.tabla-tarjetas thead,
  .data-table.tabla-tarjetas tbody,
  .data-table.tabla-tarjetas tr,
  .data-table.tabla-tarjetas td { display: block; width: 100%; }
  .data-table.tabla-tarjetas thead { display: none; }
  .data-table.tabla-tarjetas tr {
    background: var(--bg); border: none; border-bottom: 1px solid var(--ios-sep);
    padding: 14px 16px; margin: 0;
  }
  .data-table.tabla-tarjetas tr:last-child { border-bottom: none; }
  .data-table.tabla-tarjetas td {
    border: none; padding: 4px 0; font-size: var(--ios-body);
    display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  }
  .data-table.tabla-tarjetas td::before {
    content: attr(data-label); font-size: var(--ios-foot); color: var(--text-2);
    flex-shrink: 0;
  }
  .data-table.tabla-tarjetas td:empty { display: none; }
  .data-table.tabla-tarjetas td.num { text-align: right; }
  .data-table.tabla-tarjetas td:first-child {
    display: block; font-size: var(--ios-headline); font-weight: 600; padding-top: 0; padding-bottom: 6px;
  }
  .data-table.tabla-tarjetas td:first-child::before { display: none; }
  .table-wrap:has(.tabla-tarjetas) {
    border: none; background: var(--bg); overflow: visible;
    border-radius: 12px; margin: 0 12px 14px; box-shadow: 0 1px 2px rgba(10,16,24,.05);
  }

  /* --- 2.11 Portal de la familia -------------------------------------------- */
  .pa-hero { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px; }
  .pa-hero-right { width: 100%; }
  .pa-stats { width: 100%; justify-content: space-between; }
  .pa-stat b { font-size: 26px; }
  .pa-stat span { font-size: var(--ios-foot); }
  .pa-hero-title { font-size: var(--ios-title); letter-spacing: -.02em; }
  .pa-hero-eyebrow { font-size: var(--ios-sub); }
  .pa-ver-como { justify-content: flex-start; width: 100%; }
  .pa-ver-como .field-input { max-width: none; flex: 1; }
  .pa-conpapas-list li {
    flex-wrap: wrap; gap: 4px 10px; padding: 14px 0;
    border-bottom: 1px solid var(--ios-sep); font-size: var(--ios-body);
  }
  .pa-cp-fecha { min-width: 78px; font-weight: 600; }
  .pa-cp-esp { flex: 1 1 100%; color: var(--text-2); }

  /* --- 2.12 Evaluaciones ---------------------------------------------------- */
  .eval-sem-tabla { min-width: 560px; }
  .eval-sem-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .eval-sem-nav { justify-content: space-between; }
  .eval-caso-nom { font-size: var(--ios-title); letter-spacing: -.02em; }
  .eval-caso-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .eval-caso-actions .btn { flex: 1; min-height: 46px; font-size: var(--ios-sub); }
  .eval-fecha-row { flex-wrap: wrap; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--ios-sep); }
  .eval-fecha-row .eval-ses-fecha, .eval-fecha-row .eval-ses-hora { flex: 1; min-width: 132px; min-height: 46px; }
  .eval-ses-tipo { flex: 1 1 100%; font-size: var(--ios-headline); font-weight: 600; }
  .eval-paso-t { font-size: var(--ios-headline); }

  /* --- 2.13 Armador y disponibilidad: enteros, con la fila fija -------------
     Nada de esconder módulos. La grilla completa se conserva; scrollea dentro
     de su caja y la primera columna queda fija para no perder de vista de
     quién es la fila. */
  .disp-table-bandas { min-width: 820px; }
  .disp-wrap, .armador-tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .disp-table-bandas th:first-child,
  .disp-table-bandas td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--bg); box-shadow: 1px 0 0 var(--ios-sep);
  }
  .armador-hero { flex-direction: column; align-items: stretch; gap: 14px; }
  .armador-hero-cta { display: flex; flex-wrap: wrap; gap: 8px; }
  .armador-hero-cta .btn { flex: 1; min-height: 48px; font-size: var(--ios-body); }
  .armador-title { font-size: var(--ios-title); letter-spacing: -.02em; }
  .armador-eyebrow { font-size: var(--ios-sub); text-transform: none; letter-spacing: 0; }

  /* --- 2.14 Botones ---------------------------------------------------------- */
  .btn { min-height: 46px; font-size: var(--ios-body); border-radius: 11px; padding: 0 18px; }
  .btn-sm { min-height: 40px; font-size: var(--ios-sub); border-radius: 9px; }

  /* --- 2.15 Barra de pestañas abajo ------------------------------------------
     Los destinos que más se usan, al alcance del pulgar. El menú completo
     sigue en el botón de arriba: esto no reemplaza nada, acorta el camino. */
  .mobile-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--ios-sep);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-nav button {
    flex: 1; min-height: 50px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px;
    background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 10.5px; font-weight: 500; color: var(--text-3);
    padding: 6px 2px 4px;
  }
  .mobile-nav button.active { color: var(--cn-azul); }
  .mobile-nav button svg { width: 24px; height: 24px; stroke-width: 1.9; }
  .chat-fab { bottom: calc(62px + env(safe-area-inset-bottom)); }
  .chat-widget { bottom: calc(118px + env(safe-area-inset-bottom)); right: 12px; left: 12px; width: auto; }
}

.mobile-nav { display: none; }

@media (max-width: 1024px) {
  .chat-fab { bottom: max(22px, env(safe-area-inset-bottom)); }
  .panel-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .pendiente-modal-foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   3 · TABLET
   ========================================================================== */
@media (min-width: 641px) and (max-width: 1024px) {
  .info-grid, .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .fichas-grid, .equipo-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-panel { width: min(420px, 92vw); }
  .main { padding: 16px 18px 40px; }
}