/* ==========================================================================
   Arriboo — sistema visual del portal (sobre Bootstrap 5.3)

   Tokens propios (--ar-*) + sobreescritura de las variables de Bootstrap, de modo que
   las clases estándar (btn, form-control, table, card, badge, alert, modal…) ya salgan
   con la identidad del producto sin repetir utilidades en cada página.

   Convenciones que este archivo hace cumplir:
   · Un único radio por jerarquía: controles 8px, superficies 12px, diálogos 16px.
   · Sin sombras en botones ni tarjetas: las superficies se separan con borde.
   · Estado = color + palabra: insignias suaves con un tono distinto por estado (.tone-*).
   · Una acción primaria por pantalla (btn-primary); el resto es secundaria o enlace.
   ========================================================================== */

:root,
[data-bs-theme="light"] {
    /* ── Paleta base ─────────────────────────────────────────── */
    --ar-pine: #17654d;          /* acción primaria, enlaces, foco */
    --ar-pine-hover: #11513d;
    --ar-pine-active: #0d4436;
    --ar-pine-soft: #e3f1eb;
    --ar-night: #0f2620;         /* barra lateral */
    --ar-night-raised: #183a31;
    --ar-mint: #9ed9bf;          /* marcador activo sobre oscuro */
    --ar-mist: #f4f6f5;          /* fondo de la aplicación */
    --ar-surface: #ffffff;
    --ar-ink: #18221e;
    --ar-ink-muted: #5a6a63;
    --ar-ink-subtle: #87958f;
    --ar-line: #dce3df;
    --ar-line-strong: #c6d0cb;

    /* ── Tonos de estado (fondo suave / texto) ───────────────── */
    --ar-success: #2a7d45;
    --ar-success-bg: #e2f3e6;
    --ar-info: #2059a0;
    --ar-info-bg: #e3edf9;
    --ar-warning: #8a5300;
    --ar-warning-solid: #c47a0a;
    --ar-warning-bg: #fbefd9;
    --ar-danger: #b3322a;
    --ar-danger-bg: #fbe6e4;
    --ar-neutral: #4f5d57;
    --ar-neutral-bg: #eaeeec;

    /* ── Forma y ritmo ───────────────────────────────────────── */
    --ar-radius-control: 8px;
    --ar-radius-surface: 12px;
    --ar-radius-dialog: 16px;
    --ar-focus-ring: 0 0 0 3px rgba(23, 101, 77, 0.28);
    --ar-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* ── Bootstrap: tipografía y superficie ──────────────────── */
    --bs-body-font-family: var(--ar-font);
    --bs-body-font-size: 0.9375rem;
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--ar-ink);
    --bs-body-color-rgb: 24, 34, 30;
    --bs-body-bg: var(--ar-mist);
    --bs-body-bg-rgb: 244, 246, 245;
    --bs-secondary-color: var(--ar-ink-muted);
    --bs-tertiary-color: var(--ar-ink-subtle);
    --bs-secondary-bg: #e9eeeb;
    --bs-tertiary-bg: #f0f3f1;
    --bs-tertiary-bg-rgb: 240, 243, 241;
    --bs-emphasis-color: var(--ar-ink);
    --bs-heading-color: var(--ar-ink);
    --bs-border-color: var(--ar-line);
    --bs-border-color-translucent: rgba(24, 34, 30, 0.12);
    --bs-border-radius: var(--ar-radius-control);
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: var(--ar-radius-surface);
    --bs-border-radius-xl: var(--ar-radius-dialog);
    --bs-box-shadow-sm: 0 1px 2px rgba(15, 38, 32, 0.06);
    --bs-box-shadow: 0 8px 24px rgba(15, 38, 32, 0.10);
    --bs-box-shadow-lg: 0 20px 48px rgba(15, 38, 32, 0.18);

    /* ── Bootstrap: colores semánticos ───────────────────────── */
    --bs-primary: var(--ar-pine);
    --bs-primary-rgb: 23, 101, 77;
    --bs-primary-text-emphasis: #0d4a38;
    --bs-primary-bg-subtle: var(--ar-pine-soft);
    --bs-primary-border-subtle: #b4d8c8;
    --bs-success: var(--ar-success);
    --bs-success-rgb: 42, 125, 69;
    --bs-success-text-emphasis: #1f5e34;
    --bs-success-bg-subtle: var(--ar-success-bg);
    --bs-success-border-subtle: #b9dfc3;
    --bs-info: var(--ar-info);
    --bs-info-rgb: 32, 89, 160;
    --bs-info-text-emphasis: #18457d;
    --bs-info-bg-subtle: var(--ar-info-bg);
    --bs-info-border-subtle: #bcd2ee;
    --bs-warning: var(--ar-warning-solid);
    --bs-warning-rgb: 196, 122, 10;
    --bs-warning-text-emphasis: var(--ar-warning);
    --bs-warning-bg-subtle: var(--ar-warning-bg);
    --bs-warning-border-subtle: #f0d29e;
    --bs-danger: var(--ar-danger);
    --bs-danger-rgb: 179, 50, 42;
    --bs-danger-text-emphasis: #8c241e;
    --bs-danger-bg-subtle: var(--ar-danger-bg);
    --bs-danger-border-subtle: #f1c0bb;
    --bs-secondary-text-emphasis: var(--ar-neutral);
    --bs-secondary-bg-subtle: var(--ar-neutral-bg);
    --bs-secondary-border-subtle: var(--ar-line-strong);
    --bs-link-color: var(--ar-pine);
    --bs-link-color-rgb: 23, 101, 77;
    --bs-link-hover-color: var(--ar-pine-hover);
    --bs-link-hover-color-rgb: 17, 81, 61;
    --bs-focus-ring-color: rgba(23, 101, 77, 0.28);
}

