/* ===== Tokens de diseño — identidad visual Temperature (César, 2026-08-30) =====
   Los valores se han tomado directamente de la app Temperature real en producción
   (TEMPERATURE_Admin.html / TEMPERATURE_Sergio.html / TEMPERATURE_Cesar.html), no
   inventados: --azul/--azul-oscuro = --accent/--primary de Admin y --blue/--blue2 de
   Sergio (#2980b9/#1a3a5c); --verde = --ok de Admin (#27ae60); --naranja = --warn
   (#e67e22); --rojo = --danger y color de marca de César (#c0392b); --morado = --purple
   (#8e44ad). Como el resto de esta hoja ya usaba var(--azul) etc. de forma consistente,
   cambiar solo estos valores reestiliza toda la app sin tocar cada regla una a una. */
:root {
    --azul: #2980b9;
    --azul-oscuro: #1a3a5c;
    --azul-suave: #eaf4fd;
    --texto-secundario: #666;
    --borde: #d5dde8;
    --fondo-nav: #eef2f7;
    --verde: #27ae60;
    --verde-fondo: #eafaf1;
    --naranja: #e67e22;
    --naranja-fondo: #fef3e7;
    --rojo: #c0392b;
    --rojo-fondo: #fdedec;
    --morado: #8e44ad;
    --sombra: 0 2px 10px rgba(26, 58, 92, 0.10);
    --radio: 0.65rem;
    --radio-chico: 0.4rem;
    --tactil: 44px;
    --alto-barra-inferior: 62px;
    /* Acentos de técnico (César/Sergio, mismos tonos que sus apps reales) — solo se
       aplican donde la sesión ya identifica al técnico logueado (ver MainLayout.razor);
       nunca sustituyen la paleta general de Administración. */
    --acento-cesar: #c0392b;
    --acento-cesar-fondo: #fdedec;
    --acento-sergio: #1a5276;
    --acento-sergio-fondo: #d6eaf8;
}

/* ===== Entorno de técnico — segundo pase visual (César, 2026-08-31) =====
   --acento queda sin definir por defecto (Administración y cualquier sesión sin técnico
   identificado se quedan en var(--azul) tal cual, por el fallback de cada var(--acento, ...)).
   .tema-cesar/.tema-sergio se aplican en MainLayout.razor sobre .app-shell — cascada a
   cabecera, navegación activa (drawer y barra inferior) y a cualquier botón que use
   var(--acento, var(--azul)). Los estados semánticos (chip-estado, --verde/--naranja/--rojo)
   nunca leen --acento — tienen prioridad siempre, tal como decidió César. */
.tema-cesar { --acento: var(--acento-cesar); }
.tema-sergio { --acento: var(--acento-sergio); }
/* Modo Administración (César, corrección 2026-08-31) — azul marino, mismo tono que la
   cabecera (--azul-oscuro); se aplica SIEMPRE que mostrarAdmin sea true en MainLayout.razor,
   incluida la sesión de César mientras esté en modo Administración (sustituye a
   .tema-cesar mientras dure, nunca se combinan). */
.tema-admin { --acento: var(--azul-oscuro); }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--fondo-nav);
    color: #2c3e50;
}

.icono {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

*:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 2px;
}

.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ===== Cabecera compacta (una sola fila en cualquier tamaño) ===== */
.cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.9rem;
    background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul) 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    min-height: 52px;
    color: #fff;
}

.cabecera-marca {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Insignia de empresa (TEMPERATURE SAT) — asset PROVISIONAL (César sustituirá el archivo
   icon-192.png/icon-512.png en wwwroot/ cuando exista el anagrama definitivo; ningún otro
   cambio de interfaz es necesario para ese reemplazo, es el mismo archivo que ya usa
   manifest.webmanifest/apple-touch-icon). Círculo blanco propio para que se lea sobre
   cualquier fondo, igual que ya hace la app real de producción (TEMPERATURE_Cesar.html). */
.badge-logo {
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
    flex: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.badge-logo.cab {
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255, 255, 255, 0.65);
}

.marca-textos {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.app-title {
    font-weight: 900;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.app-subtitle {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.75);
    text-transform: uppercase;
}

.boton-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tactil);
    height: var(--tactil);
    border-radius: var(--radio-chico);
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
}

