/* =========================================================================
   RESET / BASE
   ========================================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
}

html, body {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
}

/* =========================================================================
   DESIGN TOKENS
   ========================================================================= */
:root {
    /* Marca & Acentos (Modo Claro - Gris Slate Suave) */
    --primary: #0062CC;
    --primary-hover: #004FB8;
    --secondary: #E1E8ED;
    --secondary-hover: #CBD5E1;
    --aura: rgba(0, 98, 204, 0.08);
    /* Superficies (Fondo relajado para la vista, nada de blancos deslumbrantes) */
    --app-bg: #f0f2f5;
    --app-surface: #dfe6ee;
    --app-surface-muted: #F8FAFC;
    --app-border: #CBD5E1;
    --app-border-soft: #E1E8ED;
    /* Texto */
    --app-text: #1A1D23;
    --app-text-muted: #64748B;
    --app-title: #1E293B;
    /* Inputs */
    --app-input-bg: #FFFFFF;
    --app-input-bg-disabled: #F1F5F9;
    --app-input-text-disabled: #64748B; /* Texto tenue */
    --app-border-disabled: #CBD5E1; /* Borde sutil */
    --app-input-text: #1A1D23;
    /* Resaltado de totales */
    --app-highlight-bg: #1E293B;
    --app-highlight-text: #FFFFFF;
    /* Header / Franja superior "empresa actual" */
    --app-accent-bg: #1E293B;
    --app-accent-text: #F8FAFC;
    /* Shell de navegación */
    --app-sidebar-bg: #CCD4D9;
    --app-sidebar-bg-active: #B7C2CB;
    --app-sidebar-text: #1A1D23;
    --app-sidebar-text-muted: #475569;
    --app-sidebar-accent: #0062CC;
    --app-sidebar-border: rgba(0, 0, 0, 0.08);
    --app-topbar-bg: #CCD4D9;
    --app-topbar-border: rgba(255, 255, 255, 0.1);
    --app-topbar-text: #1A1D23;
    --app-topbar-shadow: 0 1px 4px rgba(20, 19, 30, 0.12);
    --app-accordion-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231A1D23'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --app-accordion-icon-active: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230062CC'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    /* =========================================================================
   MEDIDAS ESTÁNDAR DE CAMPO (TOKENS)
   =========================================================================
   Cada tamaño tiene DOS valores: un mínimo y un máximo.

   - El MÍNIMO garantiza que el campo nunca se vea demasiado estrecho
     (evita que en un formulario apretado un input de "Código" se aplaste
     hasta ser ilegible).
   - El MÁXIMO evita que, en pantallas muy anchas o cuando el campo tiene
     flex-grow, se estire sin control (un input de "Año" no debería medir
     900px en un monitor 4K).

   El rango entre ambos define la "zona elástica": el campo puede crecer
   y encogerse dentro de ese rango según el espacio disponible, pero
   nunca sale de él.

   Los tamaños siguen una progresión ~1.2x entre escalones para que la
   diferencia visual entre uno y otro sea perceptible sin ser brusca.
   ========================================================================= */
    --field-2xs-min: 100px;
    --field-2xs-max: 140px;
    --field-xs-min: 120px;
    --field-xs-max: 180px;
    --field-sm-min: 140px;
    --field-sm-max: 220px;
    --field-md-min: 160px;
    --field-md-max: 260px;
    --field-lg-min: 200px;
    --field-lg-max: 320px;
    --field-xl-min: 250px;
    --field-xl-max: 400px;
    --field-2xl-min: 300px;
    --field-2xl-max: 480px;
    --field-3xl-min: 350px;
    --field-3xl-max: 560px;
    --field-4xl-min: 400px;
    --field-4xl-max: 640px;
    /* Punto de quiebre a partir del cual el formulario se apila en vertical.
   Por debajo de este ancho, cada .field ocupa el 100% del contenedor.
   640px es el ancho típico de un móvil en horizontal / tablet pequeña. */
    /*--field-breakpoint: 640px;*/
    --field-breakpoint: 900px;
    /* Ancho máximo opcional del contenedor de campos. Evita que un formulario
   se estire de borde a borde en monitores ultra anchos. Ponlo en "none"
   si prefieres que SIEMPRE ocupe el 100%. */
    --input-container-max: 1200px;
    --sep-radius: 0.75rem;
    --sep-padding: 20px 16px 14px 16px;
    --sep-margin: 20px 1px 10px 1px;
    --sep-gap: 10px;
}