/* ==========================================================================
   Base tipográfica
   ========================================================================== */

body {
    font-family: var(--ar-font);
    background-color: var(--ar-mist);
    color: var(--ar-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

/* Escala: 28 / 22 / 17 / 15 / 13.5 / 12.5 */
h4, .h4 { font-size: 1.375rem; }
h5, .h5 { font-size: 1.0625rem; }
h6, .h6 { font-size: 0.9375rem; }

.small, small { font-size: 0.8438rem; }

a {
    color: var(--bs-link-color);
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--bs-link-hover-color);
}

code {
    font-size: 0.875em;
    color: var(--ar-ink);
    background: var(--ar-neutral-bg);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}

.text-muted { color: var(--ar-ink-muted) !important; }

.tabular-nums,
.table td,
.table th,
dd {
    font-variant-numeric: tabular-nums;
}

:focus-visible {
    outline: none;
    box-shadow: var(--ar-focus-ring);
}

/* ==========================================================================
   Encabezado de página (componente PageHeader)
   ========================================================================== */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.5rem;
}

.page-heading {
    min-width: 0;
}

.page-header-back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
    font-size: 0.8438rem;
    font-weight: 500;
    color: var(--ar-ink-muted);
    text-decoration: none;
}

.page-header-back:hover {
    color: var(--ar-pine);
}

.page-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-stretch: 94%;
}

.page-description {
    margin: 0.25rem 0 0;
    max-width: 68ch;
    color: var(--ar-ink-muted);
    font-size: 0.9063rem;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Subtítulo de sección dentro de una página (pestañas, bloques). */
.section-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
}

/* ==========================================================================
   Botones
   ========================================================================== */

.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-padding-x: 0.875rem;
    --bs-btn-padding-y: 0.4375rem;
    --bs-btn-font-size: 0.9063rem;
    --bs-btn-border-radius: var(--ar-radius-control);
    --bs-btn-focus-box-shadow: var(--ar-focus-ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.btn > .bi {
    font-size: 1em;
    line-height: 1;
}

/* Los iconos ya traen me-1/ms-1; el gap del botón los sustituye. */
.btn > .bi.me-1, .btn > .bi.me-2, .btn > .bi.ms-1, .btn > .bi.ms-2,
.btn > .spinner-border.me-1 {
    margin: 0 !important;
}

.btn-sm {
    --bs-btn-padding-x: 0.625rem;
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-font-size: 0.8438rem;
    --bs-btn-border-radius: 6px;
    gap: 0.3125rem;
}

.btn-lg {
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.625rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-border-radius: 10px;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ar-pine);
    --bs-btn-border-color: var(--ar-pine);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ar-pine-hover);
    --bs-btn-hover-border-color: var(--ar-pine-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ar-pine-active);
    --bs-btn-active-border-color: var(--ar-pine-active);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--ar-pine);
    --bs-btn-disabled-border-color: var(--ar-pine);
}

