/* ════════════════════════════════════════════════════════════════════════════
   site.css — Transotel.Web
   Ubicación: wwwroot/css/site.css

   COLORES CORPORATIVOS:
     #dfbb3e  → Dorado (botones CTA, highlights, iconos)
     #008572  → Verde teal (fondos, headers, nav)
     #0B1F3A  → Azul noche (textos, footer, fondo oscuro)

   ESTRATEGIA: Mobile-first. Breakpoints: 576px, 768px, 992px, 1200px
   ════════════════════════════════════════════════════════════════════════════ */


/* ── 1. VARIABLES CSS ─────────────────────────────────────────────────────── */
:root {
    /* Paleta principal */
    --color-dorado:          #dfbb3e;
    --color-dorado-dark:     #c4a32a;
    --color-dorado-light:    #f0d06a;
    --color-dorado-alpha10:  rgba(223, 187, 62, 0.10);
    --color-dorado-alpha20:  rgba(223, 187, 62, 0.20);

    --color-teal:            #008572;
    --color-teal-dark:       #006658;
    --color-teal-darker:     #004d41;
    --color-teal-light:      #00a98f;
    --color-teal-alpha15:    rgba(0, 133, 114, 0.15);

    --color-azul:            #0B1F3A;
    --color-azul-medium:     #12315a;
    --color-azul-light:      #1a4478;

    /* Neutros */
    --color-white:           #ffffff;
    --color-off-white:       #f8f9fa;
    --color-light-gray:      #e9ecef;
    --color-mid-gray:        #adb5bd;
    --color-dark-gray:       #495057;
    --color-text:            #212529;
    --color-text-muted:      #6c757d;

    /* Estados */
    --color-success:         #28a745;
    --color-warning:         #ffc107;
    --color-danger:          #dc3545;
    --color-info:            #17a2b8;

    /* Tipografía */
    --font-family-base:      'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-size-base:        1rem;
    --font-size-sm:          0.875rem;
    --font-size-lg:          1.125rem;
    --font-weight-normal:    400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;
    --line-height-base:      1.6;

    /* Layout */
    --container-max-width:   1200px;
    --container-padding:     1rem;
    --section-padding:       4rem 0;

    /* Navegación */
    --navbar-height:         70px;
    --navbar-bg:             var(--color-azul);
    --navbar-color:          var(--color-white);

    /* Bordes y radios */
    --border-radius-sm:      0.25rem;
    --border-radius:         0.5rem;
    --border-radius-lg:      1rem;
    --border-radius-xl:      1.5rem;
    --border-radius-pill:    50rem;

    /* Sombras */
    --shadow-sm:             0 1px 3px rgba(0,0,0,0.08);
    --shadow:                0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg:             0 8px 32px rgba(0,0,0,0.15);
    --shadow-dorado:         0 4px 20px rgba(223, 187, 62, 0.35);
    --shadow-teal:           0 4px 20px rgba(0, 133, 114, 0.30);

    /* Transiciones */
    --transition-fast:       0.15s ease;
    --transition-base:       0.25s ease;
    --transition-slow:       0.4s ease;

    /* Footer */
    --footer-bg:             var(--color-azul);
    --footer-color:          rgba(255,255,255,0.80);
}


