:root {
  --fondo: #10131a;
  --panel: #171b24;
  --panel-2: #1e2430;
  --borde: #2a3140;
  --texto: #e6e9ef;
  --texto-sutil: #98a2b3;
  --acento: #4f8cf7;
  --acento-suave: #1d3557;
  --ok: #3fb950;
  --alerta: #d9a441;
  --error: #f2685f;
  --radio: 8px;
  --fuente: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: var(--fuente); font-size: 14px; line-height: 1.5;
}
[hidden] { display: none !important; }
.crece { flex: 1; }
.sutil { color: var(--texto-sutil); font-size: 13px; }
.error { color: var(--error); font-size: 13px; }
a { color: var(--acento); }

/* ---- estructura ---- */
.vista.centrado { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.contenido { max-width: 1100px; margin: 0 auto; padding: 24px; }
.barra {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 10;
}
.marca { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.5px; }
.marca-boton {
  background: none; border: none; color: var(--texto); font-size: 17px;
  font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: var(--radio);
}
.marca-boton:hover { background: var(--panel-2); }
.titulo-contexto { color: var(--texto-sutil); font-size: 13px; border-left: 1px solid var(--borde); padding-left: 12px; }
.fila-titulo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.fila-titulo.compacta { margin: 0; padding: 8px 10px; border-bottom: 1px solid var(--borde); }
.fila-botones { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.fila-botones.compacta { margin-top: 8px; }
h2 { margin: 0; font-size: 19px; }
h3 { margin: 0 0 8px; font-size: 16px; }

/* ---- controles ---- */
label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--texto-sutil); }
input, textarea, select {
  width: 100%; margin-top: 4px; padding: 9px 10px;
  background: var(--fondo); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio);
  font-family: inherit; font-size: 14px;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--acento-suave); border-color: var(--acento); }
