/* =====================================================================
   ERP Modular — sistema de diseño
   Paleta: panel de control técnico, no plantilla genérica de SaaS.
   Concepto: cada módulo se representa como un interruptor de un cuadro
   eléctrico — apto para un sistema cuyo eje central es "activar/
   desactivar módulos".
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  --bg: #f2f4f1;
  --surface: #ffffff;
  --surface-alt: #e8ebe6;
  --ink: #1c2321;
  --ink-muted: #5b645f;
  --line: #d7ddd3;
  --accent: #2f6f5e;
  --accent-ink: #ffffff;
  --accent-soft: #e2ede9;
  --off: #9c5b24;
  --off-soft: #f2e6da;
  --error: #a3352b;
  --error-soft: #f5e1de;
  --info: #2f5f8f;
  --info-soft: #e2ecf5;
  --favorito: #b8860b;
  --radius: 0.65rem;
  --radius-sm: 0.4rem;
  --radius-lg: 1rem;
  --shadow-soft: 0 1px 2px rgba(28, 35, 33, 0.05), 0 6px 16px rgba(28, 35, 33, 0.05);
  --shadow-hover: 0 16px 28px rgba(28, 35, 33, 0.12);
  --font-display: 'IBM Plex Sans Condensed', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Piloto de rediseño extendido a toda la app (ver CONTEXTO.md): cualquier
     componente de Bootstrap que se use en cualquier plantilla hereda la
     paleta e identidad del proyecto en vez del azul/gris por defecto. */
  --bs-primary: var(--accent);
  --bs-primary-rgb: 47, 111, 94;
  --bs-secondary-color: var(--ink-muted);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font-body);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--ink);
}

* { box-sizing: border-box; }

/* El atributo hidden debe ganar siempre, aunque el propio elemento (u otra
   regla) fije un display en línea (ej. display:flex para su layout visible) */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

a { color: inherit; }

/* ---------- Topbar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ink);
  color: var(--accent-ink);
  padding: 0 1.5rem;
  height: 56px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  position: relative;
  z-index: 10;
}

.topbar__marca {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--accent-ink);
}

.topbar__version {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0;
  opacity: 0.6;
  margin-left: 0.15rem;
}

.topbar__marca .indicador {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 111, 94, 0.35);
}

.usuario-menu {
  position: relative;
}

.usuario-menu summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius);
}

.usuario-menu summary::-webkit-details-marker { display: none; }

.usuario-menu summary:hover,
.usuario-menu[open] summary {
  background: rgba(255, 255, 255, 0.08);
}

.usuario-menu .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
}

.usuario-menu .nombre {
  font-size: 0.9rem;
  color: #e8ebe6;
}

.usuario-menu .caret {
  font-size: 0.65rem;
  color: #9aa39d;
}

.usuario-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  z-index: 20;
}

.usuario-menu__panel a,
.usuario-menu__panel button {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  padding: 0.65rem 0.9rem;
  font: inherit;
  font-size: 0.88rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
}

.usuario-menu__panel a i,
.usuario-menu__panel button i {
  color: var(--ink-muted);
  width: 1em;
  text-align: center;
}

.usuario-menu__panel a:hover,
.usuario-menu__panel button:hover {
  background: var(--surface-alt);
}

.usuario-menu__panel .separador {
  height: 1px;
  background: var(--line);
  margin: 0;
}

.usuario-menu__panel form { margin: 0; }

/* ---------- Layout general ---------- */

main {
  max-width: 1040px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.migas {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-bottom: 1.25rem;
}

.migas a { text-decoration: none; color: var(--ink-muted); }
.migas a:hover { color: var(--accent); }

h1.titulo-pagina {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.subtitulo {
  color: var(--ink-muted);
  margin: 0 0 2rem;
  font-size: 0.95rem;
}

/* ---------- Cuadro de módulos (elemento de firma) ---------- */

.cuadro-modulos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.modulo-switch {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.1rem 1.1rem 1rem;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.modulo-switch:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.modulo-switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.modulo-switch__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.modulo-switch__estado {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
}

.modulo-switch__estado .punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.modulo-switch__nombre {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
}

.modulo-switch__desc {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0 0 0.75rem;
  min-height: 2.4em;
}

.modulo-switch__codigo {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-muted);
  background: var(--surface-alt);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius);
  display: inline-block;
}

.panel-vacio {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--ink-muted);
}

/* ---------- Tarjetas de contenido genéricas (listas, formularios) ---------- */

.tarjeta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
}

.lista-simple {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.lista-simple li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.lista-simple li:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-soft);
}