/* ── 2. RESET Y BASE ──────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:      var(--font-family-base);
    font-size:        var(--font-size-base);
    font-weight:      var(--font-weight-normal);
    line-height:      var(--line-height-base);
    color:            var(--color-text);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
}

/* Saltar al contenido principal (accesibilidad) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-dorado);
    color: var(--color-azul);
    font-weight: var(--font-weight-bold);
    padding: 0.5rem 1rem;
    z-index: 9999;
    border-radius: 0 0 var(--border-radius) 0;
    transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; }

/* Lector de pantalla (sr-only) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

a {
    color: var(--color-teal);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover, a:focus {
    color: var(--color-teal-dark);
    text-decoration: underline;
}

img, video, svg { max-width: 100%; height: auto; display: block; }

ul, ol { list-style: none; }

figure { margin: 0; }

/* ── 3. CONTAINER ─────────────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}
@media (min-width: 576px)  { :root { --container-padding: 1.25rem; } }
@media (min-width: 992px)  { :root { --container-padding: 2rem; } }

/* ── 4. TIPOGRAFÍA ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--color-azul);
}

h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.4rem,  3vw, 2rem);    }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem);  }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem;     }
h6 { font-size: 0.875rem; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

.text-muted   { color: var(--color-text-muted); }
.text-dorado  { color: var(--color-dorado); }
.text-teal    { color: var(--color-teal); }
.text-center  { text-align: center; }
.text-sm      { font-size: var(--font-size-sm); }
.text-lg      { font-size: var(--font-size-lg); }
.lead         { font-size: 1.15rem; line-height: 1.7; color: var(--color-dark-gray); }

/* ── 5. BOTONES ───────────────────────────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    padding:         0.625rem 1.5rem;
    font-size:       var(--font-size-base);
    font-weight:     var(--font-weight-semibold);
    line-height:     1.4;
    border-radius:   var(--border-radius);
    border:          2px solid transparent;
    cursor:          pointer;
    text-decoration: none;
    transition:      background-color var(--transition-base),
                     color            var(--transition-base),
                     border-color     var(--transition-base),
                     box-shadow       var(--transition-base),
                     transform        var(--transition-fast);
    white-space: nowrap;
    user-select: none;
}
.btn:hover  { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0);    box-shadow: none; }
.btn:focus  { outline: 2px solid var(--color-dorado); outline-offset: 2px; }

/* Primario (dorado) */
.btn-primary {
    background-color: var(--color-dorado);
    border-color:     var(--color-dorado);
    color:            var(--color-azul);
}
.btn-primary:hover {
    background-color: var(--color-dorado-dark);
    border-color:     var(--color-dorado-dark);
    color:            var(--color-azul);
    box-shadow:       var(--shadow-dorado);
}

/* Secundario (teal) */
.btn-secondary {
    background-color: var(--color-teal);
    border-color:     var(--color-teal);
    color:            var(--color-white);
}
.btn-secondary:hover {
    background-color: var(--color-teal-dark);
    border-color:     var(--color-teal-dark);
    color:            var(--color-white);
    box-shadow:       var(--shadow-teal);
}

/* Outline teal */
.btn-outline-teal {
    background-color: transparent;
    border-color:     var(--color-teal);
    color:            var(--color-teal);
}
.btn-outline-teal:hover {
    background-color: var(--color-teal);
    color:            var(--color-white);
}

/* Outline dorado */
.btn-outline-dorado {
    background-color: transparent;
    border-color:     var(--color-dorado);
    color:            var(--color-dorado);
}
.btn-outline-dorado:hover {
    background-color: var(--color-dorado);
    color:            var(--color-azul);
}

/* Outline blanco (para fondos oscuros) */
.btn-outline-white {
    background-color: transparent;
    border-color:     var(--color-white);
    color:            var(--color-white);
}
.btn-outline-white:hover {
    background-color: var(--color-white);
    color:            var(--color-teal);
}

/* Tamaños */
.btn-lg  { padding: 0.875rem 2rem;     font-size: var(--font-size-lg); }
.btn-sm  { padding: 0.375rem 0.875rem; font-size: var(--font-size-sm); }
.btn-full { width: 100%; justify-content: center; }

/* ── Botones específicos de la navbar ─────────────────────────────────────── */
.btn-outline-nav {
    background-color: rgba(255,255,255,0.05);
    border-color:     rgba(255,255,255,0.35);
    color:            rgba(255,255,255,0.88);
    font-size:        var(--font-size-sm);
    font-weight:      var(--font-weight-medium);
    padding:          0.45rem 1.1rem;
    border-radius:    var(--border-radius-pill);
    letter-spacing:   0.01em;
}
.btn-outline-nav:hover {
    background-color: rgba(255,255,255,0.12);
    border-color:     rgba(255,255,255,0.70);
    color:            var(--color-white);
    text-decoration:  none;
    transform:        none;
}

