/* ==========================================================================
   Sistema visual de gestor-eaa
   --------------------------------------------------------------------------
   Colores y tipografía tomados de la identidad real de eaamedconsulting.com
   (variables globales de Elementor en wp-content/uploads/elementor/css/
   post-1865.css). No se han inventado valores.

       primary   #001F3E   azul marino  →  cabecera, títulos
       secondary #2596BE   azul cian    →  acento, enlaces, foco
       text      #2C2C2C   texto
                 #24346D   índigo       →  estados intermedios
                 #EDF1FC   azul claro   →  fondos
                 #989898   gris

   Tipografía: Playfair Display (roles primary/secondary de la web) para la
   marca y los títulos; Poppins (roles text/accent) para interfaz y datos.
   En un panel con mucha tabla, la serif en cada celda cansa: se reserva para
   marca y encabezados de sección, y Poppins hace el trabajo de lectura.
   ========================================================================== */

:root {
    /* Marca */
    --marino: #001F3E;
    --marino-claro: #24346D;
    --cian: #2596BE;
    --cian-oscuro: #1B7695;
    --azul-fondo: #EDF1FC;

    /* Neutros */
    --texto: #2C2C2C;
    --texto-suave: #5B6270;
    --gris: #989898;
    --borde: #DDE3EC;
    --borde-fuerte: #C3CCDA;
    --panel: #FFFFFF;
    --fondo: #F7F9FC;

    /* Estados. Deliberadamente apagados: son semánticos, no de marca, y no
       deben competir con el marino ni con el cian. */
    --borrador-txt: #5B6270;
    --borrador-bg: #EEF1F5;
    --confirmado-txt: #0F5132;
    --confirmado-bg: #E4F2EB;
    --rechazado-txt: #B42318;
    --rechazado-bg: #FBEAE8;

    --radio: 6px;
    --sombra: 0 1px 2px rgba(0, 31, 62, .06), 0 1px 3px rgba(0, 31, 62, .04);

    --serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --sans: "Poppins", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--cian-oscuro); }
a:hover { color: var(--marino); }

/* --- Cabecera ----------------------------------------------------------- */

.cabecera {
    background: var(--marino);
    color: #fff;
}

.cabecera__barra {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 62px;
}

.marca {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    flex-shrink: 0;
}

.marca img { height: 34px; width: auto; display: block; }

.marca__app {
    font-family: var(--serif);
    font-size: 15px;
    letter-spacing: .04em;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, .25);
    color: rgba(255, 255, 255, .82);
    white-space: nowrap;
}

.sesion {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
    flex-shrink: 0;
}

.sesion__usuario { white-space: nowrap; }

.sesion form { margin: 0; }

