@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');/* =========================
   TOKENS / VARIABLES
   ========================= */
:root {
    /* Bootstrap-ish */
    --bs-primary: #0ea5e9;
    --bs-primary-rgb: 14,165,233;
    --bs-body-bg: #ffffff;
    --bs-body-color: #0f172a;
    /* Títulos */
    --it-title: #0f172a;
    --it-subtitle: #475569;
    /* Sidebar */
    --sidebar-bg: #fff;
    --sidebar-fg: #0f172a;
    --sidebar-hover: #f1f5f9;
    --sidebar-active: #e2e8f0;
    --sidebar-border: #e5e7eb;
    /* UI general */
    --azul: #2b6de0;
    --azul-osc: #245fca;
    --gris-az: #475569;
    --gris-az-bg: #eef2f7;
    --borde: #d6d6d6;
    --rojo: #dc2626;
    --rojo-osc: #b91c1c;
    /* Banda superior */
    --band-bg: #f3f6fb;
    --band-border: rgba(15, 23, 42, .06);
    /* Compact system */
    --it-font-base: 14px;
    --it-font-control: 13px;
    --it-label: 12px;
    --it-control-h: 30px;
    --it-pad-y: 4px;
    --it-pad-x: 10px;
    --it-radius: 8px;
    --it-textarea-min: 70px;
    /* Botones pro */
    --it-primary: #2b6de0;
    --it-primary-osc: #245fca;
    --it-info: #0ea5e9;
    --it-info-osc: #0284c7;
    --it-danger: #dc2626;
    --it-danger-osc: #b91c1c;
    --it-neutral: #475569;
    --it-neutral-bg: #f1f5f9;
    --it-border: rgba(15,23,42,.14);
    /* Cards */
    --it-card-border: rgba(15, 23, 42, 0.08);
    --it-card-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}
/* =========================
   BASE
   ========================= */
html, body {
    font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}
html {
    font-size: var(--it-font-base);
}

body {
    font-size: var(--it-font-base);
}

a, .btn-link {
    color: inherit;
    text-decoration: none;
}

    a:hover, .btn-link:hover {
        color: #0f172a;
    }

/* Bootstrap primary */
.btn-primary {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

    .btn-primary:hover {
        filter: brightness(.95);
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
    }

.btn-outline-primary {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

    .btn-outline-primary:hover {
        color: #fff;
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
    }

/* Focus ring */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .1rem #ffffff, 0 0 0 .25rem rgba(var(--bs-primary-rgb), .35);
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

/* =========================
   BLAZOR ERROR UI
   ========================= */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

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

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

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

/* =========================
   SIDEBAR (básico)
   ========================= */
.marca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    padding: 10px 12px;
    margin-bottom: 6px;
}

.toggle {
    background: transparent;
    border: none;
    color: var(--sidebar-fg);
    font-size: 1.1rem;
}

.bi {
    font-size: 1rem;
}

/* =========================
   LAYOUT: CONTENEDORES
   ========================= */
.main-container {
    max-width: none; /* <-- clave: que NO se centre */
    margin: 0; /* <-- fuera auto */
    padding: 0 18px;
}


@media (max-width: 720px) {
    .main-container {
        padding: 0 12px;
    }
}

/* =========================
   TOP BAR (BANDA + TOPBAR)
   ========================= */
.topbar-band {
    width: 100%;
    background: var(--band-bg);
    border-bottom: 1px solid var(--band-border);
    padding: 4px 0;
    margin-bottom: 8px;
}

.topbar {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 2px 0;
    margin: 0;
}

.topbar-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.topbar-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--it-title);
    letter-spacing: 0;
}

.topbar-sub {
    font-size: 11px;
    line-height: 1.2;
    color: var(--it-subtitle);
    margin-top: 2px;
}

.topbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.topbar-user {
    font-size: 11px;
    opacity: .85;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .topbar-band {
        padding: 4px 0;
        margin-bottom: 8px;
    }

    .topbar-title {
        font-size: 14px;
    }

    .topbar-sub {
        font-size: 10px;
    }

    .topbar-user {
        font-size: 10px;
    }
}

