/* Corner ERP · marca CornerBuilder (manual de marca del 03/11/2026): petróleo #186670, tinta #152326,
   Manrope en títulos e Inter en textos (guardadas aquí, sin servidores de fuera). Modo oscuro según el sistema. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --fondo: #f3f7f7;
  --panel: #ffffff;
  --panel-2: #f8fbfb;          /* cabeceras de tabla, filas al pasar */
  --borde: #d4e2e2;
  --borde-suave: #e6eeee;
  --texto: #152326;            /* tinta */
  --suave: #52676a;
  --acento: #186670;           /* petróleo de la marca: botones, enlaces, pestaña activa */
  --acento-fuerte: #10525a;    /* al pasar el ratón */
  --acento-suave: #e3f0f0;     /* menú activo, filas */
  --detalle: #7fb3b5;          /* separadores, gráficos */
  --sobre-acento: #ffffff;
  --ok: #2f855a;
  --ok-suave: #e4f3ea;
  --atencion: #a8661b;
  --atencion-suave: #f8eedd;
  --error: #b23a3a;
  --error-suave: #f9e5e3;
  --aviso: var(--atencion);
  --aviso-suave: var(--atencion-suave);
  --sombra: none;               /* tarjetas planas (#350) */
  --radio: 10px;
  --radio-tarjeta: 18px;
  --carril: 88px;
  /* Carril de áreas oscuro (#350): en claro y en oscuro. */
  --carril-fondo: #0e1b1e; --carril-borde: transparent; --carril-texto: #b9cdd0; --carril-activa-fondo: #1d3a3e;
  --carril-activa-texto: #ffffff; --carril-icono: #6fc3cc; --carril-cuadro: #2a8a96;
  --avatar-fondo: var(--acento); --avatar-texto: #ffffff;
  /* Color de cada área (icono y detalle de cabecera). */
  --area-inicio: #186670;
  --area-ventas: #2f855a;
  --area-compras: #a8661b;
  --area-obras: #b5562f;
  --area-equipo: #6b5ca5;
  --area-finanzas: #1f6f8b;
  --area-informes: #3f6c9e;
  --area-contabilidad: #52676a;
  --area-holded: #2c5f9e;
  --area-contactos: #b0446f;
  --area-servicios: #8a7417;
  --area-configuracion: #52676a;
  --area-builder: #186670;
  --serie-facturado: var(--acento);
  --serie-gastado: #c0703a;
  --serie-presupuestado: var(--detalle);
  --serie-horas: #dbe7e7;
  --serie-tiempo: #6b5ca5;
  --serie-internos: #8a7a2e;
  --titulos: "Manrope", "Inter", system-ui, sans-serif;
  --letra: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Logo (manual de marca): versión color en claro. */
  --marca-cuadro: #186670; --marca-pilar: #ffffff; --marca-corner: #152326; --marca-builder: #186670;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0e1b1e;
    --panel: #152326;            /* tinta */
    --panel-2: #1a2b2e;
    --borde: #2b4347;
    --borde-suave: #223538;
    --texto: #e8f0f1;
    --suave: #b9cdd0;
    --acento: #6fc3cc;           /* turquesa suave: con texto tinta encima (contraste 7,9:1) */
    --acento-fuerte: #b9e0e4;
    --acento-suave: #1d3a3e;
    --marca-cuadro: #2a8a96; --marca-pilar: #ffffff; --marca-corner: #ffffff; --marca-builder: #6fc3cc;
    --detalle: #3f7476;
    --sobre-acento: #152326;
    --ok: #6cc597;
    --ok-suave: #193327;
    --atencion: #e0a35a;
    --atencion-suave: #3a2c19;
    --error: #ec8a80;
    --error-suave: #3b1f1d;
    --sombra: none;
    --carril-fondo: #0b1517; --carril-borde: #223538;
    --avatar-fondo: #6fc3cc; --avatar-texto: #0b1517;
    --area-inicio: #6fc3cc;
    --area-ventas: #6cc597;
    --area-compras: #e0a35a;
    --area-obras: #e58f66;
    --area-equipo: #a99ae0;
    --area-finanzas: #6bb8d6;
    --area-informes: #8fb0dc;
    --area-contabilidad: #9fb5b6;
    --area-holded: #8fb4e6;
    --area-contactos: #e68aae;
    --area-servicios: #d6c063;
    --area-configuracion: #9fb5b6;
    --area-builder: #6fc3cc;
    --serie-gastado: #e58f66;
    --serie-horas: #24393b;
    --serie-tiempo: #a99ae0;
    --serie-internos: #d6c46a;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 14px/1.5 var(--letra);
  color: var(--texto); background: var(--fondo);
}
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-family: var(--titulos); font-size: 38px; margin: 0; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
h2 { font-family: var(--titulos); font-size: 17px; margin: 0 0 12px; font-weight: 700; }
.marca-cuadro { fill: var(--marca-cuadro); } .marca-pilar { fill: var(--marca-pilar); }
.marca-corner { fill: var(--marca-corner); } .marca-builder { fill: var(--marca-builder); }
h3 { font-size: 14px; margin: 0 0 8px; font-weight: 600; }
.icono { flex: none; }
kbd { font: 11px/1 inherit; padding: 3px 5px; border: 1px solid var(--borde); border-radius: 4px; color: var(--suave); background: var(--panel-2); }

/* ---------- Estructura: carril de áreas + barra superior + pestañas del área ---------- */
.app { display: flex; min-height: 100vh; }
.areas {
  width: var(--carril); flex: none; background: var(--carril-fondo); border-right: 1px solid var(--carril-borde);
  position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; align-items: stretch;
  padding: 12px 8px; gap: 2px;
}
.areas .marca-cuadro { fill: var(--carril-cuadro); }
.logo { width: 34px; height: 34px; display: block; flex: none; }
.areas .marca { display: flex; justify-content: center; padding: 2px 0 14px; }
.areas .marca:hover { text-decoration: none; }
.area {
  --color: var(--carril-icono);
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 7px; border-radius: 10px;
  color: var(--carril-texto); font-size: 12px; font-weight: 500; text-align: center; line-height: 1.15;
}
.area .icono { width: 24px; height: 24px; }  /* 24 = tamaño de dibujo: nítido (#233) */
.area:hover { background: var(--carril-activa-fondo); color: var(--carril-activa-texto); text-decoration: none; }
.area.activa { background: var(--carril-activa-fondo); color: var(--carril-activa-texto); font-weight: 600; border-top-right-radius: 3px; }
.area.activa .icono, .area:hover .icono { color: var(--carril-icono); }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barra {
  min-height: 60px; background: var(--panel); border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: 12px; padding: 12px 28px; position: sticky; top: 0; z-index: 30;
}
.marca-movil { display: none; }
.selector-empresa { display: flex; align-items: center; gap: 8px; color: var(--suave); min-width: 0; }
.selector-empresa select { border: none; background: transparent; font-weight: 600; color: var(--texto); padding: 6px 4px; width: auto; max-width: 280px; cursor: pointer; }
.selector-empresa.solo-texto { font-weight: 600; color: var(--texto); }
.buscador {
  margin-left: auto; width: min(360px, 40vw); justify-content: flex-start; gap: 8px; font-weight: 400; color: var(--suave);
  background: var(--fondo); border-color: var(--borde-suave);
}
.buscador span { flex: 1; text-align: left; }
.buscador:hover { border-color: var(--detalle); background: var(--fondo); }
.menu-usuario { position: relative; }
.menu-usuario summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px; border-radius: 999px; }
.menu-usuario summary::-webkit-details-marker { display: none; }
.menu-usuario summary:hover { background: var(--fondo); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--avatar-fondo); color: var(--avatar-texto); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.nombre-usuario { font-weight: 500; padding-right: 6px; }
.desplegable {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: 0 10px 30px rgba(16, 40, 44, .14); padding: 6px; z-index: 40;
}
.desplegable .quien { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--borde-suave); margin-bottom: 4px; font-size: 13px; }
.desplegable a, .desplegable .enlace-menu {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 7px; color: var(--texto);
  background: none; border: none; font: inherit; font-weight: 400; cursor: pointer; text-align: left;
}
.desplegable a:hover, .desplegable .enlace-menu:hover { background: var(--fondo); text-decoration: none; }
.desplegable .icono { width: 18px; height: 18px; color: var(--suave); }
.desplegable form { margin: 0; }

