/* ============================================================
   NR Abogados — theme.css (tokens de diseño)
   ESTÁNDAR DE VISUALIZACIÓN heredado de RDSafety360 (Mandalay Dominicana):
   mismos tokens de color, misma cabecera de tabla, mismo patrón de campo
   (etiqueta + ayuda + control), misma base de controles y el mismo
   contraste pantalla/documento impreso. Obligatorio en TODA pantalla,
   captura o informe de este proyecto — no es un estilo por módulo.
   ============================================================ */
:root {
  /* Tinta y superficies */
  --ink: #1F1F1F;
  --ink-soft: #5F6368;
  --bg: #FFFFFF;
  --surface: #F8F9FA;
  --border: #DADCE0;

  /* Pares fondo pastel / acento saturado (misma familia que RDSafety360;
     reasignar el uso por módulo a medida que se definan, no los colores) */
  --lavanda-bg: #ECE6F6; --lavanda: #6750A4;
  --verde-bg:   #E2F3E5; --verde:   #1E8E3E;
  --ambar-bg:   #FBF3D9; --ambar:   #F2A600;
  --rojo-bg:    #FBE4E1; --rojo:    #D93025;
  --azul-bg:    #E3EEFB; --azul:    #1A73E8;
  --magenta-bg: #F6E6F5; --magenta: #9C27B0;
  --indigo-bg:  #E9EAF9; --indigo:  #5C6BC0;

  /* Semántica de estados */
  --ok: var(--verde);       --ok-bg: var(--verde-bg);
  --warn: var(--ambar);     --warn-bg: var(--ambar-bg);
  --danger: var(--rojo);    --danger-bg: var(--rojo-bg);

  /* Tipografía y forma */
  --font: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', sans-serif;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 3px rgba(31,31,31,.08), 0 4px 14px rgba(31,31,31,.06);
  --tap: 48px; /* target táctil mínimo */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.45;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; }
h1 { font-size: 1.35rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
a { color: var(--azul); text-decoration: none; }
img { max-width: 100%; }

/* ============ ESTÁNDAR DE VISUALIZACIÓN — base de controles ============
   Todo control de captura adopta el mismo aspecto, esté o no envuelto en un
   .field. :where() da la especificidad de un elemento simple: cualquier
   regla con clase (.cell-input, label.field/div.field, o un componente de
   matriz que se defina más adelante) la sobrescribe sin romperse. Así los
   inputs "crudos" quedan estandarizados de fábrica en toda pantalla nueva. */
input:where(:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=hidden])),
select,
textarea {
  min-height: var(--tap); padding: .5rem .7rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink); font: 400 1rem var(--font);
}
textarea:where(*) { min-height: 72px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }

/* ---------- Campo de captura: etiqueta + ayuda + control ----------
   Todo campo dice qué se espera, no solo su nombre. Clases idénticas
   label.field / div.field para envolver cualquier control. */
label.field, div.field { display: block; margin-bottom: .8rem; }
label.field { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.field-label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); display: block; }
.field-hint { display: block; font-size: .76rem; color: var(--ink-soft); margin: .15rem 0 .3rem; }
label.field > input, label.field > select, label.field > textarea,
div.field > input, div.field > select, div.field > textarea {
  display: block; width: 100%; margin-top: .3rem;
  min-height: var(--tap); padding: .55rem .7rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg); color: var(--ink);
  font: 400 1rem var(--font);
}
.form-seccion { margin: 1.2rem 0; }
.grid-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }

/* Formulario de captura de datos (Redacción de documentos): UN campo por
   fila, de ancho completo —igual que un formulario de papel o los ítems de
   checklist de RDSafety360 (.check-item), apilados en columna única— en vez
   de una cuadrícula de fichas cuadradas tipo tablero. Cada campo lleva su
   propio borde para separarlo visualmente del siguiente sin necesitar grid. */
.campo-captura {
  display: block;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .65rem .8rem; margin-bottom: 0; background: var(--bg);
}
.campo-captura .field-label { font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: 0; }
.campo-captura .field-hint { margin: .15rem 0 .45rem; }
.campo-captura.pendiente { border-color: var(--danger); background: var(--danger-bg); }
.campo-captura.pendiente .field-label { color: var(--danger); }