textarea { resize: vertical; }
button {
  padding: 9px 14px; border-radius: var(--radio); border: 1px solid transparent;
  font-family: inherit; font-size: 14px; cursor: pointer; white-space: nowrap;
}
button.primario { background: var(--acento); color: #fff; font-weight: 500; }
button.primario:hover { filter: brightness(1.1); }
button.fantasma { background: transparent; color: var(--texto); border-color: var(--borde); }
button.fantasma:hover { background: var(--panel-2); }
button.pequeno { padding: 5px 9px; font-size: 13px; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.filtro { margin-bottom: 16px; }

/* ---- tarjetas / lista ---- */
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 20px; }
.tarjeta.angosta { width: min(400px, 92vw); }
.pie { margin: 12px 0 0; text-align: center; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.tarjeta-exp {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: 14px; cursor: pointer; text-align: left; color: inherit; width: 100%;
}
.tarjeta-exp:hover { border-color: var(--acento); background: var(--panel-2); }
.tarjeta-exp .numero { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.tarjeta-exp .numero, .tarjeta-exp .partes { overflow-wrap: anywhere; }
.tarjeta-exp .partes {
  font-size: 13px; color: var(--texto-sutil); margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  font-size: 11px; padding: 2px 7px; border-radius: 20px;
  background: var(--panel-2); color: var(--texto-sutil); border: 1px solid var(--borde);
}
.chip.lleno { background: var(--acento-suave); color: #cfe0ff; border-color: transparent; }

/* ---- detalle: 3 columnas ---- */
.columnas {
  display: grid; grid-template-columns: 280px 1fr 340px;
  height: calc(100vh - 49px);
}
.panel-archivos, .panel-agente { background: var(--panel); overflow-y: auto; display: flex; flex-direction: column; }
.panel-archivos { border-right: 1px solid var(--borde); }
.panel-agente { border-left: 1px solid var(--borde); }
.panel-visor { display: flex; flex-direction: column; overflow: hidden; }
.centrado-suave { display: grid; place-items: center; height: 100%; text-align: center; padding: 24px; }

.zona-soltar {
  margin: 12px; padding: 18px 12px; text-align: center;
  border: 2px dashed var(--borde); border-radius: 10px;
}
.zona-soltar.activa { border-color: var(--acento); background: var(--acento-suave); }
.zona-soltar p { margin: 0 0 4px; }
.zona-soltar button { margin-top: 8px; }

.grupo-carpeta { border-top: 1px solid var(--borde); }
.grupo-carpeta > summary {
  padding: 8px 12px; cursor: pointer; font-weight: 500; font-size: 13px;
  display: flex; align-items: center; gap: 6px;
}
.grupo-carpeta > summary:hover { background: var(--panel-2); }
.grupo-carpeta .cuenta { color: var(--texto-sutil); font-weight: 400; }
.item-archivo {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 6px 12px 6px 26px; background: none; border: none;
  color: var(--texto); font-size: 13px; text-align: left; cursor: pointer;
}
.item-archivo:hover { background: var(--panel-2); }
.item-archivo.seleccionado { background: var(--acento-suave); }
.punto { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.marca-ilegible {
  font-size: 10px; min-width: 16px; text-align: center; padding: 1px 4px;
  border-radius: 20px; background: #3d1d1b; color: var(--error);
  border: 1px solid var(--error); flex-shrink: 0;
}
.punto.pendiente { background: var(--alerta); }
.punto.verificado { background: var(--ok); }

/* Sin esto el contenedor se queda del alto de su contenido y el visor de
   imagen nunca recibe el espacio de la columna (medía 466 de 851 px). */
#visor-contenido { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.visor-cuerpo { flex: 1; display: flex; overflow: hidden; min-height: 0; }
/* El textarea y su capa de resaltado se superponen exactamente: misma
   tipografía, mismo padding, mismo interlineado. Si se tocan esos valores,
   hay que tocarlos en los dos o el rojo se desalinea del texto. */
.caja-editor { flex: 1; position: relative; min-width: 0; overflow: hidden; }
#editor-texto, .resaltado {
  position: absolute; inset: 0; margin: 0; border: none; border-radius: 0;
  padding: 16px; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 13px; line-height: 1.7;
  white-space: pre-wrap; overflow-wrap: break-word;
  /* Mismo ancho útil en los dos: sin esto la barra de scroll del textarea le
     quita ~15 px, las líneas cortan en otro punto y el rojo cae en otras palabras. */
  scrollbar-gutter: stable;
}
#editor-texto {
  resize: none; background: transparent; color: var(--texto); overflow-y: auto; z-index: 1;
}
#editor-texto:focus { outline: none; }
.resaltado {
  background: var(--fondo); color: transparent; overflow: hidden; pointer-events: none;
}
.resaltado mark {
  background: rgba(242, 104, 95, .28); color: transparent;
  border-bottom: 2px solid var(--error); border-radius: 2px;
}
.ilegible-contador {
  background: #3d1d1b; color: var(--error); border: 1px solid var(--error);
  cursor: pointer; font-size: 11px; padding: 3px 8px; border-radius: 20px;
}
.ilegible-contador:hover { filter: brightness(1.35); }
/* ---- visor de imagen para cotejo ---- */
.divisor {
  width: 6px; flex: 0 0 6px; cursor: col-resize; background: var(--borde);
  transition: background .15s;
}
.divisor:hover, .divisor.arrastrando { background: var(--acento); }
.divisor[hidden] { display: none !important; }

.panel-imagen {
  flex: 0 0 45%; min-width: 0; display: flex; flex-direction: column;
  background: #0b0d12; border-left: 1px solid var(--borde);
}
.barra-imagen {
  display: flex; align-items: center; gap: 5px; padding: 6px 8px;
  border-bottom: 1px solid var(--borde); background: var(--panel);
}
.barra-imagen #zoom-nivel { min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }
.lienzo-imagen {
  flex: 1; overflow: hidden; position: relative; cursor: grab;
  /* Sin altura mínima, en pantallas angostas (donde el layout se apila y las
     alturas se vuelven auto) el lienzo mide 0 y el ajuste calcula escala 0. */
  min-height: 320px;
}
.lienzo-imagen.agarrando { cursor: grabbing; }
.lienzo-imagen img {
  /* top/left explícitos: el translate del zoom se calcula desde el origen del
     lienzo, así que la imagen no puede quedar recolocada por el layout. */
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0; max-width: none; max-height: none;
  user-select: none; -webkit-user-drag: none;
}
.pista-zoom { margin: 0; padding: 5px 8px; border-top: 1px solid var(--borde); font-size: 11px; }

/* Modo "solo imagen": el texto se esconde y la foja ocupa todo el visor */
.visor-cuerpo.solo-imagen #editor-texto,
.visor-cuerpo.solo-imagen .divisor { display: none; }
.visor-cuerpo.solo-imagen .panel-imagen { flex: 1 1 100%; border-left: none; }
#visor-aviso { margin: 0; padding: 6px 12px; border-top: 1px solid var(--borde); }
.etiqueta { font-size: 11px; padding: 3px 8px; border-radius: 20px; }
.etiqueta.pendiente { background: #3a2f14; color: var(--alerta); }
.etiqueta.verificado { background: #14351c; color: var(--ok); }

/* ---- chat ---- */
.chat { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.burbuja { padding: 9px 12px; border-radius: 10px; max-width: 92%; font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.burbuja.usuario { background: var(--acento-suave); align-self: flex-end; }
.burbuja.agente { background: var(--panel-2); align-self: flex-start; }
.burbuja.sistema {
  background: transparent; border: 1px dashed var(--borde); color: var(--texto-sutil);
  font-size: 12px; align-self: flex-start;
}
.burbuja.pensando { color: var(--texto-sutil); font-style: italic; display: flex; align-items: baseline; gap: 7px; }
.burbuja.pensando .punto-animado::after {
  content: "";
  animation: puntos-suspensivos 1.4s steps(4, end) infinite;
}
@keyframes puntos-suspensivos {
  0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; }
}
.burbuja.pensando .cronometro { font-variant-numeric: tabular-nums; opacity: .7; font-style: normal; }
.chat-entrada { padding: 10px; border-top: 1px solid var(--borde); }
#btn-microfono.grabando { background: var(--error); color: #fff; border-color: transparent; }

/* ---- modales ---- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: grid; place-items: center; z-index: 50; padding: 20px; }
.modal-caja { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 20px; width: min(520px, 94vw); }
.modal-caja.ancha { width: min(880px, 94vw); max-height: 88vh; display: flex; flex-direction: column; }
.lista-ocr { overflow-y: auto; flex: 1; margin: 12px 0; display: flex; flex-direction: column; gap: 12px; }
.item-ocr { border: 1px solid var(--borde); border-radius: 10px; padding: 12px; display: grid; grid-template-columns: 130px 1fr; gap: 12px; }
.item-ocr img { width: 100%; border-radius: 6px; background: #000; }
.item-ocr textarea { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.item-ocr .fila-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.item-ocr select { width: auto; margin: 0; }
.item-ocr.descartado { opacity: .45; }

/* ---- dashboard ---- */
.titulo-seccion { font-size: 14px; color: var(--texto-sutil); margin: 26px 0 10px; font-weight: 600; }
.rejilla-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.kpi { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 14px 16px; }
.kpi .valor { font-size: 28px; font-weight: 600; line-height: 1.1; }
.kpi .etiqueta-kpi { font-size: 12px; color: var(--texto-sutil); margin-top: 4px; }
.kpi.alerta .valor { color: var(--alerta); }
.kpi.ok .valor { color: var(--ok); }
.kpi.acento .valor { color: var(--acento); }

.barras { display: flex; flex-direction: column; gap: 7px; }
.barra-fila { display: grid; grid-template-columns: 130px 1fr 52px; align-items: center; gap: 10px; font-size: 13px; }
.barra-fila .pista { background: var(--panel-2); border-radius: 4px; height: 16px; overflow: hidden; }
.barra-fila .relleno { background: var(--acento); height: 100%; border-radius: 4px; min-width: 2px; }
.barra-fila .num { text-align: right; color: var(--texto-sutil); font-variant-numeric: tabular-nums; }

.tabla-envoltura { overflow-x: auto; border: 1px solid var(--borde); border-radius: 10px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th, .tabla td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla th { background: var(--panel); color: var(--texto-sutil); font-weight: 500; font-size: 12px; }
.tabla tr:last-child td { border-bottom: none; }
.tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .pendiente { color: var(--alerta); }

/* ---- lote de imágenes ---- */
.caja-lote { margin: 0 12px 12px; border: 1px solid var(--acento); border-radius: 10px; background: var(--acento-suave); }
.caja-lote .cuerpo-lote { padding: 10px; }
.caja-lote .fila-titulo.compacta { border-bottom: 1px solid var(--borde); }
.barra-progreso { background: var(--fondo); border-radius: 4px; height: 8px; overflow: hidden; margin-bottom: 8px; }
.barra-progreso > div { background: var(--acento); height: 100%; width: 0; transition: width .4s ease; }

/* ---- toast ---- */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--borde); color: var(--texto);
  padding: 10px 16px; border-radius: 8px; z-index: 100; max-width: 80vw;
}
.toast.malo { border-color: var(--error); color: #ffd9d6; }

@media (max-width: 980px) {
  .columnas { grid-template-columns: 1fr; height: auto; }
  .panel-archivos, .panel-agente { border: none; border-top: 1px solid var(--borde); max-height: 420px; }
  .visor-cuerpo { flex-direction: column; }
  .panel-imagen { flex: 0 0 auto; height: 60vh; border-left: none; border-top: 1px solid var(--borde); }
  /* Apilado, "solo imagen" debe agrandar la foja, no encogerla al mínimo */
  .visor-cuerpo.solo-imagen .panel-imagen { height: 85vh; }
  #editor-texto { min-height: 280px; }
  .divisor { display: none; } /* apilado, el divisor horizontal no aplica */
}

/* ---- avance del borrador automático ---- */
.borrador-etapa { margin: 6px 0 2px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.borrador-etapa::before {
  content: ""; width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%;
  border: 2px solid var(--borde); border-top-color: var(--acento); animation: girar 0.9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
#borrador-barra { transition: width 1s linear; }

/* ---- tarjeta de datos propuestos para cálculo ---- */
.tarjeta-datos {
  margin: 0 12px 8px; padding: 10px 12px; border: 1px solid var(--alerta); border-radius: 10px;
  background: var(--panel-2); font-size: 13px; max-height: 50vh; overflow-y: auto;
}
.tarjeta-datos p { margin: 4px 0 8px; }
.tarjeta-datos .campo-dato { display: grid; gap: 2px; margin-bottom: 8px; }
.tarjeta-datos .campo-dato label { font-weight: 600; font-size: 12px; }
.tarjeta-datos .campo-dato input { width: 100%; box-sizing: border-box; }
.tarjeta-datos .campo-dato small { color: var(--texto-sutil); font-size: 11px; }

/* ---- dictado: escuchando / transcribiendo ---- */
.panel-dictado {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 12px 8px; padding: 8px 12px;
  border: 1px solid var(--error); border-radius: 10px; background: var(--panel-2); font-size: 13px;
}
.panel-dictado[hidden] { display: none; }
.dictado-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--error); animation: latir 1s ease-in-out infinite; }
@keyframes latir { 50% { opacity: .25; transform: scale(.7); } }
.dictado-nivel { flex: 1 1 100%; height: 8px; background: var(--fondo); border-radius: 4px; overflow: hidden; }
#dictado-nivel-barra { height: 100%; width: 0; background: var(--ok); transition: width 80ms linear; }
.panel-dictado.transcribiendo { border-color: var(--acento); }
.panel-dictado.transcribiendo .dictado-punto {
  background: none; border: 2px solid var(--borde); border-top-color: var(--acento); animation: girar .9s linear infinite;
}
.panel-dictado.transcribiendo .dictado-nivel { display: none; }

/* Cajas de la columna izquierda (OCR / borrador): la columna es angosta, así
   que los botones bajan de renglón y se reparten el ancho en vez de salirse. */
.caja-lote { box-sizing: border-box; max-width: calc(100% - 24px); overflow: hidden; flex-shrink: 0; }
.caja-lote .fila-botones { flex-wrap: wrap; }
.caja-lote .fila-botones button { flex: 1 1 auto; min-width: 0; white-space: nowrap; }
.caja-lote p { overflow-wrap: anywhere; }

/* ---- tesis propuestas ---- */
.contador-tesis { background: var(--alerta); color: #111; border-radius: 10px; padding: 0 6px; font-size: 11px; margin-left: 4px; }
.tarjeta-tesis { border: 1px solid var(--borde); border-radius: 10px; background: var(--panel); padding: 14px; margin-bottom: 14px; display: grid; gap: 8px; }
.tarjeta-tesis label { font-size: 12px; font-weight: 600; }
.tarjeta-tesis textarea, .tarjeta-tesis input { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 13px; }
.tarjeta-tesis textarea.texto { min-height: 180px; }
.tarjeta-tesis .obs { border-left: 3px solid var(--alerta); padding-left: 8px; }
.tarjeta-tesis .enlaces { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; }
.tarjeta-tesis .enlaces a { color: var(--acento); overflow-wrap: anywhere; }

/* ---- historial de versiones (laudos, notas, memorias) ---- */
.lista-versiones { margin-top: 10px; border-top: 1px solid var(--borde); padding-top: 8px; max-height: 260px; overflow-y: auto; }
.lista-versiones .titulo-versiones { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-sutil); margin-bottom: 6px; }
.version { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; align-items: center; padding: 6px 4px; border-radius: 6px; font-size: 12px; }
.version + .version { border-top: 1px dashed var(--borde); }
.version.ultima { background: rgba(255, 255, 255, .05); }
.version .num { font-weight: 700; color: var(--texto-sutil); min-width: 18px; text-align: right; }
.version .cuerpo { min-width: 0; }
.version .tipo { font-weight: 600; }
.version .tipo.laudo { color: var(--acento); }
.version .tipo.nota { color: var(--alerta); }
.version .fecha { color: var(--texto-sutil); display: block; }
.version .nombre { color: var(--texto-sutil); font-size: 11px; overflow-wrap: anywhere; display: block; }
.version .etiqueta-ultima { font-size: 10px; background: var(--acento); color: #fff; border-radius: 8px; padding: 0 5px; margin-left: 4px; }
.version button { padding: 3px 8px; font-size: 11px; }

/* ---- fechas en las tarjetas de expediente ---- */
.tarjeta-exp .fechas-exp { display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; color: var(--texto-sutil); margin: 2px 0 8px; }
.tarjeta-exp .fechas-exp span:first-child { color: var(--texto); }
.orden-lista { font-size: 12px; color: var(--texto-sutil); margin: -4px 0 10px; }

/* ---- aviso durante la subida de imágenes ---- */
.aviso-subida { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.aviso-subida.subiendo { background: #3a2f14; color: var(--alerta); border: 1px solid var(--alerta); }
.aviso-subida.listo { background: #14351c; color: var(--ok); border: 1px solid var(--ok); }