/* =========================
   FORMS / GRIDS (tuyos)
   ========================= */
.form-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    margin: 10px 0;
}

@media (min-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .campo-full {
        grid-column: 1 / -1;
    }
}

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

.textarea {
    min-height: 90px;
}

.acciones {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}


.page-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--it-title);
    line-height: 1.15;
    letter-spacing: 0;
    margin-bottom: 20px;

}

.page-sub {
    color: var(--it-subtitle);
    font-size: 13px;
    margin-top: 6px;
    opacity: 1;

}

.bloque-titulo {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--it-title);
}

/* =========================
   Tabs
   ========================= */
.tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0 10px;
}

.tab {
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid #cfd8e3;
    background: var(--gris-az-bg);
    color: var(--gris-az);
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
}

    .tab:hover {
        background: #e6edf6;
        border-color: #b9c7da;
    }

    .tab.on {
        background: #dbe7f6;
        border-color: #9fb7dc;
        color: #1f3b66;
    }

/* =========================
   Error box
   ========================= */
.error {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #f0caca;
    border-radius: 10px;
}



/* =========================
   Typeahead dropdown
   ========================= */
.typeahead {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.typeahead-item {
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
}

    .typeahead-item:hover {
        background: rgba(43,109,224,.06);
    }

.search-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.search-wrap {
    position: relative;
    display: inline-block;
}

.input.search-input {
    width: clamp(260px, 45vw, 520px);
    max-width: 520px;
}

/* =========================
   Icon buttons
   ========================= */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 7px;
    border: 1px solid var(--borde);
    background: #fff;
    cursor: pointer;
    line-height: 1;
}

    .icon-btn i.bi {
        font-size: 12px;
    }

    .icon-btn:hover {
        background: #fafafa;
        border-color: #bdbdbd;
    }

    .icon-btn:disabled {
        opacity: .6;
        cursor: not-allowed;
    }

    .icon-btn.edit {
        border-color: rgba(43,109,224,.35);
        color: var(--azul);
    }

        .icon-btn.edit:hover {
            background: rgba(43,109,224,.08);
        }

    .icon-btn.delete {
        border-color: rgba(220,38,38,.35);
        color: var(--rojo);
    }

        .icon-btn.delete:hover {
            background: rgba(220,38,38,.08);
            border-color: rgba(185,28,28,.55);
            color: var(--rojo-osc);
        }

    .icon-btn.print {
        border-color: rgba(71,85,105,.35);
        color: #334155;
    }

        .icon-btn.print:hover {
            background: rgba(71,85,105,.08);
        }

/* =========================
   Modal confirmación
   ========================= */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 2000;
}

.modal-card {
    width: min(520px, 100%);
    background: #fff;
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

.modal-title {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 8px;
}

.modal-text {
    font-size: 13px;
    opacity: .9;
    line-height: 1.3;
}

.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
    flex-wrap: wrap;
}
/* =========================
   PANELS / CARDS (reutilizable)
   ========================= */
.it-card {
    border: 1px solid rgba(15,23,42,.12);
    background: rgba(15,23,42,.03);
    border-radius: 12px;
    padding: 14px;
}

.it-card-title {
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 10px;
    color: rgba(15,23,42,.75);
}

/* ayuda visual para formularios */
.it-card label {
    font-weight: 650;
    opacity: .85;
}
/* =========================
   FORM GRID COMPACTO (reutilizable)
   ========================= */
.it-form {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}
/* desktop: 12 columnas "tipo bootstrap", pero más control */
@media (min-width: 992px) {
    .it-form {
        grid-template-columns: repeat(12, 1fr);
    }
}
/* helpers para spans */
.it-span-2 {grid-column: span 2;}
.it-span-3 {grid-column: span 3;}
.it-span-4 {grid-column: span 4;}
.it-span-5 {grid-column: span 5;}
.it-span-6 {grid-column: span 6;}
.it-span-7 {grid-column: span 7;}
.it-span-8 {grid-column: span 8;}
.it-span-12 {grid-column: span 12;}
/* field wrapper */
.it-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.it-actions {
    display: flex;
    justify-content: flex-end;

}