.cabecera .boton-icono:hover {
    background: rgba(255, 255, 255, 0.15);
}

.boton-menu {
    display: none;
}

.cabecera-usuario {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.usuario-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tactil);
    height: var(--tactil);
    border-radius: 50%;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

.avatar-inicial {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 2px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}

/* Acento de técnico (César/Sergio) sobre el avatar de la cabecera — solo color, mismo
   dato ya mostrado (nombre de sesión), sin lógica nueva. Ver MainLayout.razor. */
.avatar-inicial.avatar-cesar {
    background: var(--acento-cesar);
    border-color: rgba(255, 255, 255, 0.7);
}

.avatar-inicial.avatar-sergio {
    background: var(--acento-sergio);
    border-color: rgba(255, 255, 255, 0.7);
}

.menu-usuario {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    padding: 0.6rem;
    min-width: 15rem;
    z-index: 60;
}

.menu-usuario-email {
    font-size: 0.85rem;
    color: var(--texto-secundario);
    padding: 0.4rem 0.5rem 0.6rem 0.5rem;
    border-bottom: 1px solid var(--borde);
    margin-bottom: 0.4rem;
    word-break: break-all;
}

.enlace-drawer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: var(--tactil);
    padding: 0.5rem;
    border: none;
    background: none;
    text-align: left;
    font-size: 0.95rem;
    border-radius: var(--radio-chico);
    cursor: pointer;
    color: #2c3e50;
    text-decoration: none;
}

.enlace-drawer:hover {
    background: var(--azul-suave);
}

.enlace-salir {
    color: #b02a2a;
}

.health-status {
    font-size: 0.85rem;
    padding: 0.2rem 0.6rem;
    border-radius: 0.25rem;
}

.health-status--checking {
    background: #eee;
    color: #555;
}

.health-status--ok {
    background: #e6f4ea;
    color: #1e7e34;
}

.health-status--down {
    background: #fdeaea;
    color: #b02a2a;
}

.app-content {
    flex: 1;
    padding: 1rem;
    padding-bottom: calc(1rem + var(--alto-barra-inferior));
    min-width: 0;
}

/* ===== Navegación principal — UNA sola fuente de navegación (mismo <nav>, mismos
   grupos, mismas restricciones de rol), reposicionada por CSS según el tamaño:
   - <768px (móvil, técnicos): bottom-sheet, sube desde abajo.
   - 768-1023px (tablet): drawer lateral, entra desde la izquierda.
   - ≥1024px (escritorio): sidebar persistente (ver media query al final del fichero).
   No hay dos listas de rutas ni dos componentes — solo transform/position distintos. ===== */
.navegacion-principal {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    max-height: 75vh;
    background: #fff;
    transform: translateY(100%);
    transition: transform 0.2s ease;
    z-index: 50;
    overflow-y: auto;
    padding: 0 0 1rem 0;
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,.18);
}

.navegacion-principal.abierta {
    transform: translateY(0);
}

.cabecera-nav-movil {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.9rem 0.5rem 0.9rem;
    border-bottom: 1px solid var(--borde);
    margin-bottom: 0.3rem;
    position: sticky;
    top: 0;
    background: #fff;
}

.titulo-nav-movil {
    font-weight: 700;
    font-size: 1rem;
}

.grupo-nav {
    padding: 0.6rem 0.9rem 0.2rem 0.9rem;
}

.titulo-grupo-nav {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--texto-secundario);
    font-weight: 700;
    padding: 0.4rem 0.3rem;
}

.enlace-nav {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: var(--tactil);
    padding: 0.4rem 0.5rem;
    border-radius: var(--radio-chico);
    color: inherit;
    text-decoration: none;
    font-size: 0.95rem;
}

.enlace-nav .icono {
    color: var(--azul);
}

.enlace-nav:hover {
    background: var(--azul-suave);
}

.enlace-nav.active {
    background: var(--acento, var(--azul));
    color: #fff;
}

.enlace-nav.active .icono {
    color: #fff;
}

.drawer-fondo {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 40;
}

.drawer-fondo.oculto {
    display: none;
}

