/* ============================================================
   ficha-asunto.css — el aspecto de la pantalla de un asunto.
   ============================================================ */

/* El nombre del asunto, en la lista, se pulsa para entrar. */
.nombre-pulsable { cursor: pointer; }
.nombre-pulsable:hover { text-decoration: underline; }

.ficha-cabecera { margin-bottom: 16px; }
.ficha-marcas { margin: 12px 0 4px; }

/* La línea gris bajo el nombre (18-sep-2026, fila 51,
   docs/FICHA-DISPOSICION.md, 4): lo que antes repetía "Datos del
   asunto". Se esconde entera con la cabecera encogida: no entra en el
   reparto por "order" de ahí abajo, solo desaparece. */
.ficha-subtitulo { margin: 4px 0 0; font-size: 13px; color: var(--tinta-suave); }
.ficha-cabecera.encogida .ficha-subtitulo { display: none; }

/* Encogida (css/cabecera-fija.css pone y quita la clase): todo en una
   sola línea — volver, nombre (con puntos suspensivos si no cabe),
   tipo, estado y plazo — docs/CABECERA-QUE-SE-QUEDA.md, tabla del
   punto 2. El orden visual cambia con "order", sin tocar el HTML que
   escribe js/ficha-asunto.js (el nombre va en medio, las marcas al
   final). */
.ficha-cabecera.encogida {
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  margin-bottom: 0;
}
.ficha-cabecera.encogida .ficha-volver-fila { flex: 0 0 auto; order: 1; }
.ficha-cabecera.encogida #ficha-volver-origen { display: none; }
/* El icono de copiar y los tres puntos siguen a la vista con la
   cabecera encogida (18-sep-2026, fila 52, docs/CABECERA-DEL-ASUNTO.md,
   5): el `<h2>` pasa a fila, y solo el texto del nombre
   (`.ficha-nombre-texto`) se recorta con puntos suspensivos, nunca los
   botones. */