.btn-outline-primary {
    --bs-btn-color: var(--ar-pine);
    --bs-btn-bg: var(--ar-surface);
    --bs-btn-border-color: #a9cfbf;
    --bs-btn-hover-color: var(--ar-pine-hover);
    --bs-btn-hover-bg: var(--ar-pine-soft);
    --bs-btn-hover-border-color: var(--ar-pine);
    --bs-btn-active-color: var(--ar-pine-hover);
    --bs-btn-active-bg: #d2e8de;
    --bs-btn-active-border-color: var(--ar-pine);
    --bs-btn-disabled-color: var(--ar-pine);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #a9cfbf;
}

/* Secundaria neutra: la acción de fila y la alternativa a la primaria. */
.btn-outline-secondary {
    --bs-btn-color: var(--ar-ink);
    --bs-btn-bg: var(--ar-surface);
    --bs-btn-border-color: var(--ar-line-strong);
    --bs-btn-hover-color: var(--ar-ink);
    --bs-btn-hover-bg: #eef2f0;
    --bs-btn-hover-border-color: #aebab4;
    --bs-btn-active-color: var(--ar-ink);
    --bs-btn-active-bg: #e3e9e6;
    --bs-btn-active-border-color: #aebab4;
    --bs-btn-disabled-color: var(--ar-ink-subtle);
    --bs-btn-disabled-bg: var(--ar-surface);
    --bs-btn-disabled-border-color: var(--ar-line);
}

/* Cancelar / cerrar: sin peso visual. */
.btn-light {
    --bs-btn-color: var(--ar-ink);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--ar-ink);
    --bs-btn-hover-bg: #e9eeeb;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--ar-ink);
    --bs-btn-active-bg: #dfe6e2;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--ar-ink-subtle);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ar-danger);
    --bs-btn-border-color: var(--ar-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #962a23;
    --bs-btn-hover-border-color: #962a23;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #81241e;
    --bs-btn-active-border-color: #81241e;
    --bs-btn-disabled-bg: var(--ar-danger);
    --bs-btn-disabled-border-color: var(--ar-danger);
}

.btn-outline-danger {
    --bs-btn-color: var(--ar-danger);
    --bs-btn-bg: var(--ar-surface);
    --bs-btn-border-color: #e4b1ac;
    --bs-btn-hover-color: #962a23;
    --bs-btn-hover-bg: var(--ar-danger-bg);
    --bs-btn-hover-border-color: var(--ar-danger);
    --bs-btn-active-color: #81241e;
    --bs-btn-active-bg: #f6d6d2;
    --bs-btn-active-border-color: var(--ar-danger);
    --bs-btn-disabled-color: var(--ar-danger);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #e4b1ac;
}

.btn-outline-success {
    --bs-btn-color: var(--ar-success);
    --bs-btn-bg: var(--ar-surface);
    --bs-btn-border-color: #a8d4b4;
    --bs-btn-hover-color: #1f5e34;
    --bs-btn-hover-bg: var(--ar-success-bg);
    --bs-btn-hover-border-color: var(--ar-success);
    --bs-btn-active-color: #1f5e34;
    --bs-btn-active-bg: #cfe9d6;
    --bs-btn-active-border-color: var(--ar-success);
    --bs-btn-disabled-color: var(--ar-success);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #a8d4b4;
}

.btn-outline-warning {
    --bs-btn-color: var(--ar-warning);
    --bs-btn-bg: var(--ar-surface);
    --bs-btn-border-color: #e8c78e;
    --bs-btn-hover-color: #6e4200;
    --bs-btn-hover-bg: var(--ar-warning-bg);
    --bs-btn-hover-border-color: var(--ar-warning-solid);
    --bs-btn-active-color: #6e4200;
    --bs-btn-active-bg: #f6e2bd;
    --bs-btn-active-border-color: var(--ar-warning-solid);
    --bs-btn-disabled-color: var(--ar-warning);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #e8c78e;
}

.btn-link {
    --bs-btn-color: var(--ar-pine);
    --bs-btn-hover-color: var(--ar-pine-hover);
    --bs-btn-font-weight: 500;
    text-decoration: none;
}