/* ===== Barra inferior — solo móvil ===== */
.barra-inferior {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    border-top: 1px solid var(--borde);
    background: #fff;
    z-index: 30;
    height: var(--alto-barra-inferior);
}

.item-barra {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    color: var(--texto-secundario);
    font-size: 0.68rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    min-height: var(--tactil);
}

.item-barra.active {
    color: var(--acento, var(--azul));
}

@media (min-width: 768px) {
    .boton-menu {
        display: flex;
    }

    .barra-inferior {
        display: none;
    }

    .app-content {
        padding-bottom: 1rem;
    }

    /* Tablet: el mismo <nav> pasa de bottom-sheet a drawer lateral */
    .navegacion-principal {
        top: 0;
        right: auto;
        bottom: 0;
        left: 0;
        width: min(320px, 85vw);
        max-height: none;
        border-radius: 0;
        box-shadow: 2px 0 16px rgba(0,0,0,.15);
        transform: translateX(-100%);
    }

    .navegacion-principal.abierta {
        transform: translateX(0);
    }

    .cabecera-nav-movil {
        display: none;
    }
}

@media (min-width: 1024px) {
    .app-shell {
        display: grid;
        grid-template-columns: 240px 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas: "cabecera cabecera" "nav content";
        height: 100vh;
        overflow: hidden;
    }

    .cabecera {
        grid-area: cabecera;
    }

    .navegacion-principal {
        grid-area: nav;
        position: static;
        transform: none;
        width: auto;
        max-height: 100%;
        box-shadow: none;
        border-right: 1px solid var(--borde);
        background: var(--fondo-nav);
    }

    .app-content {
        grid-area: content;
        overflow-y: auto;
    }

    .boton-menu {
        display: none;
    }

    .drawer-fondo {
        display: none !important;
    }
}

/* ===== Inicio (ADMINISTRACION) ===== */

.accesos-rapidos-inicio {
    display: flex;
    gap: 0.6rem;
    margin: 1rem 0 1.25rem 0;
    flex-wrap: wrap;
}

.acceso-rapido-inicio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--tactil);
    padding: 0 1rem;
    border-radius: var(--radio);
    border: 1px solid var(--azul);
    background: var(--azul-suave);
    color: var(--azul-oscuro);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}

.acceso-rapido-inicio:hover {
    background: #e0edfa;
}

.panel-metricas-inicio {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.6rem;
    max-width: 40rem;
}

.metrica-inicio {
    border: 1px solid var(--borde);
    border-left: 4px solid var(--azul);
    border-radius: var(--radio);
    padding: 0.9rem;
    background: #fff;
    box-shadow: var(--sombra);
}

.metrica-valor {
    font-size: 1.6rem;
    font-weight: 700;
    font-family: Georgia, "Times New Roman", serif;
}

.metrica-valor--error {
    color: #b02a2a;
}

.metrica-etiqueta {
    font-size: 0.8rem;
    color: var(--texto-secundario);
    margin-top: 0.2rem;
}

.metrica-inicio a {
    color: var(--azul);
    font-size: 0.78rem;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    margin-top: 0.3rem;
}

/* ===== Listado de Clientes ===== */

.buscador {
    margin-bottom: 1rem;
}

.buscador input {
    width: 100%;
    max-width: 24rem;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 0.35rem;
    box-sizing: border-box;
}

.paginacion {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.paginacion button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.4rem 0.9rem;
    border: 1px solid #ccc;
    border-radius: 0.35rem;
    background: white;
    cursor: pointer;
}

.paginacion button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Escritorio: tabla compacta */
/* Chips de estado (César, 2026-08-29 — vista agregada de Avisos/Intervenciones). Colores
   inline por estado (ver EstiloChip en Avisos.razor) — solo estructura común aquí. */
.chips-estado {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
}

.chip-estado {
    border: none;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    background: #eceff1;
    color: #455a64;
}

.chip-estado.chip-activo {
    outline: 2px solid var(--azul);
    outline-offset: 1px;
}

.badge-estado {
    display: inline-block;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Motivo/fecha de vuelta junto al badge Pausada (César, 2026-08-29) — no es un subestado,
   es información adicional del mismo estado. */
.motivo-pausa {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.75rem;
    color: #6d4c00;
}

.sistema-de-baja {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.75rem;
    font-weight: bold;
    color: #7a1f1f;
}

.tabla-clientes {
    width: 100%;
    border-collapse: collapse;
}

.tabla-clientes th, .tabla-clientes td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #eee;
}

