:root {
  --fondo: #f5f6f8;
  --papel: #fff;
  --texto: #1d2230;
  --suave: #6b7280;
  --linea: #e3e6ec;
  --marca: #092939;   /* azul marino del logo */
  --azul: #01a1dd;    /* azul corporativo: acento y acciones */
  --verde: #15803d;
  --ambar: #b45309;
  --rojo: #b91c1c;

  /* Fondos tenues: la nota azul, el verde de «hecho», el rojo de «mira esto» y
     el ámbar de «ojo». Son variables porque en oscuro no valen. */
  --tinte: #eef2f8;
  --tinte-verde: #e7f4ec;
  --tinte-rojo: #fdeaea;
  --tinte-ambar: #fdf1e3;
  --texto-nota: #384358;
  --sombra: rgba(9, 41, 57, .06);

  /* Grises de trabajo. Estaban escritos a mano por toda la hoja y por eso en
     oscuro salían bandas claras: la cabecera de las tablas, los botones
     secundarios, las etiquetas neutras. Como variables, el tema los cambia. */
  --cabecera: #fafbfc;   /* cabecera de tabla y fondos de apoyo */
  --sutil: #eceff3;      /* botón secundario, etiqueta sin color */
  --resalte: #f5f8ff;    /* fila sin leer, línea bajo el cursor */
  --hueco: #e9ecf1;      /* lo que falta por consumir en una barra */
  --texto-fallo: #7f1d1d;
  --morado: #6d28d9;     /* el destino «a nombre nuestro» */
  --campo: #fff;         /* dentro de un campo que se escribe */
}

/* Tema oscuro. Se activa con `data-tema` en la etiqueta html: lo pone el
   servidor con la preferencia de cada uno, y «sistema» lo deja al aparato. */
:root[data-tema="oscuro"] {
  --fondo: #11151b;
  --papel: #1a2029;
  --texto: #e6eaf1;
  --suave: #98a3b3;
  --linea: #2b333f;
  --marca: #8ecdea;
  --azul: #33b1e0;
  --verde: #4ade80;
  --ambar: #fbbf24;
  --rojo: #f87171;
  --tinte: #212a36;
  --tinte-verde: #14301f;
  --tinte-rojo: #3a1c1c;
  --tinte-ambar: #35291a;
  --texto-nota: #c3ccda;
  --sombra: rgba(0, 0, 0, .4);

  /* En oscuro estos grises van hacia abajo, no hacia arriba: una cabecera
     «clara» sobre fondo oscuro es una banda blanca en mitad de la pantalla. */
  --cabecera: #151b24;
  --sutil: #262f3b;
  --resalte: #1f2937;
  --hueco: #2b333f;
  --texto-fallo: #fca5a5;
  --morado: #c4b5fd;
  /* Un campo va HUNDIDO, más oscuro que el panel que lo contiene. Con el
     mismo color que el panel, un formulario en oscuro es una superficie lisa
     donde no se ve dónde hay que escribir. */
  --campo: #0e131a;
  color-scheme: dark;
}

/* La misma paleta cuando nadie ha elegido tema y el sistema está en
   oscuro. Es el caso de la pantalla de acceso —ahí todavía no hay usuario—
   y el de quien deja la preferencia en «sistema».

   Estaba escrita a mano dentro de `base.html`, y al añadir tokens nuevos
   se quedó corta: los campos se pintaban blancos con el texto claro y no
   se veía lo que se escribía al iniciar sesión. Vive aquí, pegada a la de
   arriba, y una prueba comprueba que las dos declaran lo mismo. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]):not([data-tema="oscuro"]) {
    --fondo: #11151b;
    --papel: #1a2029;
    --texto: #e6eaf1;
    --suave: #98a3b3;
    --linea: #2b333f;
    --marca: #8ecdea;
    --azul: #33b1e0;
    --verde: #4ade80;
    --ambar: #fbbf24;
    --rojo: #f87171;
    --tinte: #212a36;
    --tinte-verde: #14301f;
    --tinte-rojo: #3a1c1c;
    --tinte-ambar: #35291a;
    --texto-nota: #c3ccda;
    --sombra: rgba(0, 0, 0, .4);

    /* En oscuro estos grises van hacia abajo, no hacia arriba: una cabecera
       «clara» sobre fondo oscuro es una banda blanca en mitad de la pantalla. */
    --cabecera: #151b24;
    --sutil: #262f3b;
    --resalte: #1f2937;
    --hueco: #2b333f;
    --texto-fallo: #fca5a5;
    --morado: #c4b5fd;
    /* Un campo va HUNDIDO, más oscuro que el panel que lo contiene. Con el
       mismo color que el panel, un formulario en oscuro es una superficie lisa
       donde no se ve dónde hay que escribir. */
    --campo: #0e131a;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 1200px; margin: 0 auto; padding: 24px 20px 64px; }

/* Barra superior */
.barra {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: var(--papel); color: var(--marca); padding: 10px 20px;
  border-bottom: 1px solid var(--linea);
  box-shadow: 0 1px 3px var(--sombra);
}
.barra a { color: var(--marca); text-decoration: none; }
.marca { font-weight: 700; letter-spacing: .2px; }
.barra nav { display: flex; gap: 18px; flex-wrap: wrap; flex: 1; }
.barra nav a {
  color: var(--suave); padding: 6px 0; border-bottom: 2px solid transparent;
  font-size: 14px;
}
.barra nav a:hover { color: var(--marca); }
.barra nav a.activo {
  color: var(--marca); font-weight: 600; border-bottom-color: var(--azul);
}

