/* ============================================================================
   ExpedienteGine — iOS UI Layer (FASE UX)
   Capa visual tipo iOS/macOS. Aditiva: NO reemplaza design-system.css ni
   themes.css. Reutiliza las variables de tema (--color-*) para funcionar en
   los 7 temas. Importar DESPUÉS de design-system.css y themes.css.
   ============================================================================ */

:root {
  --ios-radius-sm: var(--radius-sm);
  --ios-radius: var(--radius-md);
  --ios-radius-lg: var(--radius-lg);
  --ios-radius-pill: var(--radius-pill);
  --ios-gap: var(--space-4);
  --ios-gap-lg: var(--space-5);
  --ios-pad: var(--space-5);
  --ios-shadow: var(--shadow-card);
  --ios-shadow-lg: var(--shadow-elevated);
  --ios-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ── Página y encabezado ─────────────────────────────────────────────────── */
.ios-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(12px, 2vw, 24px);
  animation: ios-fade-in .35s var(--ios-ease);
}
.ios-header { margin-bottom: var(--ios-gap-lg); }
.ios-header h1, .ios-header .ios-title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--color-text-primary);
  margin: 0;
}
.ios-header .ios-subtitle {
  color: var(--color-text-secondary);
  font-size: .95rem;
  margin-top: 2px;
}
@keyframes ios-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Tarjetas ────────────────────────────────────────────────────────────── */
.ios-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--ios-radius);
  padding: var(--ios-pad);
  box-shadow: var(--ios-shadow);
  transition: transform .2s var(--ios-ease), box-shadow .2s var(--ios-ease);
  /* Evita que notas dictadas/URLs largas o tablas anchas empujen la tarjeta
     más allá del viewport y se "salgan los bordes" en iPhone */
  min-width: 0;
  overflow-wrap: break-word;
}
.ios-card-compact { padding: 12px 14px; border-radius: var(--ios-radius-sm); }
a.ios-card, .ios-card-tappable { display: block; text-decoration: none; color: inherit; cursor: pointer; }
a.ios-card:hover, .ios-card-tappable:hover { transform: translateY(-2px); box-shadow: var(--ios-shadow-lg); }
.ios-card-clickable {
  cursor: pointer;
  transition: transform .2s var(--ios-ease), box-shadow .2s var(--ios-ease), background-color .2s var(--ios-ease);
}
.ios-card-clickable:hover {
  transform: translateY(-2px);
  box-shadow: var(--ios-shadow-lg);
  background-color: color-mix(in srgb, var(--color-accent, #5856d6) 4%, var(--color-surface)) !important;
}
.ios-card-title { font-size: 1.02rem; font-weight: 550; color: var(--color-text-primary); margin: 0; display: flex; align-items: center; gap: 8px; }
.ios-card-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
/* La cabecera es flex y `justify-content: space-between` NO impide desbordar:
   sin `min-width: 0` el título no puede encoger por debajo de su contenido —el
   ícono de 38px más la palabra más larga— y empuja la píldora FUERA de la
   tarjeta. Medido el 1-ago-2026: «Ver documentos» se salía 83px en Aseguradoras,
   «Ver agenda» 50 en Cirugías. La píldora, a su vez, no debe encogerse: si lo
   hace se parte el texto, que es el mismo defecto una fila más abajo. */
.ios-card-header > .ios-card-title { min-width: 0; }
.ios-card-header > .ios-status-pill { flex: none; }
.ios-card-icon {
  width: 38px; height: 38px; border-radius: 12px; flex: none;
  display: grid; place-items: center; font-size: 1.15rem;
  background: var(--color-accent-soft); color: var(--color-accent);
}
.ios-card-list { display: flex; flex-direction: column; gap: 2px; }
.ios-grid { display: grid; gap: var(--ios-gap); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* ── Filas tipo lista iOS ────────────────────────────────────────────────── */
.ios-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 4px; text-decoration: none; color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
}
.ios-row:last-child { border-bottom: 0; }
.ios-row-clickable {
  cursor: pointer;
  transition: background-color .2s var(--ios-ease), color .2s var(--ios-ease);
}
.ios-row-clickable:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-accent);
}
.table-clinical tbody tr.ios-row-clickable {
  transition: background-color .15s var(--ios-ease);
}
.table-clinical tbody tr.ios-row-clickable:hover td {
  background-color: color-mix(in srgb, var(--color-accent, #5856d6) 8%, transparent) !important;
}
.ios-row:hover { color: var(--color-accent); }
.ios-row .ios-row-main { flex: 1; min-width: 0; }
.ios-row .ios-row-title { font-weight: 550; font-size: .95rem; }
.ios-row .ios-row-sub { font-size: .82rem; color: var(--color-text-secondary); }
.ios-row .ios-chevron { color: var(--color-text-secondary); opacity: .5; flex: none; }

/* ── Botones ─────────────────────────────────────────────────────────────── */
/* `display: inline-flex` GANA al `display: none` que el navegador aplica a
   [hidden]: sin esta regla, un botón con el atributo `hidden` se sigue viendo.
   Se puso al descubrir que los botones «Anterior» y «Enviar» del examen
   paginado aparecían desde la primera pregunta. */
.ios-primary-button[hidden], .ios-secondary-button[hidden],
.ios-accent-button[hidden], .ios-ghost-button[hidden] { display: none !important; }
.ios-primary-button, .ios-secondary-button, .ios-accent-button, .ios-ghost-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 500; font-size: .95rem; line-height: 1;
  padding: 12px 18px; border-radius: var(--ios-radius-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .12s var(--ios-ease), filter .2s var(--ios-ease), background .2s;
  -webkit-user-select: none; user-select: none;
  min-height: 44px;
}
.ios-primary-button { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-card); }
.ios-primary-button:hover { filter: brightness(1.05); color: #fff; }
.ios-primary-button:active { transform: scale(.97); }
.ios-secondary-button { background: transparent; color: var(--color-accent); border-color: var(--color-accent); }
.ios-secondary-button:hover { background: var(--color-accent-soft); color: var(--color-accent); }
.ios-accent-button { background: var(--color-accent); color: var(--color-bg-card, #fff); box-shadow: 0 4px 14px rgba(var(--color-accent-rgb), .24); }
.ios-accent-button:hover { filter: brightness(1.04); color: #fff; }
.ios-ghost-button { background: transparent; color: var(--color-text-secondary); border-color: transparent; }
.ios-ghost-button:hover { background: var(--color-bg-secondary); color: var(--color-text-primary); }
.ios-button-block { width: 100%; }
.ios-button-danger { background: var(--color-error); color: #fff; }

/* ── Cuadrícula de acciones rápidas ──────────────────────────────────────── */
.ios-action-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.ios-action-button {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 10px; border-radius: var(--ios-radius);
  background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-text-primary); text-decoration: none; text-align: center;
  font-weight: 550; font-size: .85rem;
  transition: transform .15s var(--ios-ease), box-shadow .2s, border-color .2s;
}
.ios-action-button:hover { transform: translateY(-2px); box-shadow: var(--ios-shadow); border-color: var(--color-accent); color: var(--color-text-primary); }
.ios-action-button .ios-action-glyph {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  font-size: 1.4rem; background: var(--color-accent-soft); color: var(--color-accent);
}

/* En el teléfono estas cuatro tarjetas medían 352 px —el 43 % de la pantalla—
   y empujaban la tira de pestañas a y=790 sobre un viewport de 812: se abría el
   expediente y no se veía ni una línea de contenido sin desplazarse. En vertical
   pasan a fila (ícono a la izquierda, etiqueta a la derecha), que es como se leen
   más rápido y ocupan menos de la mitad. En iPad y portátil se quedan como están:
   ahí el espacio sobra y la tarjeta grande se ve mejor. */
@media (max-width: 700px) {
  .ios-action-grid { gap: 8px; }
  .ios-action-button {
    flex-direction: row; justify-content: flex-start; text-align: left;
    padding: 10px 12px; gap: 10px;
  }
  .ios-action-button .ios-action-glyph {
    width: 32px; height: 32px; border-radius: 9px; font-size: 1rem; flex: none;
  }
  /* El subtítulo («con historia clínica», «evolución/SOAP») es ruido a este
     tamaño: la etiqueta ya dice cuál es cuál. */
  .ios-action-button small { display: none; }
  .ios-action-button br { display: none; }
  /* La hoja «Crear»/«Más» conserva los MOSAICOS (pedido del dueño 17-ago): el
     motivo de compactar era el expediente, donde las tarjetas empujaban las
     pestañas fuera de pantalla — en una hoja modal no hay nada debajo que
     empujar, y el acomodo cuadrado se lee mejor ahí. */
  .ios-sheet .ios-action-grid { gap: 12px; }
  .ios-sheet .ios-action-button {
    flex-direction: column; justify-content: center; text-align: center;
    padding: 16px 10px; gap: 8px;
    /* «Flotaban antes»: la tarjeta se despega del vidrio de la hoja con
       sombra propia. En oscuro --color-surface se funde con el fondo, así
       que la elevación la da la sombra + un borde apenas más claro. */
    box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
    border-color: color-mix(in srgb, var(--color-border) 60%, transparent);
  }
  .ios-sheet .ios-action-button .ios-action-glyph {
    width: 46px; height: 46px; border-radius: 14px; font-size: 1.4rem;
  }
  /* «Que no se vea la ventana esa, que sean solo los botones»: en «Crear» y
     «Más» el panel desaparece y quedan las tarjetas flotando sobre el fondo
     atenuado, estilo speed-dial. SOLO estas dos hojas — las demás (datos de
     la paciente, etc.) llevan formularios y sí necesitan su panel. */
  #sheet-crear .ios-sheet,
  #sheet-mas .ios-sheet {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
  }
  #sheet-crear .ios-sheet-title,
  #sheet-mas .ios-sheet-title,
  #sheet-crear .ios-sheet-grabber,
  #sheet-mas .ios-sheet-grabber { display: none; }
}

/* ── Segmented control (tabs iOS) ────────────────────────────────────────── */
.ios-segmented-control {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--color-bg-secondary); border-radius: var(--ios-radius-pill);
  overflow-x: auto; max-width: 100%; scrollbar-width: none;
}
.ios-segmented-control::-webkit-scrollbar { display: none; }
.ios-segmented-control a, .ios-segmented-control button {
  border: 0; background: transparent; white-space: nowrap;
  padding: 8px 16px; border-radius: var(--ios-radius-pill);
  font-size: .88rem; font-weight: 550; color: var(--color-text-secondary);
  text-decoration: none; cursor: pointer; transition: all .2s var(--ios-ease);
}
.ios-segmented-control a.active, .ios-segmented-control button.active {
  background: var(--color-surface); color: var(--color-text-primary);
  box-shadow: 0 1px 3px rgba(16, 42, 67, .12);
}

/* ── Stepper / indicador de pasos ────────────────────────────────────────── */
.ios-stepper { display: flex; align-items: center; gap: 8px; margin-bottom: var(--ios-gap-lg); }
.ios-stepper .ios-step { display: flex; align-items: center; gap: 8px; }
.ios-stepper .ios-step-dot {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: .78rem; font-weight: 600;
  background: var(--color-bg-secondary); color: var(--color-text-secondary);
  border: 2px solid var(--color-border);
}
.ios-stepper .ios-step.active .ios-step-dot { background: var(--color-accent); color: var(--color-bg-card, #fff); border-color: var(--color-accent); }
.ios-stepper .ios-step.done .ios-step-dot { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.ios-stepper .ios-step-label { font-size: .82rem; color: var(--color-text-secondary); font-weight: 550; }
.ios-stepper .ios-step.active .ios-step-label { color: var(--color-text-primary); }
.ios-stepper .ios-step-line { flex: 1; height: 2px; background: var(--color-border); border-radius: 2px; min-width: 12px; }

/* ── Secciones de formulario ─────────────────────────────────────────────── */
.ios-form-section { margin-bottom: var(--ios-gap-lg); }
.ios-form-section-title {
  font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-secondary); margin: 0 0 8px 4px;
}
.ios-field-group {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--ios-radius); padding: 6px 16px;
}
.ios-field-group .ios-field { padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.ios-field-group .ios-field:last-child { border-bottom: 0; }
.ios-field label { font-size: .82rem; font-weight: 500; color: var(--color-text-secondary); display: block; margin-bottom: 4px; }
.ios-field .form-control:not(textarea), .ios-field .form-select, .ios-field input, .ios-field select {
  border: 0 !important; padding: 2px 0 !important; box-shadow: none !important;
  background: transparent !important; font-size: 1rem; color: var(--color-text-primary);
}
/* Los campos de ANCHO PROPIO necesitan una excepción a la regla de arriba.
   Esa regla quita borde y fondo a propósito —es el aspecto de "fila iOS"— y
   funciona con los de texto porque ocupan todo el ancho de la fila. Un
   `input[type=number]` tiene ancho intrínseco pequeño, así que sin borde ni
   fondo quedaba como un recuadro diminuto e INVISIBLE hasta enfocarlo: sólo se
   veía el anillo de foco. Pasaba, por ejemplo, con "Intensidad de la
   dismenorrea (0-10)". Se les devuelve un ancho usable y una línea inferior que
   dice dónde escribir.

   5-ago-2026: le pasaba lo mismo a las FECHAS y no se había visto — la FUM y la
   fecha de nacimiento se leían como texto plano y no había forma de saber dónde
   tocar para escribirlas. Es el mismo defecto, así que la excepción cubre ahora
   TODOS los tipos con ancho intrínseco (date, time, datetime-local, month,
   week), no sólo el que se reportó. */
.ios-field input[type="number"],
.ios-field input[type="date"],
.ios-field input[type="time"],
.ios-field input[type="datetime-local"],
.ios-field input[type="month"],
.ios-field input[type="week"] {
  min-width: 110px;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 6px 2px !important;
}
.ios-field input[type="number"]:focus,
.ios-field input[type="date"]:focus,
.ios-field input[type="time"]:focus,
.ios-field input[type="datetime-local"]:focus,
.ios-field input[type="month"]:focus,
.ios-field input[type="week"]:focus { border-bottom-color: var(--color-accent) !important; }

/* ── Escala 0–10 (intensidad de dolor) ─────────────────────────────────────
   Deslizador nativo. Se estiliza a mano porque el aspecto por defecto varía
   mucho entre navegadores y aquí conviven Safari de macOS, iPad y el WebView de
   la app. El pulgar es de 26 px: por debajo de 24 px no se agarra con el dedo.
   Va con `!important` en lo imprescindible porque la regla de "fila iOS" de
   arriba le quitaría el fondo, que en un deslizador ES la barra. */
.ios-escala-fila { display: flex; align-items: center; gap: 14px; }
.ios-field input[type="range"].ios-escala {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 auto; min-width: 140px; height: 6px;
  padding: 0 !important; border: 0 !important;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent) var(--relleno, 0%), var(--color-border) var(--relleno, 0%), var(--color-border) 100%) !important;
  cursor: pointer;
}
.ios-escala::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 2px solid var(--color-accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  cursor: grab;
}
.ios-escala::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 2px solid var(--color-accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  cursor: grab;
}
.ios-escala:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
/* La cifra: un deslizador sin número no sirve para un dato clínico que hay que
   poder repetir y comparar entre consultas. */
.ios-escala-valor {
  min-width: 3.2em; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.05rem;
  color: var(--color-text-primary);
  background: var(--color-bg-secondary, #f2f2f7);
  border-radius: 8px; padding: 4px 8px;
}
.ios-escala-valor[data-vacio="1"] { color: var(--color-text-secondary); font-weight: 500; }

.ios-field-required label::after { content: " *"; color: var(--color-accent); }

/* Campos avanzados colapsables */
.ios-advanced-section { margin-top: 10px; }
.ios-advanced-toggle {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: .86rem; font-weight: 500; color: var(--color-accent);
  background: none; border: 0; padding: 8px 4px;
}
.ios-advanced-toggle .ios-advanced-chevron { transition: transform .25s var(--ios-ease); }
.ios-advanced-section[open] .ios-advanced-toggle .ios-advanced-chevron { transform: rotate(90deg); }
.ios-advanced-body { padding-top: 8px; animation: ios-fade-in .25s var(--ios-ease); }

/* ── Banner de autollenado ───────────────────────────────────────────────── */
.ios-autofill-banner {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--color-secondary-soft); border: 1px solid var(--color-secondary);
  border-radius: var(--ios-radius); padding: 14px 16px; margin-bottom: var(--ios-gap);
}
.ios-autofill-banner .ios-autofill-icon { font-size: 1.3rem; flex: none; }
.ios-autofill-banner .ios-autofill-text { flex: 1; font-size: .9rem; color: var(--color-text-primary); }
.ios-autofill-banner .ios-autofill-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ── Status pills ────────────────────────────────────────────────────────── */
.ios-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: var(--ios-radius-pill);
  font-size: .76rem; font-weight: 500; line-height: 1;
  background: var(--color-bg-secondary); color: var(--color-text-secondary);
}
.ios-status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* Desaturación: si el pill ya trae un icono (svg/img), el punto de estado es
   redundante y suma ruido de color → se oculta y el icono hace de glifo guía. */
.ios-status-pill:has(> svg)::before,
.ios-status-pill:has(> img)::before { display: none; }
.ios-status-pill.is-success { background: var(--color-secondary-soft); color: var(--color-success); }
.ios-status-pill.is-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.ios-status-pill.is-danger  { background: var(--color-error-soft); color: var(--color-error); }
.ios-status-pill.is-accent  { background: var(--color-accent-soft); color: var(--color-accent); }

/* ── Chips rápidos ───────────────────────────────────────────────────────── */
.ios-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ios-chip {
  padding: 7px 13px; border-radius: var(--ios-radius-pill);
  background: var(--color-accent-soft); color: var(--color-accent);
  border: 0; font-size: .82rem; font-weight: 500; cursor: pointer;
  transition: transform .12s var(--ios-ease), filter .2s;
}
.ios-chip:hover { filter: brightness(.97); }
.ios-chip:active { transform: scale(.95); }

/* ── Búsqueda ────────────────────────────────────────────────────────────── */
.ios-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  border-radius: var(--ios-radius-pill); padding: 9px 16px;
}
.ios-search input { border: 0; background: transparent; outline: 0; flex: 1; font-size: .95rem; color: var(--color-text-primary); }
.ios-search svg { color: var(--color-text-secondary); flex: none; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.ios-empty-state { text-align: center; padding: 40px 20px; color: var(--color-text-secondary); }
.ios-empty-state .ios-empty-glyph { font-size: 2.6rem; opacity: .55; margin-bottom: 10px; }
.ios-empty-state .ios-empty-title { font-weight: 550; color: var(--color-text-primary); margin-bottom: 4px; }

/* ── Sheet / modal inferior estilo iOS ───────────────────────────────────── */
.ios-sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(2px); opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ios-ease); z-index: 1080;
}
.ios-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
.ios-sheet {
  position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%);
  width: min(540px, 100%); max-height: 86vh; overflow-y: auto;
  /* Vidrio esmerilado fuerte (76%/78% opaco) — legible pero con profundidad */
  background: var(--glass-bg-strong, #fff);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  border-bottom: 0;
  border-radius: var(--ios-radius-lg) var(--ios-radius-lg) 0 0;
  padding: 10px 20px 28px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
  transition: transform .3s var(--ios-ease); z-index: 1090;
}
.ios-sheet-backdrop.open .ios-sheet { transform: translate(-50%, 0); }
.ios-sheet .ios-sheet-grabber { width: 40px; height: 5px; border-radius: 3px; background: var(--color-border); margin: 4px auto 14px; }
.ios-sheet .ios-sheet-title { font-weight: 600; font-size: 1.05rem; text-align: center; margin-bottom: 14px; color: var(--color-text-primary); }
@media (min-width: 600px) {
  .ios-sheet {
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -46%) scale(.96);
    border-radius: var(--ios-radius-lg);
    border-bottom: 1px solid var(--color-border);
    opacity: 0;
  }
  .ios-sheet-backdrop.open .ios-sheet { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ── Floating Action Button (Crear) ──────────────────────────────────────── */
.ios-floating-action-button {
  position: fixed; right: 22px; bottom: 22px; z-index: 1050;
  width: 58px; height: 58px; border-radius: 50%; border: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--color-accent); color: var(--color-bg-card, #fff); font-size: 1.7rem;
  box-shadow: 0 8px 24px rgba(var(--color-accent-rgb), .5);
  transition: transform .18s var(--ios-ease), filter .2s;
}
.ios-floating-action-button:hover { filter: brightness(1.06); }
.ios-floating-action-button:active { transform: scale(.92); }

/* ── Toolbar / bottom bar de formularios ─────────────────────────────────── */
.ios-bottom-bar {
  position: sticky; bottom: 0; z-index: 30;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-border);
  padding: 12px clamp(12px, 2vw, 24px); margin: var(--ios-gap-lg) -24px -24px;
}
.ios-bottom-bar .ios-bottom-spacer { flex: 1; }