.tabla-clientes tbody tr {
    cursor: pointer;
}

.tabla-clientes tbody tr:hover {
    background: #f5f9fd;
}

/* Móvil: tarjetas tocables, nunca tabla horizontal */
.lista-clientes-tarjetas {
    display: none;
}

.tarjeta-cliente {
    display: block;
    padding: 0.9rem 1rem;
    margin-bottom: 0.6rem;
    border: 1px solid var(--borde);
    border-left: 4px solid var(--azul);
    border-radius: var(--radio);
    background: white;
    box-shadow: var(--sombra);
    min-height: 44px;
}

.tarjeta-cliente .tarjeta-nombre {
    font-weight: 600;
    font-size: 1.05rem;
}

.tarjeta-cliente .tarjeta-detalle {
    color: #555;
    font-size: 0.9rem;
    margin-top: 0.15rem;
}

@media (max-width: 640px) {
    .tabla-clientes {
        display: none;
    }

    .lista-clientes-tarjetas {
        display: block;
    }
}

/* Matriz de permisos (César, 2026-08-21) — tabla propia, no usa .tabla-clientes: es una
   matriz de checkboxes, no una lista de tarjetas, así que no le aplica el patrón de
   ocultar-y-sustituir-por-tarjetas de arriba. Se desplaza en horizontal en vez de
   desaparecer u obligar a hacer scroll de toda la página. */
.tabla-scroll {
    overflow-x: auto;
}

.tabla-permisos {
    border-collapse: collapse;
    white-space: nowrap;
}

.tabla-permisos th, .tabla-permisos td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eee;
}

/* ===== Cabecera listado / alta de Cliente ===== */

.cabecera-clientes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.boton-nuevo-cliente {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 1rem;
    background: linear-gradient(135deg, var(--azul-oscuro), var(--azul));
    color: white;
    border-radius: var(--radio-chico);
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(41, 128, 185, 0.35);
}

.boton-nuevo-cliente:hover {
    filter: brightness(1.08);
}

/* ===== Formularios (alta de Cliente y sub-entidades) ===== */

.formulario-cliente,
.formulario-inline {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 32rem;
    margin: 0.75rem 0 1.25rem 0;
    padding: 1rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: #fafcff;
    box-shadow: var(--sombra);
}

.formulario-cliente label,
.formulario-inline label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.formulario-cliente input,
.formulario-cliente select,
.formulario-cliente textarea,
.formulario-inline input,
.formulario-inline select,
.formulario-inline textarea {
    min-height: 44px;
    padding: 0.5rem 0.65rem;
    font-size: 1rem;
    font-weight: normal;
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-chico);
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s;
}

.formulario-cliente input:focus,
.formulario-cliente select:focus,
.formulario-cliente textarea:focus,
.formulario-inline input:focus,
.formulario-inline select:focus,
.formulario-inline textarea:focus {
    border-color: var(--azul);
    outline: none;
}

.formulario-cliente textarea,
.formulario-inline textarea {
    min-height: 5rem;
    resize: vertical;
}

.formulario-cliente button[type="submit"],
.formulario-inline button[type="submit"] {
    align-self: flex-start;
    min-height: 44px;
    padding: 0 1.25rem;
    background: linear-gradient(135deg, var(--azul-oscuro), var(--azul));
    color: white;
    border: none;
    border-radius: var(--radio-chico);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(41, 128, 185, 0.35);
}

.formulario-cliente button[disabled],
.formulario-inline button[disabled] {
    opacity: 0.6;
    cursor: default;
}

.cabecera-seccion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.boton-anadir {
    min-height: 40px;
    padding: 0 0.9rem;
    background: white;
    border: 1.5px solid var(--azul);
    color: var(--azul);
    border-radius: var(--radio-chico);
    font-weight: 700;
    cursor: pointer;
}

.boton-anadir:hover {
    background: var(--azul-suave);
}