.ficha-cabecera.encogida .ficha-nombre {
  order: 2; flex: 1 1 auto; min-width: 0; font-size: 16px; margin: 0;
  display: flex; align-items: center; overflow: hidden;
}
.ficha-cabecera.encogida .ficha-nombre-texto {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.ficha-cabecera.encogida .ficha-nombre .boton-nie,
.ficha-cabecera.encogida .ficha-nombre-menu-boton { flex: 0 0 auto; }
.ficha-cabecera.encogida .ficha-marcas {
  order: 3; flex: 0 0 auto; margin: 0; display: flex; gap: 6px;
  white-space: nowrap; overflow: hidden;
}

/* La fila de "Volver a la lista" y, si se ha saltado desde otro asunto
   (17-sep-2026, fila 40, docs/SALTAR-A-OTRO-ASUNTO.md), "← Volver a
   [asunto de partida]" al lado. Una sola línea siempre: la cabecera no
   crece ni se parte en dos alturas por un nombre de asunto largo. */
.ficha-volver-fila {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  max-width: 100%;
}
#ficha-volver-origen { min-width: 0; flex: 1 1 auto; display: flex; }
.boton-volver-origen {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex: 0 1 auto;
}
.ficha-nombre {
  margin: 0; font-size: 20px; line-height: 1.35; word-break: break-word;
}

/* El icono de copiar el número del tercero (js/copiar.js) y los tres
   puntos (js/ficha-nombre-acciones.js), pegados al nombre (18-sep-2026,
   fila 52, docs/CABECERA-DEL-ASUNTO.md, 5): siguen dentro del `<h2>`,
   así que se ven igual con la cabecera encogida. */
.ficha-nombre .boton-nie { margin-left: 8px; }
.ficha-nombre-menu-boton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin-left: 6px; padding: 0; vertical-align: middle;
  font-size: 17px; line-height: 1; border-radius: 8px;
  border: 1px solid var(--linea); background: var(--papel); color: var(--tinta); cursor: pointer;
}
.ficha-nombre-menu-boton:hover { background: #f0f3f7; }

/* El menú pequeño reutilizable (js/ficha-menus.js): los tres puntos del
   nombre y "Comunicar". */
.ficha-menu-envoltorio { position: relative; display: inline-flex; vertical-align: middle; }
.ficha-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 5;
  min-width: 220px; background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra); padding: 6px; display: flex; flex-direction: column;
}
.ficha-menu-opcion {
  font: inherit; font-size: 14px; text-align: left; background: none; border: 0;
  padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--tinta);
}
.ficha-menu-opcion:hover { background: #f0f3f7; }
.ficha-menu-opcion:disabled { color: var(--tinta-suave); cursor: default; background: none; }
.ficha-menu-peligro { color: var(--rojo-linea); }
.ficha-menu-raya { border: 0; border-top: 1px solid var(--linea); margin: 4px 2px; }

/* La barra de botones, debajo del nombre. Termina en el mismo borde
   que el título, sin hueco a la derecha (18-sep-2026, fila 52,
   docs/CABECERA-DEL-ASUNTO.md, 12): "Archivar"/"Reabrir" se pega al
   borde con `margin-left: auto`. */
.ficha-acciones {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 0 18px; border-bottom: 1px solid var(--linea); margin-bottom: 18px;
}
.ficha-acciones .campo-estado { width: auto; min-width: 180px; }
.ficha-acciones .boton-principal { margin-left: auto; }

/* El vencimiento, a la vista (18-sep-2026, fila 52,
   docs/CABECERA-DEL-ASUNTO.md, 8): sustituye al botón "Plazo" y a la
   marca `.marca-plazo`. Mismos colores que `.plazo-vencido`/
   `.plazo-cerca` (css/plazos.css), con nombre propio porque el umbral
   de ámbar es distinto (2 días, no 7). */
.boton-vencimiento {
  display: inline-flex; align-items: center; border-radius: 20px; padding: 8px 14px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--linea); background: var(--papel); color: var(--tinta);
}
.boton-vencimiento.vencimiento-vencido { background: #fdecec; color: #a4302a; border-color: #f2c4c0; }
.boton-vencimiento.vencimiento-cerca { background: #fff4d6; color: #8a6100; border-color: #e6c377; }
.boton-vencimiento.vencimiento-sin { background: #eef1f5; color: #5d6b7a; border-color: #d7dde5; }

/* "El encargo" (18-sep-2026, fila 52, docs/CABECERA-DEL-ASUNTO.md, 7):
   el botón y, si ya hay datos, un resumen de una línea debajo, en gris
   y pequeño. Cuenta como un solo elemento de la barra. */
.ficha-encargo { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.ficha-encargo-resumen { font-size: 12px; color: var(--tinta-suave); }

/* Tres tramos (18-sep-2026, fila 51, docs/FICHA-DISPOSICION.md, 7):
   izquierda lo que hay que hacer (Hitos), centro los documentos
   (llevan botones, hueco propio), derecha lo que hay que saber (Datos
   y contacto primero) y lo que casi nunca se mira, plegado. Por
   debajo de 1000px, una sola columna en el orden del HTML (izquierda,
   centro, derecha); de 1000 a 1499px, dos columnas con el centro
   debajo de la izquierda; de 1500px en adelante, las tres a la vez —
   así en el monitor ancho del trabajo no queda ningún hueco vacío. */
.ficha-columnas {
  display: grid; grid-template-columns: 1fr;
  gap: 20px; align-items: start;
}
.ficha-izquierda, .ficha-centro, .ficha-derecha { display: flex; flex-direction: column; gap: 16px; }

@media (min-width: 1000px) {
  .ficha-columnas { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .ficha-izquierda { grid-column: 1; grid-row: 1; }
  .ficha-centro { grid-column: 1; grid-row: 2; }
  .ficha-derecha { grid-column: 2; grid-row: 1 / span 2; }
}
@media (min-width: 1500px) {
  .ficha-columnas { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(320px, 1fr); }
  .ficha-izquierda { grid-column: 1; grid-row: 1; }
  .ficha-centro { grid-column: 2; grid-row: 1; }
  .ficha-derecha { grid-column: 3; grid-row: 1; }
}

/* No pisarse en un mismo asunto (17-sep-2026, fila 24): el aviso de
   que el compañero ya está dentro, con "Tomar el mando" a la derecha.
   Los controles que apaga aplicarModoConsulta (js/ficha-asunto.js) ya
   se ven apagados con el estilo de siempre de un botón deshabilitado:
   no hace falta nada más aquí para eso. */
.aviso-presencia {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.boton-presencia-tomar { flex: 0 0 auto; }

/* Un papel que ya trae el sello del registro (17-sep-2026, fila 20):
   el desplegable de documentos y el botón de descartarlo, en línea. */
.aviso-sello + .aviso-sello { margin-top: 10px; }
.sello-fila {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px;
}
.sello-fila .sello-elegir { width: auto; min-width: 260px; flex: 1 1 260px; }
.sello-fila .sello-no-es { flex: 0 0 auto; }

.ficha-bloque {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 16px 18px; box-shadow: var(--sombra);
}
.ficha-titulo { margin: 0 0 10px; font-size: 15px; }

/* "Documentos ▾", en la cabecera del bloque (18-sep-2026, fila 52,
   docs/CABECERA-DEL-ASUNTO.md, 11): antes "Gestionar documentos" en la
   barra de la ficha. */
.ficha-documentos-gestionar { margin-left: 8px; padding: 3px 10px; font-size: 12px; }

/* Un bloque vacío no gasta una tarjeta entera (18-sep-2026, fila 51,
   docs/FICHA-DISPOSICION.md, 8): título y aviso en una sola línea, con
   menos padding. Hoy solo lo pone "Documentos de la carpeta"
   (js/ficha-documentos.js) cuando la carpeta no tiene nada. */
.ficha-bloque.vacio {
  padding: 10px 18px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.ficha-bloque.vacio .ficha-titulo { margin: 0; }
.ficha-bloque.vacio .explica { font-size: 13px; color: var(--tinta-suave); }
.ficha-bloque .explica { margin: 0; }

.ficha-datos { display: flex; flex-direction: column; }
.ficha-datos .ficha-dato {
  display: grid; grid-template-columns: 150px 1fr; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid #f0f3f7; font-size: 14px;
}
.ficha-datos .ficha-dato:last-child { border-bottom: 0; }
.ficha-datos .ficha-dato span:first-child { color: var(--tinta-suave); }
.ficha-datos .ficha-dato span:last-child { word-break: break-word; }

.ficha-persona-nombre { margin: 0 0 8px; font-size: 15px; }

.ficha-documentos { display: flex; flex-direction: column; gap: 6px; }

/* El rótulo que separa los papeles del expediente de lo que ha
   llegado por correo. Solo sale cuando hay de las dos clases. */
.ficha-grupo-docs {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-suave);
  margin: 6px 0 0;
}
.ficha-grupo-docs:first-child { margin-top: 0; }

/* Con el panel de la derecha abierto se estrecha el hueco de la ficha
   tanto como bajar de 1000px (fila 37, 17-sep-2026): una sola columna,
   en el orden del HTML (Hitos, Documentos, Datos y contacto y lo
   plegado). Los `grid-column`/`grid-row` de los tramos de arriba son
   de un ancho de sobra (1000/1500px): sin quitarlos aquí, un tramo
   pediría una columna o una fila que ya no existe con una sola
   columna, y el sitio le saldría mal (fila 51, 18-sep-2026). */
body.con-visor .ficha-columnas,
body.con-lector .ficha-columnas {
  grid-template-columns: 1fr;
}
body.con-visor .ficha-izquierda, body.con-visor .ficha-centro, body.con-visor .ficha-derecha,
body.con-lector .ficha-izquierda, body.con-lector .ficha-centro, body.con-lector .ficha-derecha {
  grid-column: auto; grid-row: auto;
}

@media (max-width: 1000px) {
  .ficha-datos .ficha-dato { grid-template-columns: 1fr; gap: 0; }
}

/* La cuenta de documentos, al lado del título de su tarjeta. */
.ficha-cuenta {
  background: var(--azul-claro); border: 1px solid #c3d8ec; color: var(--azul);
  border-radius: 20px; padding: 1px 9px; font-size: 12px; font-weight: 600;
  margin-left: 8px;
}

/* Cada documento es un botón: se pulsa y se abre en otra pestaña. */
.ficha-documentos .ficha-documento {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; font-size: 13px; text-align: left;
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--linea); border-radius: 8px; padding: 7px 11px;
  cursor: pointer; word-break: break-word;
}
.ficha-documentos .ficha-documento:hover { background: var(--azul-claro); border-color: var(--azul); }
/* La etiqueta PDF o JPG no se parte en dos líneas cuando el nombre es
   largo: se queda entera a la izquierda. */
.ficha-documentos .marca-ext { flex: 0 0 auto; margin-right: 0; }

/* La tarjeta del tercero viene pequeña: nombre y un par de datos.
   Al pulsarla se abre entera. */
.ficha-plegable { padding: 0; }
.ficha-plegable > summary {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 18px; cursor: pointer; list-style: none;
}
.ficha-plegable > summary::-webkit-details-marker { display: none; }
.ficha-plegable > summary:hover { background: #f7fafd; border-radius: var(--radio); }
.ficha-plegable > summary .ficha-titulo { margin: 0; }
.ficha-resumen { color: var(--tinta-suave); font-size: 13px; }
.ficha-plegable[open] > summary { border-bottom: 1px solid var(--linea); border-radius: 0; }
.ficha-plegable-cuerpo { padding: 12px 18px 16px; }

/* Con la cuenta a cero, el título se queda en gris suave y sin
   negrita: no hay nada urgente que mirar ahí dentro (18-sep-2026,
   fila 51, docs/FICHA-DISPOSICION.md, 6). */
.ficha-plegable-vacio > summary .ficha-titulo { font-weight: 400; color: var(--tinta-suave); }

/* Los otros asuntos del mismo tercero. Los del mismo tipo van
   marcados: son los que de verdad pueden estar repetidos. */
.otros-lista { display: flex; flex-direction: column; gap: 12px; }
.otros-grupo { display: flex; flex-direction: column; gap: 5px; }
.otros-rotulo {
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-suave);
}
.otros-asunto {
  display: block; width: 100%; font: inherit;
  border: 1px solid var(--linea); border-radius: 8px; padding: 6px 10px;
  font-size: 13px; text-align: left; word-break: break-word;
  background: var(--papel); color: var(--tinta); cursor: pointer;
}
.otros-asunto:hover { background: var(--azul-claro); border-color: var(--azul); }
.otros-asunto:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.otros-mismo-tipo {
  background: var(--ambar); border-color: var(--ambar-linea); font-weight: 600;
}
.otros-mismo-tipo:hover { background: var(--ambar); border-color: var(--azul); }

/* El aviso de que ese tercero ya tuvo un asunto así, al crear uno nuevo. */
#aviso-duplicado { margin-top: 22px; }
.lista-repetidos { margin: 6px 0 0; padding-left: 20px; font-size: 13px; }
.lista-repetidos li { margin-bottom: 3px; word-break: break-word; }