@media (max-width: 768px) {
  .ios-bottom-bar {
    justify-content: flex-end;
    gap: 8px;
    padding: 12px;
    /* En móvil la barra inferior flotante (.ios-tabbar) vive en bottom:12px y mide
       ~73px (su borde superior queda a ~85px del fondo). La barra de acciones,
       sticky a bottom:0, quedaba DEBAJO (oculta). La subimos para que flote JUSTO
       encima del tabbar (con holgura) y el botón Guardar se vea completo. */
    bottom: calc(94px + env(safe-area-inset-bottom));
    margin-bottom: 0;
    border-radius: 16px;
    z-index: 1039; /* por debajo del tabbar (1040), pero ya no se solapan */
  }
  /* Espacio al final del contenido para que la barra flotante + el tabbar no tapen
     el último campo al hacer scroll hasta abajo. */
  .ios-page { padding-bottom: calc(168px + env(safe-area-inset-bottom)); }
  .ios-bottom-bar .ios-bottom-spacer {
    display: none;
  }
  .ios-bottom-bar > span {
    flex-basis: 100%;
    margin-bottom: 2px;
  }
  .ios-bottom-bar .btn,
  .ios-bottom-bar .ios-ghost-button,
  .ios-bottom-bar .ios-secondary-button,
  .ios-bottom-bar .ios-primary-button {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
    font-size: 0.85rem;
    padding: 10px 14px;
    min-height: 38px;
  }
  /* Auditoría UX 2-sep-2026 (medido en iPhone a 375px): en la historia clínica
     la barra de acciones (dos renglones, 109px) más el tabbar sumaban ~250px
     de los 812 de alto — el 30 % de la pantalla era cromo. Mientras hay una
     barra de acciones pegajosa el tabbar sobra (se sale por «Cancelar» o por
     atrás), la barra baja al borde y va en UNA fila: el primario crece, los
     secundarios se quedan a su tamaño. Las barras con `style="position:static"`
     no cuentan: esas no flotan. */
  body:has(.ios-bottom-bar:not([style*="static"])) .ios-tabbar { display: none; }
  body:has(.ios-bottom-bar:not([style*="static"])) .ios-page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .ios-bottom-bar:not([style*="static"]) { bottom: calc(8px + env(safe-area-inset-bottom)); }
  .ios-bottom-bar .ios-ghost-button,
  .ios-bottom-bar .ios-secondary-button { flex: 0 0 auto; }
  .ios-bottom-bar .ios-primary-button { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
}
/* En escritorio el botón flotante del Asistente IA (56px + 24px) vive en la
   esquina inferior derecha y tapaba el botón primario de la barra de acciones
   (p.ej. "Finalizar consulta"). Reservamos ese espacio cuando el panel no está
   abierto (con el panel abierto el contenido se encoge y ya no hay traslape). */
@media (min-width: 992px) {
  body:not(.ai-assistant-open) .ios-bottom-bar:not([style*="static"]) {
    padding-right: 92px;
  }
}
.ios-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ── Barra inferior móvil (tab bar flotante premium) ────────────────────── */
.ios-tabbar { display: none; }
@media (max-width: 768px) {
  .topbar {
    background: var(--color-surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 1px 0 var(--color-border) !important;
  }
  .ios-tabbar {
    position: fixed;
    /* Ancho máximo tipo teléfono, centrado: en anchos intermedios (tablet, ~600-768px)
       la barra ya no se estira de lado a lado y conserva su proporción de móvil. */
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 440px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 1040;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* Vidrio FUERTE: opacidad alta para que los íconos se lean bien pero aún
       se vea algo del fondo. En bajo consumo, themes.css lo vuelve opaco. */
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge);
    border-radius: 30px;
    padding: 8px 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    /* El ancho/padding se animan para que la barra se encoja PAULATINAMENTE.
       Ya se puede: el resplandor del activo es el FONDO de su propia pestaña
       (se quitó la píldora deslizante que flotaba), así que sigue a la pestaña
       durante la animación sin desfasarse. */
    transition: max-width .3s cubic-bezier(.4, 0, .2, 1),
                padding .3s cubic-bezier(.4, 0, .2, 1);
  }
  /* Tabbar minimizada (iOS 26/27): cápsula compacta de solo glifos; el ancho
     se reduce gradualmente (transición de arriba). overflow hidden: el glow
     del activo (radio 20) no debe salirse de la cápsula (radio 30). */
  .ios-tabbar.tabbar-mini {
    max-width: 300px;
    padding: 5px 8px;
    overflow: hidden;
  }
  /* Las etiquetas se desvanecen (opacity, no display) al ritmo del encogido,
     para que la transición no sea un salto brusco. width:0 las saca del flujo
     sin quitarlas de golpe. */
  .ios-tabbar a > span:not(.ios-tabbar-glyph),
  .ios-tabbar button > span:not(.ios-tabbar-glyph) {
    transition: opacity .2s ease, max-height .3s ease;
    overflow: hidden;
  }
  .ios-tabbar.tabbar-mini a > span:not(.ios-tabbar-glyph),
  .ios-tabbar.tabbar-mini button > span:not(.ios-tabbar-glyph) {
    opacity: 0;
    max-height: 0;
  }
  .ios-tabbar.tabbar-mini a, .ios-tabbar.tabbar-mini button { padding: 8px 4px; }

  /* El menú lateral tiene que terminar POR ENCIMA del tabbar.
     ────────────────────────────────────────────────────────────────────────
     Vive aquí, junto al tabbar, y no en `design-system.css`, porque el número
     sale de la geometría de ESTA barra: quien la haga más alta tiene que ver
     esto al lado. Allí sólo reservaba `env(safe-area-inset-bottom)` —unos 34 px
     del indicador de inicio— mientras el borde superior del tabbar queda a
     ~85 px del fondo. Los últimos ~50 px de la lista quedaban debajo de la
     barra flotante y NO HABÍA SCROLL QUE LOS ALCANZARA.

     No era un detalle estético: `orden_sidebar` manda al final los ítems que no
     estaban cuando el médico personalizó su menú, así que **toda entrada nueva
     nacía invisible** para quien ya lo había ordenado. Así se perdieron
     «Esquemas» y «Calculadoras» — no faltaba el enlace, no se podía llegar a él.
     Es el mismo `168px` que ya usa `.ios-page`, por el mismo motivo. */
  .sidebar { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  .ios-tabbar.tabbar-mini .ios-tabbar-create .ios-tabbar-glyph {
    width: 32px;
    height: 32px;
    margin-top: 0;
  }
  .ios-tabbar a, .ios-tabbar button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    padding: 6px 4px;
    text-decoration: none;
    font-size: .66rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-radius: 20px;
    /* Solo el COLOR del texto transiciona; el FONDO (resplandor) cambia de
       forma instantánea para que no quede un fantasma difuminado en la
       pestaña anterior al cambiar de sección. */
    transition: color .15s ease;
    background: transparent;
    border: 0;
  }
  .ios-tabbar a.active {
    color: var(--color-accent) !important;
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  }
  .ios-tabbar a .ios-tabbar-glyph, .ios-tabbar button .ios-tabbar-glyph {
    font-size: 1.25rem;
    line-height: 1;
  }
  .ios-tabbar .ios-tabbar-create .ios-tabbar-glyph {
    width: 38px;
    height: 38px;
    margin-top: -14px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 14px rgba(var(--color-accent-rgb), .4);
    transition: transform 0.2s;
  }
  .ios-tabbar .ios-tabbar-create:active .ios-tabbar-glyph {
    transform: scale(0.9);
  }
  /* El topbar es position:sticky (se auto-despeja en el flujo), así que el
     contenido NO necesita padding-top para librarlo: 56px era espacio muerto
     que empujaba todo hacia abajo en cada pantalla (S-1 auditoría UIX). 16px
     deja solo un respiro. El padding-bottom sí debe librar la tab bar flotante
     (~76px) Y el FAB del asistente (bottom 90px + ~56px alto = ~146px), que
     antes tapaba el último elemento accionable de los listados (S-2). */
  .content-area {
    padding-top: 16px !important;
    padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important;
  }
  .ios-floating-action-button { bottom: 96px; }
  /* F4-a (auditoría UIX): la tira de tabs del expediente vive DESPUÉS de los
     tiles de acción, así que al cargar caía al fondo, medio oculta tras la nav
     flotante inferior y difícil de tocar. Se ancla bajo el topbar (sticky) al
     hacer scroll → siempre visible/alcanzable y fuera de la zona de la nav.
     El topbar mide 64px + safe-area; el fondo evita que el contenido se vea a
     través al deslizarse por debajo. */
  .ios-segmented-control-wrapper {
    position: sticky;
    top: calc(64px + env(safe-area-inset-top, 0px));
    z-index: 800;
    background: var(--color-bg-primary);
    padding-top: 6px !important;
    padding-bottom: 6px;
  }
}

/* ── Campos: ayuda, error, checkbox, resumen de errores ──────────────────── */
.ios-field-help { font-size: .76rem; color: var(--color-text-secondary); margin-top: 4px; }
.ios-field-error {
  font-size: .78rem;
  color: var(--color-error);
  margin-top: 4px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ios-field-error::before {
  content: "⚠️";
  font-size: 0.8rem;
}
.ios-check {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 12px 0; border-bottom: 1px solid var(--color-border); font-size: .95rem;
  color: var(--color-text-primary);
}
.ios-check:last-child { border-bottom: 0; }
.ios-check input[type="checkbox"] { width: 20px; height: 20px; flex: none; accent-color: var(--color-accent); }
.ios-error-summary {
  background: #FDECEA; border: 1px solid var(--color-error); color: var(--color-error);
  border-radius: var(--ios-radius); padding: 12px 16px; margin-bottom: var(--ios-gap); font-size: .9rem;
}
.ios-error-summary ul { margin: 6px 0 0; padding-left: 18px; }
/* Fila compacta de números (p.ej. fórmula obstétrica GPCAEV) */
.ios-number-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ios-number-cell { flex: 1; min-width: 56px; text-align: center; }
.ios-number-cell label { display: block; font-size: .72rem; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 4px; }
.ios-number-cell input {
  width: 100%; text-align: center; border: 1px solid var(--color-border); border-radius: 12px;
  padding: 10px 4px; font-size: 1rem; background: var(--color-surface); color: var(--color-text-primary);
}

/* ── Calendario diario por consultorio (FASE E) ──────────────────────────── */
.ios-calendar {
  display: grid; grid-template-columns: 56px repeat(var(--cal-cols, 2), 1fr);
  gap: 0; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--ios-radius); overflow: hidden; position: relative;
}
.ios-calendar-head {
  background: var(--color-bg-secondary); padding: 10px 8px; text-align: center;
  font-weight: 550; font-size: .88rem; color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border); border-left: 1px solid var(--color-border);
}
.ios-calendar-head:first-child { border-left: 0; }
.ios-calendar-col {
  position: relative; min-height: var(--cal-h, 624px);
  border-left: 1px solid var(--color-border);
  background-image: repeating-linear-gradient(
    to bottom, transparent, transparent calc(var(--cal-row-h, 48px) - 1px),
    var(--color-border) calc(var(--cal-row-h, 48px) - 1px), var(--color-border) var(--cal-row-h, 48px)
  );
}
.ios-calendar-col:first-of-type { border-left: 0; }
.ios-calendar-hours {
  font-size: .72rem; color: var(--color-text-secondary); text-align: right;
  padding: 4px 6px 0 0; min-height: var(--cal-h, 624px);
  background-image: repeating-linear-gradient(
    to bottom, transparent, transparent calc(var(--cal-row-h, 48px) - 1px),
    var(--color-border) calc(var(--cal-row-h, 48px) - 1px), var(--color-border) var(--cal-row-h, 48px)
  );
}
.ios-calendar-hour { height: var(--cal-row-h, 48px); line-height: 1; padding-top: 2px; }
.ios-calendar-event {
  position: absolute; left: 4px; right: 4px;
  border-radius: 10px; padding: 6px 8px; font-size: .76rem; line-height: 1.25;
  color: #fff; text-decoration: none; overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.10); cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
}
.ios-calendar-event:hover { filter: brightness(1.06); color: #fff; }
.ios-calendar-event .ce-title { font-weight: 550; }
.ios-calendar-event .ce-sub { opacity: .85; font-size: .72rem; }
.ios-calendar-event.is-cancelada { opacity: .45; text-decoration: line-through; }
.ios-calendar-empty {
  padding: 18px; text-align: center; color: var(--color-text-secondary); font-size: .85rem;
}
.ios-calendar-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ios-calendar-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; color: var(--color-text-primary);
}
.ios-calendar-legend-dot {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
}
.ios-calendar-nav { display: flex; align-items: center; gap: 6px; }
.ios-calendar-nav .ios-status-pill { cursor: pointer; }