/* En el móvil, la fila de una lista no cabe en una línea: el contenido
   (p. ej. un nombre de cuenta largo como Activos:Banco:BBVA:TarjetaDigital)
   empuja las acciones fuera de la pantalla, y como el `li` es flex sin
   envolver, "Editar/Eliminar" quedaban cortados por la derecha. Se dejan
   caer a la línea de abajo, y el contenido puede encogerse (`min-width: 0`
   quita el mínimo automático de los elementos flex) y partir una palabra
   larguísima si aun así no entra. El `flex-wrap` de dentro es para las
   filas que agrupan el nombre con varias etiquetas en un span propio: no
   hace nada en los hijos que no sean flex. */
@media (max-width: 700px) {
  .lista-simple li {
    flex-wrap: wrap;
    gap: 0.4rem 0.85rem;
  }

  .lista-simple li > * {
    min-width: 0;
    overflow-wrap: break-word;
    flex-wrap: wrap;
  }
}

.etiqueta-ok { color: var(--accent); font-family: var(--font-mono); font-size: 0.78rem; }
.etiqueta-pendiente { color: var(--off); font-family: var(--font-mono); font-size: 0.78rem; }

.acciones-fila { display: flex; align-items: center; gap: 0.85rem; font-size: 0.85rem; }

.acciones-fila a,
.acciones-fila button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent);
  text-decoration: none;
}

.acciones-fila a:hover, .acciones-fila button:hover { text-decoration: underline; }

/* Los iconos de las acciones de fila van un punto por debajo del texto: en
   una lista larga, a tamaño completo ensucian más que ayudan. */
.acciones-fila i,
.lista-simple i,
.boton-enlace i {
  font-size: 0.9em;
  opacity: 0.8;
}

/* ---------- Formularios ----------
   Importante: ~44 plantillas del proyecto renderizan sus formularios con
   `{{ form.as_p }}`, así que Django saca los campos SIN ninguna clase. Por
   eso aquí se estilan los selectores de etiqueta a pelo (input/select/
   textarea) y no solo `.campo`: es la única forma de que un `<select>` o un
   `<input type="date">` de cualquier módulo se vea igual de cuidado que un
   campo de texto, sin tocar las 44 plantillas una a una. */

form p { margin: 0 0 1.1rem; }

label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.campo,
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="url"], input[type="tel"], input[type="number"], input[type="date"],
input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"],
select, textarea {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.4;
  /* background-color, no el atajo `background`: si no, borraría el
     background-image del chevron que se pinta más abajo en `select`
     (que además tiene menos especificidad que `.campo`). */
  background-color: var(--surface);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.campo::placeholder, input::placeholder, textarea::placeholder {
  color: var(--ink-muted);
  opacity: 0.65;
}

.campo:hover:not(:disabled), input:hover:not(:disabled), select:hover:not(:disabled),
textarea:hover:not(:disabled) {
  border-color: #bcc5b8;
}

.campo:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.campo:disabled, input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-alt);
  color: var(--ink-muted);
  cursor: not-allowed;
}

textarea {
  resize: vertical;
  min-height: 5rem;
}

/* Select: se quita la flecha del sistema (que delata el "sin estilar") y se
   dibuja una propia como SVG embebido, del color del texto apagado. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235b645f' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5' stroke='%235b645f' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  cursor: pointer;
}

select[multiple] {
  appearance: auto;
  background-image: none;
  padding-right: 0.85rem;
}

/* Casillas y radios: `accent-color` es lo que los hace parecer del sistema
   de diseño en vez del azul por defecto del navegador. */
input[type="checkbox"], input[type="radio"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Con `form.as_p`, Django escribe `<p><label>Usar TLS:</label><input
   type=checkbox></p>`: como `label` es display:block, la casilla caía sola
   en la línea de abajo. Se recompone la fila con :has() para que quede
   casilla + etiqueta en línea, sin tocar ninguna plantilla. */
form p:has(> input[type="checkbox"]),
form p:has(> input[type="radio"]) {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}

form p:has(> input[type="checkbox"]) > label,
form p:has(> input[type="radio"]) > label {
  margin-bottom: 0;
  font-weight: 500;
  cursor: pointer;
}

/* Subida de ficheros: el botón nativo es de lo más anticuado que queda. */
input[type="file"] {
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

input[type="file"]::file-selector-button:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

input[type="color"] {
  width: 3rem;
  height: 2.4rem;
  padding: 0.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}

/* Texto de ayuda de Django (`help_text`) y errores de validación. */
.helptext, .subtitulo-campo {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: var(--ink-muted);
}

form ul.errorlist {
  list-style: none;
  margin: 0 0 0.4rem;
  padding: 0;
  font-size: 0.82rem;
  color: var(--error);
}

/* ---------- Botones ---------- */

.boton, .boton-secundario, .boton-peligro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem 1.15rem;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease,
              transform 0.12s ease, box-shadow 0.15s ease;
}

.boton i, .boton-secundario i, .boton-peligro i {
  font-size: 1em;
  line-height: 1;
}

.boton {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 1px 2px rgba(28, 35, 33, 0.1);
}

.boton:hover {
  background: #26594a;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(28, 35, 33, 0.16);
}

.boton-secundario {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  font-weight: 500;
}

.boton-secundario:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.boton-peligro {
  background: var(--error);
  color: var(--accent-ink);
  box-shadow: 0 1px 2px rgba(28, 35, 33, 0.1);
}

.boton-peligro:hover {
  background: #832a21;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(163, 53, 43, 0.22);
}

.boton:active, .boton-secundario:active, .boton-peligro:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(28, 35, 33, 0.12);
}

