/* ============================================================
   Tema a3innuva / Wolters Kluwer 2026 — azul / neutros / Fira Sans
   Aplicado el 2026-07-13 según docs/estilos-a3innuva.md.
   Sustituye al tema corporativo NEA Master (rojo/gris pizarra).
   ============================================================ */

/* ---------- Tipografía: Fira Sans servida en local (wwwroot/fonts) ----------
   Subsets latin + latin-ext (español necesita latin; ext por seguridad). */
@font-face {
    font-family: "Fira Sans"; font-style: normal; font-weight: 300; font-display: swap;
    src: url("fonts/fira-sans-300-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: "Fira Sans"; font-style: normal; font-weight: 300; font-display: swap;
    src: url("fonts/fira-sans-300.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: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("fonts/fira-sans-400-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: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("fonts/fira-sans-400.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: "Fira Sans"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("fonts/fira-sans-500-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: "Fira Sans"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("fonts/fira-sans-500.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: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("fonts/fira-sans-700-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: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("fonts/fira-sans-700.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;
}

:root {
    /* ----- Paleta a3innuva (tints/shades del manual, solo los usados) ----- */
    --azul-25: #F2F8FC;
    --azul-50: #E6F2F9;
    --azul-100: #CCE4F3;
    --azul-175: #A6D1EA;
    --azul-375: #409BD2;
    --azul-500: #007AC3;
    --azul-575: #006BA6;   /* hover del primario */
    --azul-625: #005B92;
    --rojo-25: #FEF4F5;
    --rojo-50: #FCE9EA;
    --rojo-100: #FAD2D5;
    --rojo-500: #E5202E;
    --rojo-575: #C31B27;
    --verde-50: #F3F8E9;
    --verde-100: #E7F2D2;
    --verde-500: #85BC20;
    --verde-750: #425E10;
    --neutral-25: #F6F6F6;
    --neutral-50: #EDEDED;
    --neutral-100: #DADADA;
    --neutral-175: #BFBFBF;
    --neutral-250: #A3A3A3;
    --neutral-375: #757575;
    --neutral-500: #474747;
    --neutral-625: #353535;
    --neutral-750: #242424;
    --neutral-825: #191919;

    /* ----- Variables semánticas del tema ----- */
    --acento: var(--azul-500);            /* CTA, enlaces, foco */
    --acento-hover: var(--azul-575);
    --acento-suave: var(--azul-50);       /* fondos de selección/foco */
    --fondo: var(--neutral-25);           /* fondo de contenido */
    --borde: var(--neutral-100);          /* bordes de tarjetas/paneles */
    --texto: var(--neutral-825);          /* texto principal (casi negro) */
    --texto-suave: var(--neutral-375);    /* texto secundario */
    --peligro: var(--rojo-500);           /* errores / acciones destructivas */
    --peligro-suave: var(--rojo-25);
    --exito: var(--verde-500);
    --exito-suave: var(--verde-50);
    --sidebar-fondo: var(--neutral-625);
    --radio: 4px;                          /* radio pequeño (regla a3innuva) */
    --radio-grande: 6px;                   /* tarjetas y paneles */

    /* ----- Compatibilidad con el tema NEA Master anterior -----
       Alias para marcado que aún referencie las variables viejas
       (p. ej. style="color:var(--nea-rojo)" en algún .razor).
       El "rojo" NEA era el ACENTO del tema: hoy el acento es azul. */
    --nea-rojo: var(--acento);
    --nea-rojo-oscuro: var(--acento-hover);
    --nea-rojo-suave: var(--acento-suave);
    --nea-gris: var(--neutral-500);
    --nea-gris-oscuro: var(--neutral-825);
    --nea-fondo: var(--fondo);
    --nea-borde: var(--borde);
    --nea-texto-suave: var(--texto-suave);
    --nea-verde: var(--exito);
    --nea-verde-suave: var(--exito-suave);
    --nea-sombra: none;                    /* a3innuva: plano, sin sombras */
    --nea-radio: var(--radio-grande);
}

* { box-sizing: border-box; }
html, body {
    margin: 0; height: 100%;
    font-family: "Fira Sans", "Segoe UI", sans-serif;
    color: var(--texto); line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Titulares en Fira Sans Light con interlineado compacto (manual a3innuva) */
h1, h2, h3 { font-weight: 300; line-height: 1.1; }

/* Enlaces / CTA: única excepción de texto en color */
a { color: var(--acento); }
a:hover { color: var(--acento-hover); }

/* Foco accesible visible y coherente en toda la web */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- Estructura ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 230px; flex-shrink: 0;
    background: var(--sidebar-fondo); color: #fff;
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* Barra de scroll discreta dentro de la sidebar oscura */
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 8px; }
.zona-principal { flex: 1; display: flex; flex-direction: column; background: var(--fondo); }

.topbar {
    height: 56px; background: #fff; border-bottom: 1px solid var(--borde);
    display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
    position: sticky; top: 0; z-index: 10;
}
.topbar-usuario { display: flex; align-items: center; gap: 14px; }
.usuario-nombre { font-weight: 500; color: var(--texto); }
/* Salir = acción secundaria: blanco, borde neutro, texto negro */
.btn-salir {
    background: #fff; border: 1px solid var(--neutral-175); color: var(--texto);
    border-radius: var(--radio); padding: 6px 14px; cursor: pointer; font-weight: 500;
    transition: background .15s ease, border-color .15s ease;
}
.btn-salir:hover { background: var(--neutral-25); border-color: var(--neutral-375); }

.contenido { padding: 28px 32px; }

/* ---------- Marca ---------- */
.sidebar-marca { display: flex; align-items: center; gap: 10px; padding: 20px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.marca-texto { font-size: 20px; letter-spacing: .5px; }
.marca-texto b { color: var(--rojo-500); } /* logo NEA: rojo de la paleta (Red 500) */
.marca-texto span { color: var(--neutral-175); font-weight: 300; }

/* Flor de puntos del logo (CSS puro) — mantiene el rojo de marca NEA,
   dentro de la paleta a3innuva (Red 500). */
.flor { position: relative; width: 34px; height: 34px; }
.flor span { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--rojo-500); }
.flor span:nth-child(1) { top: 0; left: 12.5px; }
.flor span:nth-child(2) { top: 6px; right: 1px; }
.flor span:nth-child(3) { bottom: 6px; right: 1px; }
.flor span:nth-child(4) { bottom: 0; left: 12.5px; }
.flor span:nth-child(5) { bottom: 6px; left: 1px; }
.flor span:nth-child(6) { top: 6px; left: 1px; }
.flor::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo-500); }
.flor-grande { width: 56px; height: 56px; margin: 0 auto 10px; }
.flor-grande span { width: 14px; height: 14px; }
.flor-grande span:nth-child(1) { left: 21px; } .flor-grande span:nth-child(4) { left: 21px; }
.flor-grande span:nth-child(2), .flor-grande span:nth-child(3) { right: 2px; }
.flor-grande span:nth-child(5), .flor-grande span:nth-child(6) { left: 2px; }
.flor-grande::after { width: 12px; height: 12px; }

/* ---------- Navegación ---------- */
/* Buscador de opciones del menu (como el del AccordionControl del escritorio) */
.sidebar-buscador {
    display: flex; align-items: center; gap: 8px;
    margin: 12px 12px 0; padding: 7px 10px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
}
.sidebar-buscador:focus-within { border-color: var(--azul-375); background: rgba(255,255,255,.10); }
.sidebar-buscador svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--neutral-250); }
.sidebar-buscador input {
    flex: 1; min-width: 0;
    background: transparent; border: none; outline: none;
    color: #fff; font: inherit; font-size: 13.5px;
}
.sidebar-buscador input::placeholder { color: var(--neutral-250); }
/* La X nativa de type=search, discreta sobre fondo oscuro */
.sidebar-buscador input::-webkit-search-cancel-button { filter: invert(.8); }

.sidebar-nav { padding: 14px 0; display: flex; flex-direction: column; }
/* Sentence case: sin text-transform (regla a3innuva); peso Medium para jerarquía */
.nav-seccion { padding: 16px 18px 6px; font-size: 12px; font-weight: 500; letter-spacing: .4px; color: var(--neutral-250); }
.nav-item {
    display: block; padding: 9px 18px; color: var(--neutral-50); text-decoration: none;
    border-left: 3px solid transparent; font-size: 14px;
    transition: background .15s ease, border-color .15s ease;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item:focus-visible { outline-offset: -2px; }
.nav-item.active { border-left-color: var(--acento); background: rgba(0,122,195,.22); color: #fff; font-weight: 500; }
.nav-item.deshabilitado { color: var(--neutral-375); cursor: default; }

/* ---------- Menú lateral: grupos colapsables (paridad AccordionControl) ----------
   <details data-grupo="..."> + <summary> nativos: colapsan sin JS; el estado
   se persiste con el script de App.razor. */
.nav-grupo > summary {
    list-style: none; display: flex; align-items: center; gap: 10px;
    padding: 10px 18px; cursor: pointer; user-select: none;
    color: var(--neutral-50); font-size: 14px; font-weight: 500;
    transition: background .15s ease;
}
.nav-grupo > summary::-webkit-details-marker { display: none; }
.nav-grupo > summary:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-grupo > summary:focus-visible { outline-offset: -2px; }
.nav-icono { width: 16px; height: 16px; flex-shrink: 0; opacity: .85; }
.nav-flecha { margin-left: auto; opacity: .55; font-size: 15px; line-height: 1; transition: transform .15s ease; }
.nav-grupo[open] > summary .nav-flecha { transform: rotate(90deg); }
/* Enlaces dentro de un grupo: sangrados bajo el icono de la cabecera */
.nav-grupo .nav-item { padding-left: 44px; font-size: 13.5px; }
.nav-subgrupo > summary { padding: 9px 18px 9px 36px; font-size: 13.5px; }
.nav-subgrupo .nav-item { padding-left: 62px; font-size: 13px; }
/* Enlace raíz (Inicio) con icono, al nivel de las cabeceras de grupo */
.nav-item.nav-raiz { display: flex; align-items: center; gap: 10px; font-weight: 500; padding: 10px 18px; }
/* Separador de sección ("Gestión"), como el del escritorio */
.nav-separador {
    margin-top: 12px; padding: 12px 18px 4px; font-size: 12px; font-weight: 500;
    letter-spacing: .4px; color: var(--neutral-250);
    border-top: 1px solid rgba(255,255,255,.08);
}

/* ---------- Dashboard de inicio (paridad InicioControl del escritorio) ---------- */
/* Fila de tarjetas KPI con barra de acento lateral */
.kpi-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 18px 0; }
.kpi-tarjeta {
    background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande);
    display: flex; overflow: hidden; min-height: 108px;
}
.kpi-acento { width: 4px; flex-shrink: 0; background: var(--acento); }
.kpi-acento.verde { background: var(--verde-500); }
.kpi-acento.rojo { background: var(--rojo-500); }
.kpi-cuerpo { padding: 12px 14px; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kpi-titulo { font-size: 12px; font-weight: 700; color: var(--texto-suave); }
.kpi-valor { font-size: 22px; font-weight: 700; color: var(--texto); line-height: 1.15; }
.kpi-valor.positivo { color: var(--verde-750); }
.kpi-valor.negativo { color: var(--rojo-575); }
.kpi-sub { font-size: 12px; color: var(--texto-suave); }
.kpi-delta { font-size: 12px; font-weight: 500; color: var(--texto-suave); margin-top: auto; }
.kpi-delta.positivo { color: var(--verde-750); }
.kpi-delta.negativo { color: var(--rojo-575); }

/* Widgets (zona central) */
.dash-widgets { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 1100px) { .dash-widgets { grid-template-columns: 1fr; } }
.widget { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 16px 18px; min-width: 0; }
.widget-cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.widget-titulo { font-size: 15px; font-weight: 700; color: var(--texto); margin: 0; }
.widget-contador {
    margin-left: auto; background: var(--acento-suave); color: var(--azul-625);
    font-size: 13px; font-weight: 700; border-radius: var(--radio); padding: 2px 10px;
}
.widget-contador.rojo { background: var(--rojo-50); color: var(--rojo-575); }

/* Gráfico de líneas SVG propio (Ingresos vs Costes) */
.grafico-lineas { width: 100%; height: auto; display: block; }
.grafico-serie { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.grafico-serie.ingresos { stroke: var(--verde-500); }
.grafico-serie.costes { stroke: var(--rojo-500); }
.grafico-punto.ingresos { fill: var(--verde-500); stroke: #fff; stroke-width: 1.5; }
.grafico-punto.costes { fill: var(--rojo-500); stroke: #fff; stroke-width: 1.5; }
.grafico-rejilla { stroke: var(--neutral-100); stroke-width: 1; }
.grafico-etiqueta { fill: var(--texto-suave); font-size: 10px; font-family: inherit; }
.grafico-leyenda { display: flex; gap: 18px; margin-top: 8px; font-size: 13px; color: var(--texto-suave); }
.leyenda-punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: baseline; }
.leyenda-punto.ingresos { background: var(--verde-500); }
.leyenda-punto.costes { background: var(--rojo-500); }
.grafico-vacio { color: var(--texto-suave); font-style: italic; text-align: center; padding: 40px 0; }

/* ---------- Cuadrante editable (paridad ParteGeneral / ParteTrabajadorGeneral) ---------- */
.cuadrante-tabla td input[type="text"] {
    width: 62px; padding: 5px 6px; text-align: right; font-size: 13px; font-family: inherit;
    border: 1px solid var(--neutral-175); border-radius: var(--radio); background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cuadrante-tabla td input[type="text"]:focus {
    outline: none; border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-suave);
}
.cuadrante-tabla td input[type="checkbox"] { accent-color: var(--acento); transform: scale(1.15); }
.cuadrante-tabla .col-nombre { font-weight: 700; color: var(--verde-750); background: var(--neutral-25); }
.cuadrante-tabla .col-total { font-weight: 700; color: var(--rojo-575); background: var(--neutral-25); text-align: right; }

/* ---------- Visor de documento ERP (paridad VerDocumentoErpForm) ---------- */
.doc-cabecera {
    background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande);
    padding: 16px 20px; margin: 14px 0 16px;
    display: grid; grid-template-columns: 120px 1fr 120px 1fr; gap: 6px 14px; align-items: baseline;
    max-width: 900px;
}
@media (max-width: 900px) { .doc-cabecera { grid-template-columns: 120px 1fr; } }
.doc-cabecera dt { font-size: 13px; color: var(--texto-suave); font-weight: 500; margin: 0; }
.doc-cabecera dd { font-size: 14px; color: var(--texto); margin: 0; }
.doc-totales {
    display: flex; gap: 26px; justify-content: flex-end; margin-top: 12px;
    font-size: 15px; color: var(--texto);
}
.doc-totales b { font-weight: 700; }

/* ---------- Editor de documento ERP (paridad EditarDocumentoErpForm) ----------
   Tabla de líneas EDITABLE sobre la tabla estándar: inputs y selects con el
   mismo tratamiento que el cuadrante editable (solo variables de la paleta). */
.tabla-lineas td { padding: 4px 6px; }
.tabla-lineas td input, .tabla-lineas td select {
    width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: 13px; font-family: inherit;
    border: 1px solid var(--neutral-175); border-radius: var(--radio); background: #fff; color: var(--texto);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tabla-lineas td input:focus, .tabla-lineas td select:focus {
    outline: none; border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-suave);
}
.tabla-lineas td input[type="number"] { text-align: right; }
.tabla-lineas th.col-nlin { width: 46px; }
.tabla-lineas th.col-art { width: 130px; }
.tabla-lineas th.col-num { width: 100px; }
.tabla-lineas th.col-dto { width: 80px; }
.tabla-lineas th.col-obra { width: 170px; }
.tabla-lineas th.col-quitar { width: 90px; }

/* ---------- Ficha de trabajador (paridad NuevoTrabajador de escritorio) ---------- */
.ficha-cabecera {
    display: flex; align-items: center; gap: 18px; background: #fff;
    border: 1px solid var(--borde); border-radius: var(--radio-grande);
    padding: 16px 20px; margin: 14px 0 16px;
}
.ficha-foto {
    width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
    border: 1px solid var(--borde); background: var(--neutral-25); flex-shrink: 0;
}
.ficha-foto-hueco {
    width: 72px; height: 72px; border-radius: 50%; border: 1px dashed var(--neutral-175);
    display: flex; align-items: center; justify-content: center;
    color: var(--neutral-250); font-size: 24px; flex-shrink: 0;
}
.ficha-nombre { font-size: 22px; font-weight: 300; line-height: 1.15; color: var(--texto); }
.ficha-sub { color: var(--texto-suave); font-size: 14px; margin-top: 2px; }
.chapa {
    display: inline-block; font-size: 12px; font-weight: 700; border-radius: var(--radio);
    padding: 3px 10px; vertical-align: middle; margin-left: 10px;
}
.chapa.activo { background: var(--exito-suave); color: var(--verde-750); border: 1px solid var(--verde-100); }
.chapa.baja { background: var(--rojo-50); color: var(--rojo-575); border: 1px solid var(--rojo-100); }

/* Pestañas de la ficha */
.ficha-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--borde); margin-bottom: 16px; flex-wrap: wrap; }
.ficha-tab {
    background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
    padding: 9px 14px; font-size: 14px; font-family: inherit; color: var(--texto-suave);
    cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.ficha-tab:hover { color: var(--texto); }
.ficha-tab.activa { color: var(--acento); border-bottom-color: var(--acento); font-weight: 500; }

/* Formulario de datos generales: rejilla de 2 pares label+campo */
.panel-edicion.ficha-datos { max-width: 1000px; grid-template-columns: 150px 1fr 150px 1fr; }
@media (max-width: 900px) { .panel-edicion.ficha-datos { grid-template-columns: 1fr; } }

/* Banda de avisos caducados */
.avisos-lista { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.aviso-item {
    display: flex; align-items: baseline; gap: 10px; padding: 8px 6px;
    border-bottom: 1px solid var(--borde); font-size: 13px;
}
.aviso-item:last-child { border-bottom: none; }
.aviso-tipo { flex-shrink: 0; font-weight: 700; font-size: 11px; padding-left: 10px; border-left: 4px solid var(--acento); }
.aviso-tipo.rojo { border-left-color: var(--rojo-500); color: var(--rojo-575); }
.aviso-tipo.verde { border-left-color: var(--verde-500); color: var(--verde-750); }
.aviso-tipo.azul { border-left-color: var(--azul-500); color: var(--azul-625); }
.aviso-detalle { color: var(--texto); min-width: 0; }
.dash-pie { color: var(--texto-suave); font-size: 12px; margin-top: 14px; }

/* ---------- Contenido ---------- */
/* Headline a3innuva: Fira Sans Light, interlineado 1.1, texto casi negro */
.titulo-pagina { font-size: 28px; font-weight: 300; line-height: 1.1; margin: 0 0 4px; color: var(--texto); }
.subtexto { color: var(--texto-suave); margin-top: 0; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin-top: 22px; }
.tarjeta {
    background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande);
    padding: 18px;
    transition: border-color .18s ease;
}
.tarjeta:hover { border-color: var(--neutral-250); }
.tarjeta-titulo { font-weight: 700; font-size: 16px; margin-bottom: 6px; color: var(--texto); }
.tarjeta p { color: var(--texto-suave); font-size: 14px; margin: 0 0 12px; }
.chip {
    display: inline-block; background: var(--acento-suave); color: var(--azul-625);
    font-size: 12px; font-weight: 500; border-radius: var(--radio); padding: 3px 10px;
}

/* ---------- Maestros (toolbar + panel de edición) ---------- */
.toolbar { display: flex; align-items: center; gap: 10px; margin: 14px 0 16px; flex-wrap: wrap; }
.btn-compacto { padding: 8px 16px; }
/* Dentro de toolbars y paneles el botón primario no debe arrastrar el margen
   superior que tiene en el login. */
.toolbar .btn-rojo, .panel-botones .btn-rojo,
.toolbar .btn-primario, .panel-botones .btn-primario { margin-top: 0; }
/* Botón secundario a3innuva: blanco, borde neutro, texto negro */
.btn-gris {
    background: #fff; border: 1px solid var(--neutral-175); color: var(--texto);
    border-radius: var(--radio); padding: 8px 16px; font-weight: 500; cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.btn-gris:hover:not(:disabled) { border-color: var(--neutral-375); background: var(--neutral-25); }
.btn-gris:disabled { opacity: .45; cursor: default; }
/* Peligro: el rojo queda reservado a errores y acciones destructivas */
.btn-peligro { color: var(--peligro); }
.btn-peligro:hover:not(:disabled) { border-color: var(--peligro); background: var(--peligro-suave); color: var(--peligro); }
.filtro-label { font-size: 13px; color: var(--texto-suave); }
.filtro-anio { width: 90px; }
.toolbar input, .toolbar select {
    padding: 8px 10px; border: 1px solid var(--neutral-175); border-radius: var(--radio); background: #fff;
    color: var(--texto); font-size: 14px; font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.toolbar input:focus, .toolbar select:focus {
    outline: none; border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-suave);
}
.panel-edicion {
    background: #fff; border: 1px solid var(--borde); border-left: 4px solid var(--acento);
    border-radius: var(--radio-grande); padding: 18px 20px; margin-bottom: 16px;
    display: grid; grid-template-columns: 140px 1fr; gap: 10px 14px; align-items: center; max-width: 640px;
}
.panel-edicion label { font-size: 13px; color: var(--texto-suave); font-weight: 500; }
.panel-edicion input, .panel-edicion select {
    padding: 9px 12px; border: 1px solid var(--neutral-175); border-radius: var(--radio); font-size: 14px;
    background: #fff; color: var(--texto); font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.panel-edicion input:disabled, .panel-edicion select:disabled { background: var(--neutral-25); color: var(--texto-suave); }
.panel-edicion input:focus, .panel-edicion select:focus {
    outline: none; border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-suave);
}
/* Textareas (ficha del parte de trabajo): espejo de los inputs del panel */
.panel-edicion textarea {
    padding: 9px 12px; border: 1px solid var(--neutral-175); border-radius: var(--radio); font-size: 14px;
    background: #fff; color: var(--texto); font-family: inherit; resize: vertical;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.panel-edicion textarea:disabled { background: var(--neutral-25); color: var(--texto-suave); }
.panel-edicion textarea:focus {
    outline: none; border-color: var(--acento);
    box-shadow: 0 0 0 3px var(--acento-suave);
}
/* Checkboxes con el acento del tema */
.panel-edicion input[type="checkbox"] { width: auto; accent-color: var(--acento); transform: scale(1.15); transform-origin: left center; }
.panel-botones { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 6px; }

/* ---------- Tabla de datos (DataSet legacy) ---------- */
.tabla-scroll { overflow-x: auto; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande); }
.tabla-datos { border-collapse: collapse; width: 100%; font-size: 13px; }
/* Cabecera a3innuva: fondo neutro claro y texto negro (nada de cabeceras oscuras) */
.tabla-datos th {
    background: var(--neutral-50); color: var(--texto); font-weight: 700; text-align: left;
    padding: 9px 12px; border-bottom: 1px solid var(--neutral-100);
    position: sticky; top: 0; white-space: nowrap;
}
.tabla-datos td { padding: 7px 12px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
/* Filas alternas en Neutral 25 (zebra suave) */
.tabla-datos tbody tr:nth-child(even) td { background: var(--neutral-25); }
.tabla-datos tbody tr:hover td { background: var(--neutral-50); }
/* Tablas con selección de fila (CRUD: Editar/Borrar sobre la seleccionada) */
.tabla-datos.seleccionable tbody tr { cursor: pointer; }
/* (con tbody en el selector para ganar a la regla de filas alternas) */
.tabla-datos tbody tr.seleccionada td,
.tabla-datos.seleccionable tbody tr.seleccionada:hover td { background: var(--acento-suave); }
.tabla-datos tbody tr.seleccionada td:first-child { box-shadow: inset 3px 0 0 var(--acento); }

/* ---------- Login ---------- */
.login-fondo { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #fff; }
.login-tarjeta {
    width: 360px; padding: 36px 32px; border: 1px solid var(--borde);
    border-radius: var(--radio-grande); text-align: center;
}
.marca-login { font-size: 30px; }
.login-subtitulo { color: var(--texto-suave); font-size: 13px; margin: 4px 0 24px; }
.login-tarjeta form { text-align: left; display: flex; flex-direction: column; gap: 6px; }
.login-tarjeta label { font-size: 13px; color: var(--texto-suave); margin-top: 8px; }
.login-tarjeta input {
    padding: 10px 12px; border: 1px solid var(--neutral-175); border-radius: var(--radio); font-size: 15px;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.login-tarjeta input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
/* Botón primario a3innuva: azul, sin sombras ni degradados, radio pequeño.
   btn-rojo se mantiene por compatibilidad; renombrar a btn-primario cuando
   termine la migración de paridad. */
.btn-rojo, .btn-primario {
    margin-top: 18px; background: var(--acento); color: #fff; border: none;
    border-radius: var(--radio); padding: 12px; font-size: 15px; font-weight: 500; cursor: pointer;
    transition: background .15s ease;
}
.btn-rojo:hover:not(:disabled), .btn-primario:hover:not(:disabled) { background: var(--acento-hover); }
.btn-rojo:disabled, .btn-primario:disabled { opacity: .5; cursor: default; }
/* Error de login: rojo (estado de error, no acento) */
.login-error {
    margin-top: 12px; background: var(--rojo-50); color: var(--rojo-575);
    border-radius: var(--radio); padding: 9px 12px; font-size: 13px;
}

/* ---------- Avisos (banner de resultado correcto) ----------
   Las páginas de Operativa usaban .chip (una etiqueta pequeña) como banner
   de "operación correcta". .aviso-ok le da semántica de éxito (verde) y
   ancho de banner sin perder coherencia con el tema. */
.aviso-ok {
    display: block; background: var(--exito-suave); color: var(--verde-750);
    border: 1px solid var(--verde-100); border-radius: var(--radio); padding: 9px 12px; font-size: 13px;
    font-weight: 500; margin-bottom: 12px;
}

/* ---------- Responsividad básica ----------
   Objetivo: no romper en pantallas estrechas (portátiles pequeños/tablet).
   La sidebar deja de ser una columna fija y pasa a barra superior apilada;
   los paneles de edición dejan de ser rejilla de dos columnas. */
@media (max-width: 900px) {
    .app-shell { flex-direction: column; }
    .sidebar {
        width: 100%; height: auto; position: static; max-height: none;
        flex-direction: column;
    }
    .sidebar-nav { padding: 8px 0; }
    /* Secciones de menú en línea para ocupar menos alto vertical */
    .nav-seccion { padding-top: 10px; }
    .contenido { padding: 20px 18px; }
    .titulo-pagina { font-size: 23px; }
    /* El panel de edición pasa a una sola columna (label encima del campo) */
    .panel-edicion {
        grid-template-columns: 1fr; gap: 4px 0; max-width: 100%;
    }
    .panel-edicion label { margin-top: 6px; }
    .panel-botones { margin-top: 10px; }
}

@media (max-width: 560px) {
    .toolbar { gap: 8px; }
    .toolbar input, .toolbar select { width: 100%; min-width: 0; }
    .login-tarjeta { width: 100%; max-width: 360px; margin: 0 16px; }
}

/* ---------- Calendario de vacaciones (Informes) ----------
   Rejilla trabajadores × días del mes sobre la tabla estándar.
   Los tres colores de las barras y el semáforo de "pendientes" NO son de la
   paleta a3innuva a propósito: son EXACTAMENTE los del form de escritorio
   CalendarioVacacionesForm (leyenda compartida con los usuarios de la app
   de escritorio). Se declaran aquí una sola vez, nunca en línea. */
/* Azul claro #BAD4F0 = pasadas · verde #96CC9C = futuras · naranja #FFBC7A =
   compensatorios (COLOR_PASADAS / COLOR_FUTURAS / COLOR_COMPENSATORIOS). */
.cal-leyenda { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 13px; color: var(--texto-suave); margin: 0 0 12px; }
.cal-chip { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--neutral-175);
    border-radius: 2px; }
.cal-leyenda .cal-chip:not(:first-child) { margin-left: 10px; }

.cal-tabla { table-layout: fixed; }
.cal-tabla th.cal-col-nombre, .cal-tabla td.cal-nombre { width: 240px; min-width: 240px; }
.cal-tabla td.cal-nombre { font-weight: 500; }
.cal-tabla th.cal-col-pdtes, .cal-tabla td.cal-pdtes { width: 64px; min-width: 64px; text-align: right; }
.cal-tabla th.cal-dia, .cal-tabla td.cal-dia {
    width: 26px; min-width: 26px; padding: 4px 0; text-align: center;
    font-size: 11px; line-height: 1.2;
}
.cal-tabla td.cal-dia { height: 26px; }
.cal-alta-dia { display: block; width: 100%; min-height: 26px; padding: 0; border: 0; background: transparent; color: var(--neutral-375); cursor: pointer; }
.cal-alta-dia:hover, .cal-alta-dia:focus-visible { color: var(--acento); background: rgba(0,122,195,.12); }
.cal-dow { color: var(--texto-suave); font-weight: 400; }

/* Barras: el selector lleva tbody + td para ganar a la zebra y al hover de
   .tabla-datos sin recurrir a !important. */
.tabla-datos tbody tr td.cal-pasadas { background: #BAD4F0; }
.tabla-datos tbody tr td.cal-futuras { background: #96CC9C; }
.tabla-datos tbody tr td.cal-compensatorios { background: #FFBC7A; }
.cal-leyenda .cal-pasadas { background: #BAD4F0; }
.cal-leyenda .cal-futuras { background: #96CC9C; }
.cal-leyenda .cal-compensatorios { background: #FFBC7A; }

/* Semáforo de días pendientes (mismos umbrales y colores que el escritorio). */
.tabla-datos tbody tr td.cal-pdtes-verde { background: #DCF5DC; }
.tabla-datos tbody tr td.cal-pdtes-ambar { background: #FCF0C8; }
.tabla-datos tbody tr td.cal-pdtes-rojo  { background: #FCD7D7; }

/* ---------- Gestión de permisos de menú (Configuración) ----------
   Árbol del catálogo de nodos (MenuNodoCatalogo, compartido con el
   escritorio) sobre la tabla estándar: la jerarquía se representa solo con
   sangrado, sin colores nuevos. */
.arbol-permisos th.col-visible, .arbol-permisos td:first-child { width: 70px; text-align: center; }
.arbol-permisos th.col-efecto, .arbol-permisos td.nodo-efecto { width: 280px; }
.arbol-permisos .nivel-0 { padding-left: 12px; }
.arbol-permisos .nivel-1 { padding-left: 32px; }
.arbol-permisos .nivel-2 { padding-left: 52px; }
.arbol-permisos .nivel-3 { padding-left: 72px; }
.arbol-permisos .nodo-grupo { font-weight: 700; }
.arbol-permisos .nodo-grupo-marca {
    margin-left: 8px; font-size: 11px; font-weight: 400; color: var(--texto-suave);
    border: 1px solid var(--borde); border-radius: var(--radio); padding: 1px 6px;
}
.arbol-permisos td.nodo-efecto { color: var(--texto-suave); font-size: 12px; }
.arbol-permisos input[type="checkbox"] { accent-color: var(--acento); transform: scale(1.15); }

/* ---------- Aviso de atención (acción destructiva o de efecto retroactivo)
   Banner intermedio entre .aviso-ok (éxito) y .login-error (error ya ocurrido):
   sirve para lo que TODAVÍA no ha pasado pero el usuario debe leer antes de
   confirmar (p. ej. el borrado en cascada del maestro de incidencias).
   Solo usa variables de la paleta ya declaradas. */
.aviso-atencion {
    display: block; background: var(--peligro-suave); color: var(--rojo-575);
    border: 1px solid var(--rojo-100); border-left: 4px solid var(--peligro);
    border-radius: var(--radio); padding: 10px 12px; font-size: 13px; margin-bottom: 12px;
}
.aviso-atencion strong { display: block; margin-bottom: 4px; }
.aviso-atencion ul { margin: 6px 0 0; padding-left: 20px; }
/* Para colocar el aviso dentro de un .panel-edicion (rejilla de 2 columnas). */
.panel-edicion .aviso-ancho-completo { grid-column: 1 / -1; }

/* Ficha de trabajador → Vacaciones: réplica del formulario de escritorio.
   Los grupos "Vacaciones" y "Compensatorios" van uno al lado del otro cuando
   hay sitio; los valores calculados van en inputs deshabilitados (los
   ReadOnly del escritorio) y los pendientes se destacan en verde/rojo. */
.ficha-vac-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.ficha-vac-grupos .panel-edicion { max-width: none; margin-bottom: 0; grid-template-columns: 170px 1fr; }
.panel-edicion .panel-grupo-titulo { grid-column: 1 / -1; margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--texto); }
.panel-edicion.ficha-vac-notas { max-width: none; }
.panel-edicion input.valor-destacado:disabled { color: var(--verde-750); font-weight: 600; }
.panel-edicion input.valor-negativo:disabled { color: var(--rojo-575); font-weight: 600; }

/* Listas cortas dentro de un panel de edición (p. ej. protocolos elegidos en
   un reconocimiento) y botón con aspecto de enlace para acciones por fila. */
.panel-edicion .lista-simple { margin: 0; padding: 0 0 0 18px; }
.panel-edicion .lista-simple li { margin: 2px 0; font-size: 13.5px; }
.btn-enlace { background: none; border: none; padding: 0 0 0 8px; color: var(--acento); cursor: pointer; font-size: 12.5px; }
.btn-enlace:hover { text-decoration: underline; color: var(--acento-hover); }

/* Cuadrantes (paridad con el escritorio): selector de nivel dentro del panel
   de edición, fila seleccionada de la matriz y bloque plegable de costes. */
.selector-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.selector-inline .selector-nivel { flex: 1 1 260px; min-width: 200px; }
.selector-inline .enlace-maestro { white-space: nowrap; }
.toolbar .selector-nivel { min-width: 260px; }
.cuadrante-tabla tr.fila-sel td { background: var(--acento-suave); }
.cuadrante-tabla td input[type="radio"] { accent-color: var(--acento); transform: scale(1.15); }
.cuadrante-tabla .col-nombre a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.cuadrante-tabla .col-nombre a:hover { color: var(--acento); }
.bloque-plegable { margin-top: 16px; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-grande); padding: 10px 16px; }
.bloque-plegable > summary { cursor: pointer; font-weight: 600; color: var(--texto); padding: 6px 0; }

.formatos-barra { flex-wrap: wrap; align-items: end; }
.formatos-barra label { display: flex; flex-direction: column; gap: 4px; }
.formatos-barra select, .formatos-barra input { min-width: 250px; padding: 8px; }
.formatos-editor { margin-top: 12px; border: 1px solid #d8dce0; background: white; min-width: 750px; }