/* =============================================================================
   CAPTA · Shell mobile — sistema visual para pantallas de celular
   =============================================================================
   PIEZA 9 de la capa compartida. Primera superficie mobile de CAPTA.

   POR QUÉ ESTO NO ES OTRO styles.css MÁS
   Hay siete copias de styles.css en apps/<app>/assets/, todas con el mismo layout
   desktop (topbar + sidenav de 240px) y los mismos tokens repetidos siete
   veces. Esta es la primera pantalla pensada para una mano y un pulgar, y no va
   a ser la última: agenda, pacientes y números van a querer lo mismo. Si nace
   duplicada, el problema se replica en vez de resolverse.

   Los tokens salen de apps/registro/assets/styles.css sin cambios — son la
   marca CAPTA. Lo que se descarta es la cáscara: acá no hay sidenav ni grid de
   escritorio.

   REGLAS DE MANO ÚNICA
   · Nada accionable arriba de 56px del borde superior salvo el título.
   · Todo lo que se toca mide 48px de alto como mínimo (el pulgar no apunta
     fino, y la secretaria va a estar parada frente a un archivo de papel).
   · La acción principal vive abajo, al alcance del pulgar, no en una esquina.
   · safe-area para que el iPhone con notch no coma el botón de "Listo".
   ============================================================================= */

:root {
  /* Marca CAPTA — idénticos a apps/registro/assets/styles.css */
  --navy: #112550; --cobalt: #1a387a; --teal: #2aa8a0; --bright: #38cdc4; --dark: #207f79;
  --white: #f9f9f9; --text: #0e1f3d; --sub: #3a5070; --muted: #7a90a8;
  --bg: #f4f6fa; --surface: #ffffff; --border: #e2e6ee; --border-strong: #c8cfdc;
  --danger: #c0392b; --danger-bg: #fdecea; --danger-border: #f5c6c0;
  --success: #1f8a70; --success-bg: #e8f5f1;
  --warn: #9a6b00; --warn-bg: #fdf4e3; --warn-border: #f0dcae;

  --font-serif: "DM Serif Display", Georgia, serif;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius: 10px; --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(14,31,61,.06);
  --shadow-md: 0 4px 16px rgba(14,31,61,.12);

  /* Alto mínimo de cualquier cosa que se toque. No bajar de acá. */
  --touch: 48px;
  --header-h: 56px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  font-size: 16px;              /* 16px evita que iOS haga zoom al enfocar un input */
  -webkit-text-size-adjust: 100%;
}
body { overscroll-behavior-y: contain; }

/* ---------- Estructura ---------- */
#app { min-height: 100dvh; display: flex; flex-direction: column; }

.m-header {
  height: var(--header-h);
  background: var(--navy);
  color: var(--white);
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  position: sticky; top: 0; z-index: 20;
}
.m-header .m-title { font-family: var(--font-serif); font-size: 19px; line-height: 1; }
.m-header .m-sep { color: var(--bright); }
.m-header .m-counter {
  margin-left: auto;
  background: rgba(56,205,196,.16);
  color: var(--bright);
  border: 1px solid rgba(56,205,196,.35);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
}

.m-main { flex: 1; padding: 16px 16px calc(16px + var(--safe-bottom)); }

/* Barra de acción fija al pulgar. */
.m-actionbar {
  position: sticky; bottom: 0;
  background: linear-gradient(to top, var(--bg) 72%, transparent);
  padding: 12px 16px calc(12px + var(--safe-bottom));
  display: flex; gap: 10px;
}

/* ---------- Pasos ---------- */
.m-steps { display: flex; gap: 6px; margin-bottom: 18px; }
.m-step {
  flex: 1; height: 4px; border-radius: 2px; background: var(--border-strong);
  transition: background .2s;
}
.m-step.done { background: var(--teal); }
.m-step.active { background: var(--bright); }
.m-step-label {
  font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}

/* ---------- Tipografía ---------- */
h1.m-h1 { font-family: var(--font-serif); font-weight: 400; font-size: 24px; color: var(--navy); line-height: 1.2; }
.m-sub { color: var(--sub); font-size: 14px; margin-top: 4px; line-height: 1.45; }