/* Documento rellenable: el propio texto del documento a redactar, con cada
   dato a completar como un blanco EN SU LUGAR dentro de la oración — no una
   lista de campos aparte. Aspecto de papel (igual que buildPrintPreview) más
   los blancos ".campo-inline": una raya para llenar, no una caja de
   formulario, con el detalle de qué va ahí solo como pista (placeholder /
   tooltip), nunca como etiqueta visible permanente. */
.documento-rellenable {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 1.4rem 1.6rem; font-family: 'Times New Roman', serif; font-size: 1rem; color: #111;
}
input.campo-inline {
  display: inline-block; min-height: auto; width: auto;
  border: none; border-bottom: 1.5px solid var(--indigo); border-radius: 0;
  background: transparent; padding: 0 .2rem; margin: 0 .1rem;
  font: inherit; font-size: .97em; text-align: center; color: var(--ink);
}
input.campo-inline::placeholder { color: var(--ink-soft); font-size: .82em; font-style: italic; }
input.campo-inline:focus { outline: none; border-bottom: 2px solid var(--azul); background: var(--azul-bg); }
input.campo-inline.pendiente { border-bottom-color: var(--danger); background: var(--danger-bg); }
input.campo-inline.pendiente::placeholder { color: var(--danger); opacity: .8; }

/* Selector de plantillas (redacción de documentos): tarjetas compactas, más
   por fila que .grid-campos — aquí solo hay que elegir, no capturar datos. */
.grid-plantillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.tarjeta-plantilla { padding: .4rem .5rem; font-size: .68rem; line-height: 1.15; }
.tarjeta-plantilla b { font-size: .68rem; font-weight: 600; display: block; }
.tarjeta-plantilla .badge { font-size: .58rem; padding: .05rem .35rem; }

/* Casillas ☐ y botones circulares ○ para opciones excluyentes, el
   control adecuado en vez de un select genérico cuando las opciones caben
   a la vista (mismo patrón .radio-chip de RDSafety360). */
.radio-chip { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--border);
  border-radius: 999px; padding: .3rem .7rem; font-size: .85rem; cursor: pointer; }
.radio-chip input { margin: 0; }

/* ---------- Listas de registros ---------- */
.list-row {
  display: flex; align-items: center; gap: .7rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .7rem .8rem; margin-bottom: .5rem; min-height: var(--tap);
}
.list-row .row-main { flex: 1; min-width: 0; }
.list-row .row-title { font-weight: 600; font-size: .92rem; }
.list-row .row-sub { font-size: .78rem; color: var(--ink-soft); }