/* Botón solo-icono de fila: cuadrado y con el mismo alto que sus vecinos. */
.btn-icon {
    --bs-btn-padding-x: 0;
    width: 2rem;
    height: 2rem;
}

.btn-icon.btn-sm {
    width: 1.875rem;
    height: 1.875rem;
}

/* Grupo de acciones de fila: botones separados, no fundidos. */
.row-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0.375rem;
}

/* ==========================================================================
   Formularios
   ========================================================================== */

.form-label {
    margin-bottom: 0.375rem;
    font-size: 0.8438rem;
    font-weight: 500;
    color: var(--ar-ink);
}

.form-text {
    color: var(--ar-ink-muted);
    font-size: 0.8125rem;
}

.form-control,
.form-select {
    border-color: var(--ar-line-strong);
    border-radius: var(--ar-radius-control);
    font-size: 0.9375rem;
    color: var(--ar-ink);
    background-color: var(--ar-surface);
}

.form-control::placeholder {
    color: var(--ar-ink-subtle);
}

.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: #aebab4;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ar-pine);
    box-shadow: var(--ar-focus-ring);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--bs-tertiary-bg);
    color: var(--ar-ink-muted);
}

.form-control-lg,
.form-select-lg {
    font-size: 1rem;
    border-radius: 10px;
}

.form-check-input {
    border-color: var(--ar-line-strong);
}

.form-check-input:checked {
    background-color: var(--ar-pine);
    border-color: var(--ar-pine);
}

.form-check-input:focus {
    border-color: var(--ar-pine);
    box-shadow: var(--ar-focus-ring);
}

.input-group-text {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--ar-line-strong);
    color: var(--ar-ink-muted);
    font-size: 0.875rem;
}

.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--ar-danger);
}

.invalid-feedback,
.text-danger {
    color: var(--ar-danger) !important;
}

/* ==========================================================================
   Superficies: tarjetas y tablas
   ========================================================================== */