/* Pestañas dentro de una sección */
.pestanas {
  display: flex; gap: 4px; margin-bottom: 20px;
  border-bottom: 1px solid var(--linea);
}
.pestanas a {
  padding: 8px 16px; text-decoration: none; color: var(--suave);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pestanas a:hover { color: var(--texto); }
.pestanas a.activo { color: var(--marca); border-bottom-color: var(--azul); font-weight: 600; }
.globo {
  display: inline-block; background: var(--azul); color: #fff;
  border-radius: 999px; padding: 0 7px; font-size: 12px; font-weight: 600;
}
.globo.rojo { background: var(--rojo); color: #fff; }

/* Campana de alertas */
.campana { position: relative; }
.icono-campana {
  font-size: 18px; text-decoration: none; padding: 4px 6px;
  display: inline-block; position: relative;
}
.contador {
  position: absolute; top: -2px; right: -6px; background: var(--rojo);
  color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700;
  padding: 0 5px; line-height: 16px; min-width: 16px; text-align: center;
}
.panel-campana {
  display: none; position: absolute; right: 0; top: 32px; z-index: 20;
  width: 340px; background: var(--papel); color: var(--texto);
  border: 1px solid var(--linea); border-radius: 10px; padding: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.campana:hover .panel-campana, .campana:focus-within .panel-campana { display: block; }
.panel-campana h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--suave); margin: 4px 8px 8px;
}
.alerta-mini {
  display: flex; gap: 8px; align-items: flex-start; padding: 8px;
  border-radius: 6px; text-decoration: none; color: var(--texto);
}
.alerta-mini:hover { background: var(--resalte); }
.alerta-mini.sin-leer { background: var(--resalte); }
.alerta-mini strong { font-weight: 600; font-size: 13px; }
.ver-todas {
  display: block; text-align: center; padding: 8px; font-size: 13px;
  border-top: 1px solid var(--linea); margin-top: 4px; color: var(--marca);
}
.punto {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--suave); margin-top: 5px; flex: none;
}
.punto.aviso { background: var(--ambar); }
.punto.critico { background: var(--rojo); }
.punto.info { background: var(--azul); }
tr.sin-leer td { background: var(--resalte); }
.ficha.ancha { flex: 1; min-width: 320px; }
button.secundario { background: var(--sutil); color: var(--texto); }
button.secundario:hover { filter: brightness(.96); }
.ayuda-inline { font-size: 13px; color: var(--suave); }
.pista-secreto.critico { color: var(--rojo); font-weight: 700; }
.quien { font-size: 13px; color: var(--suave); }
.quien a { color: var(--suave); text-decoration: underline; }

h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 17px; margin: 28px 0 10px; }
h2 small { font-weight: 400; color: var(--suave); font-size: 13px; }

