/* ============================================================
   BASE — Proyecto Búho
   Mobile-first. Todo el sistema parte de aquí.
   ============================================================ */

:root {
    --buho-bg:          #1a1b1e;
    --buho-bg-card:     #25262b;
    --buho-bg-input:    #2c2d32;
    --buho-amarillo:    #ffd54a;
    --buho-amarillo-dk: #e8c03a;
    --buho-texto:       #e4e6eb;
    --buho-texto-suave: #9aa0a6;
    --buho-borde:       #35363d;
    --buho-exito:       #51cf66;
    --buho-peligro:     #ff6b6b;
    --buho-alerta:      #ffa94d;
    --buho-info:        #74c0fc;
    --alto-menu:        64px;
    --radio-card:       14px;
    --radio-btn:        10px;
    --fuente:           'Raleway', sans-serif;
}

/* Reset mínimo */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body.buho-body {
    background-color: var(--buho-bg);
    color:            var(--buho-texto);
    font-family:      var(--fuente);
    margin:           0;
    min-height:       100dvh;
    overflow-x:       hidden;
    -webkit-font-smoothing: antialiased;
}

/* Espacio para el menú inferior fijo */
.buho-main {
    padding-bottom: calc(var(--alto-menu) + env(safe-area-inset-bottom, 0px));
    min-height:     100dvh;
}

/* ── Pantalla de carga ───────────────────────────────────── */
.buho-cargando {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    min-height:      100dvh;
    gap:             16px;
}

.buho-cargando .spinner-border {
    color: var(--buho-amarillo);
    width: 2.5rem;
    height: 2.5rem;
}

/* ── Inputs ──────────────────────────────────────────────── */
.buho-input {
    background-color: var(--buho-bg-input) !important;
    border:           1px solid var(--buho-borde) !important;
    color:            var(--buho-texto) !important;
    border-radius:    var(--radio-btn) !important;
    padding:          12px 14px;
    font-size:        15px;
    transition:       border-color 0.2s;
}

.buho-input::placeholder {
    color: var(--buho-texto-suave);
}

.buho-input:focus {
    background-color: var(--buho-bg-input) !important;
    border-color:     var(--buho-amarillo) !important;
    color:            var(--buho-texto) !important;
    box-shadow:       0 0 0 3px rgba(255, 213, 74, 0.15) !important;
    outline:          none;
}

.form-label {
    color:       var(--buho-texto-suave);
    font-size:   13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

/* ── Botones ─────────────────────────────────────────────── */
.buho-btn-primary {
    background-color: var(--buho-amarillo);
    border:           none;
    color:            #1a1b1e;
    font-weight:      700;
    font-size:        15px;
    padding:          13px 20px;
    border-radius:    var(--radio-btn);
    transition:       background-color 0.2s, transform 0.1s;
    letter-spacing:   0.3px;
}

.buho-btn-primary:hover,
.buho-btn-primary:focus {
    background-color: var(--buho-amarillo-dk);
    color:            #1a1b1e;
}

.buho-btn-primary:active {
    transform: scale(0.98);
}

.buho-btn-primary:disabled {
    background-color: var(--buho-borde);
    color:            var(--buho-texto-suave);
    cursor:           not-allowed;
}

.buho-btn-ghost {
    background:   transparent;
    border:       1px solid var(--buho-borde);
    color:        var(--buho-texto);
    padding:      10px 16px;
    border-radius: var(--radio-btn);
    font-size:    14px;
    transition:   border-color 0.2s;
}

.buho-btn-ghost:hover {
    border-color: var(--buho-amarillo);
    color:        var(--buho-texto);
}

/* ── Menú inferior ───────────────────────────────────────── */
#buho-menu-inferior nav.buho-nav {
    position:         fixed;
    bottom:           0;
    left:             0;
    right:            0;
    height:           calc(var(--alto-menu) + env(safe-area-inset-bottom, 0px));
    padding-bottom:   env(safe-area-inset-bottom, 0px);
    background-color: var(--buho-bg-card);
    border-top:       1px solid var(--buho-borde);
    display:          flex;
    align-items:      stretch;
    z-index:          100;
}

.buho-nav-item {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-decoration: none;
    color:           var(--buho-texto-suave);
    font-size:       10px;
    font-weight:     600;
    letter-spacing:  0.3px;
    gap:             3px;
    padding:         8px 4px 4px;
    transition:      color 0.15s;
    position:        relative;
}

.buho-nav-item i {
    font-size: 20px;
    line-height: 1;
}

.buho-nav-item.activo {
    color: var(--buho-amarillo);
}

.buho-nav-item.deshabilitado {
    opacity: 0.4;
    cursor:  not-allowed;
}

.buho-nav-badge {
    position:         absolute;
    top:              6px;
    right:            calc(50% - 18px);
    font-size:        8px;
    background-color: var(--buho-amarillo);
    color:            #1a1b1e;
    padding:          1px 4px;
    border-radius:    4px;
    font-weight:      700;
    letter-spacing:   0;
    line-height:      1.4;
}

/* ── Cards genéricas ─────────────────────────────────────── */
.buho-card {
    background-color: var(--buho-bg-card);
    border:           1px solid var(--buho-borde);
    border-radius:    var(--radio-card);
    padding:          16px;
}

/* ── Utilidades ──────────────────────────────────────────── */
.texto-suave   { color: var(--buho-texto-suave); }
.texto-amarillo { color: var(--buho-amarillo); }
.sep           { height: 1px; background: var(--buho-borde); margin: 16px 0; }

/* ── Bootstrap overrides ─────────────────────────────────── */
.accordion-item {
    background-color: var(--buho-bg-card) !important;
    border-color:     var(--buho-borde) !important;
}

.accordion-button {
    background-color: var(--buho-bg-card) !important;
    color:            var(--buho-texto) !important;
    box-shadow:       none !important;
}

.accordion-button::after {
    filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg);
}

.accordion-body {
    background-color: var(--buho-bg-input);
    color:            var(--buho-texto);
}