.card {
    --bs-card-border-color: var(--ar-line);
    --bs-card-border-radius: var(--ar-radius-surface);
    --bs-card-inner-border-radius: calc(var(--ar-radius-surface) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-y: 0.875rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-bg: var(--ar-surface);
    box-shadow: none;
}

.card-header {
    font-weight: 600;
    font-size: 0.9688rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.card-header > .bi {
    color: var(--ar-ink-muted);
}

/* Una tabla suelta en la página vive dentro de una superficie. */
.table-responsive:not(.card .table-responsive):not(.modal .table-responsive) {
    background: var(--ar-surface);
    border: 1px solid var(--ar-line);
    border-radius: var(--ar-radius-surface);
}

.table-responsive > .table {
    margin-bottom: 0;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ar-ink);
    --bs-table-border-color: var(--ar-line);
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: #f3f7f5;
    --bs-table-active-bg: var(--ar-pine-soft);
    font-size: 0.9063rem;
}

.table > :not(caption) > * > * {
    padding: 0.75rem 1rem;
}

.table-sm > :not(caption) > * > * {
    padding: 0.5rem 0.75rem;
}

.table > thead > tr > th,
.table > thead.table-light > tr > th {
    --bs-table-bg: var(--bs-tertiary-bg);
    background-color: var(--bs-tertiary-bg);
    color: var(--ar-ink-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    border-bottom-color: var(--ar-line);
    white-space: nowrap;
}

.table > tbody > tr:last-child > * {
    border-bottom-width: 0;
}

/* Última columna = acciones de fila: siempre alineadas a la derecha. */
.table > thead > tr > th:last-child:empty,
.table > tbody > tr > td.cell-actions {
    text-align: right;
    width: 1%;
    white-space: nowrap;
}

.list-group {
    --bs-list-group-border-color: var(--ar-line);
    --bs-list-group-border-radius: var(--ar-radius-control);
    --bs-list-group-action-hover-bg: #f3f7f5;
    --bs-list-group-active-bg: var(--ar-pine);
    --bs-list-group-active-border-color: var(--ar-pine);
}

dl.row dt {
    font-weight: 500;
    color: var(--ar-ink-muted);
    font-size: 0.875rem;
}

dl.row dd {
    margin-bottom: 0.625rem;
}

/* Cifras clave (folio, agencia): etiqueta arriba, valor grande; la clave se resalta. */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    background: var(--ar-surface);
    border: 1px solid var(--ar-line);
    border-radius: var(--ar-radius-surface);
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.25rem;
}

.stat + .stat {
    border-left: 1px solid var(--ar-line);
}

.stat-label {
    color: var(--ar-ink-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

.stat-value {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.stat.is-key {
    background: var(--ar-pine-soft);
    border-radius: 0 calc(var(--ar-radius-surface) - 1px) calc(var(--ar-radius-surface) - 1px) 0;
}

.stat.is-key .stat-value {
    color: var(--ar-pine);
}

/* ==========================================================================
   Insignias de estado
   ========================================================================== */

.badge {
    --bs-badge-font-weight: 500;
    --bs-badge-font-size: 0.7813rem;
    --bs-badge-padding-x: 0.5rem;
    --bs-badge-padding-y: 0.25rem;
    --bs-badge-border-radius: 999px;
    letter-spacing: 0;
    vertical-align: middle;
}

.badge.tone-success { background: var(--ar-success-bg); color: var(--ar-success); }
.badge.tone-info    { background: var(--ar-info-bg);    color: var(--ar-info); }
.badge.tone-warning { background: var(--ar-warning-bg); color: var(--ar-warning); }
.badge.tone-danger  { background: var(--ar-danger-bg);  color: var(--ar-danger); }
.badge.tone-neutral { background: var(--ar-neutral-bg); color: var(--ar-neutral); }
.badge.tone-primary { background: var(--ar-pine-soft);  color: var(--ar-pine); }

/* Punto de color antes del texto: el estado se lee aun sin distinguir el tono. */
.badge[class*="tone-"]::before {
    content: "";
    display: inline-block;
    width: 0.4375rem;
    height: 0.4375rem;
    margin-right: 0.375rem;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 0.0625rem;
}

/* Etiqueta (no estado): permisos, categorías, camas. */
.badge.tag {
    background: var(--ar-surface);
    color: var(--ar-ink);
    border: 1px solid var(--ar-line);
    border-radius: 6px;
}

/* ==========================================================================
   Avisos
   ========================================================================== */

.alert {
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 0.75rem;
    --bs-alert-border-radius: var(--ar-radius-control);
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.9063rem;
    border-width: 1px;
}

.alert > .bi:first-child {
    flex-shrink: 0;
    margin: 0.125rem 0 0 !important;
    font-size: 1rem;
}

.alert > .alert-body {
    flex: 1 1 auto;
    min-width: 0;
}

.alert-heading {
    font-size: 0.9688rem;
}

/* ==========================================================================
   Diálogos
   ========================================================================== */

.modal-content {
    --bs-modal-border-radius: var(--ar-radius-dialog);
    --bs-modal-inner-border-radius: calc(var(--ar-radius-dialog) - 1px);
    border: 0;
    box-shadow: var(--bs-box-shadow-lg);
}

.modal-header {
    padding: 1.25rem 1.5rem 0.5rem;
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.modal-body {
    padding: 0.75rem 1.5rem 1rem;
}

.modal-footer {
    padding: 0.75rem 1.5rem 1.25rem;
    gap: 0.5rem;
}

.modal-footer > * {
    margin: 0;
}

.modal-backdrop.show {
    opacity: 1;
    background-color: rgba(15, 38, 32, 0.45);
}

/* ==========================================================================
   Navegación interna: pestañas y pills
   ========================================================================== */

.nav-tabs {
    --bs-nav-tabs-border-color: var(--ar-line);
    --bs-nav-tabs-link-active-color: var(--ar-ink);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;
    gap: 1.25rem;
}

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.125rem;
    color: var(--ar-ink-muted);
    font-weight: 500;
}

.nav-tabs .nav-link:hover {
    color: var(--ar-ink);
}

.nav-tabs .nav-link.active {
    color: var(--ar-ink);
    border-bottom-color: var(--ar-pine);
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--ar-radius-control);
    --bs-nav-pills-link-active-bg: var(--ar-pine);
}

.nav-pills .nav-link:not(.active) {
    color: var(--ar-ink-muted);
}

/* Indicador de pasos (onboarding, asistente de reservación). */
.stepper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 1.5rem;
}

.stepper .badge {
    min-width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ar-neutral-bg);
    color: var(--ar-ink-muted);
}

.stepper .badge.is-done {
    background: var(--ar-pine-soft);
    color: var(--ar-pine);
}

.stepper .badge.is-active {
    background: var(--ar-pine);
    color: #fff;
}

/* ==========================================================================
   Estados vacíos y de carga
   ========================================================================== */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: var(--ar-pine-soft);
    color: var(--ar-pine);
    font-size: 1.5rem;
}