.titular { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.titular h1 { flex: 1; margin-bottom: 16px; }
.acciones { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Tablas */
table {
  width: 100%; border-collapse: collapse; background: var(--papel);
  border: 1px solid var(--linea); border-radius: 8px; overflow: hidden;
  margin-bottom: 8px;
}
th {
  text-align: left; font-size: 12px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--suave); padding: 10px 12px;
  border-bottom: 1px solid var(--linea); background: var(--cabecera);
}
td { padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
tr:last-child td { border-bottom: none; }
.num { text-align: right; white-space: nowrap; }
.trabajo { max-width: 380px; color: var(--suave); font-size: 13px; }
.desp { font-size: 12px; color: var(--suave); }
small { color: var(--suave); }
tr.inactivo { opacity: .5; }

/* Semáforo */
.barra-consumo { display: flex; align-items: center; gap: 8px; min-width: 160px; }
.pista { flex: 1; height: 8px; background: var(--hueco); border-radius: 4px; overflow: hidden; }
.relleno { height: 100%; }
.relleno.verde { background: var(--azul); }
.relleno.ambar { background: var(--ambar); }
.relleno.rojo  { background: var(--rojo); }
.pct { font-size: 12px; font-weight: 600; min-width: 38px; text-align: right; }
.verde { color: var(--verde); }
.ambar { color: var(--ambar); }
.rojo, .negativo { color: var(--rojo); }
.pendiente-completar { font-size: 12px; color: var(--ambar); }

.etiqueta {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; background: var(--sutil); color: var(--suave);
}
.etiqueta.activa { background: var(--tinte-verde); color: var(--verde); }
.etiqueta.completa { background: var(--tinte-ambar); color: var(--ambar); }
.etiqueta.borrador { background: var(--tinte-ambar); color: var(--ambar); }
.etiqueta.cerrada { background: var(--sutil); color: var(--suave); }
.etiqueta.abierta { background: var(--tinte-rojo); color: var(--rojo); }

/* Fichas de resumen */
.fichas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.ficha {
  background: var(--papel); border: 1px solid var(--linea); border-radius: 8px;
  padding: 10px 16px; min-width: 130px;
}
.ficha span { display: block; font-size: 12px; color: var(--suave); }
.ficha strong { font-size: 17px; }

/* Formularios */
button, .boton {
  background: var(--azul); color: #fff; border: none; border-radius: 6px;
  padding: 8px 14px; font-size: 14px; cursor: pointer; text-decoration: none;
  display: inline-block;
}
button:hover, .boton:hover { filter: brightness(1.15); }
button.peligro { background: var(--rojo); }
input, select, textarea {
  padding: 8px 10px; border: 1px solid var(--linea); border-radius: 6px;
  font-size: 14px; background: var(--campo); font-family: inherit;
  color: var(--texto);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul);
}
::placeholder { color: var(--suave); opacity: .75; }
textarea { resize: vertical; }
label { display: block; margin-bottom: 12px; font-size: 13px; color: var(--suave); }
label input, label select, label textarea {
  display: block; width: 100%; margin-top: 4px; color: var(--texto);
}
.formulario {
  background: var(--papel); border: 1px solid var(--linea); border-radius: 8px;
  padding: 20px; max-width: 520px;
}
.pareja { display: flex; gap: 12px; }
.pareja label { flex: 1; }
.linea { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.linea label { margin: 0; }
.linea input, .linea select { width: auto; }
/* Fila de campos con el rótulo encima. Se alinea por abajo y no por el centro:
   una etiqueta apilada es más alta que un botón, y centrándolo el botón queda
   flotando a media altura del campo de al lado. */
.linea.campos { align-items: flex-end; gap: 12px; }
.linea.campos > label { font-size: 12px; }
.linea.campos label input, .linea.campos label select { width: 100%; }
.linea.campos label.corta { width: 110px; flex: none; }
.linea.campos label.crece { flex: 1; min-width: 220px; }
.linea.campos .ayuda-inline { padding-bottom: 9px; }
.masiva {
  background: var(--tinte-ambar); border: 1px solid var(--ambar);
  border-radius: 8px; padding: 10px 12px;
}
.filtros {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 8px; padding: 12px 16px; margin-bottom: 16px;
}
.filtros label { margin: 0; }

/* Avisos y notas */
.nota {
  background: var(--tinte); border-left: 3px solid var(--marca);
  padding: 10px 14px; border-radius: 4px; font-size: 13px; color: var(--texto-nota);
}
.nota.destacada { background: var(--tinte-verde); border-color: var(--verde); }
.nota.fallo { background: var(--tinte-rojo); border-color: var(--rojo); color: var(--texto-fallo); }
.ayuda { font-size: 12px; color: var(--suave); margin: -8px 0 14px; }
.formulario.ancho { max-width: none; }
.casilla { display: flex; align-items: center; gap: 8px; color: var(--texto); }
.casilla input { width: auto; margin: 0; }
.pista-secreto {
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--ambar); margin-left: 6px;
}
.nota-inline { font-size: 13px; color: var(--ambar); }
.aviso {
  background: var(--tinte-ambar); color: var(--ambar); padding: 6px 12px;
  border-radius: 999px; font-size: 13px; text-decoration: none; font-weight: 600;
}
.aviso.rojo { background: var(--tinte-rojo); color: var(--rojo); }
.vacio { color: var(--suave); padding: 32px 0; text-align: center; }
.error { color: var(--rojo); font-size: 14px; }
.motivo { font-size: 12px; color: var(--suave); }
.cliente { margin-bottom: 32px; }

/* Acceso */
.acceso {
  max-width: 360px; margin: 80px auto; background: var(--papel);
  border: 1px solid var(--linea); border-radius: 10px; padding: 28px;
}
.acceso h1 { text-align: center; margin-bottom: 4px; }
.subtitulo { text-align: center; color: var(--suave); font-size: 13px; margin: 0 0 20px; }
.acceso button { width: 100%; margin-top: 8px; }



.cliente.sin-decidir > h2 { border-left: 3px solid var(--rojo); padding-left: 10px; }
.num.historico { color: var(--suave); }

details.apuntes { margin-top: 6px; }
details.apuntes summary { font-size: 12px; color: var(--marca); cursor: pointer; }
table.anidada { border: none; margin: 6px 0 0; background: var(--cabecera); }
table.anidada td { border-bottom: 1px solid var(--linea); font-size: 12px; padding: 4px 8px; }

/* Imagen de la empresa */
.logo-acceso { display: block; max-width: 220px; margin: 0 auto 18px; }
.marca { display: flex; align-items: center; gap: 10px; }
.logo-barra { height: 46px; display: block; }
.marca-texto { display: none; }
@media (max-width: 700px) { .logo-barra { height: 34px; } }
.pie-acceso { text-align: center; margin: 16px 0 0; font-size: 13px; }
.pie-acceso a { color: var(--marca); }

/* Selección múltiple en Revisión */
td.sel, th.sel { width: 28px; text-align: center; }
td.sel input, th.sel input { width: auto; margin: 0; }
.acciones-seleccion {
  position: sticky; bottom: 0; display: flex; gap: 16px; align-items: center;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 8px;
  padding: 10px 16px; margin-top: 8px;
}
.acciones-seleccion label { margin: 0; display: flex; align-items: center; gap: 8px; }
.acciones-seleccion input[type=checkbox] { width: auto; margin: 0; }
details.zanjar { margin-bottom: 16px; }
details.zanjar summary { cursor: pointer; font-size: 13px; color: var(--marca); }
details.zanjar small { color: var(--suave); font-size: 12px; }
small.org { color: var(--suave); font-style: italic; }
small.codigo, .codigo { color: var(--suave); font-weight: 400; font-size: 12px; }
small.nota-jira { color: var(--suave); font-size: 11px; display: block; }
.etiqueta.terminado, strong.terminado { background: var(--tinte); color: var(--marca); }
.acciones-seleccion .separador { color: var(--suave); font-size: 13px; }
.acciones-seleccion select, .acciones-seleccion input[type=text] { width: auto; margin: 0; }

/* Acciones en bloque de la bandeja */
.acciones-seleccion { flex-direction: column; align-items: stretch; gap: 10px; }
.acciones-seleccion h3 { margin: 0; font-size: 14px; }
.acciones-seleccion .accion {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px;
}
.acciones-seleccion .accion .que { font-weight: 600; min-width: 150px; }
.acciones-seleccion .cuenta { color: var(--azul); font-weight: 600; font-size: 13px; }
.acciones-seleccion > small { color: var(--suave); font-size: 12px; }

/* Llamada a la acción de los presupuestos a medio configurar */
.nota.llamada {
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  background: var(--tinte-ambar); border-left: 3px solid var(--ambar); flex-wrap: wrap;
}
.nota.llamada .boton { white-space: nowrap; }
a.boton.completar { font-size: 12px; padding: 4px 10px; }
td.num.estimado { color: var(--suave); }

/* Avisos al cliente en el alta de contratos */
fieldset.avisos-cliente {
  border: 1px solid var(--linea); border-radius: 8px; padding: 12px 16px;
  margin: 8px 0 4px;
}
fieldset.avisos-cliente legend { font-size: 13px; font-weight: 600; padding: 0 6px; }
fieldset.avisos-cliente .ayuda { margin: 0 0 10px; }
.ficha strong.suave { color: var(--suave); font-weight: 600; }


/* Acciones masivas: un solo sitio, arriba y explicado */
section.masivas {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 10px; padding: 16px 20px; margin-bottom: 20px;
}
section.masivas h2 { margin: 0 0 2px; font-size: 15px; }
section.masivas .ayuda { margin: 0 0 14px; }
section.masivas .ayuda.pie { margin: 14px 0 0; }
.dos-vias { display: flex; gap: 20px; flex-wrap: wrap; }
.dos-vias .via {
  flex: 1 1 320px; background: var(--papel); border: 1px solid var(--linea);
  border-radius: 8px; padding: 14px 16px;
}
.dos-vias .via h3 { margin: 0 0 6px; font-size: 13px; color: var(--marca); }
.dos-vias .via p { margin: 0 0 10px; font-size: 12px; color: var(--suave); }
.dos-vias .via .recuento { font-size: 13px; color: var(--texto); display: flex;
  align-items: center; gap: 10px; flex-wrap: wrap; }
.dos-vias .via .recuento strong { font-size: 16px; color: var(--azul); }
.acciones-via { display: flex; gap: 10px; flex-wrap: wrap; }
.acciones-via button:disabled { opacity: .45; cursor: not-allowed; }
button.enlace {
  background: none; border: none; color: var(--azul); text-decoration: underline;
  cursor: pointer; font-size: 12px; padding: 0; width: auto;
}
/* Descargas de la ficha: la misma acción sirve para la bolsa y para el
   histórico entero del cliente, así que se pregunta en vez de duplicar botones. */
details.descargas { position: relative; display: inline-block; }
details.descargas > summary {
  cursor: pointer; list-style: none; color: var(--azul); font-size: 14px;
}
details.descargas > summary::-webkit-details-marker { display: none; }
details.descargas > summary::after { content: " ▾"; }
details.descargas .menu {
  position: absolute; right: 0; top: 26px; z-index: 20; width: 260px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 8px;
  padding: 12px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.12); text-align: left;
}
details.descargas .menu .titulo {
  margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--suave);
  text-transform: uppercase; letter-spacing: .3px;
}
details.descargas .menu .titulo ~ .titulo { margin-top: 14px; }
details.descargas .menu small { display: block; color: var(--suave); margin-bottom: 6px; }
details.descargas .menu a { display: inline-block; margin-right: 12px; }