[data-bs-theme="dark"] {
    /* Marca & Acentos (Modo Oscuro - Slate Moderno) */
    --primary: #3B82F6;
    --primary-hover: #2563EB;
    --secondary: #334155;
    --secondary-hover: #475569;
    --aura: rgba(59, 130, 246, 0.12);
    /* Superficies */
    --app-bg: #0F172A;
    --app-surface: #1E293B;
    --app-surface-muted: #334155;
    --app-border: #334155;
    --app-border-soft: #6c757d;
    /* Texto */
    --app-text: #F8FAFC;
    --app-text-muted: #94A3B8;
    --app-title: #E2E8F0;
    /* Inputs */
    --app-input-bg: #1e2832; /*26334D*/
    --app-input-bg-disabled: #344252; /* no editable #1E293B */
    --app-input-text-disabled: #F8FAFC; /* Texto tenue #64748B */
    --app-border-disabled: rgba(255, 255, 255, 0.05); /* Prácticamente sin borde */

    --app-input-text: #F8FAFC;
    /* Resaltado de totales */
    --app-highlight-bg: #0F172A;
    --app-highlight-text: #3B82F6;
    /* Header / Franja superior */
    --app-accent-bg: #020617;
    --app-accent-text: #F8FAFC;
    /* Shell de navegación */
    --app-sidebar-bg: #020617;
    --app-sidebar-bg-active: #0F172A;
    --app-sidebar-text: #F8FAFC;
    --app-sidebar-text-muted: #64748B;
    --app-sidebar-accent: #3B82F6;
    --app-sidebar-border: rgba(255, 255, 255, 0.06);
    --app-topbar-bg: #020617;
    --app-topbar-border: rgba(255, 255, 255, 0.08);
    --app-topbar-text: #F8FAFC;
    --app-topbar-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    --app-accordion-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F8FAFC'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --app-accordion-icon-active: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233B82F6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

body {
    background-color: var(--app-bg);
    color: var(--app-text);
}

h1:focus {
    outline: none;
}

/* =========================================================================
   VALIDACIÓN
   ========================================================================= */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #10B981;
}

.invalid {
    outline: 1px solid #EF4444;
}

.validation-message {
    color: #EF4444;
}

.second-element {
    display: none;
}

.first-element:empty + .second-element {
    display: inline;
}

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

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

.darker-border-checkbox.form-check-input {
    border-color: var(--app-border);
}

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

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

/* =========================================================================
   AUTOCOMPLETE (InputPersona / InputProducto)
   ========================================================================= */
.autocomplete {
    position: relative;
}

    .autocomplete .options {
        position: absolute;
        top: 65px;
        left: 0;
        background: var(--app-surface);
        color: var(--app-text);
        width: 80vw;
        min-width: 300px;
        max-width: 1000px;
        padding: 0;
        z-index: 10;
        border: 1px solid var(--app-border);
        border-radius: 0.5rem;
        box-shadow: 0 30px 25px -3px rgba(0, 0, 0, 0.1);
    }

    .autocomplete .option {
        display: block;
        padding: 0.5rem;
        width: 100%;
    }

        .autocomplete .option .option-text {
            padding: 0;
        }

        .autocomplete .option:hover {
            background: var(--primary);
            color: #FFFFFF;
        }

        .autocomplete .option.disabled {
            background-color: var(--app-surface-muted);
            color: var(--app-text-muted);
            cursor: not-allowed;
        }

            .autocomplete .option.disabled:hover {
                background: var(--app-surface-muted);
                color: var(--app-text-muted);
            }

/* =========================================================================
   TABLAS
   ========================================================================= */
table th {
    background-color: var(--app-surface-muted);
    color: var(--app-text);
    border-bottom: 2px solid var(--app-border);
}

.zebra-row:hover {
    background-color: var(--aura);
    cursor: pointer;
}

/* =========================================================================
   TABLA "APP-CUSTOM-TABLE"
   Para tablas HTML planas (sin la clase .table de Bootstrap) que quieras
   que se vean igual de integradas que el resto de la app: encabezado en
   el mismo tono que el topbar/sidebar, filas cebra sutiles y hover con
   el mismo tinte de acento que ya usa .zebra-row.
   Uso: <table class="app-custom-table"> ... </table>
   ========================================================================= */
.app-custom-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--app-border);
    border-radius: var(--sep-radius);
    overflow: visible;
    background-color: var(--app-surface);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

    .app-custom-table thead th {
        background-color: var(--app-topbar-bg);
        color: var(--app-topbar-text);
        text-align: left;
        font-weight: 700;
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--app-border);
        white-space: nowrap;
    }

    .app-custom-table tbody td {
        padding: 0.65rem 1rem;
        color: var(--app-text);
        border-bottom: 1px solid var(--app-border-soft);
        vertical-align: middle;
    }

    .app-custom-table tbody tr:nth-child(even) {
        background-color: var(--app-surface-muted);
    }

    .app-custom-table tbody tr:hover {
        background-color: var(--aura);
    }

    .app-custom-table tbody tr:last-child td {
        border-bottom: none;
    }