.empty-state-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ar-ink);
}

.empty-state-subtitle {
    margin: 0.25rem 0 0;
    max-width: 44ch;
    color: var(--ar-ink-muted);
    font-size: 0.875rem;
}

.empty-state-cta {
    margin-top: 1.25rem;
}

/* La página entera, sin tabla todavía: el estado vacío vive en una superficie. */
.empty-state.is-standalone {
    background: var(--ar-surface);
    border: 1px dashed var(--ar-line-strong);
    border-radius: var(--ar-radius-surface);
}

.spinner-border {
    --bs-spinner-border-width: 0.18em;
}

/* ==========================================================================
   Pantallas de acceso (login, registro, onboarding)
   ========================================================================== */

/* Split screen: the pine-night brand panel (same surface as the in-app sidebar) + the form. */
.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(280px, 40%) 1fr;
    background: var(--ar-mist);
}

.auth-brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem 3rem;
    background: var(--ar-night);
    color: #fff;
}

.auth-brand .auth-wordmark,
.auth-brand .auth-wordmark:hover {
    color: #fff;
}

.auth-brand .auth-wordmark::after {
    background: var(--ar-mint);
}

.auth-brand-line {
    max-width: 22ch;
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    font-stretch: 90%;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.92);
}

.auth-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}

.auth-card {
    width: 100%;
    max-width: 400px;
}

.auth-card.is-wide {
    max-width: 560px;
}

.auth-footer {
    margin-top: 2.5rem;
    color: var(--ar-ink-subtle);
    font-size: 0.8125rem;
}

.auth-title {
    margin: 0 0 0.375rem;
    font-size: 1.625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.auth-lead {
    margin: 0 0 1.75rem;
    color: var(--ar-ink-muted);
    font-size: 0.9375rem;
}

.auth-switch {
    margin: 1.5rem 0 0;
    color: var(--ar-ink-muted);
    font-size: 0.875rem;
}

.auth-switch a {
    font-weight: 500;
    text-decoration: none;
}

.otp-input {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.4em;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767.98px) {
    .auth-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .auth-brand {
        padding: 1.25rem 1.25rem 1.5rem;
        gap: 0.75rem;
    }

    .auth-brand-line {
        font-size: 1.125rem;
        max-width: none;
    }

    .auth-main {
        justify-content: flex-start;
        padding-top: 2rem;
    }
}

/* Centered single-column variant (onboarding): the card carries its own surface. */
.auth-shell.is-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
}

.auth-shell.is-centered .auth-card {
    background: var(--ar-surface);
    border: 1px solid var(--ar-line);
    border-radius: var(--ar-radius-dialog);
    padding: 2rem 2rem 1.75rem;
}

.auth-shell.is-centered .auth-title,
.auth-shell.is-centered .auth-lead {
    text-align: center;
}

.auth-shell.is-centered .auth-title {
    font-size: 1.25rem;
}

.auth-shell.is-centered .auth-lead {
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

/* Marca: el nombre es el logotipo. */
.wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0.0625rem;
    font-family: var(--ar-font);
    font-weight: 700;
    font-stretch: 88%;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--ar-ink);
    text-decoration: none;
}

.wordmark::after {
    content: "";
    width: 0.28em;
    height: 0.28em;
    margin-left: 0.06em;
    border-radius: 50%;
    background: var(--ar-pine);
}

.wordmark-lg { font-size: 2rem; }
.wordmark-md { font-size: 1.5rem; }

/* Utilidades que sustituyen los atributos style en línea: la CSP del Portal no admite estilos en línea. */
.aspect-4x3 { aspect-ratio: 4 / 3; }
.thumb-max-140 { max-height: 140px; }
.cover-placeholder { width: 64px; height: 48px; }
.text-pre-wrap { white-space: pre-wrap; }

/* ==========================================================================
   Error boundary de Blazor
   ========================================================================== */

.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: "Ocurrió un error.";
}

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}