/* El parte de trabajo se edita sobre el propio documento: la pantalla imita al
   PDF para que se vea de un golpe dónde va a salir cada cosa. Lo editable lleva
   fondo; lo demás es exactamente lo que se imprime. */
.documento {
  /* Es la hoja que se le manda al cliente: blanca siempre, también en oscuro. */
  background: #fff; color: #1d2230; max-width: 880px; margin: 0 auto 24px;
  border: 1px solid var(--linea); border-radius: 10px; padding: 34px 40px;
  box-shadow: 0 2px 14px rgba(31,56,100,.07);
}
.doc-cabecera {
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 3px solid var(--marca); padding-bottom: 12px;
}
.doc-logo { height: 66px; }
.doc-empresa { text-align: right; font-size: 11px; color: var(--suave); line-height: 1.6; }
.doc-empresa strong { color: var(--marca); font-size: 14px; }
.doc-titulo { font-size: 20px; color: var(--marca); margin: 18px 0 2px; }
.doc-numero { color: var(--suave); font-size: 13px; margin: 0 0 18px; }

.doc-fichas { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.doc-ficha {
  flex: 1; min-width: 150px; border: 1px solid var(--linea); border-radius: 6px;
  padding: 9px 11px;
}
/* La del cliente lleva dentro la dirección, que necesita sitio para leerse. */
.doc-ficha:first-child { flex: 2.4; min-width: 260px; }
.doc-ficha span {
  display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--suave); margin-bottom: 4px;
}
.doc-ficha strong { font-size: 13px; display: block; }
.doc-ficha small { color: var(--suave); }
.doc-ficha.falta { border-color: var(--rojo); }
.doc-ficha.falta strong { color: var(--rojo); }

.doc-seccion {
  font-size: 13px; color: var(--marca); margin: 22px 0 7px;
  border-bottom: 1px solid var(--marca); padding-bottom: 4px;
}
/* Lo que se puede tocar se distingue por el fondo, no por un borde de caja:
   así el documento se sigue leyendo como un documento. */
.editable {
  background: var(--cabecera); border: 1px dashed var(--linea); border-radius: 5px;
  width: 100%; font-family: inherit; font-size: 13px; padding: 7px 9px;
}
.editable:focus { background: var(--papel); border-style: solid; border-color: var(--azul); outline: none; }
.doc-ficha .editable { margin-top: 5px; font-size: 12px; padding: 4px 6px; }
.editable.bloque { border-left: 3px solid var(--marca); }

table.doc-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
table.doc-tabla th {
  background: var(--tinte); color: var(--marca); text-align: left; padding: 6px 8px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
}
table.doc-tabla td { border-bottom: 1px solid var(--linea); padding: 6px 8px; vertical-align: top; }
table.doc-tabla td.n { color: var(--suave); }
table.doc-tabla td.notas { color: var(--suave); }
table.doc-tabla td.vacio { color: var(--suave); font-style: italic; }
table.doc-tabla tfoot td { font-weight: 700; border-top: 2px solid var(--marca); }