.btn-primary-nav {
    background:    linear-gradient(135deg, var(--color-dorado) 0%, #c9a830 100%);
    border-color:  transparent;
    color:         var(--color-azul);
    font-size:     var(--font-size-sm);
    font-weight:   var(--font-weight-bold);
    padding:       0.45rem 1.2rem;
    border-radius: var(--border-radius-pill);
    box-shadow:    0 2px 10px rgba(223,187,62,0.30);
}
.btn-primary-nav:hover {
    background:     linear-gradient(135deg, #c9a830 0%, #b89220 100%);
    color:          var(--color-azul);
    box-shadow:     0 4px 16px rgba(223,187,62,0.45);
    transform:      translateY(-1px);
    text-decoration: none;
}


/* ── 6. NAVBAR ────────────────────────────────────────────────────────────── */
.site-header {
    position:      sticky;
    top:           0;
    z-index:       1000;
    background:    linear-gradient(135deg, #0B1F3A 0%, #0f2b4a 50%, #005c50 100%);
    box-shadow:    0 2px 20px rgba(0,0,0,0.28);
    border-bottom: 2px solid rgba(223,187,62,0.22);
}

.navbar { width: 100%; }

.navbar-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          var(--navbar-height);
    gap:             1rem;
}

/* ── Logotipo ── */
.navbar-brand { flex-shrink: 0; }
.brand-figure { margin: 0; }
.navbar-brand img {
    height:     54px;
    width:      auto;
    filter:     drop-shadow(0 1px 4px rgba(0,0,0,0.35));
    transition: filter var(--transition-base), transform var(--transition-fast);
}
.navbar-brand:hover img {
    filter:    drop-shadow(0 2px 10px rgba(223,187,62,0.40));
    transform: scale(1.03);
}

/* Logo en footer */
.footer-logo { filter: drop-shadow(0 1px 4px rgba(0,0,0,0.45)); }

/* ── Hamburguesa (móvil) ── */
.navbar-toggler {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             5px;
    width:           42px;
    height:          42px;
    background:      transparent;
    border:          1px solid rgba(255,255,255,0.20);
    cursor:          pointer;
    padding:         8px 6px;
    border-radius:   var(--border-radius-sm);
    transition:      background-color var(--transition-fast),
                     border-color     var(--transition-fast);
}
.navbar-toggler:hover {
    background-color: rgba(255,255,255,0.08);
    border-color:     rgba(223,187,62,0.40);
}
.navbar-toggler:focus { outline: 2px solid rgba(223,187,62,0.50); outline-offset: 2px; }

.toggler-icon {
    display:          block;
    width:            100%;
    height:           2px;
    background-color: var(--color-white);
    border-radius:    2px;
    transition:       transform var(--transition-base), opacity var(--transition-base);
}

/* Estado abierto hamburguesa */
.navbar-toggler.is-open .toggler-icon:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-toggler.is-open .toggler-icon:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar-toggler.is-open .toggler-icon:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Menú principal ── */
.navbar-menu {
    display:        none;
    flex-direction: column;
    gap:            0.4rem;
    padding:        1.25rem 1rem 1.5rem;
    background:     #081629;
    position:       absolute;
    top:            var(--navbar-height);
    left:           0;
    right:          0;
    z-index:        999;
    box-shadow:     0 10px 28px rgba(0,0,0,0.35);
    border-top:     1px solid rgba(223,187,62,0.15);
}
.navbar-menu.is-open { display: flex; }

.nav-list {
    display:        flex;
    flex-direction: column;
    gap:            0.15rem;
}

.nav-link {
    display:         flex;
    align-items:     center;
    gap:             0.55rem;
    padding:         0.65rem 0.9rem;
    color:           rgba(255,255,255,0.80);
    font-weight:     var(--font-weight-medium);
    font-size:       0.92rem;
    border-radius:   var(--border-radius-sm);
    transition:      color var(--transition-fast),
                     background-color var(--transition-fast);
    text-decoration: none;
    position:        relative;
}
.nav-link i {
    font-size:  0.82rem;
    opacity:    0.65;
    transition: color var(--transition-fast), opacity var(--transition-fast);
    flex-shrink: 0;
}
.nav-link:hover,
.nav-link.active {
    color:            var(--color-white);
    background-color: rgba(255,255,255,0.07);
    text-decoration:  none;
}
.nav-link:hover i,
.nav-link.active i {
    color:   var(--color-dorado);
    opacity: 1;
}
.nav-link.active { font-weight: var(--font-weight-semibold); }

/* Indicador lateral en móvil (active) */
.nav-link.active::before {
    content:       '';
    position:      absolute;
    left:          0;
    top:           0.35rem;
    bottom:        0.35rem;
    width:         3px;
    background:    var(--color-dorado);
    border-radius: 0 3px 3px 0;
}

/* ── Acciones usuario (móvil) ── */
.nav-actions {
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    padding-top:    0.9rem;
    border-top:     1px solid rgba(255,255,255,0.08);
    margin-top:     0.25rem;
}

/* ── Desktop ── */
@media (min-width: 992px) {
    .navbar-toggler { display: none; }

    .navbar-menu {
        display:         flex;
        flex-direction:  row;
        align-items:     center;
        gap:             0.15rem;
        padding:         0;
        background:      transparent;
        position:        static;
        box-shadow:      none;
        border-top:      none;
    }

    .nav-list {
        flex-direction: row;
        align-items:    center;
        gap:            0;
    }

    /* Desktop: quitar indicador lateral móvil */
    .nav-link.active::before { display: none; }

    .nav-link {
        padding:       0.5rem 0.8rem;
        font-size:     0.88rem;
        border-radius: 0;
    }
    .nav-link:hover,
    .nav-link.active {
        background-color: transparent;
    }

    /* Desktop: indicador inferior deslizante */
    .nav-link::after {
        content:       '';
        position:      absolute;
        bottom:        -3px;
        left:          50%;
        right:         50%;
        height:        2px;
        background:    var(--color-dorado);
        border-radius: 2px;
        transition:    left var(--transition-base), right var(--transition-base);
    }
    .nav-link:hover::after,
    .nav-link.active::after {
        left:  0.6rem;
        right: 0.6rem;
    }

    /* Divisor visual entre nav y acciones */
    .nav-actions {
        flex-direction: row;
        align-items:    center;
        gap:            0.5rem;
        padding-top:    0;
        border-top:     none;
        margin-top:     0;
        margin-left:    0.75rem;
        padding-left:   0.9rem;
        border-left:    1px solid rgba(255,255,255,0.14);
    }
}


/* ── 7. SELECTOR DE IDIOMA ────────────────────────────────────────────────── */
.lang-selector { position: relative; }

.lang-toggle {
    display:        flex;
    align-items:    center;
    gap:            0.35rem;
    background:     rgba(255,255,255,0.07);
    border:         1px solid rgba(255,255,255,0.18);
    color:          rgba(255,255,255,0.85);
    padding:        0.4rem 0.85rem;
    border-radius:  var(--border-radius-pill);
    cursor:         pointer;
    font-size:      var(--font-size-sm);
    font-weight:    var(--font-weight-semibold);
    letter-spacing: 0.04em;
    transition:     background-color var(--transition-fast),
                    border-color     var(--transition-fast),
                    color            var(--transition-fast);
}
.lang-toggle:hover,
.lang-selector.is-open .lang-toggle {
    background-color: rgba(223,187,62,0.12);
    border-color:     rgba(223,187,62,0.45);
    color:            var(--color-dorado);
}

.lang-dropdown {
    display:       none;
    position:      absolute;
    top:           calc(100% + 0.6rem);
    right:         0;
    background:    #0d2340;
    border:        1px solid rgba(223,187,62,0.20);
    border-radius: var(--border-radius);
    box-shadow:    0 10px 28px rgba(0,0,0,0.35);
    min-width:     160px;
    overflow:      hidden;
    z-index:       100;
}
.lang-selector.is-open .lang-dropdown { display: block; }

.lang-dropdown li a {
    display:         flex;
    align-items:     center;
    gap:             0.5rem;
    padding:         0.6rem 1rem;
    color:           rgba(255,255,255,0.72);
    font-size:       var(--font-size-sm);
    transition:      background-color var(--transition-fast),
                     color            var(--transition-fast);
    text-decoration: none;
}
.lang-dropdown li a:hover {
    background-color: rgba(223,187,62,0.10);
    color:            var(--color-dorado);
    text-decoration:  none;
}
.lang-dropdown li a.active {
    background-color: rgba(223,187,62,0.14);
    color:            var(--color-dorado);
    font-weight:      var(--font-weight-semibold);
}


/* ── 8. MENÚ DE USUARIO (dropdown) ───────────────────────────────────────── */
.nav-user-menu { position: relative; }

.btn-user-toggle {
    display:       flex;
    align-items:   center;
    gap:           0.4rem;
    background:    rgba(255,255,255,0.08);
    border:        1px solid rgba(255,255,255,0.22);
    color:         var(--color-white);
    padding:       0.4rem 0.875rem;
    border-radius: var(--border-radius-pill);
    cursor:        pointer;
    font-size:     var(--font-size-sm);
    transition:    background-color var(--transition-fast);
}
.btn-user-toggle:hover { background-color: rgba(255,255,255,0.15); }

.user-dropdown {
    display:       none;
    position:      absolute;
    top:           calc(100% + 0.5rem);
    right:         0;
    background:    var(--color-white);
    border:        1px solid var(--color-light-gray);
    border-radius: var(--border-radius);
    box-shadow:    var(--shadow);
    min-width:     185px;
    overflow:      hidden;
    z-index:       100;
}
.nav-user-menu.is-open .user-dropdown { display: block; }

.user-dropdown li a {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    padding:     0.6rem 1rem;
    color:       var(--color-text);
    font-size:   var(--font-size-sm);
    transition:  background-color var(--transition-fast);
}
.user-dropdown li a:hover      { background-color: var(--color-off-white); text-decoration: none; }
.user-dropdown li a.link-danger { color: var(--color-danger); }
.user-dropdown li a.link-danger:hover { background-color: #fff5f5; }
.user-dropdown hr { border: none; border-top: 1px solid var(--color-light-gray); margin: 0.25rem 0; }

/* Botón de cerrar sesión — idéntico visualmente a li a del dropdown */
.logout-form-inline { margin: 0; padding: 0; }
.logout-btn-inline {
    display:          flex;
    align-items:      center;
    gap:              0.5rem;
    width:            100%;
    padding:          0.6rem 1rem;
    background:       none;
    border:           none;
    font-size:        var(--font-size-sm);
    font-family:      var(--font-family-base);
    color:            var(--color-danger);
    cursor:           pointer;
    text-align:       left;
    transition:       background-color var(--transition-fast);
    text-decoration:  none;
}
.logout-btn-inline:hover {
    background-color: #fff5f5;
    text-decoration:  none;
}


/* ── 9. FOOTER ────────────────────────────────────────────────────────────── */
.site-footer {
    background:  linear-gradient(160deg, var(--color-azul) 0%, var(--color-azul-medium) 100%);
    color:       var(--footer-color);
    padding-top: 3rem;
    margin-top:  auto;
}

.footer-inner {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   2rem;
    padding-bottom:        2.5rem;
}
@media (min-width: 576px) {
    .footer-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.footer-brand { display: flex; flex-direction: column; gap: 1rem; }
.footer-tagline { color: var(--footer-color); font-size: var(--font-size-sm); margin-top: 0.5rem; }

.footer-contact { font-style: normal; }
.footer-contact a { color: var(--footer-color); transition: color var(--transition-fast); }
.footer-contact a:hover { color: var(--color-dorado); }
.footer-phone-note {
    display:     block;
    font-size:   0.72rem;
    color:       rgba(255,255,255,0.55);
    margin-top:  0.15rem;
    line-height: 1.35;
}

.social-list { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.social-list a {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    background:      rgba(255,255,255,0.08);
    border-radius:   50%;
    color:           var(--footer-color);
    font-size:       1rem;
    transition:      background-color var(--transition-fast), color var(--transition-fast);
}
.social-list a:hover { background-color: var(--color-dorado); color: var(--color-azul); text-decoration: none; }

.footer-heading {
    font-size:      0.8rem;
    font-weight:    var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--color-white);
    margin-bottom:  1rem;
    display:        flex;
    align-items:    center;
    gap:            0.4rem;
}

.footer-links { display: flex; flex-direction: column; gap: 0.4rem; }
.footer-links a { color: var(--footer-color); font-size: var(--font-size-sm); transition: color var(--transition-fast); }
.footer-links a:hover { color: var(--color-dorado); text-decoration: none; }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.10);
    padding:    1rem 0;
}
.footer-bottom .container {
    display:         flex;
    flex-wrap:       wrap;
    gap:             0.5rem;
    justify-content: space-between;
    align-items:     center;
}
.footer-bottom p { font-size: var(--font-size-sm); color: var(--footer-color); margin: 0; }
.footer-powered { display: flex; align-items: center; gap: 0.35rem; }


/* ── 10. UTILIDADES GENERALES ─────────────────────────────────────────────── */

/* Sección */
.section    { padding: var(--section-padding); }
.section-sm { padding: 2rem 0; }
.section-lg { padding: 6rem 0; }

/* Cabecera de sección (h2 + divider + lead) */
.section-header {
    margin-bottom: 2.5rem;
}
.section-header h2 {
    display:     flex;
    align-items: center;
    justify-content: center;
    gap:         0.5rem;
}
.section-header .lead { max-width: 660px; margin-inline: auto; }

/* Badge de página (hero badge) */
.page-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            0.4rem;
    background:     rgba(223,187,62,0.15);
    border:         1px solid rgba(223,187,62,0.35);
    color:          var(--color-dorado);
    font-size:      0.8rem;
    font-weight:    var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding:        0.35rem 0.9rem;
    border-radius:  var(--border-radius-pill);
    margin-bottom:  1rem;
}

/* CTA actions cluster */
.cta-actions {
    display:     flex;
    flex-wrap:   wrap;
    gap:         1rem;
    justify-content: center;
    align-items: center;
}

/* Fondo teal */
.bg-teal {
    background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-dark) 100%);
    color: var(--color-white);
}
.bg-teal h1, .bg-teal h2, .bg-teal h3 { color: var(--color-white); }