.boton:focus-visible, .boton-secundario:focus-visible, .boton-peligro:focus-visible,
.boton-enlace:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.boton:disabled, .boton-secundario:disabled, .boton-peligro:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Variante compacta, para filas de acciones dentro de listas y tarjetas. */
.boton-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.84rem;
}

/* ---------- Mensajes ---------- */

.mensajes { margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.mensaje {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: #1f4a3f;
  font-size: 0.88rem;
  border: 1px solid #c7dcd5;
}

.mensaje i { font-size: 1rem; }

.mensaje--success { background: var(--accent-soft); color: #1f4a3f; border-color: #c7dcd5; }
.mensaje--error { background: var(--error-soft); color: var(--error); border-color: #e6c3bd; }
.mensaje--warning { background: var(--off-soft); color: var(--off); border-color: #e6d2b8; }
.mensaje--info, .mensaje--debug { background: var(--info-soft); color: var(--info); border-color: #c7d8e8; }

@media (max-width: 600px) {
  .topbar { padding: 0 1rem; }
  main { padding: 1.5rem 1rem 3rem; }
  .usuario-menu .nombre { display: none; }
}

/* ---------- Calendario anual (gestion_dias) ---------- */

.calendario-anio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.25rem;
}

.mes-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem;
  box-shadow: var(--shadow-soft);
}

.mes-nombre {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  margin: 0 0 0.6rem;
  text-align: center;
}

.mes-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.mes-grid .cab {
  text-align: center;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding-bottom: 0.2rem;
}

.dia-celda {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  font-size: 0.72rem;
  color: var(--ink-muted);
  background: var(--surface-alt);
}

.dia-celda.vacio {
  visibility: hidden;
}

.dia-celda.marcado {
  color: #fff;
  font-weight: 600;
}

/* Un día reservado es el que se piensa coger pero todavía no está
   aceptado: se pinta con el color de su tipo pero "a lápiz" (borde
   discontinuo y fondo flojo), para distinguirlo de un vistazo de los que ya
   son firmes. Los colores van en línea porque son los del tipo de día. */
.dia-celda.reservado {
  border: 2px dashed;
  font-weight: 600;
}

.modo-registro-activo .dia-celda.seleccionable {
  cursor: pointer;
  transition: background-color 0.1s ease, outline 0.1s ease;
}

.modo-registro-activo .dia-celda.seleccionable:hover {
  background: var(--accent-soft);
}

.dia-celda.seleccionado {
  background: var(--accent-soft);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  color: var(--accent);
  font-weight: 600;
}

.selector-anio select {
  display: inline-block;
  width: auto;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  background: var(--surface);
}

.leyenda-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  min-width: 200px;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}

a.leyenda-item:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.leyenda-punto {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

/* ---------- Miniaturas de imagen (gestion_almacen) ---------- */

.miniatura {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-alt);
  flex-shrink: 0;
  display: inline-block;
}

.miniatura-grande {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-alt);
  display: block;
}

/* ---------- Galería de localizaciones (pantalla de inicio) ---------- */

.galeria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 900px) {
  .galeria-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .galeria-grid {
    grid-template-columns: 1fr;
  }
}

.galeria-tarjeta {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.galeria-tarjeta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(28, 35, 33, 0.1);
}

.galeria-tarjeta img,
.galeria-tarjeta__sin-foto {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  background: var(--surface-alt);
}

.galeria-tarjeta__sin-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.galeria-tarjeta__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
}

.galeria-tarjeta__nombre {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}

/* ---------- Dashboard de gestion_lectura ---------- */

.dashboard-fila-dos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 700px) {
  .dashboard-fila-dos {
    grid-template-columns: 1fr;
  }
}

.dashboard-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-soft);
}

.dashboard-panel h2 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 1rem;
}

