:root {
  --tinta: #1b2430;
  --tinta-suave: #5d6b7a;
  --linea: #dde3ea;
  --fondo: #f4f6f9;
  --papel: #ffffff;
  --azul: #1f4e79;
  --azul-claro: #e8f0f8;
  --ambar: #fff4d6;
  --ambar-linea: #e0b34a;
  --verde: #e7f5ec;
  --rojo: #fdecec;
  --rojo-linea: #c0392b;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(20,30,45,.06), 0 4px 12px rgba(20,30,45,.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  color: var(--tinta);
  background: var(--fondo);
}

.oculto { display: none !important; }
.suave { color: var(--tinta-suave); font-weight: 400; }
code { background: #eef1f5; padding: 1px 5px; border-radius: 4px; font-size: 13px; }

/* ---------- arranque ---------- */
.arranque {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, #1f4e79 0%, #2c6ea8 100%);
}
.arranque-caja {
  background: var(--papel);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(10,25,45,.28);
  padding: 34px 34px 28px;
  width: 100%; max-width: 560px;
}
.arranque h1 { margin: 0 0 4px; font-size: 26px; }
.lema { margin: 0 0 22px; color: var(--tinta-suave); }
.explica { color: var(--tinta-suave); line-height: 1.5; margin: 0 0 16px; }
.nota { color: var(--tinta-suave); font-size: 13px; line-height: 1.5; margin: 16px 0 0; }

.carpeta-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 14px 16px; margin-bottom: 10px;
}
.carpeta-rotulo { font-weight: 600; }
.carpeta-estado { color: var(--tinta-suave); font-size: 13px; margin-top: 2px; }
.carpeta-estado.puesta { color: #1e7a46; }

/* ---------- botones y campos ---------- */
.boton {
  font: inherit; font-size: 14px;
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--linea); border-radius: 8px;
  padding: 9px 16px; cursor: pointer; white-space: nowrap;
}
.boton:hover { background: #f0f3f7; }
.boton-principal { background: var(--azul); color: #fff; border-color: var(--azul); }
.boton-principal:hover { background: #163d5e; }
.boton-principal:disabled { background: #b6c3d0; border-color: #b6c3d0; cursor: default; }
.boton-ancho { width: 100%; margin-top: 18px; padding: 12px; font-size: 15px; }
.boton-peligro { border-color: var(--rojo-linea); color: var(--rojo-linea); }

.campo {
  font: inherit; font-size: 14px;
  border: 1px solid var(--linea); border-radius: 8px;
  padding: 9px 12px; width: 100%; background: var(--papel); color: var(--tinta);
}
.campo:focus { outline: 2px solid var(--azul-claro); border-color: var(--azul); }
.etiqueta { display: block; font-weight: 600; margin: 18px 0 7px; }

/* ---------- estructura ---------- */
#aplicacion { display: flex; min-height: 100vh; }

/* Fija en pantalla: con la página larga (Ajustes con los bloques
   abiertos, por ejemplo) antes había que bajar del todo para ver su
   pie. Ahora se queda quieta, con su propio scroll por si algún día
   no cupiera entera. */
.lateral {
  position: fixed; top: 0; left: 0;
  width: 232px; flex: 0 0 232px;
  height: 100vh; overflow-y: auto;
  background: #16324e; color: #cfdcea;
  display: flex; flex-direction: column; padding: 18px 12px;
}
.marca { color: #fff; font-weight: 600; font-size: 16px; padding: 6px 12px 18px; }
.separador-lateral { height: 1px; background: rgba(255,255,255,.14); margin: 6px 4px 10px; }
.pestana {
  display: flex; justify-content: space-between; align-items: center;
  font: inherit; font-size: 14px; text-align: left;
  background: transparent; color: #cfdcea; border: 0; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 3px; cursor: pointer; width: 100%;
}
.pestana:hover { background: rgba(255,255,255,.08); color: #fff; }
.pestana.activa { background: #2c6ea8; color: #fff; font-weight: 600; }
.cuenta { background: rgba(255,255,255,.18); border-radius: 20px; padding: 1px 8px; font-size: 12px; }
.lateral-pie { margin-top: auto; }
.usuario { padding: 10px 12px; font-size: 12px; color: #8fa6bd; }

/* La barra ya no ocupa sitio en el flujo (está fija): el hueco se deja
   con este margen, que barra.css cambia a 52px cuando está plegada. */
.contenido { flex: 1; padding: 26px 32px 60px; max-width: 1180px; margin-left: 232px; }
.cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.cabecera h2 { margin: 0; font-size: 21px; }
.acciones { display: flex; gap: 8px; align-items: center; }
.acciones .campo { width: 300px; }
/* En la cabecera de asuntos abiertos caben ya cuatro cosas: si no entran,
   que bajen de línea en vez de salirse por la derecha. */
.cabecera .acciones { flex-wrap: wrap; justify-content: flex-end; }
#buscar-abiertos { width: 230px; min-width: 0; }
#filtro-estado { width: 170px; min-width: 0; }
#orden-abiertos { width: 250px; min-width: 0; }
h3 { margin: 30px 0 8px; font-size: 16px; }

/* ---------- listas ---------- */
.lista { display: flex; flex-direction: column; gap: 8px; }

/* Rótulo que encabeza cada una de las dos listas de la pantalla de
   asuntos abiertos: arriba los documentos sueltos, abajo los asuntos.
   Sin él, las dos listas parecían una sola. */
.rotulo-lista {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 600; color: var(--tinta);
  margin: 0 0 8px;
}
.rotulo-icono { width: 20px; height: 20px; flex: 0 0 auto; color: var(--azul); }
.rotulo-icono-suelto { color: #a1730a; }
.cuenta-lista {
  background: var(--azul-claro); border: 1px solid #c3d8ec; color: var(--azul);
  border-radius: 20px; padding: 1px 9px; font-size: 12px; font-weight: 600;
}
.tarjeta {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 13px 16px; box-shadow: var(--sombra);
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
/* Si la pantalla es estrecha, los botones bajan enteros a la línea de
   abajo en vez de estrujar el nombre del asunto. */
.tarjeta-texto { flex: 1 1 340px; min-width: 0; }
.tarjeta .acciones { flex: 0 0 auto; margin-left: auto; }

/* Las dos clases de fila no se pueden confundir a simple vista:
   el asunto es una carpeta con franja azul; el documento suelto es una
   hoja, con franja y fondo de color arena. */
.tarjeta-icono { width: 22px; height: 22px; flex: 0 0 auto; }
.tarjeta-asunto { border-left: 5px solid var(--azul); }
.tarjeta-asunto .tarjeta-icono { color: var(--azul); }
.tarjeta-suelto {
  border-left: 5px solid var(--ambar-linea);
  background: #fffdf4;
}
.tarjeta-suelto .tarjeta-icono { color: #a1730a; }
.tarjeta-suelto .tarjeta-nombre { font-weight: 500; }

/* El documento que se está viendo en el panel de la derecha, marcado
   en su tarjeta de la lista (17-sep-2026, fila 25): fondo y borde
   distintos, para encontrarla sin buscar. */
.tarjeta-abierta {
  border-left-color: var(--azul);
  background: var(--azul-claro);
  box-shadow: 0 0 0 1px var(--azul), var(--sombra);
}
.marca-ext {
  display: inline-block; background: #f3ede1; color: #7a5c12;
  border: 1px solid #e3d6b8; border-radius: 5px;
  padding: 1px 7px; font-size: 11px; font-weight: 700; margin-right: 8px;
  letter-spacing: .3px;
}
.tarjeta-nombre { font-weight: 600; word-break: break-word; }
.tarjeta-pie { color: var(--tinta-suave); font-size: 13px; margin-top: 3px; }
.marca-tipo {
  display: inline-block; background: var(--azul-claro); color: var(--azul);
  border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 600; margin-right: 8px;
}
/* La etiqueta de color del estado del asunto. El color sale del sitio
   que ocupa en la lista de Ajustes, y hay seis que se van repitiendo. */
.marca-estado {
  display: inline-block; border-radius: 20px; padding: 2px 10px;
  font-size: 12px; font-weight: 600; margin-right: 8px;
  border: 1px solid transparent;
}
.estado-0 { background: #eef1f5; color: #4a5765; border-color: #d7dde5; }
.estado-1 { background: #e8f0f8; color: #1f4e79; border-color: #c3d8ec; }
.estado-2 { background: #fff4d6; color: #8a6100; border-color: #e6c377; }
.estado-3 { background: #f0eafb; color: #5b3fa0; border-color: #d6c8f0; }
.estado-4 { background: #fdecec; color: #a4302a; border-color: #f2c4c0; }
.estado-5 { background: #e7f5ec; color: #1e6b3f; border-color: #bfe3cd; }
.estado-x { background: #eef1f5; color: #5d6b7a; border-color: #d7dde5; }

/* El desplegable de estado no debe ocupar los 300px de los buscadores. */
.acciones .campo-estado { width: auto; min-width: 165px; }
.boton-marcado { border-color: var(--azul); color: var(--azul); }

.marca-categoria {
  display: inline-block; background: #eef1f5; color: var(--tinta-suave);
  border-radius: 20px; padding: 2px 10px; font-size: 12px; margin-right: 8px;
}
.vacio {
  background: var(--papel); border: 1px dashed var(--linea); border-radius: var(--radio);
  padding: 28px; text-align: center; color: var(--tinta-suave);
}

/* ---------- documentos sin clasificar ----------

   Lo que alguien deja suelto en la carpeta de asuntos abiertos: casi
   siempre, una tarea nueva del equipo directivo. Va arriba del todo y
   en ámbar, para que se distinga de un asunto ya montado.

   La cabecera entera es el botón de plegar, y se pliega sola cuando se
   está buscando entre los asuntos. Aun plegada sigue diciendo si ha
   llegado algo nuevo. */
#bloque-sueltos { margin-bottom: 26px; }
.sueltos-cabecera {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}

/* ---------- las tres tarjetas de arriba ----------

   Un montón de trabajo en cada una: papeles sin asunto, asuntos que nos
   tocan y asuntos que esperan a otro. La elegida se queda marcada. */
.paneles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin: 4px 0 22px;
}
.panel {
  position: relative;
  display: flex; align-items: center; gap: 12px; text-align: left;
  font: inherit; color: var(--tinta); cursor: pointer;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra);
}
.panel:hover { border-color: #b9c6d6; }
.panel.activo {
  border-color: var(--azul); box-shadow: 0 0 0 2px var(--azul-claro), var(--sombra);
}
.panel-icono { width: 26px; height: 26px; flex: 0 0 auto; color: var(--tinta-suave); }
.panel.activo .panel-icono { color: var(--azul); }
.panel-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.panel-nombre { font-weight: 600; font-size: 15px; }
.panel-pie { color: var(--tinta-suave); font-size: 12px; line-height: 1.3; }
.panel-cuenta {
  flex: 0 0 auto; min-width: 30px; text-align: center;
  background: #eef1f5; border: 1px solid var(--linea); color: var(--tinta);
  border-radius: 20px; padding: 2px 10px; font-size: 14px; font-weight: 700;
}
.panel.activo .panel-cuenta {
  background: var(--azul-claro); border-color: #c3d8ec; color: var(--azul);
}
.panel-cuenta.cuenta-ambar { background: var(--ambar); border-color: var(--ambar-linea); color: #8a6100; }
.panel-cuenta.cuenta-roja { background: var(--rojo); border-color: var(--rojo-linea); color: var(--rojo-linea); }
.panel .marca-nueva { position: absolute; top: -8px; right: 10px; }
.pie-aviso { color: var(--rojo-linea); font-weight: 600; }
.interruptor-fila { margin: 0; white-space: nowrap; }

@media (max-width: 900px) {
  .paneles { grid-template-columns: 1fr; }
}
.tarjeta-nueva { background: var(--ambar); border-color: var(--ambar-linea); }
.marca-nueva {
  display: inline-block; background: var(--ambar-linea); color: #fff;
  border-radius: 20px; padding: 2px 10px; font-size: 12px; font-weight: 600; margin-right: 8px;
}

/* Quién tiene abierto este asunto ahora mismo (17-sep-2026, fila 24):
   una letra basta, el nombre entero va en el title. */
.marca-presencia {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--azul); color: #fff;
  font-size: 11px; font-weight: 700; margin-right: 8px;
}

/* ---------- nuevo asunto ---------- */
.formulario { background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 22px 24px 26px; box-shadow: var(--sombra); }
.formulario .etiqueta:first-child { margin-top: 0; }
.tipos { display: flex; flex-wrap: wrap; gap: 7px; }
.tipo-boton {
  font: inherit; font-size: 13px; font-weight: 600;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 20px;
  padding: 7px 14px; cursor: pointer;
}
.tipo-boton:hover { border-color: var(--azul); color: var(--azul); }
.tipo-boton.elegido { background: var(--azul); border-color: var(--azul); color: #fff; }

.categorias { display: flex; flex-wrap: wrap; gap: 10px; }
.categoria-boton {
  font: inherit; font-size: 15px; font-weight: 600;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 10px;
  padding: 18px 26px; cursor: pointer; min-width: 150px; text-align: left;
}
.categoria-boton small { display: block; font-weight: 400; font-size: 12px; color: var(--tinta-suave); margin-top: 3px; }
.categoria-boton:hover { border-color: var(--azul); }
.categoria-boton.elegido { background: var(--azul); border-color: var(--azul); color: #fff; }
.categoria-boton.elegido small { color: #cfe0ee; }

.enlace {
  font: inherit; font-size: inherit; background: none; border: 0; padding: 0;
  color: var(--azul); text-decoration: underline; cursor: pointer;
}
.interruptor {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: #f7f9fc; border: 1px solid var(--linea); border-radius: 8px;
  padding: 11px 14px; margin-top: 18px;
}
.interruptor input { width: 17px; height: 17px; cursor: pointer; }

.resultados { max-height: 260px; overflow-y: auto; margin-top: 8px; }
.resultado {
  padding: 9px 12px; border: 1px solid var(--linea); border-radius: 8px;
  margin-bottom: 5px; cursor: pointer; background: var(--papel);
}
.resultado:hover { background: var(--azul-claro); border-color: var(--azul); }
.resultado-pie { color: var(--tinta-suave); font-size: 13px; }
.elegido-caja {
  background: var(--verde); border: 1px solid #a9d6bb; border-radius: 8px;
  padding: 11px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vista-previa { background: #f7f9fc; border: 1px solid var(--linea); border-radius: 10px; padding: 15px 17px; margin-top: 22px; }
.vista-rotulo { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); margin-bottom: 6px; }
.vista-nombre { font-family: "Consolas", "Menlo", monospace; font-size: 15px; font-weight: 600; word-break: break-word; }
.vista-ruta { color: var(--tinta-suave); font-size: 13px; margin-top: 6px; }

/* ---------- personas ---------- */
.dos-paneles { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.ficha { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 20px; box-shadow: var(--sombra); }
.ficha h4 { margin: 0 0 12px; font-size: 17px; }
.ficha-dato { display: grid; grid-template-columns: 190px 1fr; gap: 10px; padding: 5px 0; border-bottom: 1px solid #f0f3f7; font-size: 14px; }
.ficha-dato span:first-child { color: var(--tinta-suave); }
.ficha-dato span:last-child { word-break: break-word; }

/* ---------- ajustes ---------- */
.alta-tipo { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.fila-tipo { display: flex; align-items: center; gap: 12px; background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; padding: 9px 14px; }
.fila-tipo .nombre-tipo { font-weight: 600; flex: 1; }

/* ---------- avisos y cuadros ---------- */
.aviso { border-radius: var(--radio); padding: 14px 16px; margin-bottom: 18px; }
.aviso p { margin: 6px 0 0; }
.aviso-rojo { background: var(--rojo); border: 1px solid #f0b7b1; }
.aviso-ambar { background: var(--ambar); border: 1px solid var(--ambar-linea); }
#aviso-pendiente .boton { margin-top: 10px; }

.capa { position: fixed; inset: 0; background: rgba(15,25,40,.45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.cuadro { background: var(--papel); border-radius: 12px; padding: 24px; width: 100%; max-width: 520px; box-shadow: 0 20px 60px rgba(10,25,45,.35); }
.cuadro h3 { margin: 0 0 12px; }
.cuadro-botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }

.mensajes { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.mensaje { background: #16324e; color: #fff; padding: 12px 18px; border-radius: 8px; box-shadow: 0 8px 24px rgba(10,25,45,.3); max-width: 380px; font-size: 14px; }
.mensaje.malo { background: var(--rojo-linea); }
.mensaje.bueno { background: #1e7a46; }
.mensaje.ambar { background: var(--ambar-linea); color: #3a2a00; }

@media (max-width: 900px) {
  .dos-paneles, .dos-columnas { grid-template-columns: 1fr; }
  .contenido { padding: 20px 16px 50px; }
  .acciones .campo { width: 100%; }
  .acciones .campo-estado { width: 100%; }
}

/* ---------- documentos ---------- */
.lista-documentos { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; max-height: 220px; overflow-y: auto; }
.fila-documento {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--linea); border-radius: 8px; padding: 8px 12px;
}
.nombre-documento { flex: 1; font-size: 13px; word-break: break-word; }
.registro-campos { display: grid; grid-template-columns: 70px 1fr 1fr 110px; gap: 12px; align-items: start; }
.opciones { display: flex; gap: 6px; flex-wrap: wrap; }
.opcion {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  border: 1px solid var(--linea); border-radius: 8px; padding: 8px 10px; font-size: 13px;
}
.opcion:has(input:checked) { background: var(--azul-claro); border-color: var(--azul); font-weight: 600; }
@media (max-width: 700px) {
  .registro-campos { grid-template-columns: 1fr 1fr; }
}

/* ---------- el visor de documentos ---------- */

/* La ventana del visor ocupa casi toda la pantalla: el documento es lo que
   hay que leer, no los campos. */
.cuadro-ancho {
  max-width: min(1600px, 96vw);
  max-height: calc(100vh - 40px);
  overflow: auto;
}

/* El documento se lleva dos tercios del ancho; los campos, un tercio. */
.doc-partido {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 18px; align-items: start;
}

/* Con el boton "Ver mas grande" se esconden los campos y el documento
   pasa a ocupar toda la ventana. */
.doc-partido.solo-visor { grid-template-columns: 1fr; }
.doc-partido.solo-visor .doc-campos { display: none; }

.visor-barra { display: flex; justify-content: flex-end; margin-bottom: 6px; }

/* El documento ya no se encoge para caber entero: se enseña a todo el ancho
   y se baja con la rueda. */
.visor {
  border: 1px solid var(--linea); border-radius: 10px; background: #ffffff;
  height: calc(100vh - 250px); min-height: 380px;
  overflow: auto;
}
.visor iframe { display: block; width: 100%; height: 100%; border: 0; }
.visor img { display: block; width: 100%; height: auto; }
.visor .explica { padding: 16px; margin: 0; }

.doc-campos { max-height: calc(100vh - 250px); overflow-y: auto; padding-right: 6px; }
.doc-campos .etiqueta:first-child { margin-top: 0; }

@media (max-width: 900px) {
  .doc-partido { grid-template-columns: 1fr; }
  .visor { height: 55vh; min-height: 0; }
  .doc-campos { max-height: none; }
}

/* La etiqueta del desplegable de ordenación, en la misma línea que él. */
.etiqueta-en-linea {
  font-size: 13px;
  color: #5a6472;
  white-space: nowrap;
}
#orden-abiertos { width: auto; }