.doc-alta { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.doc-alta input { flex: 1; }
.doc-alta input.corto { flex: 0 0 200px; }
.doc-alta input.mini { flex: 0 0 80px; }

.acciones-pie { max-width: 880px; margin: 0 auto 30px; display: flex; gap: 10px; }

/* Formularios de ficha: campos cortos en fila, para no hacer una columna
   interminable de cajitas. */
.rejilla { display: flex; gap: 14px; flex-wrap: wrap; }
.rejilla label { flex: 1; min-width: 160px; }
details.alta-sociedad { display: block; margin-top: 14px; }
details.alta-sociedad > summary {
  display: inline-block; background: var(--azul); color: #fff; padding: 8px 14px;
  border-radius: 6px; cursor: pointer; list-style: none; font-size: 14px;
}
details.alta-sociedad > summary::-webkit-details-marker { display: none; }
details.alta-sociedad[open] > summary { margin-bottom: 14px; }
a.pendiente-dato { color: var(--rojo); font-size: 12px; }

/* Listado de bolsas y proyectos: una sola tabla con el cliente como separador.
   Los anchos se fijan aquí para que las columnas caigan siempre en el mismo
   sitio, cliente tras cliente. */
table.listado-bolsas { table-layout: fixed; }
table.listado-bolsas th:nth-child(1) { width: 26%; }
table.listado-bolsas th:nth-child(2) { width: 16%; }
table.listado-bolsas th:nth-child(3),
table.listado-bolsas th:nth-child(4),
table.listado-bolsas th:nth-child(5) { width: 11%; }
table.listado-bolsas tr.grupo th {
  background: var(--sutil); color: var(--marca); font-size: 13px; font-weight: 700;
  text-transform: none; letter-spacing: 0; padding: 12px;
  border-top: 1px solid var(--linea);
}
table.listado-bolsas tbody tr:first-child th { border-top: none; }

/* El parte de trabajo se pide desde donde esté el ticket, así que su enlace
   aparece en muchas tablas: discreto, para no competir con el ticket. */
a.justificante { font-size: 11px; color: var(--suave); }
a.justificante::before { content: "📎 "; }
a.parte { font-size: 11px; color: var(--suave); text-decoration: none; }
a.parte::before { content: "📄 "; }
a.parte:hover { color: var(--azul); text-decoration: underline; }

/* Contrato y bolsa que conviven: no es un error, pero hay que leerlo. */
.aviso-mezcla {
  border-left: 3px solid var(--ambar); padding-left: 10px;
  background: var(--tinte-ambar);
}

/* «Esto es lo que va a pasar»: el paso intermedio de una acción que mueve
   cientos de registros. Se enseña la cuenta y se decide con ella delante. */
.confirmar {
  border: 1px solid var(--rojo); border-radius: 8px;
  background: var(--tinte-rojo); padding: 14px 16px; margin-top: 14px;
}
.confirmar p { margin: 0 0 12px; color: var(--texto); }
.confirmar .linea { margin: 0; }

/* El asterisco del ticket repartido entre dos bolsas: se ve, pero no grita. */
abbr.repartido {
  color: var(--rojo); font-weight: 700; text-decoration: none; cursor: help;
  margin-left: 2px;
}
.nota.leyenda { line-height: 1.7; }

/* Sacar un ticket de una bolsa es destructivo, pero menor: va como enlace rojo
   y no como botón, que en esta pantalla es el sitio de cerrar y facturar. */
button.enlace.peligro { background: none; color: var(--rojo); }
td.quitar { text-align: right; white-space: nowrap; }
button.secundario { background: var(--papel); color: var(--marca); border: 1px solid var(--linea); }
button.secundario.abierto { background: var(--tinte); }
.via .panel {
  margin-top: 12px; background: var(--cabecera); border-radius: 8px; padding: 12px;
}
.via .panel select, .via .panel input { width: auto; }

/* Aviso flotante que devuelve a las acciones */
a.aviso-seleccion {
  position: fixed; right: 24px; bottom: 24px; z-index: 20;
  background: var(--marca); color: #fff; text-decoration: none;
  padding: 10px 16px; border-radius: 999px; font-size: 13px;
  box-shadow: 0 6px 20px rgba(9, 41, 57, .3);
}
a.aviso-seleccion strong { font-size: 15px; }

/* Archivo */
.resumen-archivo { font-size: 13px; color: var(--suave); margin: 0 0 12px; }
.resumen-archivo strong { color: var(--texto); }
nav.paginacion {
  display: flex; gap: 20px; align-items: center; justify-content: center;
  margin: 18px 0; font-size: 13px;
}
nav.paginacion .inactivo { color: var(--linea); }
td.anteriores small { color: var(--suave); font-size: 11px; line-height: 1.5; }
.una-via .via { border: none; padding: 0; background: none; }
.una-via .via p.atajo { font-size: 12px; color: var(--suave); margin: 0 0 8px; }
a.boton.secundario { background: var(--papel); color: var(--marca); border: 1px solid var(--linea); }
table.explicativa td { font-size: 13px; vertical-align: top; }
table.explicativa td:first-child { width: 22%; }

/* Editor de los textos de correo */
.editor-correo { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.editor-correo .formulario { flex: 1 1 420px; }
.editor-correo textarea {
  width: 100%; font-family: inherit; font-size: 14px; padding: 10px 12px;
  border: 1px solid var(--linea); border-radius: 8px; resize: vertical;
}
aside.variables { flex: 0 1 300px; }
aside.variables h3 { font-size: 13px; margin: 0 0 8px; }
aside.variables code {
  background: var(--tinte); padding: 1px 5px; border-radius: 4px; font-size: 12px;
}
aside.variables td { font-size: 12px; }
.vista-previa {
  background: var(--papel); border: 1px solid var(--linea); border-radius: 10px;
  padding: 18px 22px; max-width: 560px;
}
.vista-previa .asunto {
  font-weight: 700; font-size: 15px; margin: 0 0 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--linea);
}
.vista-previa p { margin: 0 0 10px; font-size: 14px; }
tr.destacada td { background: var(--tinte); }
td.quien { font-size: 12px; }
td.quien small a { color: var(--suave); }
kbd {
  background: var(--tinte); border: 1px solid var(--linea); border-radius: 4px;
  padding: 1px 5px; font-size: 11px; font-family: inherit;
}

/* Bloques plegables de Ajustes: cerrados se leen como un índice. */
details.bloque {
  border: 1px solid var(--linea); border-radius: 10px;
  margin-bottom: 12px; background: var(--papel);
}
details.bloque > summary {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; cursor: pointer; list-style: none;
}
details.bloque > summary::-webkit-details-marker { display: none; }
details.bloque > summary::before {
  content: "▸"; color: var(--suave); font-size: 12px;
}
details.bloque[open] > summary::before { content: "▾"; }
details.bloque[open] > summary { border-bottom: 1px solid var(--linea); }
details.bloque > summary .nombre { font-weight: 600; color: var(--marca); }
details.bloque > summary small { color: var(--suave); font-size: 12px; }
details.bloque > summary:hover .nombre { color: var(--azul); }
details.bloque .cuerpo { padding: 16px 18px 20px; }
details.bloque .cuerpo h3 {
  margin: 22px 0 8px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--suave);
}
details.bloque .cuerpo .formulario { border: none; padding: 0; background: none; }
details.bloque .cuerpo table { margin-bottom: 10px; }
details.bloque .cuerpo .ayuda { margin: 0 0 12px; max-width: 70ch; }