.sesion button {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    padding: 5px 12px;
    border-radius: var(--radio);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.sesion button:hover { background: rgba(255, 255, 255, .12); }

/* --- Navegación --------------------------------------------------------- */

.nav {
    background: var(--marino-claro);
}

.nav__lista {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 2px;
    list-style: none;
    overflow-x: auto;
}

.nav__enlace {
    display: block;
    padding: 11px 16px;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    font-size: 13.5px;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
}

.nav__enlace:hover {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.nav__enlace--activo {
    color: #fff;
    border-bottom-color: var(--cian);
    background: rgba(255, 255, 255, .07);
}

/* Secciones aún no construidas: visibles para dar contexto, pero sin
   prometer que llevan a ningún sitio. */
.nav__enlace--pendiente {
    color: rgba(255, 255, 255, .38);
    cursor: not-allowed;
}

.nav__enlace--pendiente:hover { background: none; color: rgba(255, 255, 255, .38); }

/* --- Estructura --------------------------------------------------------- */

.contenido {
    max-width: 1240px;
    margin: 0 auto;
    padding: 28px 24px 64px;
}

.pagina__cabecera {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.pagina__titulo {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.2;
    color: var(--marino);
    margin: 0;
}

.pagina__subtitulo {
    margin: 4px 0 0;
    color: var(--texto-suave);
    font-size: 13px;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}

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

.boton {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: var(--radio);
    border: 1px solid transparent;
    font: inherit;
    font-size: 13.5px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.boton--principal { background: var(--marino); color: #fff; }
.boton--principal:hover { background: #002a53; color: #fff; }

.boton--secundario {
    background: #fff;
    color: var(--marino);
    border-color: var(--borde-fuerte);
}
.boton--secundario:hover { background: var(--azul-fondo); color: var(--marino); }

.boton--sutil {
    background: transparent;
    color: var(--cian-oscuro);
    padding: 4px 8px;
    font-size: 13px;
}
.boton--sutil:hover { background: var(--azul-fondo); }

/* --- Filtros ------------------------------------------------------------ */

.filtros {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 16px;
    border-bottom: 1px solid var(--borde);
}

.campo { display: flex; flex-direction: column; gap: 5px; }

.campo__etiqueta {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texto-suave);
    font-weight: 500;
}

.campo select,
.campo input[type="search"],
.campo input[type="text"] {
    font: inherit;
    font-size: 13.5px;
    padding: 7px 10px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    background: #fff;
    color: var(--texto);
    min-width: 160px;
}

.campo input[type="search"] { min-width: 230px; }

.campo select:focus,
.campo input:focus {
    outline: 2px solid var(--cian);
    outline-offset: -1px;
    border-color: var(--cian);
}

.filtros__acciones { display: flex; gap: 8px; margin-left: auto; }

/* --- Tabla -------------------------------------------------------------- */

.tabla-envoltorio { overflow-x: auto; }

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.tabla thead th {
    text-align: left;
    padding: 11px 14px;
    background: var(--azul-fondo);
    color: var(--marino);
    font-weight: 600;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
}

.tabla tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--borde);
    vertical-align: middle;
}

.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover { background: #FAFCFF; }

.tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla .acciones { text-align: right; white-space: nowrap; }

.celda-numero {
    font-family: var(--sans);
    font-weight: 600;
    color: var(--marino);
    white-space: nowrap;
}

.celda-cliente { font-weight: 500; }
.celda-cliente small { display: block; color: var(--gris); font-weight: 400; }

/* --- Distintivo de estado ----------------------------------------------- */

.estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.estado::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.estado--borrador { color: var(--borrador-txt); background: var(--borrador-bg); }
.estado--confirmado { color: var(--confirmado-txt); background: var(--confirmado-bg); }
.estado--rechazado { color: var(--rechazado-txt); background: var(--rechazado-bg); }

/* --- Estado vacío ------------------------------------------------------- */

.vacio { padding: 56px 24px; text-align: center; color: var(--texto-suave); }
.vacio h2 {
    font-family: var(--serif);
    font-weight: 500;
    color: var(--marino);
    margin: 0 0 6px;
    font-size: 18px;
}
.vacio p { margin: 0 0 18px; font-size: 13.5px; }

/* --- Pie de tabla y paginación ------------------------------------------ */

.tabla-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-top: 1px solid var(--borde);
    font-size: 13px;
    color: var(--texto-suave);
    flex-wrap: wrap;
}

.paginacion { display: flex; gap: 6px; align-items: center; }

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

.mensajes { list-style: none; padding: 0; margin: 0 0 20px; }

.mensajes li {
    padding: 11px 14px;
    border-radius: var(--radio);
    border: 1px solid var(--borde);
    border-left: 3px solid var(--cian);
    background: #fff;
    margin-bottom: 8px;
}

.mensajes li.error { border-left-color: var(--rechazado-txt); color: var(--rechazado-txt); }
.mensajes li.success { border-left-color: var(--confirmado-txt); }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 860px) {
    .cabecera__barra { min-height: 56px; padding: 8px 16px; flex-wrap: wrap; }
    .marca__app { display: none; }
    .nav__lista { padding: 0 16px; }
    .contenido { padding: 20px 16px 48px; }
    .filtros { padding: 14px; }
    .filtros__acciones { margin-left: 0; width: 100%; }
    .campo, .campo select, .campo input[type="search"] { width: 100%; min-width: 0; }
    .campo { flex: 1 1 100%; }
    .pagina__titulo { font-size: 22px; }
}

@media (max-width: 560px) {
    /* En móvil la tabla no cabe: se deja desplazar en horizontal en vez de
       apretar las columnas hasta hacerlas ilegibles. */
    .tabla { min-width: 640px; }
}

/* --- Detalle de presupuesto --------------------------------------------- */

.migas { margin: 0 0 12px; font-size: 13px; }
.migas a { text-decoration: none; color: var(--texto-suave); }
.migas a:hover { color: var(--marino); }

.pagina__titulo .estado {
    vertical-align: middle;
    margin-left: 10px;
    font-family: var(--sans);
}

.acciones-barra { display: flex; gap: 8px; flex-wrap: wrap; }

.boton--peligro {
    background: var(--rechazado-txt);
    color: #fff;
    border-color: var(--rechazado-txt);
}
.boton--peligro:hover { background: #93130c; color: #fff; }

.boton--peligro-sutil {
    background: #fff;
    color: var(--rechazado-txt);
    border-color: #E7C4C0;
}
.boton--peligro-sutil:hover { background: var(--rechazado-bg); color: var(--rechazado-txt); }

.aviso {
    padding: 11px 14px;
    border-radius: var(--radio);
    border: 1px solid var(--borde);
    border-left: 3px solid var(--gris);
    background: #fff;
    margin: 0 0 20px;
    font-size: 13.5px;
}
.aviso--cerrado { border-left-color: var(--marino-claro); }
.aviso--error {
    border-left-color: var(--rechazado-txt);
    background: var(--rechazado-bg);
    color: var(--rechazado-txt);
}

/* Datos y totales, en dos columnas que se apilan en pantallas estrechas */
.rejilla-detalle {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.panel__titulo {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 15px;
    color: var(--marino);
    margin: 0;
    padding: 14px 16px;
    border-bottom: 1px solid var(--borde);
}

.datos, .totales { margin: 0; padding: 16px; }

.datos {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 10px 16px;
    font-size: 13.5px;
}
.datos dt { color: var(--texto-suave); }
.datos dd { margin: 0; }
.datos dd small { display: block; color: var(--gris); }
.datos__notas { white-space: pre-line; }

.totales {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 16px;
    font-size: 13.5px;
}
.totales dt { color: var(--texto-suave); }
.totales dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.totales__final {
    padding-top: 10px;
    border-top: 1px solid var(--borde);
    font-weight: 600;
    font-size: 16px;
    color: var(--marino);
}

.linea__descripcion {
    display: block;
    margin-top: 3px;
    color: var(--texto-suave);
    font-weight: 400;
    line-height: 1.45;
}

.tabla tfoot td {
    padding: 11px 14px;
    border-top: 2px solid var(--borde-fuerte);
    font-weight: 600;
    color: var(--marino);
    background: var(--azul-fondo);
}

/* --- Página de confirmación --------------------------------------------- */

.panel--estrecho { max-width: 560px; }
.confirmacion { padding: 20px; }
.confirmacion__aviso { margin: 0 0 18px; font-size: 14px; }
.confirmacion .totales { padding: 0 0 18px; }
.confirmacion__botones {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid var(--borde);
}

@media (max-width: 860px) {
    .rejilla-detalle { grid-template-columns: 1fr; }
    .datos { grid-template-columns: 1fr; gap: 2px 0; }
    .datos dt { margin-top: 8px; }
    .acciones-barra { width: 100%; }
}

/* --- Formulario ---------------------------------------------------------- */

.formulario {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 18px;
}

.campo-form { display: flex; flex-direction: column; gap: 5px; }
.campo-form--completo { grid-column: 1 / -1; }

.campo-form input[type="text"],
.campo-form input[type="number"],
.campo-form input[type="date"],
.campo-form input[type="email"],
.campo-form input[type="tel"],
.campo-form input[type="url"],
.campo-form select,
.campo-form textarea {
    font: inherit;
    font-size: 13.5px;
    padding: 8px 10px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    background: #fff;
    color: var(--texto);
    width: 100%;
}

.campo-form textarea { resize: vertical; }

.campo-form input:focus,
.campo-form select:focus,
.campo-form textarea:focus {
    outline: 2px solid var(--cian);
    outline-offset: -1px;
    border-color: var(--cian);
}

.campo-form__ayuda { color: var(--texto-suave); font-size: 12px; }
.campo-form__error {
    margin: 0;
    color: var(--rechazado-txt);
    font-size: 12.5px;
}

.campo-form__fijo {
    margin: 0;
    font-weight: 600;
    color: var(--gris);
    font-size: 15px;
}
.campo-form__fijo small {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: var(--texto-suave);
}

.aviso--atencion {
    border-left-color: #B7791F;
    background: #FDF6E7;
    margin: 4px 0 0;
    font-size: 12.5px;
}

/* --- Tabla de líneas editable -------------------------------------------- */

/* El control giratorio del <input type="number"> se come ancho y recortaba
   los importes («3500,0(»). Se oculta: se teclea, no se pulsa. */
.tabla--form input[type="number"]::-webkit-outer-spin-button,
.tabla--form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.tabla--form input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.tabla--form input,
.tabla--form textarea {
    font: inherit;
    font-size: 13px;
    padding: 6px 8px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 4px;
    width: 100%;
    background: #fff;
}
.tabla--form textarea { resize: vertical; margin-top: 5px; }
.tabla--form input:focus,
.tabla--form textarea:focus {
    outline: 2px solid var(--cian);
    outline-offset: -1px;
}

.tabla--form td { vertical-align: top; padding: 9px 8px; }
.tabla--form .col-num { width: 38px; }
.tabla--form .col-cant { width: 100px; }
.tabla--form .col-precio { width: 125px; }
.tabla--form .col-iva { width: 100px; }
.tabla--form .col-calc { width: 105px; }
.tabla--form .col-quitar { width: 42px; text-align: center; }
.tabla--form .linea__num { padding-top: 16px; color: var(--texto-suave); }

.linea__subtotal, .linea__iva, .linea__total {
    padding-top: 16px !important;
    font-variant-numeric: tabular-nums;
    color: var(--texto-suave);
}
.linea__total { font-weight: 600; color: var(--marino); }

.linea__quitar {
    border: 1px solid var(--borde-fuerte);
    background: #fff;
    color: var(--texto-suave);
    border-radius: 4px;
    width: 26px;
    height: 26px;
    line-height: 1;
    font-size: 16px;
    cursor: pointer;
    margin-top: 8px;
}
.linea__quitar:hover {
    border-color: var(--rechazado-txt);
    color: var(--rechazado-txt);
    background: var(--rechazado-bg);
}

/* La fila marcada para borrar se atenúa, pero sigue enviándose: el servidor
   necesita su id y su DELETE para saber que hay que quitarla. */
.linea--borrada { opacity: .4; }
.linea--borrada input, .linea--borrada textarea { text-decoration: line-through; }

/* Sin JavaScript, la casilla DELETE es la única forma de borrar una línea;
   con JavaScript el botón × la marca por ti y sobra verla. */
.linea__borrar-manual { display: block; margin-top: 6px; }
.js .linea__borrar-manual { display: none; }

.lineas__pie {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-top: 1px solid var(--borde);
}
.lineas__pie small { color: var(--texto-suave); font-size: 12.5px; }

.acciones-form {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

@media (max-width: 860px) {
    .formulario { grid-template-columns: 1fr; }
    .tabla--form { min-width: 900px; }
}

/* --- Pantalla de acceso -------------------------------------------------- */

.pagina-acceso {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--marino);
}

.acceso {
    width: 100%;
    max-width: 380px;
    background: var(--panel);
    border-radius: 10px;
    padding: 34px 32px 30px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .3);
    text-align: center;
}

.acceso__logo { width: 150px; height: auto; margin: 0 auto 2px; display: block; }

.acceso__app {
    font-family: var(--serif);
    font-size: 14px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin: 0 0 24px;
}

.acceso form { text-align: left; }

.acceso .campo__etiqueta { display: block; margin-bottom: 5px; }
.acceso .campo__etiqueta + input { margin-bottom: 16px; }

.acceso input[type="text"],
.acceso input[type="password"] {
    width: 100%;
    font: inherit;
    font-size: 14px;
    padding: 9px 11px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    background: #fff;
    color: var(--texto);
}

.acceso input:focus {
    outline: 2px solid var(--cian);
    outline-offset: -1px;
    border-color: var(--cian);
}

.acceso__boton {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
    padding: 10px;
}

.acceso__error {
    background: var(--rechazado-bg);
    color: var(--rechazado-txt);
    border-radius: var(--radio);
    padding: 9px 12px;
    font-size: 13px;
    margin: 0 0 18px;
}

.confirmacion__nota {
    margin: 0 0 4px;
    font-size: 12.5px;
    color: var(--texto-suave);
}

/* --- Proyectos ----------------------------------------------------------- */

.tabla--form .col-horas { width: 150px; }
.sin-dato { color: var(--gris); }

.estado--activo { color: var(--confirmado-txt); background: var(--confirmado-bg); }
.estado--finalizado { color: var(--borrador-txt); background: var(--borrador-bg); }
.estado--pendiente { color: var(--borrador-txt); background: var(--borrador-bg); }
.estado--en_curso { color: #1B7695; background: #E3F1F6; }
.estado--terminada { color: var(--confirmado-txt); background: var(--confirmado-bg); }

/* --- Barra de progreso --------------------------------------------------- */

.progreso {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 150px;
}

.progreso__pista {
    flex: 1;
    height: 7px;
    border-radius: 999px;
    background: var(--borde);
    overflow: hidden;
    min-width: 60px;
}

.progreso__relleno {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--cian);
}

.progreso__cifra {
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--texto-suave);
    white-space: nowrap;
    min-width: 52px;
    text-align: right;
}

/* Pasado de lo estimado: la barra va llena pero cambia de color, y la cifra
   se destaca. El número no se recorta: 112,5 % se lee 112,5 %. */
.progreso--exceso .progreso__relleno { background: #B7791F; }
.progreso--exceso .progreso__cifra { color: #8A5A12; font-weight: 600; }

.col-avance { min-width: 165px; }
.exceso { color: #8A5A12; font-weight: 600; }

.aviso--sugerencia { border-left-color: var(--confirmado-txt); background: var(--confirmado-bg); }

.totales__barra { padding: 0 16px 16px; }

/* --- Imputaciones dentro de la fila de actividad -------------------------- */

.imputaciones { margin-top: 6px; }

.imputaciones summary {
    cursor: pointer;
    color: var(--cian-oscuro);
    font-size: 12.5px;
    font-weight: 500;
}

.imputaciones__lista {
    list-style: none;
    margin: 6px 0 0;
    padding: 8px 10px;
    background: var(--azul-fondo);
    border-radius: var(--radio);
    font-size: 12.5px;
}

.imputaciones__lista li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 2px 0;
}

.imputaciones__fecha { color: var(--texto-suave); white-space: nowrap; }
.imputaciones__horas { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.imputaciones__nota { color: var(--texto-suave); }
.etiqueta-origen { color: var(--cian-oscuro); }

.accion-en-linea { display: inline; margin: 0; }

/* --- Indicador del cronómetro (cabecera) --------------------------------- */

.cronometro {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    margin-right: 8px;
    padding: 5px 6px 5px 12px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
}

.cronometro__enlace {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #fff;
    font-size: 13px;
}

.cronometro__punto {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #E8B04B;
    flex-shrink: 0;
    animation: latido 1.6s ease-in-out infinite;
}

@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.cronometro__tiempo {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.cronometro__actividad {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255, 255, 255, .72);
}

.cronometro form { margin: 0; }

.cronometro__parar {
    background: rgba(255, 255, 255, .9);
    color: var(--marino);
    border: none;
    border-radius: 999px;
    padding: 4px 12px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
}
.cronometro__parar:hover { background: #fff; }

/* Movimiento reducido: el latido molesta a quien lo pide desactivado. */
@media (prefers-reduced-motion: reduce) {
    .cronometro__punto { animation: none; }
}

/* --- Formulario simple y borrado de imputación ---------------------------- */

.formulario-simple { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.formulario-simple .acciones-form { margin-top: 4px; }

.borrado-imputacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
    padding: 14px 18px;
    border-top: 1px solid var(--borde);
    font-size: 12.5px;
    color: var(--texto-suave);
}

.imputaciones__editar { margin-left: auto; font-size: 12px; }

@media (max-width: 860px) {
    .cronometro { margin: 6px 0; width: 100%; justify-content: space-between; }
    .cronometro__actividad { display: none; }
}

.cronometro__descartar {
    color: rgba(255, 255, 255, .7);
    font-size: 12.5px;
    text-decoration: none;
    padding: 4px 8px;
    white-space: nowrap;
}
.cronometro__descartar:hover { color: #fff; text-decoration: underline; }

/* --- Facturas ------------------------------------------------------------ */

.estado--emitida { color: var(--confirmado-txt); background: var(--confirmado-bg); }
.estado--cobrada { color: #0F5132; background: #E4F2EB; }
.estado--pendiente-cobro { color: #8A5A12; background: #FDF6E7; }

.cobro-form { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.cobro-form input[type="date"] {
    font: inherit; font-size: 12.5px; padding: 4px 6px;
    border: 1px solid var(--borde-fuerte); border-radius: 4px;
}

.ajuste-numero { margin: 0 0 6px; }
.ajuste-numero summary {
    cursor: pointer; color: var(--cian-oscuro);
    font-size: 13px; font-weight: 500; padding: 6px 0;
}
.ajuste-numero .campo-form { margin-top: 10px; }
.ajuste-numero .campo-form input[type="number"] { max-width: 180px; }

/* --- Gastos: facturas recibidas y tickets --------------------------------- */

/* Procedencia del proveedor. La intracomunitaria se destaca porque cambia el
   tratamiento del IVA: inversión del sujeto pasivo. */
.procedencia {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}
.procedencia--NAC { color: var(--texto-suave); background: var(--fondo-suave); }
.procedencia--UE  { color: #1B4F8A; background: #E6EEF8; }
.procedencia--EXP { color: #6B4A9B; background: #EFE9F7; }

.etiqueta-ticket {
    display: inline-block;
    padding: 1px 7px;
    border: 1px dashed var(--borde-fuerte);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}


/* En la celda de proveedor los <small> van en bloque; la etiqueta tiene que
   ceñirse a su texto, no ocupar el ancho de la columna. */
.celda-cliente small.etiqueta-ticket {
    width: max-content;
    margin-top: 5px;
    color: var(--texto-suave);
}

.celda-cuenta { font-size: 12.5px; color: var(--texto-suave); }

/* Casilla de verificación con su texto al lado, no encima. */
.casilla {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.35;
    cursor: pointer;
    padding-top: 7px;
}
.casilla input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; }

.panel--ancho { grid-column: 1 / -1; }
.panel__nota {
    margin: 0;
    padding: 12px 16px 0;
    font-size: 12.5px;
    color: var(--texto-suave);
}

.totales--resumen {
    margin-top: 0;
    padding-top: 14px;
    border-top: 1px solid var(--borde);
}

.adjunto { margin: 0; padding: 16px; font-size: 13.5px; word-break: break-all; }

/* Alta rápida de proveedor, en su propio formulario porque HTML no admite
   formularios anidados. */
.alta-rapida {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    margin-bottom: 20px;
}
.alta-rapida summary {
    cursor: pointer;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--cian-oscuro);
}
.alta-rapida[open] summary { border-bottom: 1px solid var(--borde); }
.alta-rapida__nota {
    margin: 0;
    padding: 14px 18px 0;
    font-size: 12.5px;
    color: var(--texto-suave);
}
.alta-rapida__acciones { padding: 0 18px 18px; }
.formulario--compacto { padding-bottom: 6px; }

/* --- Balance de IVA ------------------------------------------------------ */

.rejilla-iva {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Cada panel con su altura: el de repercutido suele tener menos líneas
       que el de soportado y estirarlo dejaba un hueco blanco. */
    align-items: start;
    gap: 20px;
    margin-bottom: 20px;
}
@media (max-width: 1000px) {
    .rejilla-iva { grid-template-columns: 1fr; }
}

.panel--resultado { margin-bottom: 20px; }

.totales--balance { max-width: 520px; }

.resultado { font-variant-numeric: tabular-nums; }
.resultado--ingresar { color: #8A5A12; }
.resultado--compensar { color: #0F5132; }

.panel__pie {
    margin: 0;
    padding: 12px 16px 16px;
    font-size: 12.5px;
    color: var(--texto-suave);
}

.explicacion { padding: 16px; font-size: 13px; color: var(--texto-suave); }
.explicacion p { margin: 0 0 10px; line-height: 1.55; max-width: 82ch; }
.explicacion p:last-child { margin-bottom: 0; }
.explicacion strong { color: var(--marino); }
.explicacion__pendiente {
    padding-left: 12px;
    border-left: 2px solid var(--borde-fuerte);
}

/* Importe que se declara pero no se paga: la ISP autoliquidada. */
.importe-neutro { color: var(--texto-suave); }

/* Sugerencia del % de retención: propuesta, no imposición. */
.sugerencia {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--cian-oscuro);
    line-height: 1.45;
}
.sugerencia__aplicar {
    font: inherit;
    padding: 1px 8px;
    margin-left: 2px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 4px;
    background: #fff;
    color: var(--cian-oscuro);
    cursor: pointer;
}
.sugerencia__aplicar:hover { background: var(--azul-fondo); }

/* --- Datos maestros ------------------------------------------------------ */

.pestanas {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--borde);
}
.pestanas__enlace {
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--texto-suave);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.pestanas__enlace:hover { color: var(--marino); }
.pestanas__enlace--activa {
    color: var(--marino);
    border-bottom-color: var(--cian);
}

/* Una ficha desactivada se ve apagada, pero legible: sigue siendo consultable. */
.fila--inactiva { color: var(--texto-suave); }
.fila--inactiva .celda-cliente { font-weight: 400; }

.etiqueta-inactivo {
    display: block;
    width: max-content;
    margin-top: 4px;
    padding: 1px 7px;
    border-radius: 4px;
    background: var(--borrador-bg);
    color: var(--borrador-txt);
    font-size: 11px;
    font-weight: 500;
}

/* Un <form> de una sola acción metido en una barra de botones. */
.en-linea { display: inline; }
.acciones-barra .en-linea { display: inline-flex; }

.nota-form {
    margin: 0 0 16px;
    font-size: 12.5px;
    color: var(--texto-suave);
}

/* Formulario estrecho, dentro de un panel de media anchura. */
.formulario--una-columna { grid-template-columns: 1fr; }

/* Lo que se enseña pero no se puede tocar, en la edición acotada. */
.datos--bloqueados dd { color: var(--texto-suave); }
.datos--bloqueados dt { color: var(--gris); }

/* --- Pantalla de exportación --------------------------------------------- */

.descarga {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px;
    flex-wrap: wrap;
}
.descarga__nombre { margin: 0 0 6px; font-size: 14px; }
.descarga__nota {
    margin: 0;
    max-width: 62ch;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--texto-suave);
}
.datos code, .descarga code {
    font-size: 12.5px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--fondo-suave);
    color: var(--marino);
}

/* Trimestre fijado a mano: se marca porque cambia en qué declaración entra. */
.etiqueta-manual {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #FDF6E7;
    color: #8A5A12;
    font-size: 10.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: help;
}