/* Si la tabla es muy ancha en pantallas chicas, envuélvela en
       <div class="app-custom-table-wrap">...</div> para que solo la tabla
       scrollee horizontal y no toda la página. */
.app-custom-table-wrap {
    width: 100%;
    overflow-x: auto;
}















/* =========================================================================
   CONTENEDORES DE CAMPOS (GRILLAS DE FORMULARIO)
   =========================================================================
   .input-container es el "carril" donde viven los .field.
   Su trabajo es:

   1. Poner los campos en fila (flex-direction: row por defecto).
   2. Permitir que salten de línea cuando no caben (flex-wrap: wrap).
      Esto es lo que produce el efecto "responsive sin media queries":
      si en desktop caben 3 y en tablet solo caben 2, el tercero
      automáticamente baja a una segunda fila.
   3. Separar los campos con un gap consistente (--sep-gap).
   4. Limitar su ancho total en pantallas enormes (--input-container-max)
      para que un formulario no se vea estirado en un monitor 4K.

   No impone tamaños a los hijos: eso es responsabilidad de .field-*.
   ========================================================================= */
.input-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start; /* los campos no se estiran en alto */
    gap: var(--sep-gap);
    width: 100%;
    /*max-width: var(--input-container-max);
    margin-inline: auto;*/ /* centrado si hay max-width activo */
}

/* Variante: fila que NO se centra, alineada a la izquierda.
   Útil cuando el formulario es parte de un layout más amplio. */
.input-container-start {
    margin-inline: 0;
}

/* Variante: forzar apilado vertical (columna) siempre, sin importar
   el ancho del viewport. Útil para formularios de configuración donde
   cada campo va en su propia línea aunque haya espacio. */
.input-container-stack {
    flex-direction: column;
    align-items: stretch;
}

/* =========================================================================
   ANCHOS ESTÁNDAR DE CAMPO
   =========================================================================
   CÓMO FUNCIONA EL SISTEMA
   ------------------------
   Cada .field define:
     - flex: 1 1 auto     → puede crecer y encogerse libremente.
     - min-width: X       → nunca por debajo de X.
     - max-width: Y       → nunca por encima de Y.

   Con esas tres reglas, el campo se adapta al espacio disponible
   dentro del rango [X, Y]. Si el contenedor es muy estrecho, el campo
   se encoge hasta X. Si es muy ancho, crece hasta Y. En el medio,
   se reparte el espacio con los demás campos de la fila.

   Combinado con .input-container (flex-wrap), esto produce:
     - Desktop ancho: fila con campos repartidos proporcionalmente.
     - Desktop angosto: los campos saltan de línea cuando no caben.
     - Móvil (< --field-breakpoint): todos al 100% (ver media query).

   DOS FAMILIAS DE CLASES
   ----------------------
   .field-{size}        → tamaño elástico (min + max). El campo puede
                          crecer y encogerse dentro del rango.
   .field-fixed-{size}  → tamaño rígido (width exacto). El campo mide
                          siempre lo mismo, sin importar el espacio.

   REGLA PRÁCTICA
   --------------
   - Usa .field-{size} para la mayoría de casos (inputs de formulario).
   - Usa .field-fixed-{size} solo cuando el tamaño deba ser EXACTO
     (ej. un input de código postal que siempre debe medir 100px).
   - Usa .field-full para ocupar el 100% de la línea.
   - Usa .field-fluid para ocupar el espacio sobrante de la fila.
   ========================================================================= */

/* -------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------
   Todos los .field comparten un comportamiento elástico base.
   Las clases .field-{size} añaden los límites concretos.

   IMPORTANTE: no definimos min-width ni max-width aquí. Eso lo hacen
   las clases .field-{size}. Un .field sin clase de tamaño podrá
   encogerse hasta 0 y crecer sin límite — es el comportamiento
   "flexible puro", útil como fallback.
   ------------------------------------------------------------------------- */
