: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; }


/* 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); }

/* ==========================================================================
   Lo propio de Partes de trabajo

   Todo lo de arriba es la hoja de «Control de Servicios», copiada tal cual:
   mismos colores, mismos componentes y los mismos tres estados de tema. Aquí
   abajo solo lo que allí no existe porque allí nadie hace fotos ni firma en una
   pantalla, y las correcciones de móvil que allí no hacen falta porque allí se
   trabaja sentado.
   ========================================================================== */

/* La galería de adjuntos: rejilla que se adapta sola, sin media queries. Con
   dos fotos no deja dos huecos vacíos y con ocho no las hace diminutas. */
.galeria {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  margin: 10px 0;
}
.adjunto { margin: 0; font-size: 13px; }
.adjunto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--linea);
  background: var(--cabecera);
}
.adjunto .fichero {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  border: 1px solid var(--linea);
  background: var(--cabecera);
  color: var(--suave);
  font-weight: 700;
  letter-spacing: .05em;
}
.adjunto figcaption { margin-top: 4px; word-break: break-word; color: var(--suave); }
.adjunto a { color: inherit; text-decoration: none; }
.adjunto .origen { display: block; }
.adjunto form { margin-top: 4px; }

/* El lienzo de firma. `touch-action: none` es lo que impide que la página se
   desplace mientras se firma, que es lo que arruina una firma en la calle. */
#lienzo {
  width: 100%;
  height: 180px;
  background: #fff;
  border: 1px dashed var(--linea);
  border-radius: 8px;
  touch-action: none;
  margin: 6px 0;
}
.firma-hecha img { max-height: 90px; }

/* Los dos estados de un parte. `.etiqueta` sola es gris —«ni fu ni fa»— y aquí
   los dos estados sí dicen algo: ámbar es trabajo por terminar, verde es
   terminado. Las variantes de «Control de Servicios» se llaman por el estado de
   una bolsa, que no es lo mismo. */
.etiqueta.activo { background: var(--tinte-ambar); color: var(--ambar); }
.etiqueta.cerrado { background: var(--tinte-verde); color: var(--verde); }

/* `.ayuda` lleva margen superior NEGATIVO para pegarse al título que tiene
   encima. Detrás de cualquier otra cosa —una botonera, un formulario— eso la
   mete por debajo y el texto se lee a medias. Solo se pega tras un título. */
.ayuda { margin-top: 10px; }
h1 + .ayuda, h2 + .ayuda, h3 + .ayuda { margin-top: -8px; }
.titular + .ayuda { margin-top: 4px; }

/* Un textarea sin altura son dos líneas con barra de desplazamiento. Aquí lo
   que se escribe dentro es el trabajo hecho: tiene que caber a la vista. */
textarea { min-height: 96px; }

/* Un enlace visitado en morado no significa nada aquí: todos los partes acaban
   visitados, así que el color deja de distinguir y solo desentona. */
main a { color: var(--azul); }
main a:visited { color: var(--azul); }

/* Algo que reclama atención no es una buena noticia. `.destacada` es verde y
   verde quiere decir «resuelto»; esto quiere decir «míralo». */
.nota.atencion {
  background: var(--tinte-ambar); border-color: var(--ambar); color: var(--texto-nota);
}

/* Tirar para refrescar. El gesto nativo del navegador se apaga aquí para que
   haya UNO solo: en el móvil instalado no existe, y en el navegador convivirían
   dos y se dispararían a destiempo. */
body { overscroll-behavior-y: contain; }
.refrescar {
  position: fixed; top: -46px; left: 50%; margin-left: -18px;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--papel); border: 1px solid var(--linea);
  box-shadow: 0 2px 8px var(--sombra);
  color: var(--suave); font-size: 12px; z-index: 50;
  pointer-events: none;
  transition: background .15s ease, border-color .15s ease;
}
.refrescar .aviso { white-space: nowrap; }
/* Al pasar el umbral el círculo se rellena: es lo único que hay que saber
   mientras se arrastra, y se ve por el rabillo del ojo sin dejar de mirar la
   lista. */
.refrescar.listo { border-color: var(--azul); background: var(--azul); }
/* Mientras recarga, la rueda de siempre: un arco girando. Es el único giro que
   queda, dura lo que dura la carga y no lo tiene que interpretar nadie. */