/* Explicación larga de una pantalla: arriba, a mano, sin ocupar sitio. */
details.ayuda-larga { margin: -4px 0 16px; }
details.ayuda-larga > summary {
  cursor: pointer; font-size: 13px; color: var(--marca); width: fit-content;
}
details.ayuda-larga > summary:hover { color: var(--azul); }
details.ayuda-larga > p, details.ayuda-larga > table { margin-top: 10px; }
details.ayuda-larga > p { font-size: 13px; color: var(--texto-nota); max-width: 90ch; }

/* Registro: el destino de cada hora, con su color según esté colocada, cubierta
   por un contrato, esperando decisión o cerrada. */
.destino {
  font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  font-weight: 700; color: var(--suave);
}
.destino.colocado { color: var(--verde); }
.destino.cubierto { color: var(--marca); }
.destino.espera { color: var(--ambar); }
.destino.cerrado { color: var(--suave); }
.destino.interno { color: var(--morado); }
a.ficha { text-decoration: none; display: block; }
a.ficha:hover { border-color: var(--azul); }

/* Parte de trabajo: la misma botonera en todas las pantallas. En bloque y con
   los enlaces sin partir, que en la columna del ticket «Abrir PDF» se rompía a
   la mitad. */
.acciones-parte { display: block; line-height: 1.7; }
.acciones-parte .enlaces { white-space: nowrap; }
.acciones-parte a { font-size: 12px; margin-right: 10px; }
.acciones-parte a:last-child { margin-right: 0; }
.acciones-parte .numero-parte {
  display: block; font-size: 11px; color: var(--suave);
}
/* La columna del ticket lleva la clave, el estado y la botonera del parte:
   sin un mínimo, la tabla se la come y parte «SERVICE-4309» en dos líneas. */
table.tickets td:first-child { min-width: 175px; }
table.tickets td:first-child > a { white-space: nowrap; }

/* Búsqueda de razón social mientras se escribe. */
.buscador-sociedad { position: relative; }
.buscador-sociedad .sugerencias {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  margin: 0; padding: 4px; list-style: none; max-height: 320px; overflow-y: auto;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(9, 41, 57, .12);
}
.buscador-sociedad .sugerencias li {
  padding: 8px 10px; border-radius: 6px; cursor: pointer; line-height: 1.35;
}
.buscador-sociedad .sugerencias li strong { display: block; font-size: 14px; }
.buscador-sociedad .sugerencias li small { color: var(--suave); font-size: 12px; }
.buscador-sociedad .sugerencias li:hover,
.buscador-sociedad .sugerencias li.marcada { background: var(--tinte); }

/* ======================================================================
   Móvil
   Una tabla de nueve columnas no cabe en un teléfono. Antes cada celda se
   convertía en una línea suelta: se leían columnas de «—» sin saber de qué
   eran. Ahora cada fila es una ficha y cada dato lleva su rótulo, que sale
   de la cabecera de su columna (lo pone `etiquetar-tablas` al cargar).
   ====================================================================== */