/* ---------- Controles ---------- */
.m-input {
  width: 100%; height: var(--touch);
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 16px; font-family: var(--font-sans); color: var(--text);
}
.m-input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(42,168,160,.15); }

.m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--touch); padding: 0 18px;
  border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 16px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent;
  -webkit-tap-highlight-color: transparent;
}
.m-btn:disabled { opacity: .5; cursor: default; }
.m-btn.block { width: 100%; }
.m-btn-primary { background: var(--teal); color: #fff; }
.m-btn-primary:active:not(:disabled) { background: var(--dark); }
.m-btn-secondary { background: var(--surface); color: var(--sub); border-color: var(--border-strong); }
.m-btn-secondary:active:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.m-btn-ghost { background: transparent; color: var(--sub); }

.m-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-sm);
}

/* =============================================================================
   ESTADOS — "vacío" y "falló" tienen que verse DISTINTO
   =============================================================================
   El buscador viejo (shared/patient_search.js) muestra los dos casos con la
   misma clase y el mismo gris: solo cambia el texto. Un 403, un 400 y un 502
   producen el mismo pixel que "no hay nadie con ese apellido".
   Para fichas eso no alcanza. Buscar y no encontrar es normal —el archivo tiene
   pacientes que no están en el CRM—. Que la búsqueda FALLE es otra cosa: si se
   carga igual, la ficha queda sin vincular y eso lo arregla una persona, de a
   una. Distinto color, distinto ícono, distinto borde.
   ============================================================================= */

/* Vacío: gris, neutro, sin alarma. No pasó nada malo. */
.m-empty {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px; border-radius: var(--radius);
  background: var(--surface); border: 1px dashed var(--border-strong);
  color: var(--sub); font-size: 14px; line-height: 1.45;
}
.m-empty .m-ico { color: var(--muted); flex: none; }

/* Falla: rojo, borde sólido, ícono de alerta. Algo se rompió. */
.m-error {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px; border-radius: var(--radius);
  background: var(--danger-bg); border: 1px solid var(--danger-border);
  color: var(--danger); font-size: 14px; line-height: 1.45;
}
.m-error .m-ico { color: var(--danger); flex: none; }
.m-error .m-error-title { font-weight: 700; }
/* El código técnico se muestra, no se esconde: es lo que hace que un problema
   se pueda reportar y arreglar en vez de quedar como "no anda". */
.m-error .m-error-code {
  display: inline-block; margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--danger);
  background: rgba(192,57,43,.08); border-radius: 4px; padding: 2px 6px;
}
.m-error .m-btn { margin-top: 10px; }

.m-warn {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px; border-radius: var(--radius);
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  color: var(--warn); font-size: 14px; line-height: 1.45;
}

.m-loading { color: var(--muted); font-size: 14px; padding: 20px; text-align: center; }