/* Fondo oscuro */
.bg-dark {
    background: linear-gradient(160deg, var(--color-azul) 0%, var(--color-azul-medium) 100%);
    color: var(--color-white);
}

/* Fondo claro */
.bg-light { background-color: var(--color-off-white); }
.bg-white  { background-color: var(--color-white); }

/* Cards */
.card {
    background:    var(--color-white);
    border-radius: var(--border-radius-lg);
    box-shadow:    var(--shadow);
    overflow:      hidden;
    transition:    box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover    { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card-body     { padding: 1.5rem; }
.card-header   { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--color-light-gray); }
.card-footer   { padding: 1rem 1.5rem; border-top: 1px solid var(--color-light-gray); background: var(--color-off-white); }

/* Badges */
.badge {
    display:        inline-flex;
    align-items:    center;
    gap:            0.3rem;
    padding:        0.2rem 0.6rem;
    font-size:      0.75rem;
    font-weight:    var(--font-weight-semibold);
    border-radius:  var(--border-radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.badge-dorado  { background: var(--color-dorado-alpha20); color: var(--color-azul); }
.badge-teal    { background: var(--color-teal-alpha15); color: var(--color-teal-dark); }
.badge-success { background: rgba(40,167,69,0.12); color: #1a7e30; }
.badge-warning { background: rgba(255,193,7,0.15); color: #856404; }
.badge-danger  { background: rgba(220,53,69,0.12); color: #842029; }
.badge-info    { background: rgba(23,162,184,0.12); color: #0c5460; }

/* Alertas */
.alert {
    display:       flex;
    align-items:   flex-start;
    gap:           0.75rem;
    padding:       1rem 1.25rem;
    border-radius: var(--border-radius);
    border-left:   4px solid transparent;
    margin-bottom: 1rem;
    font-size:     var(--font-size-sm);
}
.alert-success { background: rgba(40,167,69,0.08);  border-color: var(--color-success); color: #1a7e30; }
.alert-warning { background: rgba(255,193,7,0.10);  border-color: var(--color-warning); color: #856404; }
.alert-danger  { background: rgba(220,53,69,0.08);  border-color: var(--color-danger);  color: #842029; }
.alert-info    { background: rgba(23,162,184,0.08); border-color: var(--color-info);    color: #0c5460; }

/* Formularios */
.form-group { margin-bottom: 1.25rem; }

.form-label {
    display:       block;
    font-weight:   var(--font-weight-medium);
    font-size:     var(--font-size-sm);
    color:         var(--color-dark-gray);
    margin-bottom: 0.4rem;
}

.form-control {
    display:          block;
    width:            100%;
    padding:          0.6rem 0.875rem;
    font-size:        var(--font-size-base);
    font-family:      var(--font-family-base);
    color:            var(--color-text);
    background-color: var(--color-white);
    border:           1.5px solid var(--color-light-gray);
    border-radius:    var(--border-radius);
    transition:       border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline:          none;
    appearance:       none;
}
.form-control:focus {
    border-color: var(--color-teal);
    box-shadow:   0 0 0 3px var(--color-teal-alpha15);
}
.form-control::placeholder { color: var(--color-mid-gray); }
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--color-off-white);
    color:            var(--color-text-muted);
    cursor:           not-allowed;
}
.form-control.is-invalid {
    border-color: var(--color-danger);
    box-shadow:   0 0 0 3px rgba(220,53,69,0.12);
}

.form-text { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: 0.3rem; }
.invalid-feedback { font-size: var(--font-size-sm); color: var(--color-danger); margin-top: 0.3rem; display: none; }
.is-invalid ~ .invalid-feedback { display: block; }

/* Grid de formulario */
.form-row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 576px) {
    .form-row-2 { grid-template-columns: repeat(2, 1fr); }
    .form-row-3 { grid-template-columns: repeat(3, 1fr); }
}

/* Tabla */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.table th {
    background:  var(--color-teal);
    color:       var(--color-white);
    font-weight: var(--font-weight-semibold);
    padding:     0.75rem 1rem;
    text-align:  left;
    white-space: nowrap;
}
.table td { padding: 0.65rem 1rem; border-bottom: 1px solid var(--color-light-gray); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background-color: var(--color-teal-alpha15); }
.table-striped tr:nth-child(even) td { background-color: var(--color-off-white); }

/* Paginación */
.pagination { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: center; margin-top: 2rem; }
.page-link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-width:       36px;
    height:          36px;
    padding:         0 0.625rem;
    border:          1.5px solid var(--color-light-gray);
    border-radius:   var(--border-radius-sm);
    color:           var(--color-teal);
    font-size:       var(--font-size-sm);
    transition:      all var(--transition-fast);
    text-decoration: none;
}
.page-link:hover   { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-white); text-decoration: none; }
.page-link.active  { background: var(--color-teal); border-color: var(--color-teal); color: var(--color-white); font-weight: var(--font-weight-bold); }
.page-link.disabled { color: var(--color-mid-gray); pointer-events: none; }

/* Loading spinner */
.spinner {
    display:            inline-block;
    width:              1.25rem;
    height:             1.25rem;
    border:             2px solid currentColor;
    border-right-color: transparent;
    border-radius:      50%;
    animation:          spin 0.75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Separadores decorativos */
.divider {
    width:         60px;
    height:        4px;
    background:    linear-gradient(90deg, var(--color-dorado), var(--color-teal));
    border-radius: var(--border-radius-pill);
    margin:        0.75rem auto;
}
.divider-left { margin: 0.75rem 0; }

/* ── 11. RESPONSIVE HELPERS ──────────────────────────────────────────────── */
.d-none  { display: none !important; }
.d-block { display: block !important; }
.d-flex  { display: flex !important; }

@media (max-width: 575.98px) {
    .d-sm-none  { display: none !important; }
    .d-sm-block { display: block !important; }
}
@media (min-width: 576px) { .d-sm-flex  { display: flex !important; } }
@media (min-width: 768px) { .d-md-block { display: block !important; } .d-md-none { display: none !important; } }
@media (min-width: 992px) { .d-lg-flex  { display: flex !important; } }

/* Espaciado */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.gap-1 { gap: 0.5rem !important; }
.gap-2 { gap: 1rem !important; }
.gap-3 { gap: 1.5rem !important; }

/* ── 12. ESTADO DE PEDIDO ─────────────────────────────────────────────────── */
.estado-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            0.3rem;
    padding:        0.25rem 0.65rem;
    border-radius:  var(--border-radius-pill);
    font-size:      0.75rem;
    font-weight:    var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── 13. TABLA DE CONTENIDO (anchor links para SEO) ──────────────────────── */
.toc {
    background:    var(--color-off-white);
    border:        1px solid var(--color-light-gray);
    border-left:   4px solid var(--color-teal);
    border-radius: var(--border-radius);
    padding:       1.25rem 1.5rem;
    margin-bottom: 2rem;
}
.toc-title {
    font-weight:   var(--font-weight-bold);
    color:         var(--color-azul);
    margin-bottom: 0.75rem;
    display:       flex;
    align-items:   center;
    gap:           0.4rem;
}
.toc ol { list-style: decimal; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.3rem; }
.toc a { color: var(--color-teal); font-size: var(--font-size-sm); transition: color var(--transition-fast); }
.toc a:hover { color: var(--color-teal-dark); }

/* ── 14. PÁGINA DE ERROR ─────────────────────────────────────────────────── */
.error-page {
    min-height:      60vh;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    padding:         3rem 1rem;
}
.error-code {
    font-size:   6rem;
    font-weight: var(--font-weight-bold);
    color:       var(--color-teal);
    line-height: 1;
}

/* ── ANIMACIONES FADE-IN ─────────────────────────────────────────────────── */
.fade-wait { opacity: 0; transform: translateY(20px); }
.fade-in   { animation: fadeInUp 0.45s ease forwards; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
}


/* ── 15. BOTÓN SCROLL TO TOP ─────────────────────────────────────────────── */
.btn-scroll-top {
    position:         fixed;
    bottom:           2rem;
    right:            2rem;
    z-index:          1050;
    width:            48px;
    height:           48px;
    border-radius:    50%;
    background:       var(--color-teal);
    color:            var(--color-white);
    border:           2px solid rgba(255,255,255,0.30);
    box-shadow:       var(--shadow-lg);
    cursor:           pointer;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    font-size:        1.1rem;
    opacity:          0;
    visibility:       hidden;
    transform:        translateY(12px);
    transition:       opacity        var(--transition-base),
                      visibility     var(--transition-base),
                      transform      var(--transition-base),
                      background-color var(--transition-fast),
                      box-shadow     var(--transition-fast);
    /* Sin texto, solo icono */
    line-height: 1;
}
.btn-scroll-top:hover {
    background-color: var(--color-teal-dark);
    box-shadow:       var(--shadow-teal);
    transform:        translateY(8px) scale(1.08);
    border-color:     rgba(255,255,255,0.55);
}
.btn-scroll-top:focus {
    outline:        2px solid var(--color-dorado);
    outline-offset: 3px;
}
.btn-scroll-top:active {
    transform: translateY(10px) scale(1.02);
}

/* Visible cuando se ha hecho scroll suficiente */
.btn-scroll-top.is-visible {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0);
}

/* Móvil pequeño */
@media (max-width: 575.98px) {
    .btn-scroll-top {
        bottom: 1.25rem;
        right:  1.25rem;
        width:  42px;
        height: 42px;
        font-size: 0.95rem;
    }
}