@media (max-width: 760px) {
  main { padding: 16px 12px 48px; }
  h1 { font-size: 19px; }

  /* Dos filas fijas: arriba el logo, la campana y la sesión; debajo, el menú
     entero en una banda propia que se desliza. La base lleva `flex: 1` y eso
     dejaba el menú encogido en el hueco de la primera fila, ilegible: aquí se
     fuerza a ocupar su fila completa (flex-basis 100%). */
  .barra { gap: 6px 12px; padding: 8px 0 0; }
  .barra > .marca { margin-left: 12px; }
  .quien { font-size: 12px; margin-right: 12px; }
  .barra nav {
    order: 10; flex: 0 0 100%; width: 100%;
    flex-wrap: nowrap; gap: 0;
    /* Solo se mueve a los lados: sin `overflow-y: hidden` el navegador da por
       hecho `auto` también en vertical, y la banda se movía en diagonal. Y
       `overscroll-behavior` evita que el gesto arrastre la página detrás o
       dispare el «atrás» del móvil al llegar al final. */
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    overscroll-behavior: contain; touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--linea);
    /* El borde derecho se desvanece: se ve que hay más secciones detrás. */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
  }
  .barra nav::-webkit-scrollbar { display: none; }
  .barra nav a {
    white-space: nowrap; padding: 10px 11px; font-size: 13px;
    border-bottom: 2px solid transparent;
  }
  .barra nav a:first-child { margin-left: 6px; }
  .barra nav a:last-child { margin-right: 26px; }
  .campana { order: 2; }

  .pestanas {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-x;
  }
  .pestanas::-webkit-scrollbar { display: none; }
  .pestanas a { white-space: nowrap; }

  .titular { gap: 8px; }
  .titular h1 { flex: 1 1 100%; margin-bottom: 4px; }
  .filtros { flex-direction: column; align-items: stretch; }
  .filtros label, .filtros input, .filtros select { width: 100%; }
  .linea.campos { flex-direction: column; align-items: stretch; }
  .linea.campos label.corta { width: 100%; }
  .linea.campos button { width: 100%; }
  .ficha { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .formulario { padding: 16px; }

  /* Cada fila, una ficha. */
  table, tbody, tfoot, tr, td { display: block; width: 100%; }
  thead { display: none; }
  table { border: none; background: none; box-shadow: none; }
  tbody tr, tfoot tr {
    background: var(--papel); border: 1px solid var(--linea);
    border-radius: 10px; margin-bottom: 10px; padding: 12px 14px;
  }
  tbody td, tfoot td {
    border: none; padding: 4px 0; text-align: right;
    display: flex; gap: 14px; align-items: baseline; justify-content: space-between;
  }
  tbody td::before, tfoot td::before {
    content: attr(data-etiqueta); color: var(--suave); font-size: 12px;
    text-align: left; flex: 0 0 auto; max-width: 48%;
  }
  /* La primera celda es el nombre de la cosa: hace de título de la ficha. */
  tbody td:first-child {
    display: block; text-align: left; font-size: 15px;
    padding-bottom: 8px; margin-bottom: 6px;
    border-bottom: 1px solid var(--linea);
  }
  tbody td:first-child::before { content: none; }
  tbody td:empty { display: none; }
  td.quitar, td.sel { text-align: left; justify-content: flex-start; }
  .num { text-align: right; }

  /* Los encabezados de cliente del listado de bolsas dejan de ser una fila
     de tabla y pasan a ser lo que son: el título de un grupo. */
  /* Los anchos por columna del escritorio no valen aquí: dejaban el nombre
     del cliente partido en dos («AMADIP / ESMENT»). */
  table.listado-bolsas { table-layout: auto; }
  table.listado-bolsas th:nth-child(1),
  table.listado-bolsas th:nth-child(2),
  table.listado-bolsas th:nth-child(3),
  table.listado-bolsas th:nth-child(4),
  table.listado-bolsas th:nth-child(5) { width: auto; }
  table.listado-bolsas tr.grupo {
    background: none; border: none; padding: 0; margin: 22px 0 8px;
  }
  table.listado-bolsas tr.grupo th {
    display: block; background: none; border: none; padding: 0;
    font-size: 13px; color: var(--marca); text-align: left;
  }

  table.explicativa td { display: block; text-align: left; }
  table.explicativa td::before { content: attr(data-etiqueta); display: block; }
  table.anidada, table.anidada tbody, table.anidada tr, table.anidada td {
    display: block; width: 100%;
  }
  table.anidada tr { border: none; padding: 4px 0; margin: 0; background: none; }

  /* Los dos paneles que se despliegan se abren hacia la izquierda desde su
     anclaje. En el escritorio caen dentro de la pantalla porque el disparador
     está a la derecha del todo; en el móvil no, y se dibujaban fuera de la
     ventana con las opciones intocables: no se podía generar un informe. */

  /* «Generar informes» baja a la izquierda con el resto de acciones, así que
     se ancla por ese lado y se le pone techo al ancho. */
  details.descargas .menu {
    left: 0; right: auto;
    width: min(260px, calc(100vw - 24px));
  }

  /* La campana se queda a media barra: por la derecha no cabe y por la
     izquierda tampoco. Se cuelga de la barra entera —así el «debajo» sigue
     siendo correcto aunque el menú ocupe dos filas— y ocupa el ancho de la
     pantalla, que es lo que hace cualquier aviso en un móvil. */
  .barra { position: relative; }
  .campana { position: static; }
  .panel-campana {
    left: 12px; right: 12px; top: calc(100% + 4px); width: auto;
    max-height: 70vh; overflow-y: auto;
  }

  /* El documento del parte se lee, no se rellena en el móvil: que quepa. */
  .documento { padding: 16px 14px; }
  .doc-fichas { flex-direction: column; }
  .acciones-parte .enlaces { white-space: normal; }
}

@media (max-width: 480px) {
  .ficha { flex: 1 1 100%; }
}


/* Quién eres, arriba a la derecha: la inicial y el nombre llevan a tu cuenta,
   y salir se queda fuera para no tener que entrar a buscarlo. */
.cuenta { display: flex; align-items: center; gap: 10px; margin-right: 12px; }
.cuenta a.yo {
  display: flex; align-items: center; gap: 8px; color: var(--texto);
  text-decoration: none; font-size: 13px;
}
.cuenta a.yo:hover { color: var(--azul); }
.cuenta .salir { font-size: 13px; color: var(--suave); }
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--tinte); border: 1px solid var(--linea);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--marca); flex: none;
}
.avatar.grande { width: 72px; height: 72px; font-size: 26px; }