/* =====================================================
   COMPACT CONTROLS (GLOBAL DEFINITIVO)
   - Esto es lo ÚNICO que debe "mandar" sobre alturas
   ===================================================== */

/* Labels */
label, .form-label {
    font-size: var(--it-label) !important;
    margin-bottom: 3px !important;
}

/* Bootstrap controls */
.form-control, .form-select {
    height: var(--it-control-h) !important;
    min-height: var(--it-control-h) !important;
    padding: var(--it-pad-y) var(--it-pad-x) !important;
    font-size: var(--it-font-control) !important;
    line-height: 1.15 !important;
    border-radius: var(--it-radius) !important;
}

/* Date/time: suelen venir más altos */
input.form-control[type="date"],
input.form-control[type="time"],
input.form-control[type="datetime-local"] {
    height: var(--it-control-h) !important;
    min-height: var(--it-control-h) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: var(--it-control-h) !important;
}

/* Textarea */
textarea.form-control {
    height: auto !important;
    min-height: var(--it-textarea-min) !important;
    padding: 6px var(--it-pad-x) !important;
    font-size: var(--it-font-control) !important;
    line-height: 1.2 !important;
    border-radius: var(--it-radius) !important;
}

/* Botones (bootstrap y tuyos) */
.btn, .btn-primary, .btn-outline-primary, button.btn {
    min-height: var(--it-control-h) !important;
    padding: var(--it-pad-y) var(--it-pad-x) !important;
    font-size: var(--it-font-control) !important;
    line-height: 1.15 !important;
    border-radius: var(--it-radius) !important;
}

/* Tus controles custom */
.input, select, .textarea {
    min-height: var(--it-control-h) !important;
    padding: var(--it-pad-y) var(--it-pad-x) !important;
    font-size: var(--it-font-control) !important;
    line-height: 1.15 !important;
    border-radius: var(--it-radius) !important;
}

.textarea {
    height: auto !important;
    min-height: var(--it-textarea-min) !important;
    padding: 6px var(--it-pad-x) !important;
    line-height: 1.2 !important;
}
/* Campos técnicos (IDs) */
/* Campos técnicos (IDs) */
.it-tech label {
    font-size: 11px;
    opacity: .65;
}

.it-tech input {
    background: #fafafa;
}

/* Botón principal del formulario (más ancho visual) */
.it-actions > .btn.btn-primary {
    padding-left: 22px !important;
    padding-right: 22px !important;
    min-width: 160px !important;
}

/* Wrapper para formularios centrados (por pantalla)
   - Centra por defecto cuando hay max-width (it-w-*)
   - Permite mover ligeramente con --it-x */
.it-form-wrap {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(var(--it-x, 0px)); /* opcional */
}

/* Anchos típicos para formularios */
.it-w-640 {
    max-width: 640px;
}

.it-w-760 {
    max-width: 760px;
}

.it-w-900 {
    max-width: 900px;
}

.it-w-1100 {
    max-width: 1100px;
}
/* layout general */
.page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 12px; /* opcional: un poco de aire lateral */
}

/* ===== CATÁLOGO ===== */
/* GRID PRINCIPAL */
.catalogo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(320px, 1fr));
    gap: 18px;
    align-items: start;
}

/* Cada columna ahora tiene 2 bloques: (1) card elevada (2) panel plano */
.catalogo-col {
    display: flex;
    flex-direction: column;
    gap: 10px; /* separación entre el bloque con sombra y el plano */
}

/* Base de tarjeta */
.catalogo-card {
    background: #fff;
    border-radius: 14px;
    padding: 14px;
}