/* ---------- Badges / semáforos ---------- */
.badge { display: inline-block; padding: .18rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.badge-ok     { background: var(--ok-bg); color: var(--ok); }
.badge-warn   { background: var(--warn-bg); color: #9A6A00; }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-info   { background: var(--azul-bg); color: var(--azul); }
.badge-neutral{ background: var(--surface); color: var(--ink-soft); border: 1px solid var(--border); }

/* ============ ESTÁNDAR DE VISUALIZACIÓN — tablas y captura en línea ============
   Look profesional por defecto para toda tabla de datos (table.grid) y para
   la captura en línea sobre la tabla (.cell-input, tr.draft-row). Ninguna
   captura de línea va en modal: se edita/añade en la propia fila. */
/* Filas compactas a propósito: la app va a crecer en volumen de registros
   (clientes, expedientes, solicitudes, resultados de jurisprudencia…) y debe
   caber más por pantalla sin scroll excesivo, en vez de tarjetas grandes. */
table.grid { width: 100%; border-collapse: collapse; font-size: .78rem; background: #fff; }
table.grid th, table.grid td {
  padding: .32rem .5rem; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
/* Cabecera de columna: fondo índigo con texto blanco, EN PANTALLA, la misma
   en toda la aplicación — aplica a table.grid, .tabla y table.report-table. */
table.grid th, .tabla th, table.report-table th {
  background: #5C6BC0; color: #fff;
  font-size: .7rem; font-weight: 600; text-transform: none;
  letter-spacing: .02em; white-space: nowrap; text-align: left;
}
table.grid tbody tr:hover { background: var(--surface); }
table.grid tr:last-child td { border-bottom: 0; }
table.grid tr.draft-row { background: var(--azul-bg); }
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Captura en línea sobre la celda: control discreto que no rompe la tabla.
   Patrón: al añadir/editar una línea, sustituir la fila por tr.draft-row
   con estos controles en sus celdas — nunca abrir un modal. */
.cell-input {
  width: 100%; min-height: var(--tap); padding: .45rem .6rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink); font: 400 .95rem var(--font);
}
.cell-input:focus { outline: 2px solid var(--azul); outline-offset: -1px; border-color: var(--azul); }

/* Protección: los DOCUMENTOS IMPRESOS (actos legales, informes, formularios)
   conservan su barra azul marino de diseño oficial — nunca el índigo de
   pantalla. Van DESPUÉS en el archivo para ganar por orden de origen. */
.report-page table th { background: #132a63; color: #fff; text-align: center; }
.report-page table.report-table th { background: #132a63; color: #fff; }

/* ============ Estructura del shell (mobile-first) ============ */
.shell { display: flex; min-height: 100vh; }
/* EL MENÚ ENTERO, A LA VISTA. El despacho pidió no tener que desplazarse para
   encontrar una opción, y con doce entradas eso obliga a apretar la altura de cada
   una: el menú no es una lista de lectura, es un índice que se recorre con la vista.
   La barra no se desplaza NUNCA como un todo — la marca arriba y el botón de salir
   abajo quedan fijos, y solo la lista del medio se desplaza si la pantalla es tan
   baja que ni así caben. */
.sidenav {
  position: fixed; inset: 0 auto 0 0; width: 232px; z-index: 40;
  display: flex; flex-direction: column;
  background: var(--indigo); color: #fff; padding: .6rem .5rem;
  transform: translateX(-100%); transition: transform .18s ease;
  overflow: hidden;
}
body.nav-open .sidenav { transform: translateX(0); }
.sidenav-brand { display: flex; align-items: center; gap: .5rem; padding: .3rem .4rem .6rem; flex: 0 0 auto; }
.brand-logo { width: 32px; height: 32px; border-radius: 7px; background: #fff; object-fit: contain; }
.brand-name { font-weight: 700; font-size: .92rem; line-height: 1.2; }
.brand-sub { font-size: .7rem; opacity: .85; line-height: 1.2; }
.sidenav-list {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .05rem;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent;
}
.sidenav-list::-webkit-scrollbar { width: 6px; }
.sidenav-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 3px; }
.sidenav-item {
  display: flex; align-items: center; gap: .5rem; padding: .4rem .55rem; border-radius: var(--radius-sm);
  color: #fff; text-decoration: none; font-size: .855rem; font-weight: 500; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 0 auto;
}
.sidenav-item:hover { background: rgba(255,255,255,.12); }
.sidenav-item.active { background: #fff; color: var(--indigo); font-weight: 700; }
.sidenav-icon { font-size: .98rem; width: 1.25rem; text-align: center; flex: 0 0 auto; }
.sidenav-logout { background: rgba(255,255,255,.12); color: #fff; border: none; flex: 0 0 auto;
  margin: .5rem .1rem .1rem; padding: .45rem; font-size: .85rem; }

/* Pantallas bajas (portátiles de 768 px, o con el navegador a media altura): se
   aprieta un punto más antes de recurrir al desplazamiento. */
@media (max-height: 760px) {
  .sidenav-item { padding: .3rem .55rem; font-size: .82rem; }
  .sidenav-brand { padding: .2rem .4rem .4rem; }
  .brand-logo { width: 27px; height: 27px; }
  .brand-sub { display: none; }
}
.shell-main { flex: 1; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .6rem;
  background: var(--bg); border-bottom: 1px solid var(--border); padding: .5rem .8rem; min-height: 56px;
}
.hamburger { background: none; border: none; font-size: 1.4rem; cursor: pointer; padding: .3rem .5rem; }
.topbar-title { font-weight: 700; color: var(--indigo); }
.topbar-user { font-size: .85rem; color: var(--ink-soft); }
.page { padding: 1rem; max-width: 1200px; margin: 0 auto; }
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1rem; box-shadow: var(--shadow); }

@media (min-width: 900px) {
  /* `dvh` en vez de `vh`: en el móvil y en las ventanas con barra dinámica, 100vh es
     más alto que lo que se ve, y por eso el botón de salir quedaba cortado abajo. */
  .sidenav { transform: none; position: sticky; top: 0; height: 100vh; height: 100dvh; }
  .hamburger { display: none; }
  .page { padding: 1.4rem 2rem; }
}
@media (max-width: 899.98px) {
  body.nav-open::after { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 35; }
}

.toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 90;
  background: var(--ink); color: #fff; padding: .6rem 1.1rem; border-radius: 999px; font-size: .9rem; box-shadow: var(--shadow); }
.toast-error { background: var(--danger); } .toast-ok { background: var(--ok); }

.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal { background: #fff; border-radius: var(--radius); max-width: 480px; width: 100%; padding: 1.2rem; box-shadow: var(--shadow); }
.modal-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }

.btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .5rem 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff; color: var(--ink);
  font: 600 .88rem var(--font); cursor: pointer; }
.btn:hover { background: var(--surface); }
.btn-primary { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-sm { min-height: 30px; padding: .3rem .6rem; font-size: .8rem; }
.muted { color: var(--ink-soft); }

/* ============ Visor de documentos (tipo libro) ============ */
.viewer { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: #fff; min-height: 420px; }
.viewer-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: .4rem; padding: .5rem .7rem;
  background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.viewer-title { font-weight: 700; font-size: .88rem; color: var(--indigo); word-break: break-word; }
/* Segunda línea del visor: navegación de página y zoom, siempre juntos,
   nunca empujados por un título largo (era el bug: el título de una
   sentencia puede ser una frase entera). */
.viewer-controls { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.viewer-pageinfo { font-size: .82rem; color: var(--ink-soft); white-space: nowrap; }
.viewer-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: #F1F3F4; min-height: 380px; overflow: auto; }
.viewer-pdf-wrap { max-width: 100%; }
.viewer-canvas { max-width: 100%; box-shadow: 0 2px 10px rgba(0,0,0,.18); background: #fff; }
.viewer-img { max-width: 100%; max-height: 70vh; object-fit: contain; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.viewer-empty { text-align: center; color: var(--ink-soft); }
@media (min-width: 900px) { .viewer { min-height: 560px; } .viewer-stage { min-height: 500px; } }

.scanner-widget { display: flex; flex-direction: column; gap: .5rem; }
.scanner-video { width: 100%; max-width: 420px; border-radius: var(--radius-sm); background: #000; display: block; }

/* ── DATOS COMPROBABLES DEL ANÁLISIS ─────────────────────────────────────────
   Cada fecha, nombre, cédula o sentencia del análisis jurídico enlaza con la
   pieza que lo prueba, resaltada en amarillo. El estilo tiene que decir «esto se
   puede comprobar» sin convertir el informe en un campo de enlaces azules: por eso
   hereda el color del texto y solo lleva un subrayado punteado. Un análisis donde
   todo grita no se lee. */
.traza {
  /* VISIBLES. La primera versión era deliberadamente discreta —color heredado y un
     subrayado punteado— para no llenar el informe de enlaces azules. Salió mal: el
     despacho nunca llegó a descubrir que se podía pulsar («nunca he podido verlo»), y
     un mecanismo que nadie encuentra es un mecanismo que no existe. Ahora se ven. */
  color: var(--indigo);
  font-weight: 600;
  background: #EEF1FB;
  border-bottom: 1px solid var(--indigo);
  text-decoration: none;
  cursor: pointer;
  border-radius: 3px;
  padding: .05em .25em;
  white-space: nowrap;
}
.traza:hover, .traza:focus-visible {
  background: #FFE066;          /* el amarillo con que se resaltará en el documento */
  border-bottom-color: #B8860B;
}
.traza:focus-visible { outline: 2px solid var(--indigo); outline-offset: 1px; }

/* Cita a una pieza que no existe en el expediente: NO se disimula. Es justo el
   fallo que hay que ver, y esconderlo sería peor que el fallo. */
.traza-rota {
  color: var(--danger);
  text-decoration: underline wavy var(--danger);
  cursor: help;
}

/* Panel para comprobar una pieza sin salir del informe. No se navega: al cerrar,
   el análisis sigue exactamente donde estaba. */
.visor-traza {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(20, 22, 34, .55);
  display: flex; flex-direction: column;
  padding: 2.5vh 3vw;
}
.visor-traza-barra {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  background: var(--card, #fff); color: var(--text, #222);
  padding: .5rem .7rem; border-radius: 8px 8px 0 0;
}
.visor-traza-marco {
  flex: 1; width: 100%; border: 0;
  background: #fff; border-radius: 0 0 8px 8px;
}

/* Al volver de comprobar, el dato parpadea para retomar la lectura sin releer. */
@keyframes traza-vuelta { 0%, 100% { background: transparent } 30%, 70% { background: #FFE066 } }
.traza-vuelta { animation: traza-vuelta 1.8s ease-in-out; }
@media (prefers-reduced-motion: reduce) {
  .traza-vuelta { animation: none; background: #FFE066; }
}

/* ── PANTALLA FBI: todo el expediente a pantalla completa ────────────────────
   Densa a propósito. Se abre para tener el caso entero delante —antes de una
   audiencia, o al retomarlo después de meses—, no para leerla con calma: prima
   ver mucho de un vistazo sobre que respire. */
.fbi {
  position: fixed; inset: 0; z-index: 950;
  background: var(--bg, #fff);
  display: flex; flex-direction: column;
}
.fbi-barra {
  display: flex; gap: .6rem; align-items: center;
  padding: .5rem .8rem; border-bottom: 2px solid var(--indigo);
  background: var(--card, #fff); flex: 0 0 auto;
}
.fbi-cuerpo { flex: 1; overflow-y: auto; padding: .8rem; }
.fbi-seccion {
  background: var(--card, #fff); border: 1px solid var(--border);
  border-radius: 8px; padding: .7rem .8rem; margin-bottom: .7rem;
}
.fbi-seccion h3 {
  margin: 0 0 .3rem; font-size: .92rem; color: var(--indigo);
}

/* Cifras de cabecera: se leen de un vistazo, sin tener que buscarlas. */
.fbi-cifras { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.fbi-cifra {
  flex: 1 1 5.5rem; min-width: 5.5rem; text-align: center;
  padding: .4rem .3rem; border-radius: 6px;
  background: var(--bg-alt, #F5F6FB); border-top: 3px solid var(--border);
}
.fbi-cifra-n { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fbi-cifra-l { font-size: .68rem; color: var(--ink-soft, #666); }

/* La próxima audiencia manda la agenda: va grande y aparte. */
.fbi-audiencia {
  display: flex; gap: .8rem; align-items: center; flex-wrap: wrap;
  padding: .6rem .8rem; border: 2px solid var(--indigo); border-radius: 8px;
  background: var(--bg-alt, #F5F6FB);
}

/* Línea de tiempo: el caso entero como una sola historia. El color del borde
   izquierdo dice la procedencia sin necesidad de leer nada. */
.fbi-linea { max-height: 26rem; overflow-y: auto; }
.fbi-hito {
  display: flex; gap: .6rem; align-items: baseline;
  padding: .3rem .5rem; border-left: 3px solid var(--indigo);
  border-bottom: 1px solid var(--border);
}
.fbi-hito-f {
  min-width: 6.2rem; font-size: .76rem; font-variant-numeric: tabular-nums;
  color: var(--ink-soft, #666);
}

/* Piezas en rejilla: 35 documentos caben en una pantalla y se distinguen por color. */
.fbi-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .4rem; }
.fbi-doc {
  display: block; text-decoration: none; color: inherit;
  padding: .35rem .5rem; border-radius: 6px;
  border: 1px solid var(--border); border-left: 3px solid var(--indigo);
  background: var(--bg-alt, #F5F6FB);
}
.fbi-doc:hover { background: var(--card, #fff); box-shadow: 0 1px 4px rgba(0,0,0,.12); }

@media (max-width: 700px) {
  .fbi-cuerpo { padding: .4rem; }
  .fbi-hito-f { min-width: 5rem; }
}