.anios-lectura {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.anio-chip {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 600;
  background: var(--surface);
  transition: border-color 0.12s ease, transform 0.12s ease;
}

.anio-chip:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

/* ---------- Tarjetas de libro (dashboard de gestion_lectura) ---------- */

.libros-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1.1rem;
}

.libro-tarjeta {
  display: block;
  text-decoration: none;
  color: var(--ink);
}

.libro-tarjeta img,
.libro-tarjeta .libro-tarjeta__sin-foto,
.libro-tarjeta-gestion__enlace img,
.libro-tarjeta-gestion__enlace .libro-tarjeta__sin-foto {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-alt);
  display: block;
  transition: border-color 0.12s ease, transform 0.12s ease;
}

.libro-tarjeta__sin-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  font-size: 0.72rem;
  text-align: center;
  padding: 0.5rem;
}

.libro-tarjeta:hover img,
.libro-tarjeta:hover .libro-tarjeta__sin-foto,
.libro-tarjeta-gestion__enlace:hover img,
.libro-tarjeta-gestion__enlace:hover .libro-tarjeta__sin-foto {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.libro-tarjeta__titulo {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.3;
}

.libro-tarjeta__autor {
  display: block;
  margin-top: 0.15rem;
  color: var(--ink-muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

/* ---------- Tarjeta de libro con acciones (listado de gestión) ---------- */

.libro-tarjeta-gestion {
  display: flex;
  flex-direction: column;
}

.libro-tarjeta-gestion__enlace {
  display: block;
  text-decoration: none;
  color: var(--ink);
}

.libro-tarjeta-gestion__badges {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.libro-tarjeta-gestion__acciones {
  display: flex;
  gap: 0.9rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
}

.libro-tarjeta-gestion__acciones a {
  color: var(--accent);
  text-decoration: none;
}

.libro-tarjeta-gestion__acciones a:hover {
  text-decoration: underline;
}

/* ---------- Lector de correo (gestion_correo) ---------- */

.lector-correo {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.25rem;
  align-items: start;
}

.lector-correo aside {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.lector-correo__mensajes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lector-correo__mensaje {
  display: block;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}

.lector-correo__mensaje:hover { background: var(--surface-alt); }

.lector-correo__mensaje-asunto {
  display: block;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lector-correo__mensaje-fecha {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-muted);
  margin-top: 0.15rem;
}

.lector-correo__principal {
  min-height: 50vh;
}

.arbol-correo, .arbol-correo ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.arbol-correo ul { padding-left: 1rem; }

.arbol-correo li { padding: 0.15rem 0; }

.arbol-correo a {
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
}

.arbol-correo a:hover { color: var(--accent); }

.arbol-correo a.activo {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 700px) {
  .lector-correo { grid-template-columns: 1fr; }
}

/* ---------- Explorador de escritura (gestion_escritura) ---------- */

.escritura-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 1.25rem;
  align-items: start;
}

.escritura-layout aside {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

/* Pestañas de sección de un módulo (`.tabs-modulo` es el nombre genérico;
   `.escritura-tabs` se conserva por las plantillas que lo usan). Van
   debajo del título y el subtítulo, y la activa se marca con `.activa`. */
.escritura-tabs, .tabs-modulo {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.25rem;
}

.escritura-tabs__tab, .tabs-modulo__tab {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 0.1rem;
  font-size: 0.9rem;
  color: var(--ink-muted);
  cursor: pointer;
}

.escritura-tabs__tab.activa, .tabs-modulo__tab.activa {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.epub-sumario__fila {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px dashed var(--line);
}

.epub-sumario__etiqueta {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: var(--ink-muted);
  min-width: 6.5rem;
}

.epub-sumario__fila--h2 { margin-left: 1rem; }
.epub-sumario__fila--h3 { margin-left: 2rem; }
.epub-sumario__fila--enlace { margin-left: 2.5rem; }

.epub-sumario__fila input.campo {
  flex: 1;
}

.epub-sumario__enlace-texto {
  flex: 1;
  font-family: var(--font-mono);
}

.boton-enlace {
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
}

.escritura-tabs__tab:disabled { cursor: default; }

.escritura-bloque__cabecera {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  margin: 1rem 0 0.4rem;
  padding: 0;
}

.escritura-bloque:first-child .escritura-bloque__cabecera { margin-top: 0; }

.escritura-bloque__fila {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.escritura-bloque__fila .escritura-bloque__cabecera { width: auto; flex: 1; }

.escritura-bloque__cabecera-icono { font-size: 0.85rem; }

.escritura-bloque__cabecera-caret {
  margin-left: auto;
  font-size: 0.65rem;
}

.escritura-bloque__acciones {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
}

.escritura-bloque__boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 1rem;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.escritura-bloque__boton-icono:hover { background: var(--surface-alt); color: var(--accent); }

.escritura-bloque__menu {
  position: relative;
}

.escritura-bloque__menu summary {
  list-style: none;
  cursor: pointer;
}

.escritura-bloque__menu summary::-webkit-details-marker { display: none; }

.escritura-bloque__menu-panel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  min-width: 160px;
}

.escritura-bloque__menu-panel button,
.escritura-bloque__menu-panel a {
  background: none;
  border: none;
  text-align: left;
  font-size: 0.85rem;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  padding: 0.1rem 0;
}

.escritura-bloque__menu-panel button:hover,
.escritura-bloque__menu-panel a:hover { color: var(--accent); }

.escritura-favorito-estrella {
  margin-left: auto;
  color: var(--accent);
  font-size: 0.85rem;
}

.escritura-icono-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.05rem;
  color: var(--ink-muted);
  padding: 0.1rem 0.3rem;
  line-height: 1;
  opacity: 0.55;
}

.escritura-icono-toggle.activo { color: var(--accent); opacity: 1; }

.escritura-actualizado {
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.arbol-escritura, .arbol-escritura ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.arbol-escritura .arbol-escritura__hijas { padding-left: 1.1rem; }

.arbol-escritura li { padding: 0.1rem 0; }

.arbol-escritura__item-plano {
  display: flex;
  align-items: center;
}

.nodo-escritura__fila {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nodo-escritura__toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 0.7rem;
  width: 1rem;
  padding: 0;
}

.nodo-escritura__toggle--vacio { visibility: hidden; }

.nodo-escritura__enlace {
  flex: 1;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.9rem;
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
}

.nodo-escritura__enlace:hover { background: var(--surface-alt); }

.nodo-escritura__enlace.activo {
  color: var(--accent);
  font-weight: 600;
  background: var(--surface-alt);
}

.nodo-escritura__acciones {
  position: relative;
  opacity: 0;
  transition: opacity 0.1s;
}

.nodo-escritura__fila:hover .nodo-escritura__acciones,
.nodo-escritura__acciones[open] {
  opacity: 1;
}

.nodo-escritura__acciones summary {
  cursor: pointer;
  color: var(--ink-muted);
  list-style: none;
  padding: 0.1rem 0.35rem;
}

.nodo-escritura__acciones summary::-webkit-details-marker { display: none; }

.nodo-escritura__acciones-panel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  width: 220px;
}

.nodo-escritura__acciones-panel form,
.nodo-escritura__acciones-panel a {
  font-size: 0.85rem;
}

.nodo-escritura__acciones-panel button {
  background: none;
  border: none;
  padding: 0.1rem 0;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.nodo-escritura__acciones-panel button:hover,
.nodo-escritura__acciones-panel a:hover { color: var(--accent); }

.nodo-escritura__eliminar { color: #8a3a1f; }

.escritura-contenido :first-child { margin-top: 0; }
.escritura-contenido :last-child { margin-bottom: 0; }

.escritura-dialogo {
  border: none;
  border-radius: var(--radius);
  padding: 1.5rem;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  background: var(--surface);
  color: var(--ink);
}

.escritura-dialogo::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.escritura-dialogo__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.15rem;
}

.escritura-dialogo__cabecera h2 {
  margin: 0;
  font-size: 1.1rem;
  font-family: var(--font-display);
}

.escritura-dialogo__cerrar {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--ink-muted);
  line-height: 1;
}

.escritura-dialogo__cerrar:hover { color: var(--accent); }

.escritura-dialogo label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.escritura-busqueda__resumen {
  color: var(--ink-muted);
  font-size: 0.85rem;
  margin: 0.9rem 0 0.6rem;
}

.escritura-resultados {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.escritura-resultado {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.6rem 0.7rem;
  text-decoration: none;
  color: var(--ink);
}

.escritura-resultado:hover { background: var(--surface-alt); }

.escritura-resultado.activo {
  border-color: var(--accent);
  background: var(--surface-alt);
}

.escritura-resultado__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}

.escritura-resultado__titulo {
  font-weight: 600;
  font-size: 0.9rem;
}

.escritura-resultado__tipo {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-muted);
  white-space: nowrap;
}

.escritura-resultado__fragmento {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin: 0.3rem 0;
  line-height: 1.4;
}

.escritura-resultado__fragmento strong {
  color: var(--ink);
  background: rgba(201, 162, 39, 0.25);
}

.escritura-resultado__ruta {
  font-size: 0.72rem;
  color: var(--ink-muted);
  margin: 0;
}

.escritura-resultados__paginacion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

.escritura-barra-pagina {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--ink-muted);
}

.escritura-barra-pagina__migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

.escritura-barra-pagina__migas a {
  color: var(--ink-muted);
  text-decoration: none;
}

.escritura-barra-pagina__migas a:hover { color: var(--accent); }

.escritura-barra-pagina__migas .escritura-actualizado {
  margin-left: 0.4rem;
  padding-left: 0.6rem;
  border-left: 1px solid var(--line);
}

.escritura-barra-pagina__acciones {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.escritura-barra-pagina__conteo {
  flex-basis: 100%;
  color: var(--ink-muted);
  font-size: 0.8rem;
}

.escritura-fuente-boton {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  line-height: 1.4;
}

.escritura-fuente-boton:hover { color: var(--accent); border-color: var(--accent); }

.escritura-fuente-valor {
  font-size: 0.72rem;
  color: var(--ink-muted);
  min-width: 2.5em;
  text-align: center;
}

.escritura-pie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.escritura-comentarios {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.escritura-pie__titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  margin: 0 0 0.4rem;
}

.escritura-editor-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface-alt);
}

.escritura-editor-barra button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.45rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink-muted);
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.escritura-editor-barra button:hover {
  border-color: var(--line);
  background: var(--surface);
  color: var(--accent);
}

.escritura-editor-barra__separador {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  margin: 0.15rem 0.15rem;
}

.escritura-editor-textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

@media (max-width: 700px) {
  .escritura-layout { grid-template-columns: 1fr; }
  .escritura-pie { grid-template-columns: 1fr; }

  /* En una pantalla estrecha las dos columnas se apilan, y la lateral deja
     de tener sentido como barra fija: ocuparía la pantalla entera (es
     sticky y mide hasta 100vh) y habría que recorrerla de arriba abajo
     para llegar al contenido. */
  .escritura-layout aside,
  .lector-correo aside {
    position: static;
    max-height: none;
  }

  /* Y si hay algo abierto (una nota, una página, un correo), lo que se
     quiere ver es eso: el detalle primero y la lista debajo. */
  .escritura-layout--detalle > aside,
  .lector-correo--detalle > aside { order: 2; }
  .escritura-layout--detalle > :not(aside),
  .lector-correo--detalle > :not(aside) { order: 1; }
}

/* ---------- Gestión de Notas (Zettelkasten) ---------- */

.notas-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.notas-badge--fugaz { background: var(--off-soft); color: var(--off); }
.notas-badge--literaria { background: var(--info-soft); color: var(--info); }
.notas-badge--referencia { background: #ece1f5; color: #6a4c93; }
.notas-badge--permanente { background: var(--accent-soft); color: var(--accent); }
.notas-badge--indice { background: #e3e6ea; color: #46546a; }
.notas-badge--contexto { background: #fbe9d7; color: #9a5b16; font-family: var(--font-mono); }

/* Apartados de los módulos en el panel de inicio (Nota fugaz, Diario de
   hoy…): a dos columnas cuando caben, una debajo de otra en pantallas
   estrechas. Un apartado solo no se estira a todo el ancho. */
.widgets-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.widgets-panel > .tarjeta, .widgets-panel > .widget-panel { margin: 0; }
.widgets-panel > .tarjeta:only-child, .widgets-panel > .widget-panel:only-child { max-width: 720px; }

/* Cada apartado va envuelto para poder colgarle en la esquina el enlace
   a su página propia. El envoltorio es flex para que la tarjeta de
   dentro ocupe toda la celda de la rejilla, como cuando iba suelta. */
.widget-panel { position: relative; display: flex; }
.widget-panel > .tarjeta { flex: 1; margin: 0; }

.widget-panel__enlace {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.85rem;
  opacity: 0.45;
  padding: 0.1rem 0.2rem;
}
.widget-panel:hover .widget-panel__enlace,
.widget-panel__enlace:focus { opacity: 1; color: var(--accent); }

/* Gestión de Discos: barra de ocupación y listados densos. */
.discos-barra {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-alt);
  overflow: hidden;
  margin-bottom: 0.25rem;
}
.discos-barra span { display: block; height: 100%; background: var(--accent); }
.tabla { border-collapse: collapse; font-size: 0.92rem; }
.tabla th { text-align: left; font-weight: 600; color: var(--ink-muted); border-bottom: 1px solid var(--line); padding: 0.45rem 0.6rem; white-space: nowrap; }
.tabla th a { text-decoration: none; color: inherit; }
.tabla td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabla tbody tr:hover td { background: var(--surface-alt); }
.discos-listado td, .discos-listado th { padding: 0.3rem 0.6rem; }
.discos-ruta { font-family: var(--font-mono); font-size: 0.85rem; word-break: break-all; }
.discos-ruta a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px dotted var(--line); }
.discos-ruta a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.discos-ruta__sep { margin: 0 0.15rem; color: var(--line); }
.discos-buscador label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: var(--ink-muted); }

/* Chips de filtro por contexto en una lista del diario. */
.diario-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.diario-filtro a { text-decoration: none; border: 1px solid transparent; }
.diario-filtro a.activo { border-color: currentColor; }

.notas-etiqueta {
  display: inline-block;
  background: var(--surface-alt);
  color: var(--ink-muted);
  font-size: 0.78rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-sm);
  margin: 0 0.35rem 0.35rem 0;
}