/* ---------- Resultados de búsqueda ---------- */
.m-results { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.m-result {
  min-height: var(--touch);
  display: flex; flex-direction: column; justify-content: center;
  padding: 10px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.m-result:active { border-color: var(--teal); background: #f7fbfb; }
.m-result .m-result-name { font-weight: 600; color: var(--navy); }
.m-result .m-result-detail { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ---------- Miniaturas de páginas ---------- */
.m-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.m-thumb {
  position: relative; aspect-ratio: 3/4; border-radius: var(--radius);
  overflow: hidden; background: var(--surface); border: 1px solid var(--border);
}
.m-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-thumb .m-thumb-state {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; text-align: center;
  padding: 8px;
}
.m-thumb.subiendo .m-thumb-state { background: rgba(17,37,80,.72); color: #fff; }
.m-thumb.error   .m-thumb-state { background: var(--danger-bg); color: var(--danger); }
.m-thumb .m-thumb-badge {
  position: absolute; left: 6px; bottom: 6px;
  background: rgba(17,37,80,.82); color: #fff;
  font-size: 11px; font-weight: 600; border-radius: 4px; padding: 2px 6px;
}
.m-thumb .m-thumb-ok {
  position: absolute; right: 6px; top: 6px;
  background: var(--success); color: #fff;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}

/* Barra de progreso de subida — una por foto, visible. */
.m-progress { height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.m-progress > div { height: 100%; background: var(--bright); transition: width .2s; }

/* ---------- Input de cámara ---------- */
.m-capture {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 132px; width: 100%;
  border: 2px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--sub);
  font-size: 16px; font-weight: 600; cursor: pointer;
}
.m-capture:active { border-color: var(--teal); color: var(--teal); }
.m-capture input[type="file"] { display: none; }

.m-row { display: flex; gap: 10px; align-items: center; }
.m-spacer { flex: 1; }
.m-mt { margin-top: 16px; }
.m-mb { margin-bottom: 16px; }

/* =============================================================================
   NAVEGACIÓN ENTRE PANTALLAS Y LAYOUT DE ESCRITORIO
   =============================================================================
   Consultar una ficha se hace desde la compu, no desde el celular. En
   pantallas anchas la shell deja de ser una columna: la lista a la izquierda,
   la ficha abierta a la derecha. En el celular sigue siendo una columna, y la
   ficha abierta reemplaza a la lista (con un botón para volver).
   ============================================================================= */
.m-nav { display: flex; gap: 4px; background: var(--navy); padding: 0 12px; border-top: 1px solid rgba(56,205,196,.15); }
.m-nav:empty { display: none; }
.m-nav-tab {
  display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 14px;
  color: rgba(249,249,249,.75); text-decoration: none; font-weight: 600; font-size: 15px;
  border-bottom: 3px solid transparent;
}
.m-nav-tab.active { color: #fff; border-bottom-color: var(--bright); }

.m-seg { display: flex; gap: 6px; margin-bottom: 14px; }
.m-seg-btn {
  flex: 1; min-height: 40px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--sub);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
}
.m-seg-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; }

.m-list { display: flex; flex-direction: column; gap: 8px; }
.m-list-row {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  min-height: var(--touch); padding: 10px 14px; font-family: var(--font-sans);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.m-list-row.active { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(42,168,160,.18); }
.m-list-main { font-weight: 600; color: var(--navy); }
.m-list-sub { font-size: 13px; color: var(--muted); }

.m-split-detail { display: none; }
.m-split.m-split-open .m-split-list { display: none; }
.m-split.m-split-open .m-split-detail { display: block; }
.m-volver { margin-bottom: 8px; padding-left: 0; }

.m-pages { display: flex; flex-direction: column; gap: 14px; }
.m-page { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.m-page img { width: 100%; display: block; cursor: zoom-in; }
.m-page figcaption { font-size: 13px; color: var(--sub); padding: 8px 12px; border-top: 1px solid var(--border); }
.m-page-loading { min-height: 160px; display: flex; align-items: center; justify-content: center; }

.m-hist { font-size: 13px; color: var(--sub); }
.m-hist summary { cursor: pointer; font-weight: 600; }
.m-hist ul { margin: 8px 0 0 18px; padding: 0; list-style: disc; }
.m-hist li { margin-bottom: 4px; word-break: break-word; }
.m-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--muted); }
.m-hist-nota { margin-top: 6px; font-size: 12px; color: var(--warn); }

.m-confirm {
  padding: 14px; border-radius: var(--radius); font-size: 15px; line-height: 1.45; color: var(--text);
  background: var(--warn-bg); border: 1px solid var(--warn-border);
}
.m-ok {
  padding: 12px 14px; margin-bottom: 10px; border-radius: var(--radius); font-weight: 600;
  background: var(--success-bg); color: var(--success);
}

.m-overlay { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: rgba(14,31,61,.94); }
.m-overlay-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: #fff; font-weight: 600; }
.m-overlay-bar span { flex: 1; }
.m-overlay-body { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; }
.m-overlay-body img { max-width: 100%; max-height: 100%; object-fit: contain; }
.m-overlay-body.real { display: block; }
.m-overlay-body.real img { max-width: none; max-height: none; }

@media (min-width: 900px) {
  .m-main { width: 100%; max-width: 640px; margin: 0 auto; }
  .m-main.m-wide { max-width: 1200px; }
  .m-split { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 24px; align-items: start; }
  .m-split .m-split-detail,
  .m-split.m-split-open .m-split-list { display: block; }
  .m-split-list { position: sticky; top: calc(var(--header-h) + 64px); max-height: calc(100vh - 150px); overflow: auto; }
  .m-volver { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}