.field {
    flex: 1 1 auto;
    min-width: 0; /* permite encoger por debajo del contenido */
    max-width: none; /* sin techo por defecto */
    box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   TAMAÑOS ELÁSTICOS (min + max)
   -------------------------------------------------------------------------
   Cada clase establece un rango [min, max] vía los tokens definidos
   en :root. El campo se mueve dentro de ese rango según el espacio.

   Estos son los que usarás el 90% de las veces.
   ------------------------------------------------------------------------- */

/* Extra extra pequeño — ~100–140px
   Para: checkboxes, spinners numéricos cortos, indicadores de 1-2 dígitos. */
.field-2xs {
    min-width: var(--field-2xs-min);
    max-width: var(--field-2xs-max);
}

/* Extra pequeño — ~120–180px
   Para: códigos cortos, cantidades, años, monedas sin decimales largos. */
.field-xs {
    min-width: var(--field-xs-min);
    max-width: var(--field-xs-max);
}

/* Pequeño — ~140–220px
   Para: fechas, horas, teléfonos, documentos de identidad. */
.field-sm {
    min-width: var(--field-sm-min);
    max-width: var(--field-sm-max);
}

/* Medio — ~160–260px
   Para: el tamaño "default" de un input de texto normal. */
.field-md {
    min-width: var(--field-md-min);
    max-width: var(--field-md-max);
}

/* Grande — ~200–320px
   Para: nombres completos, direcciones cortas, emails. */
.field-lg {
    min-width: var(--field-lg-min);
    max-width: var(--field-lg-max);
}

/* Extra grande — ~250–400px
   Para: direcciones largas, descripciones breves. */
.field-xl {
    min-width: var(--field-xl-min);
    max-width: var(--field-xl-max);
}

/* Extra extra grande — ~300–480px
   Para: comentarios, notas. */
.field-2xl {
    min-width: var(--field-2xl-min);
    max-width: var(--field-2xl-max);
}

/* 3XL — ~350–560px
   Para: textos narrativos. */
.field-3xl {
    min-width: var(--field-3xl-min);
    max-width: var(--field-3xl-max);
}

/* 4XL — ~400–640px
   Reemplaza al antiguo .field-full (que era 400px fijos).
   Para: descripciones largas, campos de texto extendidos. */
.field-4xl {
    min-width: var(--field-4xl-min);
    max-width: var(--field-4xl-max);
}

/* -------------------------------------------------------------------------
   TAMAÑOS FIJOS (width exacto, sin elasticidad)
   -------------------------------------------------------------------------
   Estos campos NO crecen ni se encogen. Miden siempre lo mismo.
   Úsalos solo cuando el tamaño deba ser EXACTO e independiente del
   espacio disponible (ej. iconos, mini inputs de código, celdas
   numéricas de un grid).

   OJO: como no pueden encogerse, en un móvil muy estrecho pueden
   desbordar si su width > ancho de pantalla. Si ese es tu caso,
   reconsidera usar .field-{size} en su lugar.
   ------------------------------------------------------------------------- */
/*.field-fixed-2xs {
    width: var(--field-2xs-min);
    flex: 0 0 auto;
}

.field-fixed-xs {
    width: var(--field-xs-min);
    flex: 0 0 auto;
}

.field-fixed-sm {
    width: var(--field-sm-min);
    flex: 0 0 auto;
}

.field-fixed-md {
    width: var(--field-md-min);
    flex: 0 0 auto;
}

.field-fixed-lg {
    width: var(--field-lg-min);
    flex: 0 0 auto;
}

.field-fixed-xl {
    width: var(--field-xl-min);
    flex: 0 0 auto;
}

.field-fixed-2xl {
    width: var(--field-2xl-min);
    flex: 0 0 auto;
}

.field-fixed-3xl {
    width: var(--field-3xl-min);
    flex: 0 0 auto;
}

.field-fixed-4xl {
    width: var(--field-4xl-min);
    flex: 0 0 auto;
}
*/
/* 2. Permitir encogimiento en los field-fixed-* */
.field-fixed-2xs {
    width: var(--field-2xs-min);
    flex: 0 1 auto;
    min-width: 0;
}

.field-fixed-xs {
    width: var(--field-xs-min);
    flex: 0 1 auto;
    min-width: 0;
}

.field-fixed-sm {
    width: var(--field-sm-min);
    flex: 0 1 auto;
    min-width: 0;
}

.field-fixed-md {
    width: var(--field-md-min);
    flex: 0 1 auto;
    min-width: 0;
}

.field-fixed-lg {
    width: var(--field-lg-min);
    flex: 0 1 auto;
    min-width: 0;
}

.field-fixed-xl {
    width: var(--field-xl-min);
    flex: 0 1 auto;
    min-width: 0;
}

.field-fixed-2xl {
    width: var(--field-2xl-min);
    flex: 0 1 auto;
    min-width: 0;
}

.field-fixed-3xl {
    width: var(--field-3xl-min);
    flex: 0 1 auto;
    min-width: 0;
}

.field-fixed-4xl {
    width: var(--field-4xl-min);
    flex: 0 1 auto;
    min-width: 0;
}


/* -------------------------------------------------------------------------
   COMPORTAMIENTOS ESPECIALES
   ------------------------------------------------------------------------- */

/* .field-full — ocupa TODO el ancho de la línea.
   Fuerza al campo a saltar a su propia línea y ocuparla entera.
   Úsalo para: campos que deben ir solos (textarea de comentarios,
   dirección completa, cualquier cosa que quieras "a todo lo ancho"). */
.field-full {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* .field-fluid — ocupa el espacio SOBRANTE de la fila.
   No se limita a un tamaño concreto: crece para llenar lo que quede
   tras colocar los campos de tamaño fijo o con max.
   Útil cuando tienes una fila con campos pequeños + uno que "absorbe"
   el espacio restante. */
.field-fluid {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

/* .field-half / .field-third / .field-quarter — fracciones de la fila.
   Para layouts de columnas equilibradas (ej. dos campos al 50%). */
.field-half {
    flex: 1 1 50%;
    min-width: 0;
    max-width: 50%;
}

.field-third {
    flex: 1 1 33.3333%;
    min-width: 0;
    max-width: 33.3333%;
}

.field-quarter {
    flex: 1 1 25%;
    min-width: 0;
    max-width: 25%;
}

/* .field-min-0 — resetea el min-width al valor mínimo posible.
   Útil como modificador para forzar que un campo pueda encogerse
   por debajo de su tamaño estándar cuando hace falta (ej. dentro
   de un modal estrecho o una sidebar). */
.field-min-0 {
    min-width: 0;
}

/* .field-no-shrink — impide que el campo se encoja.
   Mantiene el min-width como si fuera un width mínimo real.
   Útil cuando hay un .field-fluid al lado que intenta comerse
   todo el espacio y no quieres que aplaste a este. */
.field-no-shrink {
    flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   ALINEACIÓN INTERNA (para campos compuestos)
   -------------------------------------------------------------------------
   .field-stack ya existía. Aquí se mantiene y se añaden variantes
   para controlar la alineación vertical de los hijos dentro del campo.
   ------------------------------------------------------------------------- */

/* Columna centrada — el comportamiento original. */
.field-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Columna estirada — los hijos ocupan todo el ancho del campo.
   Suele ser lo que quieres cuando dentro del .field hay un label
   arriba y un input abajo. */
.field-stack-stretch {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Fila — los hijos van uno al lado del otro (ej. input + botón). */
.field-inline {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

/* -------------------------------------------------------------------------
   RESET DE COMPORTAMIENTO BASE
   -------------------------------------------------------------------------
   .field-auto devuelve un .field a su comportamiento "natural" sin
   elasticidad: mide según su contenido. Útil para contenedores de
   botones, iconos o cualquier cosa que no deba estirarse.
   ------------------------------------------------------------------------- */
.field-auto {
    flex: 0 0 auto;
    min-width: auto;
    max-width: none;
}

/* =========================================================================
   CAMPOS "COMPACTOS" — parejas que deben mantenerse juntas
   =========================================================================
   .field-compact se comporta como un campo elástico pero:
   - Tiene un min-width muy pequeño, así que NUNCA fuerza el apilado.
   - No se estira al 100% en el media query de móvil.
   - Tiene un max-width razonable para que no crezca sin control.

   Pensado para pares como "Cantidad + Precio" que deben ir juntos
   incluso en pantallas medianas, y solo apilarse si no queda otra.
   ========================================================================= */
.field-compact {
    flex: 1 1 120px; /* puede crecer, pero base 120px */
    min-width: 100px; /* mínimo absoluto */
    max-width: 180px; /* techo razonable */
}

/* Excepción dentro de la media query de 900px:
   los .field-compact NO se apilan al 100% hasta que el contenedor
   sea realmente muy estrecho. Solo se apilan por debajo de 480px. */
@media (max-width: 900px) {
    .input-container > .field-compact {
        flex: 1 1 calc(50% - var(--sep-gap));
        max-width: calc(50% - var(--sep-gap));
        width: auto;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .input-container > .field-compact {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
    }
}


/* =========================================================================
   GRUPO COMPACTO — varios controles que deben viajar juntos
   =========================================================================
   .grupo-compacto es un contenedor flex que agrupa Cantidad + Precio +
   botón Agregar dentro de un único .field. Así, cuando la media query
   apila los hijos del .input-container, apila ESTE grupo como unidad,
   y los controles internos siguen su propio comportamiento:

   - Ancho: mientras quepan, quedan en una fila.
   - Si no caben, hacen wrap interno (flex-wrap: wrap).
   - Cada item tiene su propio tamaño; el botón no crece.
   ========================================================================= */
.grupo-compacto {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sep-gap);
    width: 100%;
    min-width: 0;
}

/* Cada item dentro del grupo es flexible pero acotado */
.grupo-item {
    flex: 1 1 120px;
    min-width: 100px;
    max-width: 180px;
    min-width: 0;
}

/* El botón no debe crecer ni encogerse */
.grupo-item-auto {
    flex: 0 0 auto;
    min-width: auto;
    max-width: none;
}



/* =========================================================================
   RESPONSIVE — COMPORTAMIENTO EN PANTALLAS PEQUEÑAS
   =========================================================================
   Por debajo de --field-breakpoint (640px), TODOS los campos dentro
   de un .input-container se apilan en columna y ocupan el 100% del
   ancho. Esto es lo que hace que el formulario sea usable en móvil:

   - Sin esto, un .field-4xl (400px mínimos) desbordaría un móvil
     de 320px de ancho.
   - Sin esto, los campos se quedarían con sus min-widths y no
     aprovecharían el ancho completo del móvil.

   Se usa :where() para que la especificidad sea 0 y así cualquier
   clase .field-* concreta pueda sobrescribir si hace falta. Aun así,
   dentro del media query las reglas ganan por orden de aparición
   frente a las .field-* definidas arriba.

   IMPORTANTE: se resetea min-width a 0 porque si no, los .field-*
   conservarían su mínimo (ej. 400px) y volveríamos al desborde.
   ========================================================================= */
/*@media (max-width: 640px) {
    .input-container {
        flex-direction: column;
        align-items: stretch;
    }*/

        /* Todos los hijos directos que sean .field se apilan al 100%,
       independientemente de la clase de tamaño que tengan. */
        /*.input-container > .field,
        .input-container > .field-2xs,
        .input-container > .field-xs,
        .input-container > .field-sm,
        .input-container > .field-md,
        .input-container > .field-lg,
        .input-container > .field-xl,
        .input-container > .field-2xl,
        .input-container > .field-3xl,
        .input-container > .field-4xl {
            flex: 1 1 100%;
            width: 100%;
            min-width: 0;
            max-width: 100%;
        }*/

        /* Los .field-fixed-* también se apilan, pero mantienen su ancho
       fijo SOLO si cabe. Si no cabe, se fuerza al 100% para evitar
       desborde horizontal. */
        /*.input-container > .field-fixed-2xs,
        .input-container > .field-fixed-xs,
        .input-container > .field-fixed-sm,
        .input-container > .field-fixed-md,
        .input-container > .field-fixed-lg,
        .input-container > .field-fixed-xl,
        .input-container > .field-fixed-2xl,
        .input-container > .field-fixed-3xl,
        .input-container > .field-fixed-4xl {
            flex: 1 1 100%;
            width: 100%;
            min-width: 0;
            max-width: 100%;
        }*/

        /* Las fracciones (half/third/quarter) también se van al 100%
       en móvil, porque partir una pantalla de 320px en 3 no tiene
       sentido. */
        /*.input-container > .field-half,
        .input-container > .field-third,
        .input-container > .field-quarter {
            flex: 1 1 100%;
            max-width: 100%;
        }
}*/








/* 3. Media query con el nuevo breakpoint */
@media (max-width: 900px) {
    .input-container {
        flex-direction: column;
        align-items: stretch;
    }

        .input-container > .field,
        .input-container > .field-2xs, .input-container > .field-xs,
        .input-container > .field-sm, .input-container > .field-md,
        .input-container > .field-lg, .input-container > .field-xl,
        .input-container > .field-2xl, .input-container > .field-3xl,
        .input-container > .field-4xl,
        .input-container > .field-fixed-2xs, .input-container > .field-fixed-xs,
        .input-container > .field-fixed-sm, .input-container > .field-fixed-md,
        .input-container > .field-fixed-lg, .input-container > .field-fixed-xl,
        .input-container > .field-fixed-2xl, .input-container > .field-fixed-3xl,
        .input-container > .field-fixed-4xl,
        .input-container > .field-half, .input-container > .field-third,
        .input-container > .field-quarter {
            flex: 1 1 100%;
            width: 100%;
            min-width: 0;
            max-width: 100%;
        }
}










































/* =========================================================================
   SEPARADORES DE SECCIÓN
   ========================================================================= */
.separador-grupo {
    border: 1px solid var(--app-border);
    border-radius: var(--sep-radius);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    background-color: var(--app-surface);
    width: 100%;
    padding: var(--sep-padding);
    margin: var(--sep-margin);
}

.font-titulo-separador {
    font-family: inherit;
    color: var(--app-title);
    font-weight: 600;
}










/* =========================================================================
   CAMPOS DE SOLO LECTURA
   ========================================================================= */
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--app-input-bg-disabled);
    color: var(--app-text-muted);
    border-color: var(--app-border-soft);
    opacity: 1;
}

/* =========================================================================
   TOTALES DESTACADOS
   ========================================================================= */
.total-highlight {
    background-color: var(--app-highlight-bg) !important;
    color: var(--app-highlight-text) !important;
    font-weight: 600;
}

/* =========================================================================
   ACCORDION / CARD / ALERT (Bootstrap)
   Antes solo el <Accordion> del sidebar estaba retematizado (con las
   variables --bs-accordion-* forzadas dentro de .auto-hiding-nav-menu).
   Cualquier otro <Accordion>, <Card> o alert-info del contenido (p.ej.
   la página Home) seguía usando los valores de fábrica de Bootstrap:
   bordes gruesos y el verde-azulado típico de alert-info. Con esto,
   toda la app comparte el mismo lenguaje visual sin repetir clases.
   ========================================================================= */
.accordion {
    --bs-accordion-bg: var(--app-surface);
    --bs-accordion-color: var(--app-text);
    --bs-accordion-border-color: var(--app-border);
    --bs-accordion-border-width: 1px;
    --bs-accordion-border-radius: var(--sep-radius);
    --bs-accordion-inner-border-radius: calc(var(--sep-radius) - 1px);
    --bs-accordion-btn-color: var(--app-text);
    --bs-accordion-btn-bg: var(--app-surface);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-btn-icon: var(--app-accordion-icon);
    --bs-accordion-btn-active-icon: var(--app-accordion-icon-active);
    --bs-accordion-active-color: var(--app-sidebar-accent);
    --bs-accordion-active-bg: var(--app-surface-muted);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 0.75rem;
    border-radius: var(--sep-radius);
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

.card {
    --bs-card-bg: var(--app-surface);
    --bs-card-border-color: var(--app-border);
    --bs-card-color: var(--app-text);
    border-radius: var(--sep-radius);
}

/* Usada en Home.razor (class="card h-100 hover-shadow"): estaba referenciada
   en el markup pero sin ninguna regla que la respalde, así que no hacía
   nada al pasar el mouse. Ahora sí tiene una transición sutil. */
.hover-shadow {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

    .hover-shadow:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
        border-color: var(--app-sidebar-accent) !important;
    }

/* alert-info de Bootstrap venía con su verde-azulado de fábrica (ver
   "Empresa actual" en el Home). Lo llevamos a la misma superficie que
   usa el resto de la app. */
.alert-info {
    --bs-alert-bg: var(--app-surface);
    --bs-alert-border-color: var(--app-border);
    --bs-alert-color: var(--app-text);
    border-radius: var(--sep-radius);
}


/* =========================================================================
   MODAL (Bootstrap / Blazor.Bootstrap <Modal>)
   Bootstrap declara --bs-modal-bg, --bs-modal-color, etc. sobre
   .modal-content (no sobre :root), por eso hay que redeclararlas ahí
   para que el modal use nuestros tokens en vez de los blancos/negros
   de fábrica. Mismo patrón que .accordion/.card/.alert-info.
   ========================================================================= */
.modal-content {
    --bs-modal-bg: var(--app-surface);
    --bs-modal-color: var(--app-text);
    --bs-modal-border-color: var(--app-border);
    --bs-modal-border-radius: var(--sep-radius);
    --bs-modal-header-border-color: var(--app-border-soft);
    --bs-modal-footer-border-color: var(--app-border-soft);
    --bs-modal-box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.modal-header .btn-close {
    /* Bootstrap ya invierte el ícono automáticamente en [data-bs-theme="dark"];
       esto solo asegura buen contraste si el modal se usa sobre un fondo
       que no coincide 1:1 con el tema global. */
    opacity: 0.75;
}

    .modal-header .btn-close:hover {
        opacity: 1;
    }

/* =========================================================================
   DROPDOWN (Bootstrap .dropdown-menu)
   Igual que el modal: Bootstrap declara --bs-dropdown-* sobre
   .dropdown-menu, no sobre :root. Esto también alcanza al menú del
   propio <ThemeSwitcherHost> (es un .dropdown de Bootstrap) y a
   cualquier otro menú/desplegable que uses en la app.
   ========================================================================= */
.dropdown-menu {
    --bs-dropdown-bg: var(--app-surface);
    --bs-dropdown-color: var(--app-text);
    --bs-dropdown-border-color: var(--app-border);
    --bs-dropdown-border-radius: 0.5rem;
    --bs-dropdown-box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.2);
    --bs-dropdown-divider-bg: var(--app-border-soft);
    --bs-dropdown-header-color: var(--app-text-muted);
    --bs-dropdown-link-color: var(--app-text);
    --bs-dropdown-link-hover-color: var(--app-text);
    --bs-dropdown-link-hover-bg: var(--app-surface-muted);
    --bs-dropdown-link-active-color: #FFFFFF;
    --bs-dropdown-link-active-bg: var(--primary);
    --bs-dropdown-link-disabled-color: var(--app-text-muted);
}

/* =========================================================================
   VARIOS
   ========================================================================= */
.toast {
    background-color: var(--app-surface);
    color: var(--app-text);
    border: 1px solid var(--app-border-soft);
}

.tituloEmpresaPage {
    margin: 0;
    border: 1px solid var(--app-border-soft);
    border-radius: 999px;
    padding: 6px 14px;
    background-color: var(--app-surface-muted);
    color: var(--app-topbar-text);
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

/* Barra flotante y transparente que va sobre el topbar (p.ej. el
   nombre de empresa + botón de engranaje en la cabecera de una página) */
.page-header-overlay {
    z-index: 10;
    background-color: transparent;
    position: absolute;
    top: 0;
    right: 36px;
}


.centered-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.button-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.left-buttons,
.right-buttons {
    display: flex;
    gap: 10px;
}

#no-recaptcha-page ~ .grecaptcha-badge,
.grecaptcha-badge {
    visibility: hidden;
}

.label-fileinput {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--app-border);
    background-color: var(--app-surface-muted);
    border-radius: 0.375rem;
    cursor: pointer;
    color: var(--app-text);
}

    .label-fileinput:hover {
        background-color: var(--secondary-hover);
    }

.custom-input-hide {
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Mapear variables personalizadas a controles de Bootstrap */
.form-control,
.form-select {
    background-color: var(--app-input-bg) !important;
    color: var(--app-input-text) !important;
    border-color: var(--app-border) !important;
}

    /* Opciones dentro del dropdown del select */
    .form-select option {
        background-color: var(--app-surface);
        color: var(--app-text);
    }


    /* Estilos obligatorios para campos No Editables (disabled / readonly) */
    .form-control:disabled,
    .form-control[readonly],
    .form-select:disabled,
    .form-select[readonly] {
        background-color: var(--app-input-bg-disabled) !important;
        color: var(--app-input-text-disabled) !important;
        border-color: var(--app-border-disabled) !important;
        cursor: not-allowed;
        opacity: 0.85; /* Reduce la presencia del campo */
        box-shadow: none !important;
    }

/* Si usas form-floating, oscurece también la etiqueta (Label) del campo deshabilitado */
.form-floating > .form-control:disabled ~ label,
.form-floating > .form-control[readonly] ~ label,
.form-floating > .form-select:disabled ~ label {
    color: var(--app-input-text-disabled) !important;
    opacity: 0.7;
}

/* Eliminar el borde verde de focus en fechas si no son editables */
.form-control[readonly]:focus,
.form-control:disabled:focus {
    border-color: var(--app-border-disabled) !important;
    box-shadow: none !important;
}



/* Mapear variables personalizadas a controles de Bootstrap */
.form-control,
.form-select,
.input-group-text {
    background-color: var(--app-input-bg) !important;
    color: var(--app-input-text) !important;
    border-color: var(--app-border) !important;
}

/* Opcional: si deseas que el 'Buscar' tenga un fondo ligeramente distinto al del input (más sutíl) */
.input-group-text {
    background-color: var(--app-surface-muted) !important;
    color: var(--app-text-muted) !important;
}



/* =========================================================================
   CONTENIDO DE COMPONENTES (Content de Blazor Bootstrap)
   =========================================================================
   Blazor Bootstrap no expone un parámetro "Class" para el <Content> de
   componentes como Accordion o Card. La única forma limpia de estilizarlo
   sin tocar el markup es aplicarle la clase desde el elemento contenedor
   que sí controlamos, o usar el atributo class directamente si el
   componente lo renderiza en un <div> contenedor.

   Esta clase aplica un margen vertical de 10px arriba y abajo.
   ========================================================================= */
.content-spacer {
    margin: 10px 0;
}


/* =========================================================================
   FONDO DE EMPRESA
   ========================================================================= */
.select-empresa {
    background-color: #198754 !important;
    color: white !important;
    border-color: #198754 !important;
}