/* --- Asistente de alta (Registro de Publicaciones) -------------------- */

.asistente-pasos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.asistente-paso {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-muted);
  font-size: 0.85rem;
  text-decoration: none;
  flex: 1 1 auto;
}

.asistente-paso__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.asistente-paso--completo { border-color: var(--accent-soft); color: var(--ink); }
.asistente-paso--completo .asistente-paso__numero { background: var(--accent-soft); color: var(--accent); }

.asistente-paso--actual {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.asistente-paso--actual .asistente-paso__numero { background: var(--accent); color: var(--accent-ink); }
.asistente-paso--bloqueado { opacity: 0.55; }

.asistente-navegacion {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.asistente-resumen {
  background: var(--surface-alt);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
}

.asistente-resumen dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.9rem; margin: 0; }
.asistente-resumen dt { color: var(--ink-muted); font-weight: 500; }
.asistente-resumen dd { margin: 0; }

.asistente-similar {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.6rem;
  background: var(--surface);
}

.asistente-similar--elegida { border-color: var(--accent); background: var(--accent-soft); }
.asistente-similar__meta { font-size: 0.78rem; color: var(--ink-muted); margin-top: 0.3rem; }

/* Selector de notas con casillas y filtro (formulario de escena de Gestión de Novelas). */
.selector-notas {
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0.25rem;
}
.selector-notas__fila {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 400;
  margin: 0;
}
.selector-notas__fila:hover { background: var(--surface-alt); }
.selector-notas__fila input { margin: 0; }

/* ---------- Calendario en texto (Gestión de Calendario) ----------
   El formato manda: una línea por día, con la parte del día siempre
   delante, del mismo ancho y en monoespaciada, para que las fechas se
   lean en columna igual que en el fichero. Lo que añade la pantalla
   sobre el fichero es el color del día de la semana y el hueco delante
   de cada lunes. */

.cal-dias { list-style: none; margin: 0; padding: 0; }

.cal-dia {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.3rem 0.6rem;
  margin-bottom: 2px;
  background: var(--surface);
  border-left: 4px solid var(--cal-color, var(--line));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.cal-dia:hover { background: var(--surface-alt); }

/* El hueco va donde empieza una semana: el bloque de días se abarca de
   un vistazo sin contar renglones. En la lista completa eso es cada
   lunes; filtrando, el primer día que se pinta de la semana. */
.cal-dia--semana { margin-top: 0.85rem; }
.cal-dias > .cal-dia--semana:first-child { margin-top: 0; }

/* Donde los días no van seguidos —los próximos eventos del panel—, el
   hueco solo no dice nada: podría ser el mismo bloque con aire. Ahí la
   semana nueva se marca además con una raya. */
.cal-semana-aparte { position: relative; margin-top: 0.9rem; }
.cal-semana-aparte::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.5rem;
  border-top: 1px solid var(--line);
}
.cal-dias > .cal-semana-aparte:first-child { margin-top: 0; }
.cal-dias > .cal-semana-aparte:first-child::before { content: none; }

.cal-dia--hoy { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }

.cal-dia__prefijo {
  display: inline-flex;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  white-space: nowrap;
}

.cal-dia__fecha { color: var(--ink); }
.cal-dia__semana { color: var(--ink-muted); }
.cal-dia__abrev { color: var(--cal-color, var(--ink)); font-weight: 700; }

.cal-dia__eventos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.1rem;
}