/* Parte elevada (form + botones): sombra */
.catalogo-card--elevada {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

/* Parte plana (tabla): sin sombra, borde suave */
.catalogo-card--plana {
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 10px;
}


/* Formularios (si ya los tienes, conserva lo tuyo; esto no debería romper) */
.catalogo-form {
    display: grid;
    gap: 10px;
}

.campo label {
    display: block;
    font-size: 12px;
    opacity: 0.8;
    margin-bottom: 4px;
}

.campo-full {
    grid-column: 1 / -1;
}

.input {
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.12);
    outline: none;
    box-sizing: border-box;
    background: #fff;
}

.input-sm {
    padding: 7px 10px;
}

/* Acciones */
.acciones {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Botones (si ya tienes estilos, puedes omitir esto) */
.btn {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.12);
    background: #fff;
    cursor: pointer;
}

.btn-principal {
    border: 0;
    color: #fff;
    background: #111;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Tabla */

/* Responsive: 2 columnas / 1 columna */
@media (max-width: 1100px) {
    .catalogo-grid {
        grid-template-columns: repeat(2, minmax(320px, 1fr));
    }
}

@media (max-width: 720px) {
    .catalogo-grid {
        grid-template-columns: 1fr;
    }
}
/* Fuerza las fechas en 2 columnas dentro del formulario */
.catalogo-form-temporadas .fila-fechas {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100%;
}

    /* Evita que algo las “rompa” a ancho completo */
    .catalogo-form-temporadas .fila-fechas > .campo {
        grid-column: auto !important;
        min-width: 0;
    }

    /* Inputs más compactos */
    .catalogo-form-temporadas .fila-fechas .input {
        width: 100%;
    }

        .catalogo-form-temporadas .fila-fechas .input.input-sm {
            padding: 6px 10px;
            font-size: 13px;
        }
/* Categorías coche: 2 filas */
.catalogo-form-categorias .fila-cat {
    display: grid;
    gap: 10px;
    width: 100%;
}

/* Fila 1: Código pequeño + Nombre grande */
.catalogo-form-categorias .fila-cat-1 {
    grid-template-columns: 110px 1fr;
}

/* Fila 2: Plazas + ACRISS */
.catalogo-form-categorias .fila-cat-2 {
    grid-template-columns: 1fr 1fr;
}

/* Evita desbordes */
.catalogo-form-categorias .fila-cat > .campo {
    min-width: 0;
}

.catalogo-form-categorias .fila-cat .input {
    width: 100%;
}
/* Tarifas: 2 filas */
.catalogo-form-tarifas .fila-tar {
    display: grid;
    gap: 10px;
    width: 100%;
}

/* Fila 1: Categoría grande + Moneda pequeña */
.catalogo-form-tarifas .fila-tar-1 {
    grid-template-columns: 1fr 120px;
}

/* Fila 2: Temporada grande + Precio/día pequeño */
.catalogo-form-tarifas .fila-tar-2 {
    grid-template-columns: 1fr 140px;
}

.catalogo-form-tarifas .fila-tar > .campo {
    min-width: 0;
}

.catalogo-form-tarifas .fila-tar .input {
    width: 100%;
}
/* Grid específico del bloque Coche */
.coche-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 12px;
    width: 100%;
}

/* En móvil: 1 columna */
@media (max-width: 720px) {
    .coche-grid {
        grid-template-columns: 1fr;
    }
}
.hotel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 12px;
    width: 100%;
}