.pestanas-area {
  display: flex; align-items: center; gap: 18px; padding: 0 24px; background: var(--panel); border-bottom: 1px solid var(--borde);
  min-height: 48px;
}
.nombre-area { display: flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.nombre-area a { color: inherit; }
.area-inicio .nombre-area .icono { color: var(--area-inicio); }
.area-ventas .nombre-area .icono { color: var(--area-ventas); }
.area-compras .nombre-area .icono { color: var(--area-compras); }
.area-contactos .nombre-area .icono { color: var(--area-contactos); }
.area-servicios .nombre-area .icono { color: var(--area-servicios); }
.area-obras .nombre-area .icono { color: var(--area-obras); }
.area-equipo .nombre-area .icono { color: var(--area-equipo); }
.area-finanzas .nombre-area .icono { color: var(--area-finanzas); }
.area-informes .nombre-area .icono { color: var(--area-informes); }
.area-contabilidad .nombre-area .icono, .area-configuracion .nombre-area .icono { color: var(--area-contabilidad); }
.pestanas-lista { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; align-self: stretch; }
.pestanas-lista::-webkit-scrollbar { display: none; }
.pestanas-lista a {
  display: flex; align-items: center; padding: 0 12px; color: var(--suave); white-space: nowrap; border-bottom: 2px solid transparent;
  margin-bottom: -1px; font-weight: 500;
}
.pestanas-lista a:hover { color: var(--texto); text-decoration: none; }
.pestanas-lista a.activa { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }

/* Columna centrada (no pegada a la izquierda en pantallas anchas); la barra de arriba sigue a todo el ancho. */
.contenido { padding: 32px 36px 40px; max-width: 1400px; width: 100%; margin-inline: auto; }
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.cabecera .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
/* Nada de lo que hay dentro de la columna puede ensancharla más que la ventana (la barra de arriba se cortaba). */
.cabecera > *, .cabecera .acciones > * { min-width: 0; max-width: 100%; }
.titular { min-width: 0; overflow-wrap: anywhere; }
.migas { color: var(--suave); font-size: 13px; margin-bottom: 4px; }

/* ---------- Buscador rápido (Ctrl+K) ---------- */
dialog.busqueda {
  width: min(620px, calc(100vw - 32px)); max-height: min(560px, 80vh); padding: 0; border: 1px solid var(--borde); border-radius: 14px;
  background: var(--panel); color: var(--texto); box-shadow: 0 24px 60px rgba(10, 30, 34, .25); margin-top: 12vh;
}
dialog.busqueda::backdrop { background: rgba(17, 25, 27, .35); }
.caja-busqueda { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--borde-suave); color: var(--suave); }
.caja-busqueda input { border: none !important; outline: none !important; padding: 6px 0 !important; font-size: 16px; background: transparent !important; }
.resultados-busqueda { overflow-y: auto; max-height: calc(min(560px, 80vh) - 62px); padding: 6px; }
.resultados-busqueda > p { padding: 10px 12px; margin: 0; }
.grupo-resultados { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); padding: 10px 12px 4px; }
.resultados-busqueda a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 8px; color: var(--texto); }
.resultados-busqueda a span:first-child { font-weight: 500; }
.resultados-busqueda a .suave { font-size: 12px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultados-busqueda a:hover, .resultados-busqueda a.seleccionado { background: var(--acento-suave); text-decoration: none; }

/* ---------- Líneas: buscar servicio con @ ---------- */
.sugerencias-servicio {
  position: absolute; z-index: 50; list-style: none; margin: 0; padding: 4px; max-width: min(520px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; box-shadow: 0 12px 30px rgba(10, 30, 34, .18);
}
.sugerencias-servicio li { display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.sugerencias-servicio li .suave { margin-left: auto; font-size: 12px; white-space: nowrap; }
.sugerencias-servicio li.seleccionado { background: var(--acento-suave); }
.sugerencias-servicio li.crear { color: var(--acento); font-weight: 600; }
.sugerencias-servicio li.sin-permiso { color: var(--suave); cursor: default; }
dialog.dialogo-servicio {
  width: min(560px, calc(100vw - 32px)); border: 1px solid var(--borde); border-radius: 14px; padding: 20px;
  background: var(--panel); color: var(--texto); box-shadow: 0 24px 60px rgba(10, 30, 34, .25);
}
dialog.dialogo-servicio::backdrop { background: rgba(17, 25, 27, .35); }
dialog.dialogo-servicio h2 { margin-top: 0; }
.acciones-dialogo { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.error-servicio { color: var(--error); background: var(--error-suave); padding: 8px 10px; border-radius: 7px; }


.cabecera-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.cabecera-pie label { margin: 0; }
.cabecera-pie select { width: auto; max-width: 100%; }


/* ---------- Configuración agrupada (#214) ---------- */
.grupo-configuracion { margin-bottom: 22px; }
.grupo-configuracion h2 { font-size: 15px; margin: 0 0 10px; color: var(--suave); text-transform: none; }
.grupo-configuracion.builder .tarjeta { border-style: dashed; }
fieldset.campo { border: 1px solid var(--borde-suave); border-radius: 10px; padding: 10px 14px 12px; margin: 0; min-width: 0; }
fieldset.campo legend { font-size: 13px; font-weight: 600; padding: 0 6px; color: var(--texto); }
.campos-casillas { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 12px; }

/* ---------- Tarjetas ---------- */
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: 18px; margin-bottom: 16px; box-shadow: var(--sombra); }
.rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 16px; }
.rejilla > .tarjeta { margin-bottom: 0; }
.kpi .etiqueta { color: var(--suave); font-size: 12px; font-weight: 500; }
.kpi .valor { font-family: var(--titulos); font-size: 24px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ---------- Tablas ---------- */
table.tabla { width: 100%; border-collapse: collapse; background: var(--panel); }
.tabla th, .tabla td { padding: 14px 16px; border-bottom: 1px solid var(--borde-suave); text-align: left; vertical-align: middle; }
.tabla th { font-size: 12px; color: var(--suave); font-weight: 600; background: transparent; border-bottom: 1px solid var(--borde); }
.tabla tbody tr:hover td { background: var(--panel-2); }
.tabla tr:last-child td { border-bottom: none; }
.tabla td.num, .tabla th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.envoltura-tabla { border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: 8px 12px; overflow-x: auto; background: var(--panel); box-shadow: var(--sombra); }
/* Una tarjeta que solo lleva una tabla: relleno de tarjeta con tabla y sin segundo marco. */
.tarjeta:has(> .envoltura-tabla:only-child), .tarjeta:has(> table.tabla:only-child) { padding: 8px 12px; }
.tarjeta > .envoltura-tabla:only-child { border: 0; padding: 0; border-radius: 0; background: transparent; }
.vacio { padding: 32px; text-align: center; color: var(--suave); }

/* ---------- Formularios ---------- */
label { display: block; font-size: 12px; color: var(--suave); margin-bottom: 4px; font-weight: 600; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], input[type=month], input[type=time], input[type=datetime-local], input[type=week], input[type=tel], input[type=url], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 7px; font: inherit; background: var(--panel); color: var(--texto);
}
/* Fecha y hora: el selector nativo de Chrome hace distinta su altura; todos los campos miden lo mismo (también en oscuro). */
input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week] { min-height: 40px; box-sizing: border-box; color-scheme: light dark; }
input[type=time], input[type=date] { font-variant-numeric: tabular-nums; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--acento-suave); border-color: var(--acento); }
textarea { min-height: 80px; }
.campos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.campo { margin-bottom: 4px; }
.campo.ancho { grid-column: 1 / -1; }
.ayuda { font-size: 12px; color: var(--suave); margin-top: 4px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--texto); font-weight: 400; }
.check input { width: auto; }
.filtros { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
/* Filtros en una línea: cada campo con ancho acotado (un cliente de nombre largo ya no estira su desplegable). */
.filtros .campo { flex: 0 1 190px; min-width: 140px; max-width: 240px; margin-bottom: 0; }
.filtros .campo select, .filtros .campo input { width: 100%; height: 40px; box-sizing: border-box; }
.filtros > button { height: 40px; }
.filtros > select { width: auto; max-width: 260px; }
.filtros > .check { min-height: 40px; }
/* Acciones en bloque (#277): la barra de «Con las marcadas» encima de la lista. */
.barra-bloque { background: var(--acento-suave); border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; }
/* Barra flotante (#233): va detrás de la tabla y se queda pegada abajo mientras hay algo marcado. Sin :has (navegador
   antiguo) se ve siempre, como antes. El número de marcadas lo cuenta el CSS (contador), sin JavaScript. */
.contenido { counter-reset: marcadas; }
input[form="bloque"]:checked { counter-increment: marcadas; }
.barra-bloque.flotante { align-items: center; position: sticky; bottom: 12px; z-index: 30; margin-top: 12px; box-shadow: 0 8px 24px rgb(21 35 38 / 18%); }
.barra-bloque.flotante .marcadas::before { content: counter(marcadas) " marcadas · "; }
.barra-bloque.flotante .ayuda-bloque { display: none; }
.grupo-bloque { display: inline-flex; align-items: center; gap: 6px; }
.grupo-bloque input[type="date"] { width: auto; }
.mas-bloque > summary { cursor: pointer; font-weight: 600; color: var(--acento); padding: 8px 4px; }
.mas-bloque[open] { flex-basis: 100%; }
.mas-bloque-cuerpo { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding-top: 6px; }
@supports selector(:has(*)) {
  .contenido:not(:has(input[form="bloque"]:checked)) .barra-bloque.flotante { display: none; }
}
.rejilla-kpi { margin-bottom: 16px; }
.kpi .valor.negativo, .negativo { color: var(--error); }
.etiqueta-estado.pronto { box-shadow: inset 0 0 0 1px currentColor; }
.solo-movil { display: none; }
/* Ficha de documento (#233, propuesta 2): estado junto al título, «Más» desplegable y apartados que se abren desde él. */
.titulo-estado { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.titulo-estado h1 { margin: 0; }
.etiqueta-estado.grande { font-size: 13px; padding: 4px 12px; }
.menu-mas { position: relative; }
.menu-mas > summary { list-style: none; }
.menu-mas > summary::-webkit-details-marker { display: none; }
.menu-mas > summary::after { content: " ▾"; }
.menu-mas-lista {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 270px; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; box-shadow: 0 12px 28px rgb(21 35 38 / 14%); padding: 6px;
}
.menu-mas-lista a, .menu-mas-lista span { padding: 9px 12px; border-radius: 8px; color: var(--texto); }
.menu-mas-lista a:hover { background: var(--acento-suave); text-decoration: none; }
.menu-mas-lista a.peligro { color: var(--error); }
.menu-mas-lista [aria-disabled="true"] { color: var(--suave); cursor: not-allowed; }
.apartado-accion:not(:target) { display: none; }
.apartado-accion:target { scroll-margin-top: 80px; outline: 2px solid var(--acento); outline-offset: 2px; }
.rejilla-ficha { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.rejilla-ficha h2, .rejilla-ficha h3 { margin-top: 0; }
.con-margen { margin-top: 10px; }
.aviso-fino { padding: 8px 14px; font-size: 14px; }
/* Ficha de obra (#233, propuesta 2): franja de datos y la cuenta de la obra. */
.datos-obra {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin-bottom: 16px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra);
}
.datos-obra > div { padding: 12px 16px; border-left: 1px solid var(--borde-suave); min-width: 0; overflow-wrap: anywhere; }
.datos-obra > div:first-child { border-left: 0; }
.datos-obra .etiqueta { font-size: 12px; color: var(--suave); margin-bottom: 3px; }
.datos-obra .nota, .cuenta-obra .nota { font-size: 12px; color: var(--suave); font-weight: 400; }
.cuenta-obra { padding: 0; overflow: hidden; }
.envoltura-tabla.sin-borde { border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.cuenta-obra .tabla th, .cuenta-obra .tabla td { padding: 11px 18px; }
.cuenta-obra .tabla thead th { vertical-align: bottom; }
.cuenta-obra .cifra { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cuenta-obra tr.grupo th { background: transparent; padding-top: 16px; padding-bottom: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 0; }
.cuenta-obra tr.total td { border-top: 2px solid var(--borde); border-bottom: 0; font-weight: 700; }
.cuenta-obra tr.total .cifra { font-family: var(--titulos); font-weight: 800; font-size: 18px; }
.cuenta-obra .nota-cuenta { margin: 0; padding: 10px 18px 14px; font-size: 12.5px; border-top: 1px solid var(--borde-suave); }
.cifra.negativo { color: var(--error); }
.lista-sin-ejecutar { margin-top: 8px; font-size: 13px; }
.lista-sin-ejecutar summary { cursor: pointer; color: var(--acento); font-weight: 600; }
.lista-sin-ejecutar ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lista-sin-ejecutar li { display: flex; justify-content: space-between; gap: 8px; }

.linea-tiempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.linea-tiempo li { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.deshacer { flex-basis: 100%; padding-left: 20px; font-size: 13px; }
.deshacer > summary { cursor: pointer; color: var(--suave); width: max-content; }
.deshacer > summary:hover { color: var(--error); }
.deshacer form { margin: 8px 0 0; }
.linea-tiempo li > div { flex: 1; min-width: 0; }
.linea-tiempo .suave { font-size: 12.5px; }
.linea-tiempo .punto { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--acento); }
.linea-tiempo .compensacion .punto { background: transparent; border: 2px solid var(--acento); box-sizing: border-box; }
.linea-tiempo .emision .punto { background: var(--suave); }
.fila-marcar th { text-transform: none; font-weight: 500; }
form.en-linea { display: inline; }

/* ---------- Botones ---------- */
.boton, button {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--borde);
  background: var(--panel); color: var(--texto); font: inherit; font-weight: 600; cursor: pointer;
}
.boton:hover, button:hover { text-decoration: none; background: var(--fondo); }
.boton.primario, button.primario { padding: 10px 20px; font-weight: 700; background: var(--acento); border-color: var(--acento); color: var(--sobre-acento);
  border-top-right-radius: 3px; /* la esquina recta del logo, como sello de marca */ }
.boton.primario:hover, button.primario:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }
.boton.peligro, button.peligro { color: var(--error); }
.tabla .boton.primario, .tabla button.primario { padding: 6px 16px; }
.boton.pequeno, button.pequeno { padding: 4px 10px; font-size: 13px; }
.boton.enlace, button.enlace { border: none; background: none; color: var(--acento); padding: 0; font-weight: 400; }
:focus-visible { outline: 3px solid var(--detalle); outline-offset: 1px; }

/* ---------- Avisos y etiquetas ---------- */
.aviso { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; border: 1px solid transparent; }
.aviso.ok { background: var(--ok-suave); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.aviso.error { background: var(--error-suave); color: var(--error); border-color: color-mix(in srgb, var(--error) 25%, transparent); }
.aviso.info { background: var(--acento-suave); color: var(--acento); border-color: color-mix(in srgb, var(--acento) 20%, transparent); }
.aviso.atencion { background: var(--atencion-suave); color: var(--atencion); border-color: color-mix(in srgb, var(--atencion) 25%, transparent); }
.etiqueta-estado { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--fondo); color: var(--suave); white-space: nowrap; }
.etiqueta-estado.ok { background: var(--ok-suave); color: var(--ok); }
.etiqueta-estado.error { background: var(--error-suave); color: var(--error); }
.etiqueta-estado.info { background: var(--acento-suave); color: var(--acento); }
.etiqueta-estado.atencion { background: var(--atencion-suave); color: var(--atencion); }
.suave { color: var(--suave); }
.sangria { display: inline-block; }

/* ---------- Acceso ---------- */
.acceso { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.acceso .tarjeta { width: min(380px, calc(100vw - 32px)); padding: 28px; }
.acceso .tarjeta.ancha { width: min(520px, calc(100vw - 32px)); }
.acceso .botonera { display: flex; flex-wrap: wrap; gap: 8px; }
.marca-acceso { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; color: var(--texto); }
.marca-acceso .logo-completo { width: 200px; height: auto; display: block; }
.marca-acceso .producto { font-size: 11px; font-weight: 700; letter-spacing: .08em; line-height: 1; color: var(--acento);
  background: var(--acento-suave); border-radius: 6px; padding: 5px 7px; }

/* ---------- Ficha y pestañas internas ---------- */
.ficha { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; }
.ficha dt { color: var(--suave); }
.ficha dd { margin: 0; }
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 16px; }
.pestanas a { padding: 8px 12px; color: var(--suave); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pestanas a:hover { color: var(--texto); text-decoration: none; }
.pestanas a.activa { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; }

/* ---------- Matriz de permisos ---------- */
.matriz td:first-child { width: 55%; }
.matriz select { min-width: 160px; }

/* ---------- Configuración ---------- */
.secciones { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grupo-informes { margin-bottom: 22px; }
.grupo-informes h2 { font-size: 15px; margin: 0 0 10px; color: var(--suave); }
a.seccion { display: flex; flex-direction: column; gap: 4px; color: var(--texto); }
a.seccion:hover { text-decoration: none; border-color: var(--detalle); }
a.seccion .suave { font-size: 13px; }

/* ---------- Panel de inicio ---------- */
a.panel-kpi { color: inherit; display: block; }
a.panel-kpi:hover { text-decoration: none; border-color: var(--detalle); }
.panel-kpi .pie { color: var(--suave); font-size: 12px; margin-top: 4px; }
.panel-kpi.ok .valor { color: var(--ok); }
.alertas { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.alerta-panel {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radio);
  background: var(--error-suave); color: var(--error); border: 1px solid color-mix(in srgb, var(--error) 20%, transparent);
}
.alerta-panel span { flex: 1; color: var(--texto); }
.alerta-panel strong { font-variant-numeric: tabular-nums; }
.alerta-panel:hover { text-decoration: none; border-color: var(--error); }
.alerta-panel.atencion { background: var(--atencion-suave); color: var(--atencion); border-color: color-mix(in srgb, var(--atencion) 22%, transparent); }
.alerta-panel.atencion:hover { border-color: var(--atencion); }
/* Tarjetas de Inicio de 3 en 3 (6 quedan en dos filas de 3, no en 5 + 1). */
.rejilla-inicio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .rejilla-inicio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-color-scheme: dark) { .area:not(.activa):not(:hover) { color: #b4c6c8; } }  /* etiquetas de la barra algo más claras: con letra pequeña, el gris suave parecía borroso */
@media (prefers-color-scheme: dark) {  /* en oscuro, sobre tinta con franja de color: sin fondos marrones */
  .alerta-panel { background: var(--panel); border-color: var(--borde); border-left: 4px solid var(--error); }
  .alerta-panel.atencion { background: var(--panel); border-color: var(--borde); border-left: 4px solid var(--atencion); color: var(--atencion); }
  .aviso.error, .aviso.atencion { background: var(--panel); border-color: var(--borde); border-left-width: 4px; }
  .aviso.error { border-left-color: var(--error); } .aviso.atencion { border-left-color: var(--atencion); }
}
.grafico-anual .cabecera-tabla { margin-top: 0; }
.acciones-grafico { display: flex; gap: 8px; }
.leyenda-grafico { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 4px 0 8px; font-size: 13px; color: var(--suave); }
.leyenda-grafico li { display: flex; align-items: center; gap: 6px; cursor: help; }
.leyenda-grafico .muestra { width: 16px; height: 3px; border-radius: 2px; background: var(--c); }
.leyenda-grafico .serie-horas .muestra { height: 10px; width: 10px; }
.serie-facturado { --c: var(--serie-facturado); }
.serie-gastado { --c: var(--serie-gastado); }
.serie-presupuestado { --c: var(--serie-presupuestado); }
.serie-horas { --c: var(--serie-horas); }
.serie-tiempo { --c: var(--serie-tiempo); }
.serie-internos { --c: var(--serie-internos); }
.resumen-centro .titulo-bloque { font-size: 13px; font-weight: 600; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; margin: 4px 0 8px; }
.rejilla-kpi { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.subtitulo-centro { margin: -6px 0 12px; }
.tabla td.negativo { color: var(--error); }
.elegir-columnas { margin-bottom: 10px; }
.elegir-columnas .filtros { margin-top: 8px; flex-wrap: wrap; }
.lienzo-grafico svg { width: 100%; height: auto; display: block; overflow: visible; }
.lienzo-grafico .rejilla { stroke: var(--borde-suave); stroke-width: 1; }
.lienzo-grafico .eje { fill: var(--suave); font-size: 11px; }
.lienzo-grafico .linea { fill: none; stroke: var(--c); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.lienzo-grafico .linea.serie-presupuestado { stroke-dasharray: 6 5; }
.lienzo-grafico .punto { fill: var(--panel); stroke: var(--c); stroke-width: 2; }
.lienzo-grafico .barra-horas { fill: var(--serie-horas); }
.lienzo-grafico .zona-mes { fill: transparent; }
.lienzo-grafico .zona-mes:hover { fill: color-mix(in srgb, var(--acento) 6%, transparent); }
.cifras-grafico { margin-top: 8px; }
.cifras-grafico summary { cursor: pointer; color: var(--suave); font-size: 13px; margin-bottom: 8px; }

/* Pendientes a fecha y similares: pestañas con cifra, consulta por fecha, atajos y ayudas */
.pestanas-grandes a { font-size: 15px; padding: 10px 16px; }
.pestanas-grandes .cifra { display: block; font-size: 20px; font-weight: 600; color: var(--texto); margin-top: 2px; }
.pestanas-grandes a:not(.activa) .cifra { color: var(--suave); font-weight: 500; }
.consulta-fecha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 10px; }
.consulta-fecha .campo { margin: 0; }
.mas-filtros { flex-basis: 100%; }
.mas-filtros summary { cursor: pointer; color: var(--suave); font-size: 13px; }
.mas-filtros .campos { margin-top: 8px; }
.atajos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.chip { display: inline-block; padding: 4px 12px; border: 1px solid var(--borde); border-radius: 999px; font-size: 13px; color: var(--texto); background: var(--panel); }
.chip:hover { border-color: var(--acento); text-decoration: none; }
.chip.activo { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.filtro-activo { display: inline-flex; gap: 10px; align-items: center; padding: 6px 12px; border-radius: var(--radio); background: var(--panel); border: 1px solid var(--borde); font-size: 13px; }
.filtro-activo a { color: var(--suave); }
.kpi .pie { color: var(--suave); font-size: 12px; margin-top: 2px; }
.kpi .pie.formula { margin-top: 6px; font-variant-numeric: tabular-nums; }
.kpi.alerta .valor { color: var(--error); }
.cabecera-tabla { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0; flex-wrap: wrap; }
.cabecera-tabla h2 { margin: 0; }
.segmentado { display: inline-flex; max-width: 100%; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.segmentado a { padding: 5px 12px; font-size: 13px; color: var(--suave); background: var(--panel); }
.segmentado a + a { border-left: 1px solid var(--borde); }
.segmentado a.activo { background: var(--acento); color: var(--sobre-acento); }
.segmentado.mini a { padding: 4px 10px; font-size: 12px; }
.cabecera-kpi { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
/* Ayuda breve: un «?» que muestra el texto al pasar el ratón o al tocarlo (sin párrafos en pantalla). */
.pista { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%;
        border: 1px solid var(--suave); color: var(--suave); font-size: 10px; font-weight: 600; cursor: help; vertical-align: 1px; }
.pista:hover::after, .pista:focus::after { content: attr(data-ayuda); position: absolute; z-index: 20; top: 20px; left: -8px; width: 240px;
        padding: 8px 10px; border-radius: var(--radio); background: var(--texto); color: var(--panel); font-size: 12px; font-weight: 400; line-height: 1.4; white-space: normal; text-transform: none; }


/* ---------- Móvil: el carril de áreas pasa abajo; las pestañas se desplazan ---------- */
.boton-filtros { display: none; }
.area-mas { display: none; }
@media (max-width: 860px) {
  /* Barra de abajo: 4 áreas y «Más» (#233), sin nombres cortados. */
  .area.fuera-movil { display: none; }
  .area-mas { display: flex; flex: 1 1 0; min-width: 48px; }
  .area-mas > summary { list-style: none; width: 100%; cursor: pointer; }
  .area-mas > summary::-webkit-details-marker { display: none; }
  .area-mas-lista {
    position: fixed; right: 8px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 36; min-width: 220px;
    display: flex; flex-direction: column; padding: 6px; background: var(--carril-fondo); border: 1px solid var(--carril-activa-fondo);
    border-radius: 12px; box-shadow: 0 12px 28px rgb(21 35 38 / 30%);
  }
  .area-mas-lista a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 8px; color: var(--carril-texto); font-size: 15px; }
  .area-mas-lista a .icono { color: var(--carril-icono); }
  .area-mas-lista a.activa { background: var(--carril-activa-fondo); color: var(--carril-activa-texto); font-weight: 600; }
  .area-mas-lista a:hover { text-decoration: none; background: var(--carril-activa-fondo); color: var(--carril-activa-texto); }
  .app { flex-direction: column; }
  .areas {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto; width: 100%; height: auto; z-index: 35;
    flex-direction: row; justify-content: space-around; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); gap: 0;
    border-right: none; border-top: 1px solid var(--carril-borde); overflow-x: auto;
  }
  .areas .marca { display: none; }
  .area { flex: 1 1 0; min-width: 48px; padding: 6px 2px 4px; font-size: 11px; border-radius: 8px; }
  .area .icono { width: 24px; height: 24px; }
  .area span { max-width: 100%; text-align: center; line-height: 1.15; overflow-wrap: anywhere; }  /* a dos líneas, sin cortar */
  .lienzo-grafico { overflow-x: auto; }
  .lienzo-grafico svg { min-width: 620px; }
  .barra { padding: 8px 12px; gap: 8px; min-height: 54px; }
  .marca-movil { display: inline-flex; }
  .marca-movil .logo { width: 30px; height: 30px; }
  .marca-movil:hover { text-decoration: none; }
  .selector-empresa select { max-width: 42vw; }
  .selector-empresa > .icono { display: none; }
  .buscador { width: auto; padding: 8px; }
  .buscador span, .buscador kbd, .nombre-usuario { display: none; }
  .pestanas-area { padding: 0 12px; gap: 10px; }
  .pestanas-lista a { padding: 0 10px; }
  .contenido { padding: 16px 14px calc(84px + env(safe-area-inset-bottom)); }
  h1 { font-size: 22px; }
  /* Filtros de los listados plegados tras un botón (lo pone base.html; sin JS se ven como siempre). */
  .boton-filtros { display: inline-flex; margin-bottom: 12px; }
  form.filtros.plegable:not(.abierto) { display: none; }
  /* Tarjetas de resumen: dos por fila y más bajas. */
  .rejilla:has(> .kpi) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tarjeta.kpi { padding: 12px; margin-bottom: 0; }
  .kpi .valor { font-size: 18px; }
  .acciones-grafico { flex-wrap: wrap; }
  dialog.busqueda { margin-top: 8px; }
  .barra-bloque.flotante { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .rejilla-ficha { grid-template-columns: 1fr; }
  .datos-obra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .datos-obra > div { border-left: 0; border-top: 1px solid var(--borde-suave); }
  .datos-obra > div:nth-child(-n+2) { border-top: 0; }
  .cuenta-obra .tabla th, .cuenta-obra .tabla td { padding: 8px 6px; font-size: 12.5px; }
  .cuenta-obra .tabla th:first-child, .cuenta-obra .tabla td:first-child { padding-left: 12px; }
  .cuenta-obra .cifra { font-size: 13px; white-space: nowrap; }
  .cuenta-obra tr.total .cifra { font-size: 14px; }
  .contenido > nav.pestanas { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .contenido > nav.pestanas a { white-space: nowrap; }
  .cuenta-obra .tabla thead .nota, .cuenta-obra td .nota { display: none; }
  /* Líneas de los documentos apiladas: descripción a lo ancho e importe; cantidad, precio, IVA y centro debajo. */
  .tabla.lineas-doc thead { display: none; }
  .tabla.lineas-doc, .tabla.lineas-doc tbody { display: block; }
  .tabla.lineas-doc tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--borde-suave); }
  .tabla.lineas-doc td { padding: 0; border: 0; }
  .tabla.lineas-doc td { order: 3; font-size: 12.5px; color: var(--suave); text-align: left; }
  .tabla.lineas-doc td:empty { display: none; }
  .tabla.lineas-doc td:nth-child(2):not(:last-child)::before { content: "Cant. "; }
  .tabla.lineas-doc td:nth-child(3):not(:last-child)::before { content: "× "; }
  .tabla.lineas-doc td:first-child { order: 0; flex: 1 1 60%; font-size: 14px; color: var(--texto); font-weight: 500; }
  .tabla.lineas-doc td:last-child { order: 2; font-size: 14px; color: var(--texto); font-weight: 600; text-align: right; }
  .tabla.lineas-doc tr::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .ficha { grid-template-columns: 110px 1fr; }
  /* Listas como tarjetas (#233): número y estado; cliente e importe; fecha y centro. */
  .solo-movil { display: inline; }
  .envoltura-tabla:has(> .tabla.tarjetas) { overflow: visible; }
  .envoltura-tabla:has(> .tabla.tarjetas), .envoltura-tabla:has(> .tabla.centros-tarjetas) { padding: 0; }
  .tabla th, .tabla td { padding: 10px 10px; }
  .tabla.tarjetas, .tabla.tarjetas tbody { display: block; }
  .tabla.tarjetas thead tr:not(.fila-marcar) { display: none; }
  .tabla.tarjetas thead, .tabla.tarjetas .fila-marcar, .tabla.tarjetas .fila-marcar th { display: block; }
  .tabla.tarjetas tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titulo estado" "principal importe" "meta extra";
    gap: 3px 10px; padding: 11px 14px; border-bottom: 1px solid var(--borde-suave);
  }
  .tabla.tarjetas td { padding: 0; border: 0; }
  .tabla.tarjetas tbody tr:hover { background: var(--panel-2); }
  .tabla.tarjetas tbody tr:hover td { background: transparent; }
  .tabla.tarjetas .t-oculta { display: none; }
  .tabla.tarjetas .t-titulo { grid-area: titulo; font-weight: 600; }
  .tabla.tarjetas .t-estado { grid-area: estado; text-align: right; }
  .tabla.tarjetas .t-principal { grid-area: principal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabla.tarjetas .t-importe { grid-area: importe; font-weight: 600; }
  .tabla.tarjetas .t-meta { grid-area: meta; font-size: 12.5px; color: var(--suave); }
  .tabla.tarjetas .t-extra { grid-area: extra; font-size: 12.5px; color: var(--suave); text-align: right; }
  .tabla.tarjetas .t-vacio { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .nombre-area { display: none; }
}
@media print {
  .areas, .barra, .pestanas-area, .acciones, .filtros, .boton-filtros { display: none !important; }
  body { background: #fff; }
  .contenido { padding: 0; }
}

/* Editor de líneas */
.editor-lineas td { padding: 6px; vertical-align: top; }
.editor-lineas input, .editor-lineas select, .editor-lineas textarea { padding: 6px 8px; font-size: 13px; }
.editor-lineas textarea { min-height: 34px; resize: vertical; }
.editor-lineas input.num { text-align: right; }
.editor-lineas td.l-importe { padding-top: 12px; font-variant-numeric: tabular-nums; }
/* Editor de líneas en el móvil (#326): cada línea es una tarjeta con rejilla de 2 columnas. */
@media (max-width: 640px) {
  .envoltura-tabla:has(> .editor-lineas) { overflow: visible; border: 0; box-shadow: none; background: transparent; border-radius: 0; }
  .editor-lineas, .editor-lineas tbody, .editor-lineas tr.linea { display: block; }
  .editor-lineas thead.cabecera-lineas { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .editor-lineas tr.linea {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; align-items: end;
    padding: 12px; margin-bottom: 12px; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
  }
  .editor-lineas tr.linea td { display: block; padding: 0; border: 0; min-width: 0; }
  .editor-lineas tr.linea td[data-etiqueta]::before {
    content: attr(data-etiqueta); display: block; margin-bottom: 3px; font-size: 12px; line-height: 1.2; color: var(--suave);
  }
  .editor-lineas td.c-descripcion { order: 1; grid-column: 1 / -1; }
  .editor-lineas td.c-cantidad { order: 2; }
  .editor-lineas td.c-precio { order: 3; }
  .editor-lineas td.c-iva { order: 4; }
  .editor-lineas td.c-descuento { order: 5; }
  .editor-lineas td.c-retencion { order: 6; }
  .editor-lineas td.c-centro { order: 7; }
  .editor-lineas td.c-producto { order: 8; grid-column: 1 / -1; }
  .editor-lineas td.c-quitar { order: 9; }
  .editor-lineas td.c-importe { order: 10; padding-top: 0; text-align: right; font-size: 16px; font-weight: 600; }
  .editor-lineas td.c-importe::before { font-weight: 400; }
  .editor-lineas input, .editor-lineas select, .editor-lineas textarea { width: 100%; min-height: 40px; font-size: 16px; padding: 8px 10px; }
  .editor-lineas textarea { min-height: 64px; }
  .editor-lineas td.c-quitar button { min-height: 40px; min-width: 40px; }
}
.totales-editor { margin-left: auto; width: 320px; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 16px; }
.totales-editor div { display: flex; justify-content: space-between; padding: 3px 0; }
.totales-editor .t-total { border-top: 1px solid var(--borde); margin-top: 6px; padding-top: 8px; font-size: 16px; }
.totales { margin-left: auto; width: min(360px, 100%); }
.totales td { padding: 5px 0; }
.totales td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.totales tr.total td { border-top: 1px solid var(--borde); font-weight: 700; font-size: 16px; padding-top: 8px; }

/* Tablero (presupuestos) */
.tablero { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
/* Tablero (#233): fundido en el borde derecho mientras quedan columnas por ver. Va con el desplazamiento (CSS, sin
   JS); sin desplazamiento o en navegadores que no lo soportan, no hay fundido. */
@property --fundido-tablero { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes fundido-tablero { 0%, 96% { --fundido-tablero: 56px; } 100% { --fundido-tablero: 0px; } }
@supports (animation-timeline: scroll()) {
  .tablero {
    animation: fundido-tablero linear both; animation-timeline: scroll(self inline);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--fundido-tablero)), transparent);
  }
}
.columna { flex: 0 0 280px; background: color-mix(in srgb, var(--borde) 45%, var(--fondo)); border-radius: var(--radio); padding: 10px; min-height: 120px; }
.columna.sobre { outline: 2px dashed var(--acento); }
.columna .titulo-col { display: flex; justify-content: space-between; align-items: center; font-weight: 600; margin: 2px 4px 10px; }
.columna .titulo-col .punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }
.columna .suma { color: var(--suave); font-weight: 400; font-size: 12px; }
.tarjeta-p { background: var(--panel); border: 1px solid var(--borde); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; cursor: grab; box-shadow: var(--sombra); }
.tarjeta-p:active { cursor: grabbing; }
.tarjeta-p .num-p { font-size: 12px; color: var(--suave); display: flex; justify-content: space-between; }
.tarjeta-p .cliente { font-weight: 600; margin: 2px 0; }
.tarjeta-p .importe { font-weight: 600; }
.tarjeta-p .pie { display: flex; justify-content: space-between; font-size: 12px; color: var(--suave); margin-top: 6px; }
.tarjeta-p.arrastrando { opacity: .5; }

/* Conciliación factura ↔ pedidos */
.conciliacion { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 16px; align-items: start; }
.conciliacion .lado-factura { position: sticky; top: 16px; }
.asignacion { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--borde); }
.barra-progreso { display: block; width: 100%; height: 8px; border: 0; appearance: none; -webkit-appearance: none; background: var(--fondo); border-radius: 999px; overflow: hidden; margin: 12px 0 8px; }
.barra-progreso::-webkit-progress-bar { background: var(--fondo); }
.barra-progreso::-webkit-progress-value { background: var(--ok); }
.barra-progreso::-moz-progress-bar { background: var(--ok); }
@media (max-width: 1000px) { .conciliacion { grid-template-columns: 1fr; } .conciliacion .lado-factura { position: static; } }

/* Planificación (gantt simple) */
.gantt { padding: 12px 18px; overflow-x: auto; }
.gantt-cab, .gantt-fila { display: grid; grid-template-columns: 260px 1fr; align-items: center; min-width: 760px; }
.gantt-cab { height: 26px; border-bottom: 1px solid var(--borde); }
.gantt-fila { height: 34px; border-bottom: 1px solid var(--borde-suave); }
.gantt-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px; font-size: 13px; }
.gantt-pista { position: relative; height: 100%; }
.gantt-mes { position: absolute; top: 4px; font-size: 11px; color: var(--suave); transform: translateX(4px); }
.gantt-guia { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--borde); }
.gantt-hoy { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--error); z-index: 2; }
.gantt-barra { position: absolute; top: 7px; height: 20px; border-radius: 5px; background: color-mix(in srgb, var(--detalle) 45%, var(--panel)); color: var(--texto); font-size: 11px; padding: 2px 6px; overflow: hidden; white-space: nowrap; }
.gantt-barra:hover { text-decoration: none; filter: brightness(.95); }
.gantt-barra.activa { background: var(--acento); color: var(--sobre-acento); }
.gantt-barra.retrasada { background: var(--error); color: var(--sobre-acento); }
.gantt-barra.abierta { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gantt-grupo { font-weight: 600; padding: 12px 0 4px; min-width: 760px; }

/* Barras mensuales */
.barras-mes { display: flex; gap: 6px; align-items: flex-end; height: 140px; margin-bottom: 8px; }
.mes-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.mes-barras { flex: 1; width: 100%; display: flex; gap: 2px; align-items: flex-end; justify-content: center; }
.mes-barras span { width: 40%; min-height: 1px; border-radius: 3px 3px 0 0; }
.mes-texto { font-size: 11px; color: var(--suave); margin-top: 4px; }
.b-ing { background: var(--acento); }
.b-gas { background: var(--serie-gastado); }
.leyenda { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 8px; vertical-align: middle; }

/* Revisión de documentos con visor */
.revision { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(380px, 1fr); gap: 16px; align-items: start; }
.visor { padding: 0; overflow: hidden; position: sticky; top: 16px; }
.visor iframe { width: 100%; height: calc(100vh - 140px); border: 0; display: block; background: #fff; }
@media (max-width: 1100px) { .revision { grid-template-columns: 1fr; } .visor { position: static; } .visor iframe { height: 70vh; } }
.password-temporal code { font-size: 22px; letter-spacing: .06em; padding: 8px 14px; display: inline-block; }
.qr { margin: 12px 0; } .qr svg { display: block; width: 240px; max-width: 100%; height: auto; border-radius: 8px; }
.clave-totp { word-break: break-all; }
.fila-codigo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.fila-codigo input:not([type=date]):not([type=time]) { width: 12ch; font-size: 18px; letter-spacing: .15em; text-align: center; }
.codigos-recuperacion { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; list-style: none; padding: 0; }
.codigos-recuperacion code { font-size: 16px; letter-spacing: .05em; }
.pasos li { margin-bottom: 14px; }
.version-erp { font-size: 11px; padding: 6px 12px 2px; text-align: right; }
a.version-erp { display: block; text-decoration: none; }
a.version-erp:hover { text-decoration: underline; }
/* Aviso de novedades en una línea fina: no compite con el título de la pantalla. */
.aviso-novedades { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 14px; font-size: 13px; margin-bottom: 14px; }
.aviso-novedades button { padding: 3px 10px; min-height: 0; font-size: 13px; background: transparent; border-color: transparent; color: var(--suave); box-shadow: none; }
.aviso-novedades button:hover { color: var(--texto); border-color: var(--borde); }
.franja-ver-como { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 30; margin-bottom: 14px; }
.franja-ver-como form { margin: 0; }
.aviso-novedades form { margin: 0; }
.novedades-version { margin-bottom: 18px; }
.novedades-version h2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.novedades-version ul { margin: 6px 0 0; padding-left: 20px; }
.novedades-version li { margin-bottom: 6px; line-height: 1.5; }
input.campo-fecha { min-width: 11.5rem; width: auto; }
.detalle-tecnico { font-size: 13px; margin-top: 4px; color: inherit; opacity: .8; }
/* Facturación rápida (#350): la fecha va de antetítulo y los botones del día, a la derecha del título. */
.antetitulo { margin: 0 0 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--acento); }
.cabecera .acciones.acciones-dia { align-items: center; justify-content: flex-end; }
.acciones-dia .fila-codigo, .acciones-dia form { margin: 0; }
.acciones-dia .fila-codigo { flex-wrap: nowrap; }
/* En el ordenador la acción principal va al final (como «Facturar» en Servicios del día). */
.acciones-dia > .primario { order: 9; }
.en-linea { display: inline; }
.segmentado.mini form button { padding: 4px 10px; font-size: 12px; border: 0; white-space: nowrap; background: var(--panel); color: var(--suave); cursor: pointer; }
.segmentado.mini form + form button { border-left: 1px solid var(--borde); }
.segmentado.mini form button.activo { background: var(--acento); color: var(--sobre-acento); }
.servicios-dia td { vertical-align: top; }
.problemas { margin: 0; padding-left: 16px; color: var(--atencion); font-size: 12px; }

/* Orden del menú (#147) */
.acciones-orden { white-space: nowrap; }
.acciones-orden button:disabled { opacity: .35; cursor: default; }

/* Texto final de los documentos (#169): respeta los saltos de línea */
.texto-final { white-space: pre-line; }

/* Grupo de campos dentro de la rejilla de un formulario (se puede esconder entero) */
.grupo-campos { display: contents; }
.grupo-campos[hidden] { display: none; }

/* Totales de las obras arriba de la lista de centros (#159) */
.totales-obras { margin: 4px 0 14px; }
.totales-obras > .etiqueta { font-weight: 600; margin-bottom: 6px; }
.totales-obras .rejilla { margin-bottom: 4px; }

/* Títulos de columna que ordenan (#194) */
th a.orden { color: inherit; text-decoration: none; white-space: nowrap; }
th a.orden:hover { text-decoration: underline; }
.acciones-tabla { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 6px; }

/* Filtros por columna (#211) */
.fila-filtros th { padding: 4px 6px; background: var(--fondo); vertical-align: top; font-weight: normal; }
.fila-filtros input { width: 100%; min-width: 70px; font-size: 12px; padding: 4px 6px; }
.fila-filtros .rango { display: flex; flex-direction: column; gap: 3px; }
.fila-filtros button { margin-top: 4px; }


/* Documentos de obras y contactos (#179) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip.activo .suave { color: inherit; opacity: .8; }
.acciones-fila form { display: inline; }

/* Utilidades de maquetación (#233): sustituyen a las medidas escritas a mano en las plantillas. */
.mt-8 { margin-top: 8px !important; } .mt-10 { margin-top: 10px !important; } .mt-12 { margin-top: 12px !important; } .mt-14 { margin-top: 14px !important; }
.mt-16 { margin-top: 16px !important; } .mb-8 { margin-bottom: 8px !important; } .mb-16 { margin-bottom: 16px !important; } .m-0 { margin: 0 !important; }
.m-0-arriba { margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
.w-70 { width: 70px !important; } .w-80 { width: 80px !important; } .w-90 { width: 90px !important; } .w-100 { width: 100px !important; } .w-110 { width: 110px !important; }
.w-120 { width: 120px !important; } .w-130 { width: 130px !important; } .w-140 { width: 140px !important; } .w-auto { width: auto !important; } .w-full { width: 100% !important; }
.mt-4 { margin-top: 4px !important; } .mt-6 { margin-top: 6px !important; } .py-4 { padding-block: 4px; } .max-360 { max-width: 360px; }
.form-en-fila { display: flex; gap: 6px; margin: 0; } .alinear-abajo { align-items: flex-end; } .valor-15 { font-size: 15px !important; }
.visor .visor-factura { height: 70vh; } .visor.visor-suelto { margin-top: 12px; position: static; }
.w-8ch { width: 8ch !important; } .w-10ch { width: 10ch !important; } .w-12em { width: 12em !important; } .max-200 { max-width: 200px !important; } .max-260 { max-width: 260px !important; }
.centrado { justify-content: center !important; } .oculto { display: none !important; }
.en-claro h3 { font-size: 14px; margin: 14px 0 4px; }
.en-claro summary h2 { display: inline; }
.lista-claro { margin: 0 0 4px; padding-left: 18px; }
.lista-claro li { margin: 2px 0; }
.lista-pasos { padding-left: 34px; }
.lista-pasos li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--borde); }
.lista-pasos li:first-child { border-top: 0; }
.lista-pasos .paso-texto { flex: 1; }
.lista-pasos li.hecho .paso-texto strong { color: var(--suave); }
@media (max-width: 700px) { .lista-pasos li { flex-direction: column; align-items: flex-start; } }

/* Visible solo para lectores de pantalla. */
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cambiar-estado-p { margin-top: 8px; }
.cambiar-estado-p select { font-size: 13px; padding: 4px 6px; }

/* Agenda propia (#320): lista de citas del día; en el móvil, la hora arriba y las acciones debajo */
.lista-citas { list-style: none; margin: 0; padding: 0; }
.lista-citas .cita { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--borde); flex-wrap: wrap; }
.lista-citas .cita:first-child { border-top: 0; }
.lista-citas .cita.anulada .cita-datos { opacity: .6; }
.cita-hora { min-width: 9ch; display: flex; flex-direction: column; }
.cita-datos { flex: 1 1 16ch; min-width: 0; overflow-wrap: anywhere; }
.cita-acciones { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; max-width: 100%; }
.cita-acciones .segmentado.mini { flex-wrap: wrap; }
.cita-acciones .segmentado.mini form button { flex: 1 1 auto; }
.filtros-citas .campos { margin-bottom: 8px; }
@media (max-width: 640px) { .lista-citas .cita { flex-direction: column; gap: 6px; } .cita-hora { flex-direction: row; gap: 10px; align-items: baseline; } .segmentado.mini { flex-wrap: wrap; } }

/* RRHH (#353): calendario mensual, listas sencillas y datos de una solicitud */
.calendario-rrhh { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--panel); }
.calendario-rrhh th { padding: 6px 4px; font-size: 12px; color: var(--suave); background: var(--panel-2); border: 1px solid var(--borde-suave); }
.calendario-rrhh th .corto { display: none; }
.calendario-rrhh td { height: 92px; vertical-align: top; padding: 4px; border: 1px solid var(--borde-suave); overflow: hidden; }
.calendario-rrhh td.fuera { background: var(--panel-2); }
.calendario-rrhh td.festivo { background: var(--atencion-suave); }
.calendario-rrhh td.libre { background: var(--panel-2); color: var(--suave); }
.calendario-rrhh td.hoy .dia-numero { background: var(--acento); color: var(--sobre-acento); }
.dia-numero { display: inline-block; min-width: 22px; padding: 1px 4px; border-radius: 999px; font-size: 12px; font-weight: 600; text-align: center; }
.dia-festivo { font-size: 11px; color: var(--atencion); line-height: 1.25; margin-bottom: 2px; overflow-wrap: anywhere; }
.dia-item { display: block; margin-top: 2px; padding: 1px 6px; border-radius: 6px; font-size: 11px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dia-item.vacaciones { background: var(--acento-suave); color: var(--acento); }
.dia-item.ausencia { background: var(--error-suave); color: var(--error); }
.dia-item.pendiente { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.dia-item:hover { text-decoration: none; }
p > .dia-item { display: inline-block; margin: 0 4px 0 0; }
@media (max-width: 640px) {
  .calendario-rrhh th .largo { display: none; }
  .calendario-rrhh th .corto { display: inline; }
  .calendario-rrhh td { height: 64px; padding: 2px; }
  .dia-festivo { display: none; }
  .dia-item { padding: 0 3px; font-size: 10px; }
}
.lista-simple { list-style: none; margin: 0 0 14px; padding: 0; }
.lista-simple li { padding: 8px 0; border-bottom: 1px solid var(--borde-suave); }
dl.datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
dl.datos dt { color: var(--suave); }
dl.datos dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Ayuda en pantalla y manual (#364) ---------- */
.ayuda-pantalla { position: relative; }
.ayuda-pantalla > summary, .boton-ayuda {
  list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 10px; border-radius: 999px;
  color: var(--suave); font-weight: 500; border: 1px solid transparent; white-space: nowrap;
}
.ayuda-pantalla > summary::-webkit-details-marker { display: none; }
.ayuda-pantalla > summary:hover, .boton-ayuda:hover { background: var(--fondo); color: var(--texto); text-decoration: none; }
.ayuda-pantalla[open] > summary { background: var(--acento-suave); color: var(--texto); }
.ayuda-pantalla > summary:focus-visible, .boton-ayuda:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.ayuda-pantalla .icono, .boton-ayuda .icono { width: 18px; height: 18px; }
.ayuda-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(440px, 92vw); max-height: calc(100vh - 90px); overflow-y: auto;
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 10px 30px rgba(16, 40, 44, .14); padding: 16px 18px;
}
.ayuda-panel h2 { margin-bottom: 8px; }
.ayuda-panel .ayuda-texto { min-height: 2.5em; }
.ayuda-texto h4, .ayuda-texto h5, .texto-manual h2, .texto-manual h3 { font-size: 14px; margin: 14px 0 6px; font-weight: 700; }
.texto-manual h2 { font-size: 17px; font-family: var(--titulos); }
.ayuda-texto p, .texto-manual p { margin: 0 0 8px; line-height: 1.5; }
.ayuda-texto ul, .ayuda-texto ol, .texto-manual ul, .texto-manual ol { margin: 0 0 10px; padding-left: 22px; line-height: 1.5; }
.ayuda-texto li, .texto-manual li { margin-bottom: 4px; }
.ayuda-otros, .ayuda-pie { font-size: 13px; color: var(--suave); margin: 10px 0 0; }
.ayuda-pie { padding: 10px 18px 12px; margin: 10px -18px -16px; border-top: 1px solid var(--borde-suave); position: sticky; bottom: -16px; background: var(--panel); }  /* siempre a la vista, aunque el tema sea largo */
.texto-manual { max-width: 760px; }
.manual-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.manual-areas ul { list-style: none; margin: 0; padding: 0; }
.manual-areas li { padding: 5px 0; }
@media (max-width: 860px) {
  .ayuda-pantalla > summary span, .boton-ayuda span { display: none; }
  /* En el móvil el panel ocupa el ancho, entre la barra de arriba y la de abajo. */
  .ayuda-panel { position: fixed; left: 8px; right: 8px; top: 58px; width: auto; max-height: calc(100vh - 58px - 76px - env(safe-area-inset-bottom)); }
}

/* ---------- Auditoría de interfaz #326 (puntos 3, 4, 5, 7, 8) ---------- */
[hidden] { display: none !important; }
/* Desplegables que solo se pliegan en el móvil (acciones «Más», fichas de configuración): en el ordenador se ven abiertos,
   sin el título; sin JavaScript quedan abiertos también en el móvil (app.js los pliega). */
details.plegable-movil > summary { display: none; list-style: none; }
details.plegable-movil > summary::-webkit-details-marker { display: none; }
/* Acciones de la cabecera de una lista: en el ordenador, en fila y con la principal al final, como siempre. */
.acciones-lista > .primario { order: 2; }
.acciones-lista > .boton:not(.primario) { order: 1; }
.mas-acciones, .mas-acciones-cuerpo { display: contents; }
.mas-acciones > summary { display: none; } /* en escritorio no hay «Más»: los botones van a la vista (#326) */
/* Casilla con zona táctil propia (en el móvil mide 44 px sin crecer la fila). */
.casilla { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; cursor: pointer; vertical-align: middle; }
.casilla input { margin: 0; }
/* Centros: cada nombre con su sangría por niveles (sin estilos en línea) y la «↳» pegada al nombre. */
.sangria { height: 1px; }
.nivel-0 { width: 0; } .nivel-1 { width: 18px; } .nivel-2 { width: 36px; } .nivel-3 { width: 54px; } .nivel-4 { width: 72px; }
.nivel-5 { width: 90px; } .nivel-6 { width: 108px; } .nivel-7 { width: 126px; } .nivel-8 { width: 144px; }
.rama { white-space: nowrap; }
.marcar-todos-movil { display: none; }
.cabecera .acciones.acciones-lista { align-items: center; }
.color-estado { height: 38px; }
@media (max-width: 860px) {
  /* 3 · Acción principal primero y a lo ancho; el resto, tras «Más». */
  .acciones-lista { flex-direction: row; width: 100%; }
  .acciones-lista > .primario { order: 0; flex: 1 1 100%; justify-content: center; min-height: 44px; }
  .acciones-lista > .boton:not(.primario) { order: 1; }
  .acciones-lista > .mas-acciones { display: block; order: 2; flex: 1 1 100%; }
  .acciones-dia { width: 100%; justify-content: flex-start; }
  .acciones-dia > form:last-child:has(.primario), .acciones-dia > form:last-child .primario, .acciones-dia > .primario:last-child { flex: 1 1 100%; }
  .acciones-dia > .primario:last-child { justify-content: center; min-height: 44px; }
  .acciones-dia > .fila-codigo { flex: 1 1 100%; }
  .acciones-dia > .fila-codigo input[type=date] { flex: 1 1 auto; }
  .filtros-citas .campo { flex: 1 1 140px; max-width: none; }
  .acciones-dia > form:last-child:has(.primario) { flex: 1 1 100%; display: flex; }
  .acciones-dia > form:last-child .primario { justify-content: center; min-height: 44px; }
  .mas-acciones > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 10px 16px; min-height: 44px; border: 1px solid var(--borde); border-radius: 10px; background: var(--panel); font-weight: 600; }
  .mas-acciones > summary::after { content: "▾"; }
  .mas-acciones[open] > summary::after { content: "▴"; }
  .mas-acciones[open] > .mas-acciones-cuerpo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .mas-acciones[open] > .mas-acciones-cuerpo > .boton { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  /* 8 · Configuración larga: lista resumida y cada elemento se despliega. */
  details.plegable-movil > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; min-height: 44px; padding: 8px 2px; font-weight: 600;
  }
  details.plegable-movil > summary::after { content: "▾"; color: var(--suave); flex: none; }
  details.plegable-movil[open] > summary::after { content: "▴"; }
  details.plegable-movil > summary .suave { font-weight: 400; font-size: 13px; }
  .elemento-config { margin-bottom: 10px; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 0 14px; box-shadow: var(--sombra); }
  .elemento-config[open] { padding-bottom: 6px; }
  .elemento-config > form.tarjeta { border: 0; box-shadow: none; padding: 8px 0; margin-bottom: 4px; background: transparent; }
  .elemento-config > form.tarjeta h2, .elemento-config > h2 { display: none; }
  .tarjeta > details.plegable-movil { margin: -4px 0; }
  .tarjeta > details.plegable-movil > h2 { display: none; }
  .tarjeta > details.plegable-movil[open] > summary { margin-bottom: 8px; }
  details.plegable-movil.descripcion-modulo > summary { font-weight: 500; color: var(--acento); min-height: 36px; padding: 4px 0; }
  .apartado-area > legend { display: none; }
  .apartado-area { border: 0; padding: 0; border-top: 1px solid var(--borde-suave); border-radius: 0; }
  /* Módulos: cada fila es una tarjeta con su interruptor. */
  .tabla.modulos thead { display: none; }
  .tabla.modulos, .tabla.modulos tbody { display: block; }
  .tabla.modulos tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--borde-suave); }
  .tabla.modulos td { padding: 0; border: 0; display: block; }
  .tabla.modulos tr:last-child { border-bottom: 0; }
  .tabla.modulos td:first-child { grid-row: 1 / span 2; }
  .tabla.modulos td:last-child { grid-column: 2; }
  /* 4 · Tarjetas de cifras: dos a la vista y el resto, deslizando de lado. */
  .rejilla.kpi-fila, .rejilla:has(> .kpi).kpi-fila {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin;
    margin-inline: -14px; padding-inline: 14px; scroll-padding-inline: 14px;
  }
  .rejilla.kpi-fila > .kpi { flex: 0 0 42%; min-width: 130px; scroll-snap-align: start; }
  /* 5 · Objetivos táctiles: zona de 44 px en las casillas y toda la tarjeta enlaza a su ficha. */
  input[type=checkbox] { width: 22px; height: 22px; }
  .casilla { width: 44px; height: 44px; position: relative; z-index: 1; }
  .tabla.tarjetas .t-titulo .casilla { margin: -12px 0 -12px -12px; }
  label.check { min-height: 44px; }
  .filtros label.check { min-height: 44px; }
  .tabla.tarjetas tbody tr { position: relative; }
  .tabla.tarjetas .t-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; }
  .tabla.tarjetas .t-titulo > a::after { content: ""; position: absolute; inset: 0; }
  .tabla.tarjetas td:not(.t-titulo) a, .tabla.tarjetas button, .tabla.tarjetas .t-titulo .casilla { position: relative; z-index: 1; }
  .tabla.tarjetas tbody tr:has(.t-titulo > a:focus-visible) { outline: 3px solid var(--detalle); outline-offset: -3px; }
  .tabla.tarjetas .t-titulo > a:focus-visible { outline: none; }
  /* 7 · Centros: cada fila es una tarjeta (código, nombre y, debajo, las columnas que se hayan elegido con su título). */
  .envoltura-tabla:has(> .tabla.centros-tarjetas) { overflow: visible; }
  .tabla.centros-tarjetas, .tabla.centros-tarjetas tbody { display: block; }
  .tabla.centros-tarjetas thead { display: none; }
  .tabla.centros-tarjetas tbody tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding: 10px 14px; border-bottom: 1px solid var(--borde-suave); position: relative;
  }
  .tabla.centros-tarjetas td { padding: 0; border: 0; min-width: 0; overflow-wrap: anywhere; }
  .tabla.centros-tarjetas td:empty { display: none; }
  .tabla.centros-tarjetas td.vacio { grid-column: 1 / -1; padding: 24px 0; }
  .tabla.centros-tarjetas td.c-marca { grid-column: 2; grid-row: 1; justify-self: end; }
  .tabla.centros-tarjetas td.c-codigo { grid-column: 1; grid-row: 1; align-self: center; font-size: 12.5px; color: var(--suave); }
  .tabla.centros-tarjetas td.c-nombre { grid-column: 1 / -1; grid-row: 2; font-weight: 600; font-size: 15px; }
  .tabla.centros-tarjetas td.c-nombre > a::after { content: ""; position: absolute; inset: 0; }
  .tabla.centros-tarjetas td.c-marca, .tabla.centros-tarjetas td.c-marca .casilla { position: relative; z-index: 1; }
  .tabla.centros-tarjetas td[data-etiqueta]::before { content: attr(data-etiqueta); display: block; font-size: 12px; color: var(--suave); line-height: 1.2; margin-bottom: 1px; }
  .tabla.centros-tarjetas td.num { text-align: left; white-space: normal; }
  .tabla.centros-tarjetas tbody tr:hover td { background: transparent; }
  .tabla.centros-tarjetas tbody tr:has(.c-nombre > a:focus-visible) { outline: 3px solid var(--detalle); outline-offset: -3px; }
  .tabla.centros-tarjetas .c-nombre > a:focus-visible { outline: none; }
  .marcar-todos-movil { display: flex; margin: 0 0 6px; }
}