.refrescar.girando {
  border-color: var(--linea); border-top-color: var(--azul);
  background: var(--papel); animation: girar .7s linear infinite;
}
/* Cuando hay texto sin guardar el indicador se ensancha para caber el aviso. */
.refrescar.bloqueado {
  width: auto; padding: 0 14px; border-radius: 999px;
  font-size: 12px; color: var(--ambar); border-color: var(--ambar);
  margin-left: -60px;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Un botón deshabilitado tiene que parecerlo. Con el color de acción y sin
   responder al toque, quien lo pulsa cree que la aplicación se ha colgado. */
button:disabled, button[disabled] {
  opacity: .45; cursor: not-allowed; filter: grayscale(1);
}

/* La botonera del final del formulario. En el escritorio los dos botones van
   juntos; en el móvil se apilan y ocupan el ancho, como el resto. */
.acciones-parte { display: flex; gap: 12px; margin: 4px 0 12px; }
/* Un enlace con pinta de botón no centra su texto solo cuando se le fuerza el
   ancho: quedaba pegado a la izquierda entre dos botones centrados. */
.acciones-parte .boton { text-align: center; }
@media (max-width: 760px) {
  .acciones-parte { flex-direction: column; }
  .acciones-parte button, .acciones-parte .boton { width: 100%; }
}

/* Cada trabajo apuntado, una ficha. Se lee de arriba abajo sin cabeceras de
   tabla que en un móvil hay que reconstruir. */
.actuaciones { list-style: none; padding: 0; margin: 0 0 12px; }
.actuaciones > li {
  border: 1px solid var(--linea); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 10px; background: var(--papel);
}
.actuaciones .cabeza {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.actuaciones .texto { white-space: pre-wrap; margin: 6px 0 4px; }
.actuaciones .ayuda { margin: 0; }
.actuaciones details.corregir { margin-top: 10px; }
.actuaciones details.corregir > summary {
  cursor: pointer; font-size: 13px; color: var(--azul);
}
.actuaciones details.corregir[open] > summary { margin-bottom: 10px; }
.total-trabajo {
  text-align: right; margin: 0 0 12px; padding-top: 8px;
  border-top: 1px solid var(--linea); color: var(--suave); font-size: 14px;
}

/* El historial va plegado: es lo que se mira cuando algo se discute, no cada
   vez que se abre un parte. */
details.historial > summary { cursor: pointer; color: var(--azul); font-size: 14px; }
details.historial > summary + * { margin-top: 12px; }
.lista-historial { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.lista-historial li {
  padding: 8px 0; border-bottom: 1px solid var(--linea);
}
.lista-historial li:last-child { border-bottom: none; }
.lista-historial .cuando {
  display: block; color: var(--suave); font-size: 12px; margin-top: 2px;
}

/* Las dos ruedas de un tiempo, siempre juntas y siempre a la par: son un solo
   dato partido en dos. En iOS un `select` se dibuja como una rueda, que es
   justo lo que hace falta para elegir con el pulgar sin abrir el teclado. */
.ruedas { display: flex; gap: 12px; margin-bottom: 12px; }
.ruedas label { flex: 1; margin-bottom: 0; }
.ruedas select { width: 100%; }

/* Los desplazamientos son cifras de uno o dos dígitos: en rejilla caben tres
   por fila y se leen juntos, que es como se rellenan. */
.campos-desplazamiento {
  display: grid; gap: 0 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* El móvil aquí no es el caso raro sino el normal: esto se usa de pie, en la
   calle y con una mano. Se apoya en el bloque de arriba —que ya convierte cada
   fila de tabla en una ficha— y solo corrige lo que allí no puede saberse. */
@media (max-width: 760px) {
  /* Cualquier fila de controles se apila. En el escritorio una etiqueta con su
     desplegable y un botón caben de sobra; en un móvil el botón se come el
     ancho y deja el desplegable en un cuadradito donde no se lee lo elegido. */
  .linea { flex-direction: column; align-items: stretch; }
  .linea > label, .linea > input, .linea > select,
  .linea > button, .linea > .boton { width: 100%; }
  .linea label input, .linea label select { width: 100%; margin-top: 4px; }
  /* Menos el texto suelto que acompaña a un botón, que no es un control. */
  .linea .nota-inline, .linea .ayuda-inline { width: auto; text-align: center; }

  /* Un formulario ocupa el ancho que hay: el tope de 520px del escritorio deja
     los campos anchos y el botón corto, descolocados entre sí. */
  .formulario { max-width: none; }
  /* Un botón a media anchura en un móvil se falla con el pulgar y deja un hueco
     raro a su derecha donde el texto de al lado parece que se cuela. */
  .formulario button, section.cliente form > button,
  .titular .acciones button, .titular .acciones .boton { width: 100%; }
  .titular .acciones { width: 100%; }

  /* 16px es el umbral por debajo del cual iOS hace zoom al tocar un campo, y
     ese zoom no se deshace solo: deja la página torcida el resto de la visita. */
  input, select, textarea { font-size: 16px; }

  /* Objetivo táctil de verdad: con el móvil en una mano, 44px es lo que se
     acierta a la primera. El botón que parece un enlace se queda como está. */
  button, .boton, a.boton { min-height: 44px; }
  button.enlace { min-height: 0; width: auto; }

  /* El documento lleva tablas que no se pueden apilar sin perder el sentido. */
  .documento { overflow-x: auto; }
}