@media (max-width:720px) {
    .hotel-grid {
        grid-template-columns: 1fr;
    }
}
/* Tabs pro tipo chip */
.tabs-pro {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

    .tabs-pro .tab {
        border: 1px solid #e6e6e6;
        background: #fff;
        padding: 8px 14px;
        border-radius: 999px;
        font-weight: 700;
        cursor: pointer;
        transition: all .15s ease;
    }

        .tabs-pro .tab.on {
            background: #111;
            color: #fff;
            border-color: #111;
        }

        .tabs-pro .tab:hover {
            transform: translateY(-1px);
        }

/* Form hotel: 2 filas pro */
.catalogo-form-hotel .fila-hotel {
    display: grid;
    gap: 12px;
    align-items: end;
}

.catalogo-form-hotel .fila-hotel-1 {
    grid-template-columns: .8fr 1.2fr; /* Temporada más estrecha, Hotel más ancho */
}

.catalogo-form-hotel .fila-hotel-2 {
    grid-template-columns: 1.1fr .9fr .6fr; /* Tipo | Precio | Moneda */
}

/* móvil */
@media (max-width: 820px) {
    .catalogo-form-hotel .fila-hotel-1,
    .catalogo-form-hotel .fila-hotel-2 {
        grid-template-columns: 1fr;
    }
}
/* =====================================================
   BOTONES "PRO" (GLOBAL) - SIN MOVIMIENTO
   - Pegar al FINAL del CSS global
   ===================================================== */

/* Base común */
.btn-pro {
    border: 1px solid var(--it-border);
    background: #fff;
    color: #0f172a;
    font-weight: 700;
    transition: background .12s ease, border-color .12s ease, filter .12s ease, color .12s ease;
}

    .btn-pro:disabled {
        opacity: .6;
    }

/* ===== Tipos ===== */

/* Crear / Guardar / Aplicar (AZUL) */
.btn-add {
    background: var(--it-primary) !important;
    border: 1px solid var(--it-primary) !important;
    color: #fff !important;
}

    .btn-add:hover,
    .btn-add:focus,
    .btn-add:active {
        background: var(--it-primary-osc) !important;
        border-color: var(--it-primary-osc) !important;
        color: #fff !important;
    }

/* Buscar / Info (azul claro) */
.btn-search {
    background: var(--it-info) !important;
    border: 1px solid var(--it-info) !important;
    color: #fff !important;
}

    .btn-search:hover,
    .btn-search:focus,
    .btn-search:active {
        background: var(--it-info-osc) !important;
        border-color: var(--it-info-osc) !important;
        color: #fff !important;
    }/* Recargar / Secundario (gris suave) */
.btn-refresh {
    background: var(--it-neutral-bg);
    border-color: rgba(71,85,105,.25);
    color: var(--it-neutral);
}

    .btn-refresh:hover {
        filter: brightness(.98);
        border-color: rgba(71,85,105,.35);
    }

/* Editar (outline azul) */
.btn-edit {
    background: #fff;
    border-color: rgba(43,109,224,.45);
    color: var(--it-primary);
}

    .btn-edit:hover {
        background: rgba(43,109,224,.08);
        border-color: rgba(43,109,224,.65);
    }

/* BOTÓN CANCELAR  
   ========================= */
.btn-cancel {
    background: #eef2f7 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
    font-weight: 700;
}

    .btn-cancel:hover {
        background: #e2e8f0 !important;
        border-color: #94a3b8 !important;
        color: #1e293b !important;
    }

    .btn-cancel:disabled {
        opacity: .65;
        cursor: not-allowed;
    }/* Eliminar (ROJO) */
.btn-danger-pro {
    background: var(--it-danger);
    border-color: var(--it-danger);
    color: #fff;
}

    .btn-danger-pro:hover {
        background: var(--it-danger-osc);
        border-color: var(--it-danger-osc);
    }

/* (Opcional) títulos con acento sutil */
.bloque-titulo::before {
    background: rgba(43,109,224,.35);
}

/* =========================
   FORMULARIOS PRINCIPALES GLOBALES
   ========================= */

.it-form-card {
    max-width: 920px;
    margin: 24px auto 0;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: #fff;
    padding: 24px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

.it-form-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

    .it-form-grid .fila {
        display: grid;
        gap: 16px;
        align-items: end;
    }

    .it-form-grid .fila-2 {
        grid-template-columns: 170px 1fr;
    }

    .it-form-grid .fila-3 {
        grid-template-columns: 140px 140px 140px;
    }

    .it-form-grid .fila-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .it-form-grid .fila-6 {
        grid-template-columns: 90px 90px 110px 120px 150px 180px;
    }

.it-form-card .campo-codigo .input {
    max-width: 170px;
}

.it-form-card .campo-moneda .input,
.it-form-card .campo-numero .input {
    max-width: 140px;
}

.it-form-card .campo-estado .input,
.it-form-card .campo-estado select {
    max-width: 180px;
}

.it-form-card .textarea {
    min-height: 100px !important;
}

.it-form-acciones {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    align-items: center;
}

@media (max-width: 768px) {
    .it-form-card {
        padding: 18px;
        margin-top: 16px;
    }

    .it-form-grid .fila-2,
    .it-form-grid .fila-3,
    .it-form-grid .fila-5,
    .it-form-grid .fila-6 {
        grid-template-columns: 1fr;
    }

    .it-form-card .campo-codigo .input,
    .it-form-card .campo-moneda .input,
    .it-form-card .campo-numero .input,
    .it-form-card .campo-estado .input,
    .it-form-card .campo-estado select {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .nuevo-form {
        padding: 18px;
        margin-top: 16px;
    }

        .nuevo-form .fila-2,
        .nuevo-form .fila-3,
        .nuevo-form .fila-6 {
            grid-template-columns: 1fr;
        }

        .nuevo-form .campo-codigo .input,
        .nuevo-form .campo-moneda .input,
        .nuevo-form .campo-numero .input,
        .nuevo-form .campo-estado .input,
        .nuevo-form .campo-estado select {
            max-width: 100%;
        }
}
.page-card {
    width: 100%;
    background: #fff;
}
/* =========================
   BOTÓN ACCIÓN PRINCIPAL
   Nuevo / Crear / Guardar / Aceptar / Añadir
   ========================= */
.btn-accion-principal {
    min-width: auto;
    background: #2b6de0 !important;
    border-color: #2b6de0 !important;
    color: #ffffff !important;
    font-weight: 700;
    padding-left: 16px !important;
    padding-right: 16px !important;
}
    .btn-accion-principal:hover {
        background: #245fca !important;
        border-color: #245fca !important;
        color: #ffffff !important;
    }

    .btn-accion-principal:disabled {
        opacity: .65;
        cursor: not-allowed;
    }
.td-acciones {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}
.it-card-page {
    width: 100%;
    border: 1px solid var(--it-card-border);
    border-radius: 16px;
    background: #fff;
    padding: 22px;
    box-shadow: var(--it-card-shadow);
    margin-top: 18px;
}

.it-card-soft {
    border: 1px solid var(--it-card-border);
    border-radius: 14px;
    background: #fff;
    padding: 16px;
}
.it-card-form {
    width: min(1120px, 100%);
    margin: 18px auto 0 auto !important;
}
@media (max-width: 768px) {
    .it-card-page {
        padding: 18px;
        margin-top: 14px;
    }
}
/* =========================
   FORM LAYOUT GLOBAL
   ========================= */

.it-form-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.it-row {
    display: grid;
    gap: 16px;
    align-items: end;
}

.it-row-2 {
    grid-template-columns: 180px 1fr;
}

.it-row-3 {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
}

.it-row-4 {
    grid-template-columns: repeat(4, minmax(140px, 1fr));
}
.it-row-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.it-row-6 {
    grid-template-columns: 90px 90px 110px 120px 150px 180px;
}

.it-w-codigo .input {
    max-width: 180px;
}

.it-w-xs .input {
    max-width: 100px;
}

.it-w-sm .input,
.it-w-sm select {
    max-width: 120px;
}

.it-w-md .input,
.it-w-md select {
    max-width: 180px;
}

.it-w-full .input,
.it-w-full select,
.it-w-full .textarea {
    max-width: 100%;
}

@media (max-width: 1100px) {
    .it-row-5 {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }
    .it-row-6 {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }

    .it-w-codigo .input,
    .it-w-xs .input,
    .it-w-sm .input,
    .it-w-sm select,
    .it-w-md .input,
    .it-w-md select {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .it-row-2,
    .it-row-3,
    .it-row-4,
    .it-row-5,
    .it-row-6 {
        grid-template-columns: 1fr;
    }

    .it-w-codigo .input,
    .it-w-xs .input,
    .it-w-sm .input,
    .it-w-sm select,
    .it-w-md .input,
    .it-w-md select {
        max-width: 100%;
    }
}
.version-activa-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.version-activa-acciones {
    margin-top: 0;
    margin-left: auto;
}

@media (max-width: 768px) {
    .version-activa-fila {
        align-items: flex-start;
        flex-direction: column;
    }

    .version-activa-acciones {
        margin-left: 0;
    }
}
/* Panel ligero para listados (versiones, logs, etc) */
.it-panel-soft {
    background: #f8fafc;
    border: 1px solid rgba(15,23,42,.06);
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
}
/* =========================
   TABLAS GLOBALES COMPACTAS
   ========================= */

.tabla-wrap {
    margin-top: 8px;
    overflow: auto;
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px;
    line-height: 1.1;
}

    .tabla thead th {
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        opacity: .8;
        padding: 5px 8px !important;
        line-height: 1.1 !important;
        border-bottom: 1px solid rgba(0,0,0,.10);
        vertical-align: middle;
        background: #f1f5f9;
    }

    .tabla tbody td {
        padding: 3px 8px !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
        vertical-align: middle !important;
        border-bottom: 1px solid rgba(0,0,0,.06);
    }

    .tabla tbody tr {
        height: 30px !important;
    }

        .tabla tbody tr:hover {
            background: rgba(0,0,0,.03);
        }

    .tabla td .btn,
    .tabla td button.btn {
        padding: 2px 6px;
        font-size: 11px;
        line-height: 1;
        margin: 0;
    }

    .tabla td input,
    .tabla td select,
    .tabla td textarea,
    .tabla td .input,
    .tabla td .textarea {
        padding: 2px 6px;
        font-size: 11px;
        line-height: 1;
        margin: 0;
    }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--borde);
    background: #fff;
    cursor: pointer;
    line-height: 1;
}

    .icon-btn i.bi {
        font-size: 11px;
    }

.td-acciones {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}
/* Itinerario - caja de días */
.itinerario-tabla-wrap {
    max-height: 520px; /* antes se veían pocos días; subimos altura */
    overflow-y: auto;
    overflow-x: hidden;
    width: 92%;
    max-width: 1400px;
    margin-top: 10px;
}
.tabs-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


.btn-volver {
    margin-left: 100px;
    background: #0ea5e9;
    color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 8px 14px;
    font-weight: 600;
}

    .btn-volver:hover {
        background: #8ed7f8;
    }

.panel-form {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.panel-form-titulo {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 12px;
}

.form-row {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
}

    .form-row:last-child {
        margin-bottom: 0;
    }

.form-row-1 {
    grid-template-columns: 1fr;
}

.form-row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-row-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    font-weight: 600;
    margin-bottom: 0;
}

.campo-full {
    grid-column: 1 / -1;
}

@media (max-width: 1200px) {
    .form-row-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .form-row-3,
    .form-row-2,
    .form-row-4 {
        grid-template-columns: 1fr;
    }
}
.texto-ayuda {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.35;
    margin-top: 4px;
}
.panel-form {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.panel-form-titulo {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 12px;
}

.form-row {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
}

    .form-row:last-child {
        margin-bottom: 0;
    }

.form-row-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.texto-ayuda {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.35;
    margin-top: 4px;
}

@media (max-width: 1200px) {
    .form-row-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .form-row-5 {
        grid-template-columns: 1fr;
    }
}
.form-row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.align-bottom {
    align-items: end;
}

.campo-boton {
    display: flex;
    align-items: end;
}