/* =============================================================================
   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/*/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; }

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