/* ============================================================
   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; }
.sidenav {
  position: fixed; inset: 0 auto 0 0; width: 240px; z-index: 40;
  display: flex; flex-direction: column; gap: .1rem;
  background: var(--indigo); color: #fff; padding: .8rem .6rem;
  transform: translateX(-100%); transition: transform .18s ease;
}
body.nav-open .sidenav { transform: translateX(0); }
.sidenav-brand { display: flex; align-items: center; gap: .6rem; padding: .5rem .5rem 1rem; }
.brand-logo { width: 38px; height: 38px; border-radius: 8px; background: #fff; object-fit: contain; }
.brand-name { font-weight: 700; font-size: .98rem; }
.brand-sub { font-size: .74rem; opacity: .85; }
.sidenav-item {
  display: flex; align-items: center; gap: .6rem; padding: .65rem .6rem; border-radius: var(--radius-sm);
  color: #fff; text-decoration: none; font-size: .92rem; font-weight: 500;
}
.sidenav-item:hover { background: rgba(255,255,255,.12); }
.sidenav-item.active { background: #fff; color: var(--indigo); font-weight: 700; }
.sidenav-icon { font-size: 1.1rem; width: 1.4rem; text-align: center; }
.sidenav-logout { background: rgba(255,255,255,.12); color: #fff; border: none; margin: .6rem; }
.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) {
  .sidenav { transform: none; position: sticky; top: 0; height: 100vh; }
  .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; }