/* Alta de una ERP por la API de Coolify (#363) */
.pasos-alta { list-style: none; margin: 12px 0; padding: 0; }
.pasos-alta li { padding: 6px 0; border-bottom: 1px solid var(--borde, #e5e7eb); }
.pasos-alta li:last-child { border-bottom: 0; }
.pasos-alta .etiqueta-estado { min-width: 72px; text-align: center; margin-right: 8px; }

/* ---------- Estilo de la web (#350): detalles solo del modo oscuro ---------- */
@media (prefers-color-scheme: dark) {
  .barra { background: var(--fondo); border-bottom-color: var(--borde-suave); }
  .boton, button { background: transparent; border-color: #4f7f85; }
  .boton:hover, button:hover { background: var(--panel-2); }
  .boton.primario, button.primario { background: var(--acento); border-color: var(--acento); }
  .boton.primario:hover, button.primario:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }
  .boton.enlace, button.enlace { border: none; background: none; }
  .segmentado.mini form button { background: transparent; }
  .segmentado.mini form button.activo { background: var(--acento); }
  .mas-acciones > summary { background: transparent; border-color: #4f7f85; }
}

/* Declaración responsable (art. 15 de la Orden HAC/1177/2024) */
dl.declaracion dt { font-weight: 600; margin-top: 16px; }
dl.declaracion dd { margin: 4px 0 0; }
.sin-completar { color: var(--error); font-weight: 600; }