.nota-acceso {
    font-size: 0.9rem;
    color: #555;
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.nota-acceso textarea {
    width: 100%;
    min-height: 4rem;
    padding: 0.5rem;
    font-size: 0.95rem;
    font-family: inherit;
    border: 1px solid #ccc;
    border-radius: 0.35rem;
    box-sizing: border-box;
}

.acciones-notas {
    display: flex;
    gap: 0.5rem;
}

.lista-resultados-busqueda {
    list-style: none;
    margin: 0.75rem 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.lista-resultados-busqueda .boton-anadir {
    width: 100%;
    text-align: left;
    min-height: 44px;
}

.lienzo-firma {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.selector-tecnico {
    display: block;
    width: 100%;
    max-width: 24rem;
    min-height: 44px;
    padding: 0.5rem 0.65rem;
    font-size: 1rem;
    border: 1.5px solid var(--borde);
    border-radius: var(--radio-chico);
    box-sizing: border-box;
    margin: 0.5rem 0 1rem 0;
}

.selector-tecnico:focus {
    border-color: var(--azul);
    outline: none;
}

.opcion-checkbox {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    font-weight: normal;
}

.opcion-checkbox input[type="checkbox"] {
    width: 22px;
    height: 22px;
}

.canvas-firma {
    width: 100%;
    max-width: 500px;
    height: 180px;
    border: 1px solid #ccc;
    border-radius: 0.35rem;
    touch-action: none;
    background: white;
}

.subseccion {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px dashed #ddd;
}

.subseccion h4, .subseccion h5 {
    font-size: 0.95rem;
    margin: 0 0 0.4rem 0;
}

.contrato-item {
    padding: 0.6rem 0;
    border-top: 1px dashed #eee;
}

.vacio {
    color: #777;
    font-size: 0.9rem;
}

/* ===== Ficha de Cliente ===== */

.ficha-cliente h1 {
    margin-bottom: 0.25rem;
}

.ficha-seccion {
    margin-top: 1.5rem;
}

.ficha-cliente h1 {
    color: var(--azul-oscuro);
}

.ficha-seccion h2 {
    font-size: 1.1rem;
    color: var(--azul-oscuro);
    border-bottom: 2px solid var(--azul-suave);
    padding-bottom: 0.35rem;
}

.direccion-card {
    padding: 0.9rem 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: #fff;
    box-shadow: var(--sombra);
}

.sistema-item {
    padding: 0.4rem 0;
    border-top: 1px dashed #eee;
}

/* ===== Pestañas de primer nivel de la ficha de Cliente (Paquete 2, Cliente Centro) =====
   Sustituyen al acordeón anidado anterior (Direcciones→Sistemas→Equipos/Contratos→
   Renovaciones + SEPA todo en una sola página). Clases específicas de esta pantalla —
   nunca reutilizan/reescriben .ficha-seccion/.subseccion/.boton-anadir/.cabecera-seccion. */
.pestana-cliente-cabecera {
    margin-bottom: 1rem;
}

.pestana-cliente-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    border-bottom: 2px solid var(--borde);
    padding-bottom: 0;
}

.pestana-cliente-boton {
    min-height: 44px;
    padding: 0 1rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--texto-secundario);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}

.pestana-cliente-boton:hover {
    color: var(--azul-oscuro);
}

.pestana-cliente-boton.pestana-cliente-activa {
    color: var(--azul);
    border-bottom-color: var(--azul);
}

.pestana-cliente-contenido {
    margin-top: 1rem;
}

.pestana-cliente-tabla {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
}

.pestana-cliente-tabla th, .pestana-cliente-tabla td {
    text-align: left;
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
}

.enlace-volver {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 0.5rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===== Stock (César, 2026-09-02) — CSS propio, no comparte .lista-clientes-tarjetas =====
   Estructura/jerarquía adaptada de TEMPERATURE Stock App histórica (identidad "TEMPERATURE ·
   STOCK", pestañas por ubicación, barra de estadísticas OK/Bajo/Sin-stock, tarjeta con foto
   protagonista). Colores tomados de los tokens ya existentes de la app (--azul/--verde/
   --naranja/--rojo) en vez del tema oscuro literal del histórico, para no romper la identidad
   visual unificada del resto de MASTER TEMPERATURE (Clientes/Avisos/etc. ya usan esta misma
   paleta clara) — decisión de diseño, no un descarte del histórico: se conserva su estructura,
   no su paleta. Grid de 2 columnas real en escritorio (>=900px), no una tarjeta móvil estirada. */
.stock-app { display: flex; flex-direction: column; gap: 0; }
.stock-hdr { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, var(--azul-oscuro), var(--azul)); color: #fff; padding: 14px 16px; border-radius: var(--radio); margin-bottom: 10px; }
.stock-hdr-icon { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stock-hdr-title { font-size: 1.05rem; font-weight: 700; letter-spacing: .3px; }
.stock-hdr-sub { font-size: .75rem; opacity: .85; margin-top: 2px; }

.stock-layout { display: flex; flex-direction: column; gap: 12px; }
.stock-sidebar { display: flex; flex-direction: column; gap: 10px; }
.stock-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

@media (min-width: 900px) {
    .stock-layout { flex-direction: row; align-items: flex-start; }
    .stock-sidebar { width: 300px; flex-shrink: 0; position: sticky; top: 12px; }
    .stock-main { flex: 1; min-width: 0; }
}

.stock-nav { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--borde); padding-bottom: 2px; }
@media (min-width: 900px) { .stock-nav { flex-direction: column; border-bottom: none; border-left: 2px solid var(--borde); } }
.stock-nav button { flex-shrink: 0; padding: 8px 12px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--texto-secundario); font-weight: 600; font-size: .8rem; cursor: pointer; white-space: nowrap; text-align: left; }
@media (min-width: 900px) { .stock-nav button { border-bottom: none; border-left: 2px solid transparent; margin-left: -2px; } }
.stock-nav button.activo { color: var(--azul); border-color: var(--azul); }

.stock-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.stock-btn { padding: 9px 14px; border: none; border-radius: var(--radio-chico); font-size: .8rem; font-weight: 700; cursor: pointer; color: #fff; }
.stock-btn-entrada { background: var(--verde); }
.stock-btn-salida { background: var(--rojo); }
.stock-btn-ajuste { background: var(--naranja); }
.stock-btn-trasvase { background: var(--azul); }
.stock-btn-muted { background: #fff; color: var(--texto-secundario); border: 1px solid var(--borde); }

.stock-stats { display: flex; gap: 8px; }
.stock-stat { flex: 1; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 8px; text-align: center; }
.stock-stat-n { font-size: 1.2rem; font-weight: 800; }
.stock-stat-l { font-size: .65rem; color: var(--texto-secundario); margin-top: 2px; text-transform: uppercase; letter-spacing: .3px; }
.stock-stat-verde .stock-stat-n { color: var(--verde); }
.stock-stat-naranja .stock-stat-n { color: var(--naranja); }
.stock-stat-rojo .stock-stat-n { color: var(--rojo); }

.stock-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.stock-chip { padding: 5px 12px; border-radius: 20px; font-size: .75rem; font-weight: 600; cursor: pointer; background: #fff; color: var(--texto-secundario); border: 1px solid var(--borde); }
.stock-chip.activo { background: var(--azul); color: #fff; border-color: var(--azul); }

.stock-buscador { display: flex; gap: 6px; }
.stock-buscador input { flex: 1; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio-chico); font-size: .95rem; }
.stock-btn-scan { padding: 0 12px; border: 1px solid var(--azul); background: var(--azul-suave); color: var(--azul); border-radius: var(--radio-chico); font-size: 1.1rem; cursor: pointer; }

.stock-sec-hdr { font-size: .7rem; font-weight: 700; color: var(--texto-secundario); text-transform: uppercase; letter-spacing: .5px; margin: 10px 0 2px; }

.stock-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .stock-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .stock-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } }

.stock-card { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 10px; text-decoration: none; color: inherit; }
.stock-card-thumb { width: 56px; height: 56px; border-radius: 8px; flex-shrink: 0; background: var(--fondo-nav); border: 1px solid var(--borde); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 22px; }
.stock-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.stock-card-body { flex: 1; min-width: 0; }
.stock-card-nombre { font-size: .85rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.stock-card-ref { font-size: .7rem; font-weight: 700; color: var(--azul); margin-top: 1px; }
.stock-card-cat { font-size: .7rem; color: var(--texto-secundario); margin-top: 1px; }
.stock-card-precios { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.stock-precio-badge { font-size: .65rem; font-weight: 700; padding: 2px 6px; border-radius: 5px; }
.stock-precio-coste { background: var(--verde-fondo); color: var(--verde); }
.stock-precio-pvp { background: var(--azul-suave); color: var(--azul); }
.stock-card-right { text-align: right; flex-shrink: 0; }
.stock-card-qty { font-size: 1.3rem; font-weight: 800; line-height: 1; }
.stock-card-qty-verde { color: var(--verde); }
.stock-card-qty-naranja { color: var(--naranja); }
.stock-card-qty-rojo { color: var(--rojo); }
.stock-card-unidad { font-size: .65rem; color: var(--texto-secundario); margin-top: 2px; }
.stock-card-min { font-size: .6rem; color: var(--texto-secundario); margin-top: 2px; }
.stock-card-sinmov { font-size: .7rem; color: var(--texto-secundario); font-style: italic; margin-top: 2px; }

.stock-mov { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 10px; }
.stock-mov-icon { font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.stock-mov-nombre { font-size: .8rem; font-weight: 600; }
.stock-mov-det { font-size: .7rem; color: var(--texto-secundario); margin-top: 2px; }
.stock-mov-right { text-align: right; flex-shrink: 0; }
.stock-mov-qty { font-size: .9rem; font-weight: 700; }
.stock-mov-time { font-size: .65rem; color: var(--texto-secundario); margin-top: 2px; }
.stock-badge { display: inline-block; padding: 2px 7px; border-radius: 6px; font-size: .6rem; font-weight: 700; margin-top: 4px; }
.stock-badge-entrada { background: var(--verde-fondo); color: var(--verde); }
.stock-badge-salida { background: var(--rojo-fondo); color: var(--rojo); }
.stock-badge-ajuste_manual, .stock-badge-transferencia_aceptada, .stock-badge-reposicion_central, .stock-badge-otro { background: var(--naranja-fondo); color: var(--naranja); }

.stock-scan-overlay { position: fixed; inset: 0; background: #000; z-index: 500; display: flex; flex-direction: column; }
.stock-scan-top { padding: 14px; display: flex; align-items: center; gap: 12px; }
.stock-scan-close { background: rgba(255,255,255,.15); border: none; color: #fff; width: 34px; height: 34px; border-radius: 50%; font-size: 16px; cursor: pointer; }
.stock-scan-title { color: #fff; font-size: .9rem; font-weight: 700; }
.stock-scan-video { width: 100%; flex: 1; object-fit: cover; }
.stock-scan-hint { color: #fff; text-align: center; padding: 12px; font-size: .75rem; }

/* ===== Paquete 1 — Navegación progresiva de Visita (VisitaCard) =====
   Solo clases nuevas, ninguna existente se toca: .ficha-seccion/.subseccion/.boton-anadir/
   .cabecera-seccion/.formulario-inline/.vacio siguen exactamente igual en el resto de la
   app. Colores reutilizan los tokens ya definidos arriba (--azul/--verde/--naranja), sin
   introducir hex nuevos. */

.cabecera-contexto-visita {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.75rem;
    background: var(--fondo-nav);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}

.cabecera-contexto-visita-fila-principal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cabecera-contexto-visita-fila-principal strong {
    font-size: 1.05rem;
    color: var(--azul-oscuro);
}

.cabecera-contexto-visita-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: 0.85rem;
    color: var(--texto-secundario);
}

.badge-estado-visita {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--azul-suave);
    color: var(--azul-oscuro);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Bloque activo — la ÚNICA acción principal de la fase actual de la Visita (Autorización
   inicial / Mano de obra + Materiales / Cierre). Borde de color para diferenciarlo a simple
   vista de lo secundario/colapsado, sin duplicar la semántica de .ficha-seccion. */
.bloque-activo {
    border-left: 4px solid var(--azul);
    padding-left: 0.85rem;
    margin: 0.85rem 0;
}

.bloque-cierre {
    border-left-color: var(--naranja);
}

/* Acciones secundarias — visibles pero deliberadamente discretas (opcionales en la fase
   actual): Diagnóstico/Trabajo/Para volver/Pedido/Cobro/Autorización adicional. */
.acciones-secundarias-visita {
    opacity: 0.92;
}

/* Resumen de solo lectura de una Visita ya Cerrada — sustituye la pila de subsecciones
   siempre-abiertas del diseño anterior por líneas compactas. */
.bloque-completado {
    background: var(--verde-fondo);
    border-left: 4px solid var(--verde);
    padding: 0.75rem 0.9rem;
    border-radius: var(--radio-chico);
}

.bloque-completado p {
    margin: 0.2rem 0;
    font-size: 0.9rem;
}

.resumen-economico-cierre {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.75rem;
}

.resumen-economico-cierre p {
    margin: 0.2rem 0;
    font-size: 0.9rem;
}

/* ===== Paquete 1 — Home Técnico / Home Admin ===== */

.panel-contadores-avisos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.6rem;
    max-width: 48rem;
    margin: 0.75rem 0 1.5rem 0;
}

.contador-aviso-estado {
    display: block;
    border: 1px solid var(--borde);
    border-left: 4px solid var(--azul);
    border-radius: var(--radio);
    padding: 0.75rem;
    background: #fff;
    box-shadow: var(--sombra);
    text-decoration: none;
    color: inherit;
}

.contador-aviso-estado:hover {
    background: var(--azul-suave);
}

.contador-aviso-valor {
    font-size: 1.4rem;
    font-weight: 700;
    font-family: Georgia, "Times New Roman", serif;
    color: var(--azul-oscuro);
}

.contador-aviso-etiqueta {
    font-size: 0.78rem;
    color: var(--texto-secundario);
    margin-top: 0.15rem;
}

.lista-visitas-hoy {
    list-style: none;
    margin: 0.75rem 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 40rem;
}

.visita-hoy-item {
    display: block;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: #fff;
    box-shadow: var(--sombra);
    text-decoration: none;
    color: inherit;
}

.visita-hoy-item:hover {
    background: var(--azul-suave);
}

.visita-hoy-cliente {
    font-weight: 700;
    color: var(--azul-oscuro);
}

.visita-hoy-detalle {
    font-size: 0.85rem;
    color: var(--texto-secundario);
    margin-top: 0.15rem;

/* Vuelta vencida (paso 8 del recorrido de Nerea): la fecha de vuelta ya pasó. Rojo sobrio, no
   una alarma: es información que hay que ver, no una emergencia. */
.vuelta-vencida {
    display: inline-block;
    margin-left: .4rem;
    padding: .05rem .4rem;
    border: 1px solid #b42318;
    border-radius: 999px;
    color: #b42318;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.orden-vuelta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}

/* Gasto anulado: sigue en el histórico, pero no es gasto. Atenuado y tachado para que se lea
   de un vistazo que no cuenta, sin esconderlo. */
.fila-anulada { opacity: .55; }
.fila-anulada td:nth-child(6),
.fila-anulada td:nth-child(7),
.fila-anulada td:nth-child(8) { text-decoration: line-through; }

.total-previsto { font-weight: 600; white-space: nowrap; }

/* NR-02 — historial del equipo. Plegado, discreto: en campo se abre cuando hace falta. */
.historial-sistema { margin: .5rem 0 1rem; border: 1px solid #e3e6ea; border-radius: 6px; }
.historial-cabecera {
    width: 100%; text-align: left; background: #f7f8fa; border: 0; cursor: pointer;
    padding: .5rem .75rem; font-weight: 600; border-radius: 6px;
}
.historial-cabecera small { font-weight: 400; color: #5a6472; margin-left: .5rem; }
.historial-sistema-nombre { padding: 0 .75rem; color: #5a6472; }
.historial-visita { padding: .5rem .75rem; border-top: 1px solid #eef0f3; }
.historial-visita p { margin: .2rem 0; }
.historial-para-volver-sin-posterior { color: #b42318; font-weight: 600; }
.historial-documentos { color: #5a6472; font-size: .85rem; }
.historial-cobertura {
    padding: .5rem .75rem; border-top: 1px dashed #d7dbe0;
    color: #5a6472; font-size: .85rem;
}