.cal-evento { display: inline-flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
.cal-evento__hora { font-family: var(--font-mono); font-size: 0.82rem; font-weight: 500; color: var(--accent); }
.cal-evento__id { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-muted); text-decoration: none; }
.cal-evento__id:hover { color: var(--accent); }
.cal-evento__id i { margin-left: 0.15rem; font-size: 0.7rem; }

.cal-etiqueta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 0.4rem;
  text-decoration: none;
  white-space: nowrap;
}

.cal-etiqueta:hover { border-color: var(--accent); color: var(--accent); }

.cal-dia__mas { padding: 0 0.25rem; text-decoration: none; color: var(--ink-muted); opacity: 0.45; }
.cal-dia:hover .cal-dia__mas, .cal-dia__mas:focus { opacity: 1; color: var(--accent); }

/* Un color por día de la semana: con el uso se reconoce el día por el
   color, sin llegar a leer la abreviatura. */
.cal-dia--lun { --cal-color: #2f6f5e; }
.cal-dia--mar { --cal-color: #2f5f8f; }
.cal-dia--mie { --cal-color: #6b4f9e; }
.cal-dia--jue { --cal-color: #9c5b24; }
.cal-dia--vie { --cal-color: #a3352b; }
.cal-dia--sab { --cal-color: #8a7b1f; }
.cal-dia--dom { --cal-color: #6b6f72; }

.cal-linea { margin: 0; font-family: var(--font-mono); font-size: 0.9rem; overflow-wrap: anywhere; }
.cal-nota { overflow-wrap: break-word; }

.cal-pistas { margin: 0 0 1rem; padding-left: 1.1rem; font-size: 0.9rem; color: var(--ink-muted); }
.cal-pistas code {
  font-family: var(--font-mono);
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  padding: 0 0.25rem;
  color: var(--ink);
}

/* En el móvil no caben el día y sus eventos en la misma línea: el día se
   queda arriba con el botón de añadir y los eventos pasan debajo. */
@media (max-width: 700px) {
  .cal-dia { flex-wrap: wrap; }
  .cal-dia__mas { order: 0; margin-left: auto; }
  .cal-dia__eventos { order: 1; flex-basis: 100%; }
}

/* Metas: la línea de una semana, un mes o un año. Mismo renglón que un
   día, pero sin día de la semana y con el texto en negrita, porque
   encabeza lo que viene debajo. */
.cal-meta {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.3rem 0.6rem;
  margin-bottom: 2px;
  background: var(--surface-alt);
  border-left: 4px solid var(--cal-color, var(--ink-muted));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-weight: 600;
}

.cal-meta--anio { --cal-color: var(--ink); }
.cal-meta--mes { --cal-color: var(--accent); }
.cal-meta--semana { --cal-color: var(--off); }

.cal-meta__plazo { color: var(--ink-muted); font-weight: 500; }
.cal-meta__texto { flex: 1; min-width: 0; overflow-wrap: break-word; }

/* El prefijo mide lo mismo en los dos sitios (19 caracteres del fichero),
   así el texto de una meta arranca en la misma columna que los eventos. */
.cal-dia__prefijo { min-width: 19ch; }

@media (max-width: 700px) {
  .cal-meta { flex-wrap: wrap; }
  .cal-meta__texto { flex-basis: 100%; }
}

/* Metas que ya habían empezado antes del primer día de la lista. No son
   una línea del fichero —allí cada meta está en su sitio—, así que se
   pintan como un recordatorio aparte y no como un renglón más. */
.cal-en-curso {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.7rem;
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
}

.cal-en-curso__rotulo { color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; }

.cal-en-curso__meta {
  border-left: 3px solid var(--cal-color, var(--ink-muted));
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.1rem 0.5rem;
  font-weight: 600;
}

.cal-en-curso__meta .cal-meta__plazo { font-family: var(--font-mono); font-size: 0.75rem; }

/* Lista de casillas de etiquetas puesta en línea, para cuando va dentro
   de un formulario que ya es una fila (la regla nueva de la pantalla de
   revisar un movimiento importado). */
/* El contenedor es lo que pinta Django alrededor de las casillas (un div
   con un div por opción), de ahí el selector por el hijo y no por `ul`. */
.etiquetas-en-linea > * {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.9rem;
}
.etiquetas-en-linea > * > * { margin: 0; }
.etiquetas-en-linea label { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 400; margin: 0; }
.etiquetas-en-linea input { margin: 0; }

/* Un día con varias cosas apiladas en vez de en fila: el listado de
   movimientos de Gestión de Cartera, que usa el mismo renglón por día
   que el calendario pero con un bloque por movimiento. */
.cal-dia__eventos--apilados { flex-direction: column; align-items: stretch; gap: 0.3rem; }

.cal-mov { display: block; min-width: 0; }
.cal-mov + .cal-mov { border-top: 1px dotted var(--line); padding-top: 0.3rem; }
.cal-mov__cabecera { display: flex; gap: 0.4rem; align-items: baseline; flex-wrap: wrap; }
.cal-mov__acciones { margin-left: auto; display: flex; gap: 0.6rem; white-space: nowrap; }
.cal-mov__apuntes {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}