/* Elegir tema: se ve el resultado antes de aplicarlo. */
.temas { display: flex; gap: 12px; flex-wrap: wrap; }
.temas label {
  flex: 1 1 150px; margin: 0; border: 2px solid var(--linea); border-radius: 10px;
  padding: 12px; cursor: pointer; text-align: center; color: var(--texto);
}
.temas label:has(input:checked) { border-color: var(--azul); }

.temas .muestra {
  height: 44px; border-radius: 6px; margin-bottom: 8px; display: flex;
  align-items: center; justify-content: center; font-size: 11px;
  border: 1px solid var(--linea);
}
.temas .muestra.claro { background: #f5f6f8; color: #1d2230; }
.temas .muestra.oscuro { background: #11151b; color: #e6eaf1; }
.temas .muestra.sistema {
  background: linear-gradient(105deg, #f5f6f8 0 50%, #11151b 50% 100%);
  color: transparent;
}
/* La muestra del modo automático enseña las dos mitades, así que el texto va
   partido: claro sobre la mitad oscura y al revés. */
.temas .muestra.sistema::before {
  content: "Aa"; color: #1d2230; width: 50%; text-align: center;
}
.temas .muestra.sistema::after {
  content: "Aa"; color: #e6eaf1; width: 50%; text-align: center;
}
.temas input { display: block; margin: 0 auto 8px; }

/* Ordenar por columna en la bandeja. La flecha solo sale en la que manda: dos
   flechas a la vez no dicen por cuál está ordenado. */
th.ordenable { cursor: pointer; user-select: none; white-space: nowrap; }
th.ordenable:hover { color: var(--azul); }
th.ordenable::after { content: " ⇅"; opacity: .3; font-size: 11px; }
th.ordenable[data-orden="asc"]::after { content: " ↑"; opacity: 1; color: var(--azul); }
th.ordenable[data-orden="desc"]::after { content: " ↓"; opacity: 1; color: var(--azul); }

/* La propuesta de factura enseña cada intervención, no solo la suma: es lo que
   hay que poder justificar si el cliente pregunta de dónde sale la cifra. */
table.intervenciones td { vertical-align: top; }
table.intervenciones .anidada { border: none; background: none; margin: 0; }
table.intervenciones .anidada td {
  border: none; padding: 2px 10px 2px 0; font-size: 13px;
}
table.intervenciones .cuando { white-space: nowrap; color: var(--suave); }

/* Un ticket cuyo cliente se corrigió a mano. Jira sigue diciendo lo de antes
   —corregir es sobreescribirlo— y sin decirlo parece que no pasó nada. */
small.org.corregida { color: var(--azul); font-style: normal; }
/* La otra versión del cliente, la del parte de campo. Se distingue de la de
   Jira porque son dos fuentes y la decisión es justo cuál vale. */
small.org.campo { color: var(--azul); font-style: normal; }
/* Qué material o licencia se usó: es lo que hay que cobrar aparte. */
small.org.material { color: var(--texto); font-style: normal; }


/* Marcado de varios clientes a la vez: los destinos que son de uno solo se
   apagan y se dice por qué, en vez de dejar pulsar y no hacer nada. */
.mezcla-clientes {
  border-left: 3px solid var(--ambar); padding-left: 10px;
  background: var(--tinte-ambar); margin-top: 10px;
}


/* Buscar dentro de lo que ya está en pantalla. Lo pone el script en todas las
   listas, así que se ve igual en todas: es la mitad del filtro que faltaba. */
.buscar-en-pantalla {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px;
}
.buscar-en-pantalla label {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 13px; color: var(--suave); white-space: nowrap;
}
.buscar-en-pantalla input { min-width: 260px; }
.buscar-en-pantalla .recuento { margin: 0; font-size: 13px; color: var(--suave); }


/* Una sección de la que no se vuelve: aprobar una baja. Se separa del resto
   para que no se pulse de paso. */
section.cliente.peligrosa {
  border: 1px solid var(--rojo);
}
section.cliente.peligrosa > h2,
section.cliente.peligrosa > h3 { color: var(--rojo); }

/* Dar de baja, plegado. Cerrado es una línea discreta —no es a lo que se viene
   a esta pantalla—; al abrirlo se pone el marco rojo, que es cuando toca. */
details.baja {
  margin-top: 24px; border: 1px solid var(--linea); border-radius: 8px;
  background: var(--papel);
}
details.baja > summary {
  cursor: pointer; padding: 12px 16px; font-size: 14px; color: var(--suave);
  list-style: none; user-select: none;
}
details.baja > summary::-webkit-details-marker { display: none; }
details.baja > summary::before { content: "▸ "; }
details.baja[open] > summary::before { content: "▾ "; }
details.baja > summary:hover { color: var(--rojo); }
details.baja[open] { border-color: var(--rojo); }
details.baja[open] > summary {
  color: var(--rojo); font-weight: 600;
  border-bottom: 1px solid var(--linea);
}
details.baja > .cuerpo { padding: 16px; }
details.baja > .cuerpo > .formulario { max-width: none; border: none; padding: 0; }


/* Cabecera que ordena en el servidor: se ve igual que la que ordena en el
   navegador, porque para quien la pulsa es lo mismo. */
th.servidor { white-space: nowrap; }
th.servidor a { color: var(--suave); text-decoration: none; }
th.servidor a:hover { color: var(--azul); }
th.servidor a::after { content: " ⇅"; opacity: .3; font-size: 11px; }
th.servidor[data-orden="asc"] a::after { content: " ↑"; opacity: 1; color: var(--azul); }
th.servidor[data-orden="desc"] a::after { content: " ↓"; opacity: 1; color: var(--azul); }