/* ── Sidebar: grupo "Más" (disclosure) ───────────────────────────────────── */
.sidebar-nav {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
.sidebar-more { border: 0; margin-top: 8px !important; }
.sidebar-more > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-sidebar-text); opacity: .65;
  padding: 12px 14px 6px;
}
.sidebar-more > summary::-webkit-details-marker { display: none; }
/* La punta señala SIEMPRE al contenido, igual que `.ios-collapsible` y que
   `.ios-advanced-toggle`: cerrado apunta a la derecha, abierto apunta abajo.
   Antes iba al revés —abajo cerrado, arriba abierto— y era la única superficie
   de la aplicación que lo hacía: 96 colapsables en 55 plantillas usan la otra
   convención, que además es la de iOS y macOS. Abrir el grupo y ver la flecha
   irse hacia ARRIBA es exactamente lo que el dueño reportó como «al revés».
   El glifo se queda y la posición también; lo que cambia es a dónde apunta. */
.sidebar-more > summary::after {
  content: "⌄"; font-size: 1rem;
  transform: rotate(-90deg);
  transition: transform .25s var(--ios-ease);
}
.sidebar-more[open] > summary::after { transform: rotate(0deg); }

/* ── Botón estrella de favorito (Parte G) ────────────────────────────────── */
.ios-fav-star {
  background: none; border: 0; cursor: pointer; padding: 4px 6px;
  font-size: 1.2rem; line-height: 1; color: var(--color-text-secondary);
  transition: transform .18s var(--ios-ease), color .2s;
  -webkit-user-select: none; user-select: none;
}
.ios-fav-star:hover { color: #E8A317; transform: scale(1.15); }
.ios-fav-star.active { color: #E8A317; }
.ios-fav-star.active .ios-fav-star-icon { display: inline-block; }
@keyframes ios-fav-bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35); }
  60%  { transform: scale(.9); }
  100% { transform: scale(1); }
}
.ios-fav-star.bounce { animation: ios-fav-bounce .4s var(--ios-ease); }

/* ── Sección de accesos rápidos por favoritos (Parte G) ──────────────────── */
.ios-fav-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; }
.ios-fav-shortcut {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--ios-radius-pill);
  background: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-text-primary); text-decoration: none;
  font-size: .85rem; font-weight: 550;
  transition: transform .12s var(--ios-ease), border-color .2s, box-shadow .2s;
}
.ios-fav-shortcut:hover {
  border-color: var(--color-accent); transform: translateY(-1px);
  box-shadow: var(--ios-shadow); color: var(--color-text-primary);
}
.ios-fav-shortcut .ios-fav-shortcut-star { color: #E8A317; font-size: .9rem; }

/* ── Color indicators for appointment status (Parte O) ────────────────────── */
.ios-agenda-border-programada { border-left: 3px solid var(--color-accent, #6a1b9a) !important; padding-left: 12px !important; }
.ios-agenda-border-confirmada { border-left: 3px solid var(--color-success, #2e7d32) !important; padding-left: 12px !important; }
.ios-agenda-border-reprogramada { border-left: 3px solid var(--color-warning, #ff9100) !important; padding-left: 12px !important; }
.ios-agenda-border-cancelada { border-left: 3px solid var(--color-error, #c62828) !important; padding-left: 12px !important; }
.ios-agenda-border-asistio { border-left: 3px solid var(--color-secondary, #009688) !important; padding-left: 12px !important; }
.ios-agenda-border-no_asistio { border-left: 5px solid var(--color-text-secondary, #757575) !important; padding-left: 12px !important; }
.ios-agenda-border-pendiente_confirmacion { border-left: 5px solid var(--color-warning, #ffc107) !important; padding-left: 12px !important; }

/* ── Utilidades ──────────────────────────────────────────────────────────── */
.ios-stack { display: flex; flex-direction: column; gap: var(--ios-gap); }
.ios-stack-sm { display: flex; flex-direction: column; gap: 8px; }
.ios-muted { color: var(--color-text-secondary); }

/* ── Guías y previews de configuración ───────────────────────────────────── */
.ios-setup-guide {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-bottom: var(--ios-gap);
}
.ios-setup-step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--ios-radius-sm);
  padding: 13px 14px;
  box-shadow: var(--ios-shadow);
}
.ios-setup-step strong {
  display: block;
  color: var(--color-text-primary);
  font-size: .9rem;
  margin-bottom: 4px;
}
.ios-setup-step span {
  display: block;
  color: var(--color-text-secondary);
  font-size: .82rem;
  line-height: 1.45;
}
.ios-preview-frame {
  width: 100%;
  min-height: 520px;
  border: 1px solid var(--color-border);
  border-radius: var(--ios-radius-sm);
  background: var(--color-bg-secondary);
}
.ios-format-preview-empty {
  min-height: 260px;
  border: 1px dashed var(--color-border);
  border-radius: var(--ios-radius-sm);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  color: var(--color-text-secondary);
  background: var(--color-bg-secondary);
}
.ios-invoice-preview {
  background: #fff;
  color: #1f2937;
  border: 1px solid var(--color-border);
  border-radius: var(--ios-radius-sm);
  padding: 22px;
  box-shadow: var(--ios-shadow);
}
.ios-invoice-preview * { color: inherit; }
.ios-invoice-preview-header,
.ios-invoice-preview-row,
.ios-invoice-preview-total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.ios-invoice-preview-header {
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 14px;
  margin-bottom: 16px;
}
.ios-invoice-preview-label {
  font-size: .72rem;
  text-transform: uppercase;
  color: #6b7280;
  font-weight: 600;
}
.ios-invoice-preview-row {
  border-bottom: 1px solid #eef2f7;
  padding: 9px 0;
  font-size: .88rem;
}
.ios-invoice-preview-total {
  font-weight: 600;
  font-size: 1.08rem;
  padding-top: 10px;
}
.ios-divider { height: 1px; background: var(--color-border); border: 0; margin: var(--ios-gap) 0; }

/* ── Secciones colapsables estilo iOS ────────────────────────────────────── */
.ios-collapsible { border: none; margin-bottom: var(--ios-gap); }
.ios-collapsible > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 12px var(--ios-pad);
  background: var(--ios-bg-grouped, var(--color-bg-secondary));
  border-radius: var(--ios-radius-sm);
  cursor: pointer; user-select: none;
  font-weight: 500; font-size: .9rem; color: var(--color-text);
  list-style: none; transition: background .2s var(--ios-ease);
}
.ios-collapsible > summary::-webkit-details-marker { display: none; }
.ios-collapsible > summary::before {
  content: "›"; font-size: 1.1rem; font-weight: 600;
  color: var(--color-accent);
  transition: transform .25s var(--ios-ease);
  display: inline-block; width: 16px; text-align: center;
}
.ios-collapsible[open] > summary::before { transform: rotate(90deg); }
.ios-collapsible > summary:hover { background: var(--color-border); }
.ios-collapsible > .ios-collapsible-body {
  padding: var(--ios-pad) 0 0; animation: ios-slide-down .25s var(--ios-ease);
}
@keyframes ios-slide-down {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Toggle switch iOS ───────────────────────────────────────────────────── */
.ios-toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.ios-toggle input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.ios-toggle-track {
  width: 44px; height: 26px; border-radius: 13px;
  background: #e5e5ea; transition: background .25s var(--ios-ease);
  position: relative; flex-shrink: 0;
}
.ios-toggle-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .25s var(--ios-ease);
}
.ios-toggle input:checked + .ios-toggle-track { background: var(--color-primary, #34c759); }
.ios-toggle input:checked + .ios-toggle-track::after { transform: translateX(18px); }
.ios-toggle-label { font-size: .875rem; color: var(--color-text); }

/* ── Lightbox overlay ────────────────────────────────────────────────────── */
.ios-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, .85); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ios-ease);
  cursor: zoom-out;
}
.ios-lightbox.is-active { opacity: 1; pointer-events: auto; }
.ios-lightbox img {
  max-width: 92vw; max-height: 92vh;
  border-radius: var(--ios-radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  transform: scale(.92); transition: transform .3s var(--ios-ease);
}
.ios-lightbox.is-active img { transform: scale(1); }
.ios-lightbox-close {
  position: absolute; top: 16px; right: 20px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: none;
  color: #fff; font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.ios-lightbox-close:hover { background: rgba(255,255,255,.3); }

/* Clickable image thumbnails for lightbox */
.ios-thumb-clickable { cursor: zoom-in; transition: transform .15s var(--ios-ease); }
.ios-thumb-clickable:hover { transform: scale(1.03); }

/* ── Buscador instantáneo de pacientes (dashboard) ───────────────────────── */
.ios-quick-find { position: relative; margin-bottom: var(--ios-gap-lg); transition: z-index 0.25s ease; }
.ios-quick-find.active { z-index: 1005; }
.ios-quick-find-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--ios-radius); padding: 8px 10px 8px 14px;
  box-shadow: 0 1px 3px rgba(16, 42, 67, .06);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.ios-quick-find.active .ios-quick-find-bar {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(88, 86, 214, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
}
.ios-quick-find-icon { opacity: .55; font-size: 1rem; flex: none; }
.ios-quick-find-input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-size: 1rem; color: var(--color-text-primary);
}
.ios-quick-find-input::-webkit-search-decoration,
.ios-quick-find-input::-webkit-search-cancel-button,
.ios-quick-find-input::-webkit-search-results-button,
.ios-quick-find-input::-webkit-search-results-decoration {
  display: none;
}
.ios-quick-find-clear {
  background: var(--color-bg-secondary, #e5e5ea);
  color: var(--color-text-secondary, #8e8e93);
  border: 0;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  margin-right: 2px;
  transition: background-color 0.2s, color 0.2s;
  flex: none;
}
.ios-quick-find-clear:hover {
  background: var(--color-border, #d1d1d6);
  color: var(--color-text-primary, #000);
}
.ios-quick-find-new { flex: none; white-space: nowrap; }
.ios-quick-find-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1010;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--ios-radius); overflow: hidden;
  box-shadow: 0 8px 28px rgba(16, 42, 67, .16);
}
.ios-quick-find-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 16px; text-decoration: none; border-bottom: 1px solid var(--color-border);
}
.ios-quick-find-row:last-child { border-bottom: 0; }
.ios-quick-find-row:hover { background: var(--color-bg-secondary); }
.ios-quick-find-name { font-weight: 500; color: var(--color-text-primary); }
.ios-quick-find-sub { font-size: .8rem; color: var(--color-text-secondary); }
.ios-quick-find-empty { padding: 14px 16px; color: var(--color-text-secondary); font-size: .88rem; }
.ios-quick-find-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.ios-quick-find-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 520px) {
  .ios-quick-find-bar { flex-wrap: wrap; }
  .ios-quick-find-new { width: 100%; text-align: center; }
}

/* ── Asistente clínico IA (drawer global) ────────────────────────────────── */
.ai-assistant { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
.ai-assistant.is-open { pointer-events: auto; }
.ai-assistant-backdrop {
  position: absolute; inset: 0; background: rgba(16, 42, 67, .28);
  opacity: 0; transition: opacity .25s var(--ios-ease);
}
.ai-assistant.is-open .ai-assistant-backdrop { opacity: 1; }
.ai-assistant-panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(380px, 90vw); display: flex; flex-direction: column;
  background: #f7f9fc; /* blanco ligeramente azulado */
  border-left: 1px solid var(--color-border);
  box-shadow: -10px 0 40px rgba(16, 42, 67, .18);
  transform: translateX(100%); transition: transform .28s var(--ios-ease);
  border-top-left-radius: var(--ios-radius-lg, 18px);
  border-bottom-left-radius: var(--ios-radius-lg, 18px);
}
.ai-assistant.is-open .ai-assistant-panel { transform: translateX(0); }
.ai-assistant-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--color-border);
}
.ai-assistant-title { font-weight: 600; font-size: 1.05rem; color: var(--color-text-primary); }
.ai-assistant-sub { font-size: .78rem; color: var(--color-text-secondary); }
.ai-assistant-close {
  border: 0; background: transparent; font-size: 1.1rem; cursor: pointer;
  color: var(--color-text-secondary); border-radius: 50%; width: 34px; height: 34px;
}
.ai-assistant-close:hover { background: rgba(16, 42, 67, .06); }
.ai-assistant-notice {
  margin: 12px 16px; padding: 10px 12px; font-size: .8rem; line-height: 1.4;
  color: #7a5a00; background: #fff7e0; border: 1px solid #f0dca0; border-radius: 12px;
}
.ai-assistant-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.ai-chip {
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-primary); border-radius: var(--ios-radius-pill);
  padding: 8px 14px; font-size: .82rem; font-weight: 550; cursor: pointer;
  transition: all .15s var(--ios-ease);
}
.ai-chip:hover { background: var(--color-accent); color: var(--color-bg-card, #fff); border-color: var(--color-accent); }
.ai-assistant-log {
  flex: 1; overflow-y: auto; padding: 8px 16px; display: flex;
  flex-direction: column; gap: 10px;
}
.ai-bubble { border-radius: 14px; padding: 11px 13px; font-size: .9rem; line-height: 1.45; max-width: 95%; }
.ai-bubble-text { white-space: pre-wrap; }
.ai-bubble-user { align-self: flex-end; background: var(--color-accent); color: var(--color-bg-card, #fff); }
.ai-bubble-ia { align-self: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-primary); }
.ai-bubble-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-bubble-actions button {
  border: 1px solid var(--color-border); background: var(--color-bg-secondary);
  color: var(--color-text-primary); border-radius: 8px; padding: 5px 10px;
  font-size: .76rem; cursor: pointer;
}
.ai-bubble-actions button:hover { background: var(--color-accent); color: var(--color-bg-card, #fff); border-color: var(--color-accent); }
.ai-assistant-input {
  display: flex; gap: 8px; align-items: flex-end; padding: 12px 16px;
  border-top: 1px solid var(--color-border); background: #f7f9fc;
}
.ai-assistant-input textarea {
  flex: 1; resize: none; border: 1px solid var(--color-border); border-radius: 14px;
  padding: 10px 12px; font-size: .9rem; font-family: inherit; outline: none;
  background: var(--color-surface); color: var(--color-text-primary);
}
.ai-send {
  flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: var(--color-accent); color: var(--color-bg-card, #fff); font-size: 1rem; cursor: pointer;
}
.ai-assistant-trigger { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; }

/* ── Dropzone de adjuntos ────────────────────────────────────────────────── */
.ios-dropzone {
  border: 1.5px dashed var(--color-border); border-radius: var(--ios-radius);
  background: var(--color-bg-secondary); padding: 18px; text-align: center;
  transition: all .15s var(--ios-ease);
}
.ios-dropzone.is-drag { border-color: var(--color-accent); background: rgba(124, 92, 224, .06); }
.ios-dropzone-glyph { font-size: 1.6rem; display: block; margin-bottom: 6px; }
.ios-dropzone input[type=file] { display: none; }
.ios-link-button {
  border: 0; background: transparent; color: var(--color-accent);
  font-weight: 500; cursor: pointer; padding: 0; text-decoration: underline;
}
.ios-dropzone-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.ios-dropzone-file { font-size: .82rem; color: var(--color-text-secondary); }

/* Evitar traslapes del panel de Asistente IA en pantallas medianas/grandes */
.main-wrapper {
  transition: margin-right 0.28s var(--ios-ease);
}
@media (min-width: 992px) {
  body.ai-assistant-open .main-wrapper {
    margin-right: 380px;
  }
  body.ai-assistant-open .ai-float-button-container {
    right: 400px;
    transition: right 0.28s var(--ios-ease);
  }
}

/* Sugerencias de qué preguntar dentro del panel (prellenan el textarea) */
.ai-suggest { padding: 0 16px 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ai-suggest-title { width: 100%; font-size: .74rem; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 2px; }
.ai-suggest-chip {
  border: 1px dashed var(--color-border); background: transparent;
  color: var(--color-text-secondary); border-radius: var(--ios-radius-pill);
  padding: 6px 11px; font-size: .76rem; cursor: pointer; transition: all .15s var(--ios-ease);
}
.ai-suggest-chip:hover { background: var(--color-accent); color: var(--color-bg-card, #fff); border-color: var(--color-accent); }

/* ── spotlight search modal (fase 2) ──────────────────────────────────────── */
.spotlight-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}
.spotlight-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.spotlight-container {
  position: relative;
  width: 100%;
  max-width: 640px;
  padding: 0 16px;
  z-index: 10;
}
.spotlight-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}
.spotlight-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
}
.spotlight-search-icon {
  color: var(--color-text-secondary);
  opacity: 0.7;
}
.spotlight-input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 1.15rem;
  color: var(--color-text-primary);
  font-family: inherit;
}
.spotlight-esc-kbd {
  font-size: 0.7rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-secondary);
  padding: 3px 6px;
}
.spotlight-results {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}
.spotlight-category-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  padding: 8px 12px 4px 12px;
  opacity: 0.8;
}
.spotlight-row {
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--color-text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
  outline: none;
  margin-bottom: 2px;
  border: 1px solid transparent;
}
.spotlight-row:hover,
.spotlight-row.active {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  text-decoration: none;
}
.spotlight-row.active {
  border-color: var(--color-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.spotlight-row-title-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.spotlight-row-title {
  font-weight: 500;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.spotlight-row-badge {
  font-size: 0.7rem;
  font-weight: 550;
  padding: 2px 6px;
  border-radius: 12px;
  text-transform: uppercase;
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}
.spotlight-row-sub {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.spotlight-details-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 6px;
  padding: 8px 12px;
  background: var(--color-bg-secondary);
  border-radius: 8px;
  font-size: 0.8rem;
  border: 1px solid var(--color-border);
}
.spotlight-details-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-secondary);
}
.spotlight-details-label {
  font-weight: 500;
  color: var(--color-text-primary);
}
.spotlight-empty {
  padding: 24px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}
.spotlight-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 10px 20px;
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}
.spotlight-footer kbd {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text-primary);
  padding: 1px 4px;
  font-family: inherit;
}

/* ── Confirmaciones iOS-Style (Action Sheets / Modales) ──────────────────── */
.ios-alert-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.22s var(--ios-ease);
}
.ios-alert-backdrop.open {
  opacity: 1;
}
.ios-alert {
  background: var(--color-surface);
  width: min(280px, 90%);
  border-radius: 14px;
  box-shadow: var(--shadow-elevated);
  text-align: center;
  overflow: hidden;
  transform: scale(1.06);
  transition: transform 0.22s var(--ios-ease);
}
.ios-alert-backdrop.open .ios-alert {
  transform: scale(1);
}
.ios-alert-body {
  padding: 20px 16px;
}
.ios-alert-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}
.ios-alert-message {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
  margin: 0;
}
.ios-alert-actions {
  display: flex;
  border-top: 1px solid var(--color-border);
}
.ios-alert-action {
  flex: 1;
  padding: 12px;
  font-weight: 550;
  font-size: 0.95rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--color-accent);
  outline: none;
  transition: background-color 0.15s;
  min-height: 44px;
}
.ios-alert-action:hover {
  background-color: var(--color-bg-secondary);
}
.ios-alert-action:active {
  background-color: var(--color-border);
}
.ios-alert-action.cancel {
  font-weight: 400;
  border-right: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}
.ios-alert-action.destructive {
  color: var(--color-error);
}


/* ============================================================================
   ExpedienteGine — Premium iOS/macOS Modernization Overrides (Apple Clinical Minimal)
   ============================================================================ */

/* ── SF Pro Typography & Globals ── */
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  letter-spacing: -0.015em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .ios-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  letter-spacing: -0.035em !important;
}

/* ── Translucent Sidebar (Glassmorphism) ── */
.sidebar {
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  transition: width 0.25s var(--ios-ease), background-color 0.3s ease, border-right 0.3s ease !important;
}

body[data-theme="oscuro"] .sidebar {
  background-color: rgba(0, 0, 0, 0.6) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body[data-theme="claro"] .sidebar {
  background-color: rgba(255, 255, 255, 0.7) !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Sidebar nav link enhancements */
.sidebar .nav-link {
  transition: transform 0.2s var(--ios-ease), background-color 0.2s var(--ios-ease), color 0.2s var(--ios-ease) !important;
  border-radius: 10px !important;
  margin: 3px 10px !important;
}

.sidebar .nav-link:hover {
  transform: translateX(4px);
}
body[data-theme="claro"] .sidebar .nav-link:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  /* En tema claro el hover es un fondo CLARO → el texto debe seguir oscuro.
     design-system.css fuerza color:#fff !important (pensado para sidebar oscuro);
     aquí lo revertimos para que no quede blanco sobre claro (invisible). */
  color: var(--color-sidebar-text, #1d2433) !important;
}
body[data-theme="claro"] .sidebar .nav-link:hover .nav-icon,
body[data-theme="claro"] .sidebar .nav-link:hover .nav-label {
  color: var(--color-sidebar-text, #1d2433) !important;
}
body[data-theme="oscuro"] .sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

.sidebar .nav-link.active {
  background: var(--color-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(var(--color-accent-rgb, 74, 156, 150), 0.3) !important;
}

/* ── Translucent Topbar (Desktop: Liquid Glass; Móvil: opaco) ── */
.topbar {
  background-color: var(--glass-bg-strong, var(--color-surface)) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-bottom: 1px solid var(--glass-edge, var(--color-border)) !important;
  transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

/* ── Premium Card Transitions & Elevations ── */
.ios-card, .ios-card-draggable {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.25s var(--ios-ease), box-shadow 0.25s var(--ios-ease), border-color 0.25s var(--ios-ease), background-color 0.25s var(--ios-ease) !important;
  border-radius: 16px !important;
}

body[data-theme="oscuro"] .ios-card,
body[data-theme="oscuro"] .ios-card-draggable {
  background-color: var(--color-surface) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--color-border) !important;
}

.ios-card:hover, .ios-card-draggable:hover {
  transform: translateY(-4px) scale(1.008) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35) !important;
  border-color: var(--color-accent) !important;
}

/* ── Apple-style Form Controls ── */
.form-control, .form-select, textarea {
  border-radius: 10px !important;
  border: 1px solid var(--color-input-border) !important;
  background-color: var(--color-input-bg) !important;
  color: var(--color-text-primary) !important;
  padding: 10px 14px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

textarea {
  min-height: 120px;
  width: 100% !important;
  box-sizing: border-box !important;
}


.form-control:focus, .form-select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb, 159, 122, 234), 0.35) !important;
}

body[data-theme="oscuro"] .form-control:focus,
body[data-theme="oscuro"] .form-select:focus,
body[data-theme="oscuro"] textarea:focus {
  background-color: color-mix(in srgb, var(--color-accent) 5%, var(--color-input-bg)) !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb, 159, 122, 234), 0.35) !important;
  outline: none !important;
}

/* ── Siri Active Wave & Pulse Animation ── */
@keyframes siri-pulse {
  0% { box-shadow: 0 0 0 0 rgba(10, 132, 255, 0.6); transform: scale(1); }
  70% { box-shadow: 0 0 0 12px rgba(10, 132, 255, 0); transform: scale(1.03); }
  100% { box-shadow: 0 0 0 0 rgba(10, 132, 255, 0); transform: scale(1); }
}

.ai-float-button.active {
  animation: siri-pulse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
  border-color: #0a84ff !important;
}

/* Siri-style waveform representation for container */
.siri-wave-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 36px;
  padding: 0 10px;
}

.siri-wave-bar {
  width: 3px;
  height: 4px;
  background: linear-gradient(180deg, #0a84ff, #bf5af2);
  border-radius: 2px;
  animation: siri-wave-anim 1.2s ease-in-out infinite alternate;
}

.siri-wave-bar:nth-child(2) { animation-delay: 0.15s; height: 12px; }
.siri-wave-bar:nth-child(3) { animation-delay: 0.3s; height: 24px; }
.siri-wave-bar:nth-child(4) { animation-delay: 0.45s; height: 16px; }
.siri-wave-bar:nth-child(5) { animation-delay: 0.6s; height: 6px; }

@keyframes siri-wave-anim {
  0% { transform: scaleY(0.4); }
  100% { transform: scaleY(1.8); }
}

/* ── OB/GYN Gestational Widget ── */
.gestational-progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  position: relative;
  overflow: visible;
  margin: 16px 0;
}

.gestational-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #30d158, #34c759);
  border-radius: 4px;
  width: 0;
  transition: width 0.5s ease-out;
}

.gestational-progress-node {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  background: #ffffff;
  border: 3px solid #30d158;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Ultrasound card zoom */
.ultrasound-card-img {
  overflow: hidden;
  border-radius: 10px;
  position: relative;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ultrasound-card-img img {
  width: 100%;
  height: auto;
  transition: transform 0.3s var(--ios-ease);
}

.ultrasound-card-img:hover img {
  transform: scale(1.05);
}

/* ── Segmented Control Look for SOAP Sections ── */
.soap-tabs {
  display: flex;
  background: rgba(255, 255, 255, 0.05);
  padding: 3px;
  border-radius: 10px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.soap-tab-btn {
  flex: 1;
  text-align: center;
  border: 0;
  background: transparent;
  padding: 8px;
  font-size: 0.85rem;
  font-weight: 550;
  color: var(--color-text-secondary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.soap-tab-btn.active {
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ── Low-Power Mode Overrides (Scaling for modest hardware) ── */
body.ios-low-power .sidebar,
body.ios-low-power .topbar {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.ios-low-power[data-theme="oscuro"] .sidebar {
  background-color: #121212 !important;
}
body.ios-low-power[data-theme="oscuro"] .topbar {
  background-color: #000000 !important;
}
body.ios-low-power[data-theme="claro"] .sidebar {
  background-color: #ffffff !important;
}
body.ios-low-power[data-theme="claro"] .topbar {
  background-color: #ffffff !important;
}
body.ios-low-power .ios-card,
body.ios-low-power .ios-card-draggable {
  transition: none !important;
}
body.ios-low-power .ios-card:hover,
body.ios-low-power .ios-card-draggable:hover {
  transform: none !important;
  box-shadow: var(--ios-shadow) !important;
  border-color: var(--color-border) !important;
}
body.ios-low-power .ultrasound-card-img img {
  transition: none !important;
}
body.ios-low-power .ultrasound-card-img:hover img {
  transform: none !important;
}
body.ios-low-power .sidebar .nav-link {
  transition: none !important;
}
body.ios-low-power .sidebar .nav-link:hover {
  transform: none !important;
}


/* ── Optimizaciones Adicionales para Móviles y Tablets ───────────────────── */
@media (max-width: 768px) {

  /* Desactiva el auto-zoom en inputs de texto en iOS Safari al forzar fuente >= 16px */
  .ios-field .form-control,
  .ios-field .form-select,
  .ios-field input,
  .ios-field textarea,
  .ios-field select,
  .ios-search input,
  .form-control,
  .form-select,
  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Rediseño del listado de pacientes en móvil */
  .ios-mobile-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .ios-mobile-card-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--ios-radius-lg);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none !important;
    transition: background-color 0.12s ease;
    cursor: pointer;
    box-shadow: var(--ios-shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
  }

  .ios-mobile-card-item:active {
    background-color: color-mix(in srgb, var(--color-primary, #5856d6) 8%, var(--color-surface));
  }

  .ios-mobile-card-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
  }

  .ios-mobile-card-item-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .ios-mobile-card-item-info {
    flex: 1;
    min-width: 0;
  }

  .ios-mobile-card-item-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ios-mobile-card-item-meta {
    font-size: 0.82rem;
    color: var(--color-text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }

  .ios-mobile-card-whatsapp {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #e8f9ed;
    color: #25D366;
    flex-shrink: 0;
    transition: transform 0.1s ease;
  }
  .ios-mobile-card-whatsapp:active {
    transform: scale(0.92);
  }
}

/* ── Overrides adicionales de accesibilidad móvil (iPhone/iPad/Android) ── */
@media (max-width: 768px) {
  :root {
    --ios-gap: var(--space-2, 8px);
    --ios-gap-lg: var(--space-3, 12px);
    --ios-pad: var(--space-3, 12px);
  }

  .ios-page {
    padding: 8px;
    /* Debe igualar la reserva de la regla móvil de arriba (~línea 333): la
       barra de acciones flotante + el tab bar ocupan ~150px; con 100px el
       contenido del final (y los encabezados de sección al hacer scroll)
       quedaban tapados por la barra (auditoría UIX iPhone, consulta). */
    padding-bottom: calc(168px + env(safe-area-inset-bottom));
  }

  /* La consulta tiene su propia barra (.ios-bottom-bar--consulta) más alta:
     los spans de estado ocupan toda la fila en móvil + 3 botones. Reserva
     extra SOLO en esa página para que la barra no tape encabezados. */
  .ios-page--consulta {
    padding-bottom: calc(215px + env(safe-area-inset-bottom));
  }
  .ios-page--consulta .ios-advanced-section,
  .ios-page--consulta .ios-collapsible,
  .ios-page--consulta .ios-field-group {
    scroll-margin-bottom: 200px;
  }

  .ios-card {
    padding: 12px;
    border-radius: 10px;
  }

  .ios-field-group {
    padding: 4px 10px;
    border-radius: 10px;
  }

  .ios-field label {
    font-size: 0.78rem;
    margin-bottom: 2px;
  }

  .ios-field input,
  .ios-field select {
    font-size: 0.95rem;
    padding: 4px 0 !important;
  }
}

/* ── Estilos globales para texto de placeholder en inputs y textareas ── */
input::placeholder,
textarea::placeholder,
.form-control::placeholder {
  color: var(--color-text-secondary) !important;
  opacity: 0.55 !important;
}

/* Feedback táctil iOS (Active State) */
.ios-card-clickable:active,
.cama-card:active,
.timeline-photo-card:active,
.ios-row-clickable:active,
.ios-action-button:active {
  transform: scale(0.96);
  opacity: 0.85;
  transition: transform 0.1s ease, opacity 0.1s ease;
}

/* ── Custom Premium Scrollbars ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 99px;
  border: 1px solid transparent;
}
body[data-theme="oscuro"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}
body[data-theme="oscuro"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
body[data-theme="oscuro"] * {
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* ── Dropdown Menus (Glassmorphism & Legibilidad) ── */
.dropdown-menu {
  /* Vidrio esmerilado: respeta Liquid Glass de iOS 27 vía tokens;
     las guardas de themes.css lo vuelven sólido si el usuario desactiva
     vidrio o pide más contraste. */
  background: var(--glass-bg-strong, #fff) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  /* Fuerza una capa de composición en WebKit para evitar bugs de transparencia en iOS/Safari */
  transform: translate3d(0, 0, 0) !important;
  border: 1px solid var(--glass-edge, var(--color-border)) !important;
  box-shadow: var(--shadow-elevated) !important;
  border-radius: var(--radius-md, 14px) !important;
  padding: 6px 0 !important;
  transition: background-color 0.3s ease, border-color 0.3s ease !important;
}

/* Elementos de la lista del menú */
.dropdown-menu .dropdown-item {
  color: var(--color-text-primary) !important;
  font-family: var(--font-sans);
  font-size: 0.9rem !important;
  padding: 8px 16px !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

body[data-theme="claro"] .dropdown-menu .dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: var(--color-text-primary) !important;
}

body[data-theme="oscuro"] .dropdown-menu .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--color-text-primary) !important;
}

/* Divisor dentro del menú */
.dropdown-menu .dropdown-divider {
  border-top: 1px solid var(--color-border) !important;
  margin: 6px 0 !important;
  opacity: 1 !important;
}

/* Texto especial e email del usuario */
.dropdown-menu .dropdown-item-text {
  color: var(--color-text-secondary) !important;
  font-size: 0.8rem !important;
  padding: 6px 16px !important;
}

/* Mantener el color de cerrar sesión */
.dropdown-menu .dropdown-item.text-danger {
  color: var(--color-error, #EF4444) !important;
}
.dropdown-menu .dropdown-item.text-danger:hover {
  background-color: rgba(239, 68, 68, 0.08) !important;
  color: var(--color-error, #EF4444) !important;
}


/* ── Corrección de contraste en Modo Oscuro (Acento Blanco) ── */
body[data-theme="oscuro"] .sidebar .nav-link.active {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body[data-theme="oscuro"] .sidebar .nav-link.active .nav-label,
body[data-theme="oscuro"] .sidebar .nav-link.active .nav-icon,
body[data-theme="oscuro"] .sidebar .nav-link.active:hover,
body[data-theme="oscuro"] .sidebar .nav-link.active:hover .nav-label,
body[data-theme="oscuro"] .sidebar .nav-link.active:hover .nav-icon {
  color: #ffffff !important;
}

body[data-theme="oscuro"] .ios-accent-button,
body[data-theme="oscuro"] .ios-accent-button:hover,
body[data-theme="oscuro"] .ios-accent-button:active,
body[data-theme="oscuro"] .ios-accent-button *,
body[data-theme="oscuro"] .ios-accent-button:hover *,
body[data-theme="oscuro"] .ios-accent-button:active * {
  color: #000000 !important;
}

body[data-theme="oscuro"] .ios-stepper .ios-step.active .ios-step-dot {
  color: #000000 !important;
}

body[data-theme="oscuro"] .ios-floating-action-button,
body[data-theme="oscuro"] .ios-floating-action-button:hover,
body[data-theme="oscuro"] .ios-floating-action-button:active,
body[data-theme="oscuro"] .ios-floating-action-button *,
body[data-theme="oscuro"] .ios-floating-action-button:hover *,
body[data-theme="oscuro"] .ios-floating-action-button:active * {
  color: #000000 !important;
}

body[data-theme="oscuro"] .ios-tabbar .ios-tabbar-create .ios-tabbar-glyph,
body[data-theme="oscuro"] .ios-tabbar .ios-tabbar-create .ios-tabbar-glyph *,
body[data-theme="oscuro"] .ios-tabbar .ios-tabbar-create:hover .ios-tabbar-glyph,
body[data-theme="oscuro"] .ios-tabbar .ios-tabbar-create:hover .ios-tabbar-glyph * {
  color: #000000 !important;
}

body[data-theme="oscuro"] .ai-chip:hover,
body[data-theme="oscuro"] .ai-chip:hover * {
  color: #000000 !important;
}

body[data-theme="oscuro"] .ai-bubble-user,
body[data-theme="oscuro"] .ai-bubble-user * {
  color: #000000 !important;
}

body[data-theme="oscuro"] .ai-bubble-actions button:hover,
body[data-theme="oscuro"] .ai-bubble-actions button:hover * {
  color: #000000 !important;
}

body[data-theme="oscuro"] .ai-send,
body[data-theme="oscuro"] .ai-send * {
  color: #000000 !important;
}

/* Botones Primarios en modo oscuro (acento blanco, por ende texto negro) */
body[data-theme="oscuro"] .btn-primary,
body[data-theme="oscuro"] .btn-primary:hover,
body[data-theme="oscuro"] .btn-primary:active,
body[data-theme="oscuro"] .btn-primary:focus,
body[data-theme="oscuro"] .btn-primary *,
body[data-theme="oscuro"] .btn-primary:hover *,
body[data-theme="oscuro"] .btn-primary:active *,
body[data-theme="oscuro"] .btn-primary:focus * {
  color: #000000 !important;
}

/* Botones de UI iOS en modo oscuro */
body[data-theme="oscuro"] .ios-primary-button {
  background: var(--color-accent);
  color: #000000;
}
body[data-theme="oscuro"] .ios-primary-button:hover {
  filter: brightness(0.9);
  color: #000000;
}
body[data-theme="oscuro"] .ios-primary-button *,
body[data-theme="oscuro"] .ios-primary-button:hover * {
  color: #000000;
}

body[data-theme="oscuro"] .ios-secondary-button {
  background: transparent;
  color: var(--color-text-primary);
  border-color: rgba(255, 255, 255, 0.25);
}
body[data-theme="oscuro"] .ios-secondary-button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary);
  border-color: rgba(255, 255, 255, 0.35);
}
body[data-theme="oscuro"] .ios-secondary-button *,
body[data-theme="oscuro"] .ios-secondary-button:hover * {
  color: var(--color-text-primary);
}

/* Tabs activas en modo oscuro (fondo de pestaña gris oscuro, por ende texto claro) */
body[data-theme="oscuro"] .nav-tabs .nav-link.active,
body[data-theme="oscuro"] .nav-tabs .nav-link.active * {
  color: var(--color-text-primary) !important;
}

/* ── Ajustes de Listas y Acciones en Pantallas Estrechas (Móviles/Tablets) ── */
@media (max-width: 768px) {
  /* Cabeceras de sección con botones: apilar elementos y evitar desbordamiento */
  .section-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .section-header .d-flex {
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .section-header .d-flex .btn,
  .section-header .d-flex a.btn {
    flex: 1 1 auto !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    padding: 10px 14px !important;
    min-height: 38px !important;
  }
}

@media (max-width: 576px) {
  /* Fila tipo lista con botones: permitir envoltura y colocar botones abajo */
  .ios-card-list .ios-row {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 12px !important;
    padding: 12px 4px !important;
  }

  /* El enlace principal con los textos ocupa el ancho restante en la primera línea */
  .ios-card-list .ios-row > a[style*="flex:1"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* El botón de acción se envuelve a la siguiente línea al 100% de ancho */
  .ios-card-list .ios-row > .btn,
  .ios-card-list .ios-row > a.btn {
    flex: 1 1 100% !important;
    margin-top: 8px !important;
    margin-left: 30px !important; /* Alineado con el nombre del paciente tras el indicador */
    text-align: center !important;
    justify-content: center !important;
    order: 10 !important;
  }

  /* Chevron se mantiene al lado derecho en la primera línea */
  .ios-card-list .ios-row .ios-chevron {
    order: 3 !important;
  }
}

/* Filas de agenda en teléfono: la fecha fija (130px) + pill + chevron aplastaban
   el nombre a una columna de letras. En angosto la fila se apila: fecha y estado
   arriba, nombre y detalle abajo a lo ancho. */
@media (max-width: 576px) {
  .ios-agenda-row { flex-wrap: wrap; row-gap: 2px; }
  .ios-agenda-row > div:first-child { width: auto !important; order: 1; font-size: .82rem !important; }
  .ios-agenda-row > div:nth-child(3) { order: 2; margin-left: auto; margin-right: 0 !important; }
  .ios-agenda-row .ios-row-main { order: 3; width: 100%; flex: none; padding-left: 0 !important; }
  .ios-agenda-row .ios-chevron { display: none; }
}

/* iOS hace auto-zoom al enfocar inputs con fuente <16px (y el zoom se queda
   pegado). Con 16px en móvil el enfoque ya no dispara zoom. */
@media (max-width: 768px) {
  input.form-control, textarea.form-control, select.form-select,
  input[type="text"], input[type="search"], input[type="password"],
  input[type="email"], input[type="number"] { font-size: 16px; }
}

/* Filas de "Pendientes": mismo apilado que el calendario, pero ahí la fila
   envuelve un <a> con la fecha fija de 130px adentro. */
@media (max-width: 576px) {
  .ios-agenda-row > a { flex-wrap: wrap; row-gap: 2px; }
  .ios-agenda-row > a > div:first-child {
    width: auto !important; order: 1; display: flex; gap: 6px;
    font-size: .82rem !important; align-items: baseline;
  }
  .ios-agenda-row > a > div:first-child br { display: none; }
  .ios-agenda-row > a > div:nth-child(3) { order: 2; margin-left: auto; margin-right: 0 !important; }
  .ios-agenda-row > a .ios-row-main { order: 3; width: 100%; flex: none !important; padding-left: 0 !important; }
}

/* Topbar mínima en móvil: los selectores rápidos de idioma/tema salen de la
   barra (el tema vive en el menú del avatar; el idioma en Configuración). */
@media (max-width: 768px) {
  #lang-switcher, #theme-switcher-topbar { display: none; }
}

/* El asistente flotante se esconde mientras haces scroll (tapaba filas) y
   reaparece al detenerte. */
.ai-float-button { transition: transform .25s ease, opacity .25s ease; }
.ai-float-button.fab-oculto { transform: translateY(140px); opacity: 0; pointer-events: none; }

/* Anti-flash al navegar: el contenido entra con un fundido corto en vez del
   parpadeo en blanco/negro del cambio de página. */
@media (max-width: 768px) {
  .content-area { animation: pagina-entra .16s ease-out; }
  @keyframes pagina-entra { from { opacity: .35; } to { opacity: 1; } }
}

/* Escudo de la tabbar: la píldora flota con huecos alrededor y los toques que
   caían en el hueco atravesaban al contenido de atrás (clicks fantasma en filas).
   Banda invisible de borde a borde que absorbe esos toques, como una tab bar
   nativa. Vive DETRÁS de la píldora (z-index -1 dentro de su contexto). */
@media (max-width: 768px) {
  .ios-tabbar::before {
    content: "";
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(88px + env(safe-area-inset-bottom));
    z-index: -1;
  }
}

/* ── Material vidrio reutilizable (F3: sheets, chips, menús) ──────────────── */
.material-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-inner), var(--glass-shadow);
}

/* Menús desplegables de la topbar (avatar, notificaciones): sólido para máxima legibilidad. */
.topbar .dropdown-menu {
  background: var(--color-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--color-border) !important;
}

/* ── Scroll-edge (iOS 27): Removido para evitar traslapes del contenido clínico y la fecha con la barra de estado en el iPhone. ── */

/* ── C2 · iPad-3: segmentos "Sin capturar / No / Sí" ──────────────────────────
   En el ancho de columna de iPad (13") las tres opciones se estiraban a lo
   largo de toda la columna y se leían como una barra, no como un control.
   Se les pone tope de ancho a partir de tablet; en móvil siguen a todo lo ancho
   porque ahí el dedo agradece el área grande.
   La regla vive aquí (y no en el parcial de AGO) para no pisar el <style> del
   propio parcial: `.hc-ago-card .ago-segmented` gana por especificidad. */
   El tope SOLO aplica a los grupos cortos (hasta cuatro opciones). BI-RADS
   tiene diez: metidas a la fuerza en 320 px el texto no cabía y las últimas se
   salían del marco. Si el navegador no soporta `:has()` la regla entera se
   descarta y esos grupos quedan a todo lo ancho, que es justo lo que necesitan. */
@media (min-width: 768px) {
  .hc-ago-card .ago-segmented:not(:has(> :nth-child(5))) { max-width: 320px; }
}

/* ── Validación de cédulas profesionales ──────────────────────────────────────
   Insignias de la columna «Cédula» del panel de usuarios y de la pantalla de
   dictamen. Viven aquí (y no en línea) por la CSP. */
/* La columna «Cédula» se añadió a una tabla que ya iba justa de ancho: con
   `white-space: nowrap` empujaba las columnas de la derecha fuera del
   contenedor y «Clave» quedaba cortada. Se acota el ancho y se permite que el
   contenido baje de línea. El contenedor `.table-responsive` scrollea en
   horizontal si aun así no cabe. */
.cedula-celda {
  font-size: 0.8rem;
  max-width: 150px;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.cedula-numero { font-variant-numeric: tabular-nums; }
.cedula-sin-numero { color: var(--color-text-secondary); }

.cedula-badge {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.cedula-badge.is-validada {
  background: rgba(52, 199, 89, 0.14);
  color: var(--color-success, #1c7a3c);
  border-color: rgba(52, 199, 89, 0.45);
}
.cedula-badge.is-pendiente {
  background: rgba(142, 142, 147, 0.16);
  color: var(--color-text-secondary);
  border-color: rgba(142, 142, 147, 0.45);
}
.cedula-badge.is-rechazada {
  background: rgba(255, 59, 48, 0.14);
  color: var(--color-error, #c02a21);
  border-color: rgba(255, 59, 48, 0.45);
}
.cedula-badge.is-no-aplica {
  background: rgba(0, 122, 255, 0.12);
  color: var(--color-accent, #0a63c9);
  border-color: rgba(0, 122, 255, 0.4);
}

.cedula-puntos { margin-top: 3px; display: flex; gap: 8px; align-items: center; }
.cedula-punto {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: help;
}
.cedula-punto::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.cedula-punto.es-bloqueante { color: var(--color-error, #c02a21); }
.cedula-punto.es-bloqueante::before { background: var(--color-error, #ff3b30); }
.cedula-punto.es-advertencia { color: #a06a00; }
.cedula-punto.es-advertencia::before { background: #ff9f0a; }

.cedula-dictaminar {
  display: inline-block;
  margin-top: 3px;
  font-size: 0.72rem;
  text-decoration: none;
  color: var(--color-accent, #007aff);
}
.cedula-dictaminar:hover { text-decoration: underline; }

/* Pantalla de dictamen */
.cedula-volver { text-decoration: none; font-size: 0.85rem; }
.cedula-titulo { margin-top: 8px; }
.cedula-card { max-width: 720px; margin-top: 16px; }
.cedula-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.cedula-etiqueta { display: block; font-size: 0.72rem; text-transform: uppercase; }
.cedula-link-sep { display: block; font-size: 0.78rem; margin-top: 2px; }
.cedula-subtitulo { margin: 0 0 8px; }
.cedula-hallazgos { list-style: none; padding: 0; margin: 0 0 12px; }
.cedula-hallazgo {
  font-size: 0.85rem;
  padding: 6px 10px;
  border-radius: 8px;
  margin-bottom: 6px;
  border-left: 3px solid var(--color-border);
  background: var(--color-bg-secondary);
}
.cedula-hallazgo.sev-bloqueante { border-left-color: var(--color-error, #ff3b30); }
.cedula-hallazgo.sev-advertencia { border-left-color: #ff9f0a; }
.cedula-aviso-bloqueo {
  font-size: 0.85rem;
  color: var(--color-error, #c02a21);
  background: rgba(255, 59, 48, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
}
.cedula-form { margin-top: 20px; }
.cedula-campo { margin-bottom: 14px; }
.cedula-label { font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; display: block; }
.cedula-campo input[type="text"],
.cedula-campo select,
.cedula-campo textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-input-bg, #fff);
  color: var(--color-text-primary);
  padding: 8px 12px;
  font-size: 0.9rem;
}
.cedula-ayuda { font-size: 0.75rem; margin-top: 3px; }
.cedula-error { font-size: 0.8rem; color: var(--color-error, #c02a21); margin-top: 3px; }
.cedula-acciones { display: flex; gap: 12px; align-items: center; margin-top: 20px; }


/* ── Segmented control en columnas estrechas ──────────────────────────────
   La clase base oculta la barra de scroll a propósito (estética iOS). Cuando
   el contenedor padre es más angosto que las pestañas —una columna lateral, un
   teléfono— eso deja al usuario sin NINGUNA señal de que hay pestañas fuera de
   vista: parece que la interfaz está rota, no que hay que desplazar.

   `es-desbordable` restituye la señal con un degradado en el borde derecho,
   que aparece solo cuando de verdad hay contenido más allá. */
.ios-segmented-control.es-desbordable {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}

/* Sin desbordamiento no se enmascara nada: el degradado sobre un control que
   cabe entero se veria como un defecto. */
@supports (animation-timeline: scroll()) {
  .ios-segmented-control.es-desbordable {
    animation: desvanecer-borde linear;
    animation-timeline: scroll(self inline);
  }
  @keyframes desvanecer-borde {
    to { -webkit-mask-image: none; mask-image: none; }
  }
}

/* ── Tablas con columnas ajustables ───────────────────────────────────────────
   Se activan con `data-columnas-ajustables` en la <table>; ver
   static/js/tabla-columnas.js. El layout fijo es lo que hace que el ancho que
   pone el médico se RESPETE: sin él el navegador reparte a su criterio y el
   arrastre no sirve de nada. */
.tabla-ajustable { table-layout: fixed; width: 100%; }
.tabla-ajustable th { position: relative; }
/* Un identificador largo sin espacios (nombre de archivo, folio) desbordaría la
   celda en layout fijo en vez de partirse. */
.tabla-ajustable th,
.tabla-ajustable td { overflow-wrap: anywhere; }

.tabla-tirador {
  position: absolute;
  top: 0;
  right: -5px;
  width: 10px;      /* zona de agarre generosa: con el dedo, 1px no se atina */
  height: 100%;
  cursor: col-resize;
  touch-action: none;   /* el arrastre ajusta la columna, no desplaza la página */
  z-index: 2;
}
.tabla-tirador::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 4px;
  width: 2px;
  height: 60%;
  border-radius: 2px;
  background: var(--color-border);
  opacity: 0;
  transition: opacity .15s ease, background .15s ease;
}
.tabla-tirador:hover::after,
.tabla-tirador:focus-visible::after,
.esta-ajustando .tabla-tirador::after { opacity: 1; background: var(--color-accent); }
.tabla-tirador:focus-visible { outline: none; }
/* Mientras se arrastra, el cursor no debe cambiar al pasar sobre el texto ni
   seleccionarse media tabla. */
.esta-ajustando { user-select: none; }
.esta-ajustando * { cursor: col-resize !important; }

/* ── Ver como otro especialista (sólo superusuario) ───────────────────────────
   Desplegable discreto + señal ámbar cuando hay una especialidad prestada: el
   aviso importa, porque a partir de ahí la pantalla NO es la del propio perfil.
   Todos los colores salen de variables de tema: en oscuro se resuelven solas. */
.selector-esp-vista {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--ios-radius-pill);
  background: var(--color-bg-secondary); color: var(--color-text-secondary);
  font-size: .78rem; line-height: 1;
}
.selector-esp-vista__label { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.selector-esp-vista__select {
  border: 0; background: transparent; color: inherit;
  font: inherit; font-weight: 600; cursor: pointer;
  max-width: 15rem; padding: 2px 4px;
}
.selector-esp-vista__select:focus-visible { outline: 2px solid var(--color-accent); border-radius: 6px; }
/* Las opciones las pinta el sistema: sin color propio salen con el fondo del
   navegador y en modo oscuro quedaban texto oscuro sobre oscuro. */
.selector-esp-vista__select option { background: var(--color-surface); color: var(--color-text-primary); }
.selector-esp-vista.is-activo {
  background: var(--color-warning-soft); color: var(--color-warning);
  font-weight: 600;
}

/* ── Avisos del sistema (mensajes de Django) ──────────────────────────────────
   Antes se pintaban con `.alert` de Bootstrap: una barra gris de ancho completo
   pegada al borde superior, con la «×» de Bootstrap y sin irse nunca. iOS no
   hace eso — hace algo que aparece, se lee y se va.

   El HTML lo pinta el servidor (base.html), así que el aviso se ve aunque el JS
   falle o tarde; ios-ui.js sólo añade el descarte automático y el gesto. Un
   aviso que SÓLO existe si corre JavaScript es un aviso que a veces no existe,
   y aquí lo que se anuncia es si la consulta se guardó. */
.choye-avisos {
  position: fixed;
  /* DEBAJO del topbar, no encima: a `top: 8px` el aviso tapaba el título de la
     pantalla y la navegación justo cuando el médico necesita las dos cosas
     («no se pudo guardar» y volver atrás). El 64px es la misma altura de
     `.topbar` en design-system.css y la que ya usa la tira de pestañas fija. */
  top: calc(64px + env(safe-area-inset-top, 0px) + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  width: min(560px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.choye-aviso {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--ios-radius, 14px);
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
  font-size: .9rem;
  line-height: 1.35;
  /* El vidrio del cromo, para que no parezca una caja pegada encima. */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: choye-aviso-entra .28s var(--ios-ease, cubic-bezier(.2, .8, .3, 1));
}

/* El color entra por el ícono y una banda lateral fina, no tiñendo el fondo:
   un fondo rojo de ancho completo grita, y aquí casi todo lo que se anuncia es
   rutinario. El borde sí distingue de un vistazo. */
.choye-aviso::before {
  content: "";
  flex: none;
  align-self: stretch;
  width: 3px;
  border-radius: 3px;
  background: var(--color-border);
}
.choye-aviso.es-exito::before { background: var(--color-success); }
.choye-aviso.es-error::before { background: var(--color-error); }
.choye-aviso.es-aviso::before { background: var(--color-warning); }
.choye-aviso.es-exito .choye-aviso-glifo { color: var(--color-success); }
.choye-aviso.es-error .choye-aviso-glifo { color: var(--color-error); }
.choye-aviso.es-aviso .choye-aviso-glifo { color: var(--color-warning); }

.choye-aviso-glifo {
  flex: none;
  display: inline-flex;
  margin-top: 1px;
  color: var(--color-text-secondary);
}
.choye-aviso-texto { flex: 1; min-width: 0; }
.choye-aviso-cerrar {
  flex: none;
  width: 28px;
  height: 28px;
  margin: -3px -4px 0 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.choye-aviso-cerrar:hover { background: var(--color-bg-secondary); }

.choye-aviso.se-va {
  animation: choye-aviso-sale .22s var(--ios-ease, ease-in) forwards;
}

@keyframes choye-aviso-entra {
  from { opacity: 0; transform: translateY(-14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes choye-aviso-sale {
  to { opacity: 0; transform: translateY(-10px) scale(.98); }
}

@media (prefers-reduced-motion: reduce) {
  .choye-aviso, .choye-aviso.se-va { animation: none; }
  .choye-aviso.se-va { opacity: 0; }
}

/* ── Tirar para refrescar ────────────────────────────────────────────────────
   El indicador nace escondido y arriba: lo baja el dedo. Se posiciona bajo el
   topbar por la misma razón que los avisos — encima taparía el título. */
.choye-tirar {
  position: fixed;
  top: calc(64px + env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 99998;
  width: 34px;
  height: 34px;
  margin-top: -34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
}
.choye-tirar svg { width: 18px; height: 18px; }

/* Pasado el umbral el ícono se tiñe de acento: es la señal de «suelta ya», y
   sin ella hay que adivinar cuánto falta. */
.choye-tirar.va-a-soltar { color: var(--color-action, var(--color-accent)); }

.choye-tirar.girando svg { animation: choye-tirar-gira .7s linear infinite; }
@keyframes choye-tirar-gira { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .choye-tirar.girando svg { animation: none; }
}

/* ── Atrás / adelante / recargar de la app instalada ─────────────────────────
   Sólo se ve cuando `app-instalada.js` le quita el `hidden`: en una pestaña
   normal el navegador ya da estos botones. */
.topbar-nav-instalada { display: flex; align-items: center; gap: 2px; flex: none; }
.topbar-nav-instalada[hidden] { display: none; }
.topbar-nav-instalada button {
  display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  border: none; border-radius: 8px;
  background: transparent; color: var(--color-text-secondary);
  cursor: pointer; transition: background .15s, color .15s;
}
.topbar-nav-instalada button:hover:not(:disabled) {
  background: var(--color-bg-secondary); color: var(--color-text-primary);
}
.topbar-nav-instalada button:disabled { opacity: .3; cursor: default; }
.topbar-nav-instalada button:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 1px;
}

/* ── Grupo dentro del menú lateral ───────────────────────────────────────────
   Reusa `.sidebar-more`, que ya decidió cómo se ve un colapsable en esta barra;
   aquí sólo va lo que cambia por estar ANIDADO: ocupar el ancho de su `<li>` y
   sangrar los hijos para que se lea de un vistazo qué cuelga de qué. */
.sidebar-grupo { flex: 1 1 auto; min-width: 0; margin-top: 0 !important; }
.sidebar-grupo > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
/* La sangría va con borde, no sólo con espacio: a 260px de ancho el hueco solo
   no basta para ver la jerarquía. */
.sidebar-grupo > ul {
  margin-left: 14px;
  padding-left: 8px;
  border-left: 1px solid var(--color-border);
}
.sidebar-grupo > ul .nav-link { padding-left: 8px; }
/* El chevron NO se declara aquí: es el mismo de `.sidebar-more`, que este
   `<details>` ya lleva. Estuvo duplicado un tiempo por sospechar que la regla
   compartida no llegaba al grupo ANIDADO — se midió y sí llega (`rotate` real
   en Chrome y en WebKit de iOS, en los dos estados). Dos copias del mismo
   dibujo son dos direcciones que acaban distintas sin que nadie lo note, que es
   justo la clase de error que se reportó. Una sola regla, arriba. */
/* El sidebar colapsado a 68px esconde etiquetas: un grupo ahí no se puede leer
   ni abrir con sentido, así que se comporta como el resto y desaparece. */
.sidebar.collapsed .sidebar-grupo { display: none; }

/* ── Desplegable de resultados de búsqueda ───────────────────────────────────
   Estas dos clases las USABA `esquemas/indice.html` y NO EXISTÍAN en ningún
   CSS. Sin ellas los `<a>` que arma el JS se pintan en línea, uno detrás de
   otro, y el resultado es un párrafo corrido: «Arellano Anaya Paulina · 38
   aHernandez Hernandez Paula · 34 a…». Así se veía en el iPhone.

   No se reusó `.ios-quick-find` del panel porque ése es una superposición de
   pantalla completa; esto es un desplegable anclado bajo su campo. */
.ios-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
/* `hidden` no basta: `display:block` de la regla de arriba lo pisaría. */
.ios-search-results[hidden] { display: none; }

.ios-search-item {
  display: block;
  /* 44 px de alto mínimo: es el objetivo táctil de iOS, y aquí se elige a una
     paciente para medirla — tocar la de al lado abre otro expediente. */
  min-height: 44px;
  padding: 12px 14px;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}
.ios-search-item:last-child { border-bottom: 0; }
.ios-search-item:hover,
.ios-search-item:focus,
.ios-search-item.activo { background: var(--color-bg-secondary); }

/* ── Pantallas sin conexión: cromo de app, no un div encima ────────────────── */
/*
 * El expediente y la agenda sin señal son lo único de la app que se pinta
 * ENTERO desde JavaScript, y hasta el 8-ago-2026 se notaba: aparecían de golpe
 * tapando la topbar y la tabbar, con el título y un botón «Cerrar» sueltos
 * encima del contenido y sin ninguna transición. Funcionaba y se sentía una
 * página web dentro de una app.
 *
 * Lo que hace nativa a una pantalla es el CROMO y el MOVIMIENTO: una barra de
 * navegación pegada arriba que no se va con el scroll, una presentación que
 * entra en vez de aparecer, y una jerarquía que se empuja hacia dentro y se
 * arrastra hacia fuera. Eso es lo que hay aquí, con el material y la curva que
 * ya usa el resto de la app (`--glass-*`, `--ios-ease`) para que no sea otra
 * decisión estética más.
 *
 * Vive en la hoja del sistema y no en el JS porque es cromo de aplicación:
 * repetido en línea acaba divergiendo entre las dos pantallas que lo usan.
 */
.off-pantalla {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary);
  /* Presentación modal: sube desde abajo, como una hoja de iOS. */
  animation: off-presentar .32s var(--ios-ease);
}
.off-pantalla.se-va { animation: off-descartar .24s var(--ios-ease) forwards; }
@keyframes off-presentar { from { opacity: 0; transform: translateY(18px); } }
@keyframes off-descartar { to { opacity: 0; transform: translateY(18px); } }

/* La barra de navegación. Pegada arriba y con material vidrio: el contenido
   pasa POR DEBAJO en vez de empujarla, que es la diferencia que se nota. */
.off-nav {
  position: sticky;
  top: 0;
  z-index: 2;
  flex: none;
  display: grid;
  /* Los lados reparten a partes iguales —así el título queda centrado de verdad
     aunque los controles midan distinto— pero nunca por debajo de su contenido:
     con `1fr` a secas, «‹ Pacientes» se partía en dos renglones en cuanto el
     nombre de la paciente era largo. Quien cede es el TÍTULO, que se corta con
     puntos suspensivos; un control de navegación partido no se lee como una
     app. */
  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  padding-top: env(safe-area-inset-top, 0px);
  min-height: calc(44px + env(safe-area-inset-top, 0px));
  background: var(--glass-bg-strong, var(--color-surface));
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-edge, var(--color-border));
}
.off-nav-titulo {
  grid-column: 2;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--color-text-primary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.off-nav-accion {
  /* 44 px es el objetivo táctil de Apple y aquí no se negocia: se toca con el
     pulgar, de pie y con prisa. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: .95rem;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.off-nav-accion:active { opacity: .45; }
.off-nav-accion.a-la-derecha { grid-column: 3; justify-self: end; }

/* La franja de estado. Es una BARRA y no un párrafo suelto: dice en qué modo
   está la app, así que se lee como un estado del sistema y no como un aviso
   más del contenido. */
.off-estado {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 14px;
  font-size: .8rem;
  font-weight: 550;
  color: var(--color-warning);
  background: var(--color-warning-soft);
  border-bottom: 1px solid var(--glass-edge, var(--color-border));
}

/* El área que se desplaza. La nav y el estado quedan fuera a propósito: en una
   app nativa la barra no se va con el dedo. */
.off-cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.off-cuerpo > .ios-page {
  max-width: 760px;
  padding-top: 14px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  /* La `ios-page` trae su propio fundido de entrada y aquí sobra: la pantalla
     ya entra entera, y encadenar las dos hace un doble parpadeo. */
  animation: none;
}

/* Jerarquía: el detalle se EMPUJA hacia dentro y la lista vuelve saliendo por
   la derecha. Es el gesto que dice «esto está dentro de aquello», y sin él
   lista y ficha parecen dos pantallas sin relación. */
.off-empuja { animation: off-empujar .3s var(--ios-ease); }
.off-vuelve { animation: off-volver .3s var(--ios-ease); }
@keyframes off-empujar { from { opacity: .4; transform: translateX(26%); } }
@keyframes off-volver { from { opacity: .4; transform: translateX(-16%); } }

/* Arrastre desde el borde izquierdo: mientras el dedo va, el contenido lo
   sigue. Sin transición durante el gesto —la pone el JS al soltar— porque un
   arrastre con retardo se siente roto, que es justo lo contrario de lo que se
   busca aquí. */
.off-cuerpo.se-arrastra { will-change: transform; }
.off-cuerpo.se-suelta { transition: transform .26s var(--ios-ease); }

@media (prefers-reduced-motion: reduce) {
  .off-pantalla,
  .off-pantalla.se-va,
  .off-empuja,
  .off-vuelve { animation: none; }
  .off-cuerpo.se-suelta { transition: none; }
}

/* Giro de espera. Existe como clase porque lo pintan las pantallas armadas por
   JS, y ahí un `<style>` incrustado por pantalla acaba con dos ruedas distintas
   girando a velocidades distintas en la misma app. */
.ios-spinner {
  width: 24px;
  height: 24px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  animation: ios-girar .8s linear infinite;
}
@keyframes ios-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ios-spinner { animation-duration: 2.4s; }
}

/* Los subcampos de historia son controles independientes: la fila iOS sin
   borde los hacía invisibles en reposo y anulaba su padding con !important. */
.cp-grid .cp-row-control > input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px !important;
  border: 1px solid var(--color-text-secondary, #667085) !important;
  border-color: color-mix(in srgb, var(--color-text-primary, #172033) 50%, var(--color-input-bg, #fff)) !important;
  border-radius: 10px;
  background: var(--color-input-bg, #fff) !important;
  color: var(--color-text-primary, #172033);
  font-size: 16px;
  line-height: 1.4;
}
.cp-grid .cp-row > label { padding-top: 12px; }
.cp-grid .cp-row .cp-row-control > input:focus {
  border-color: var(--color-accent, #2563eb) !important;
  outline: 2px solid var(--color-accent, #2563eb);
  outline-offset: 2px;
}
@media (max-width: 560px) {
  .cp-grid .cp-row { flex-direction: column; gap: 6px; }
  .cp-grid .cp-row > label { flex-basis: auto; max-width: none; padding-top: 0; }
  .cp-grid .cp-row-control { width: 100%; }
}