/* ============================================================
   SES Atrio · Paleta Atrio Homes
   Inspirada en arquitectura andaluza: espresso + crema + latón
   ============================================================ */

:root {
    /* Marca */
    --ah-espresso: #2b2118;        /* casi negro cálido */
    --ah-espresso-soft: #3a2e22;   /* hover sobre espresso */
    --ah-cream: #faf7f2;           /* fondo principal */
    --ah-cream-deep: #f3ede3;      /* fondo alterno */
    --ah-paper: #ffffff;           /* tarjetas */
    --ah-brass: #a8763e;           /* acento dorado */
    --ah-brass-dark: #7a5530;      /* acento dorado hover */
    --ah-brass-soft: #d4b896;      /* tinte dorado claro */

    /* Texto */
    --ah-ink: #2b2118;
    --ah-ink-soft: #5c5147;
    --ah-ink-muted: #8c8278;

    /* Líneas */
    --ah-line: #e8e2d6;
    --ah-line-strong: #d6cdbd;

    /* Estados (sobrios, no pastel) */
    --ah-ok: #4a6b3f;              /* verde oliva apagado */
    --ah-ok-bg: #e9efe2;
    --ah-warn: #a8763e;            /* mismo dorado de marca */
    --ah-warn-bg: #f4e9d6;
    --ah-error: #8a3a30;           /* rojo terracota */
    --ah-error-bg: #f0dcd8;
    --ah-info: #4f6b7d;            /* azul pizarra */
    --ah-info-bg: #e3eaef;
}

/* === Base === */
* { box-sizing: border-box; }

html, body {
    background: var(--ah-cream);
    color: var(--ah-ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ah-ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}

a { color: var(--ah-brass-dark); text-decoration: none; }
a:hover { color: var(--ah-espresso); text-decoration: underline; }

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

/* === Top navbar Atrio Homes === */
.ah-navbar {
    background: var(--ah-espresso);
    color: var(--ah-cream);
    box-shadow: 0 1px 0 rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.04);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.ah-navbar-inner {
    display: flex;
    align-items: stretch;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 1.5rem;
    min-height: 64px;
    flex-wrap: wrap;
}

.ah-brand {
    display: inline-flex;
    align-items: center;
    color: var(--ah-cream);
    text-decoration: none;
    padding: .5rem 1.5rem .5rem 0;
    flex-shrink: 0;
}
.ah-brand:hover { color: var(--ah-brass-soft); text-decoration: none; }

.ah-brand-img {
    max-height: 44px;
    max-width: 200px;
    object-fit: contain;
}

.ah-brand-fallback {
    display: none;  /* solo aparece si fallan SVG y PNG */
    flex-direction: column;
    line-height: 1.1;
}
.ah-brand-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ah-cream);
}
.ah-brand-sub {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ah-brass-soft);
    font-weight: 500;
}

.ah-burger {
    background: transparent;
    color: var(--ah-cream);
    border: none;
    font-size: 1.5rem;
    margin-left: auto;
    padding: 0 .5rem;
}
.ah-burger:hover { color: var(--ah-brass-soft); }

.ah-nav-collapse {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.ah-tabs {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: stretch;
}

.ah-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: rgba(250, 247, 242, 0.7);
    padding: 1.2rem 1rem;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
    font-size: .92rem;
}
.ah-tab:hover {
    color: var(--ah-cream);
    text-decoration: none;
    border-bottom-color: rgba(168, 118, 62, 0.4);
}
.ah-tab.active {
    color: var(--ah-cream);
    border-bottom-color: var(--ah-brass);
}
.ah-tab i { font-size: 1rem; }

.ah-tab-secondary {
    color: rgba(250, 247, 242, 0.45);
    font-size: .85rem;
    padding: 1.2rem .9rem;
}
.ah-tab-secondary.active {
    color: var(--ah-brass-soft);
    border-bottom-color: var(--ah-brass);
}

.ah-nav-end {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ah-user-btn {
    background: transparent;
    color: rgba(250, 247, 242, 0.85);
    border: 1px solid rgba(250, 247, 242, 0.15);
    border-radius: 999px;
    padding: .4rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ah-user-btn:hover {
    background: rgba(250, 247, 242, 0.06);
    border-color: var(--ah-brass);
    color: var(--ah-cream);
}
.ah-user-name { font-weight: 500; }

.dropdown-menu { border-color: var(--ah-line); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.dropdown-item:hover { background: var(--ah-cream-deep); color: var(--ah-espresso); }

/* === Main content === */
.ah-main {
    min-height: calc(100vh - 64px);
    background: var(--ah-cream);
}

/* === Tarjetas (cards) === */
.card {
    background: var(--ah-paper);
    border: 1px solid var(--ah-line);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(43, 33, 24, 0.04);
}
.card-header {
    background: var(--ah-cream-deep);
    border-bottom: 1px solid var(--ah-line);
    color: var(--ah-ink);
    font-weight: 600;
    padding: .75rem 1rem;
}
.card-header.bg-dark {
    background: var(--ah-espresso) !important;
    color: var(--ah-cream);
    border-bottom-color: var(--ah-espresso);
}

/* === Tablas === */
.table {
    color: var(--ah-ink);
    border-color: var(--ah-line);
    margin-bottom: 0;
}
.table thead.table-dark th,
.table thead.table-light th {
    background: var(--ah-espresso) !important;
    color: var(--ah-cream) !important;
    border-color: var(--ah-espresso) !important;
    font-weight: 500;
    font-size: .85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: .85rem 1rem;
}
.table tbody td { padding: .85rem 1rem; vertical-align: middle; border-color: var(--ah-line); }
.table-hover tbody tr:hover { background: var(--ah-cream-deep); }

/* Override Bootstrap pastel para fila "hoy" */
.table-warning, .table-warning > td, .table-warning > th {
    background: var(--ah-warn-bg) !important;
    border-color: var(--ah-line-strong) !important;
}

/* === Botones === */
.btn {
    border-radius: 6px;
    font-weight: 500;
    padding: .5rem 1rem;
    transition: background .12s, border-color .12s, color .12s;
}
.btn-primary {
    background: var(--ah-espresso);
    border-color: var(--ah-espresso);
    color: var(--ah-cream);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--ah-espresso-soft) !important;
    border-color: var(--ah-espresso-soft) !important;
    color: var(--ah-cream) !important;
}
.btn-outline-primary {
    color: var(--ah-espresso);
    border-color: var(--ah-line-strong);
    background: transparent;
}
.btn-outline-primary:hover {
    background: var(--ah-espresso);
    border-color: var(--ah-espresso);
    color: var(--ah-cream);
}
.btn-outline-secondary {
    color: var(--ah-ink-soft);
    border-color: var(--ah-line-strong);
    background: transparent;
}
.btn-outline-secondary:hover {
    background: var(--ah-cream-deep);
    border-color: var(--ah-line-strong);
    color: var(--ah-ink);
}
.btn-success {
    background: var(--ah-ok);
    border-color: var(--ah-ok);
    color: #fff;
}
.btn-success:hover, .btn-success:focus {
    background: #3e5a35 !important;
    border-color: #3e5a35 !important;
}
.btn-outline-success {
    color: var(--ah-ok);
    border-color: var(--ah-ok);
    background: transparent;
}
.btn-outline-success:hover {
    background: var(--ah-ok);
    border-color: var(--ah-ok);
    color: #fff;
}

/* === Form controls === */
.form-control, .form-select {
    border-color: var(--ah-line-strong);
    border-radius: 6px;
    color: var(--ah-ink);
    background: var(--ah-paper);
    padding: .55rem .75rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--ah-brass);
    box-shadow: 0 0 0 .2rem rgba(168, 118, 62, 0.18);
}
.form-label { color: var(--ah-ink); font-weight: 500; font-size: .9rem; margin-bottom: .35rem; }
.form-text { color: var(--ah-ink-muted); font-size: .82rem; }
.form-check-input:checked {
    background-color: var(--ah-espresso);
    border-color: var(--ah-espresso);
}

/* === Badges (sustituye Bootstrap pastels) === */
.badge { font-weight: 500; padding: .35em .65em; border-radius: 4px; letter-spacing: 0.02em; }
.badge.bg-primary { background: var(--ah-brass) !important; color: #fff; }
.badge.bg-success { background: var(--ah-ok) !important; color: #fff; }
.badge.bg-warning { background: var(--ah-warn) !important; color: #fff; }
.badge.bg-danger  { background: var(--ah-error) !important; color: #fff; }
.badge.bg-secondary { background: var(--ah-ink-muted) !important; color: #fff; }
.badge.bg-info    { background: var(--ah-info) !important; color: #fff; }
.badge.bg-light   { background: var(--ah-cream-deep) !important; color: var(--ah-ink) !important; }
.badge.bg-dark    { background: var(--ah-espresso) !important; color: var(--ah-cream); }

/* === Alerts (override Bootstrap pastel) === */
.ah-alert { border-radius: 6px; border-width: 1px; padding: .85rem 1rem; }
.alert-success { background: var(--ah-ok-bg); border-color: var(--ah-ok); color: #2c4327; }
.alert-warning { background: var(--ah-warn-bg); border-color: var(--ah-brass); color: #7a5530; }
.alert-danger  { background: var(--ah-error-bg); border-color: var(--ah-error); color: #5a2520; }
.alert-info    { background: var(--ah-info-bg); border-color: var(--ah-info); color: #34495a; }
.alert-light   { background: var(--ah-cream-deep); border-color: var(--ah-line); color: var(--ah-ink-soft); }

/* === Login page === */
.ah-public-bg {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--ah-cream) 0%, var(--ah-cream-deep) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-wrapper {
    width: 100%;
    max-width: 420px;
    padding: 2rem 1rem;
}
.login-card {
    background: var(--ah-paper);
    border: 1px solid var(--ah-line);
    border-radius: 10px;
    padding: 2.5rem 2rem;
    box-shadow: 0 12px 40px rgba(43, 33, 24, 0.08);
}
.login-card h4 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 2rem;
    font-weight: 600;
    color: var(--ah-espresso);
    letter-spacing: 0.02em;
}
.login-card p { color: var(--ah-ink-muted); font-size: .92rem; }
.login-icon {
    font-size: 2.5rem;
    color: var(--ah-brass);
}

/* === Estados (puntos) en tabla huéspedes === */
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.dot-red   { background: var(--ah-error); }
.dot-green { background: var(--ah-ok); }

/* === Responsive ajustes === */
@media (max-width: 767.98px) {
    .ah-navbar-inner { padding: 0 1rem; }
    .ah-brand { padding-right: 0; }
    .ah-nav-collapse {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        background: var(--ah-espresso-soft);
        margin: 0 -1rem;
        padding: .5rem 1rem 1rem;
    }
    .ah-tabs {
        flex-direction: column;
        width: 100%;
    }
    .ah-tab {
        padding: .85rem .5rem;
        border-bottom: 1px solid rgba(250, 247, 242, 0.08);
    }
    .ah-tab.active { border-bottom-color: var(--ah-brass); }
    .ah-nav-end {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        margin-top: .25rem;
        padding-top: .25rem;
        border-top: 1px solid rgba(250, 247, 242, 0.08);
    }
    .ah-tab-secondary { padding: .85rem .5rem; }
    .ah-user { width: 100%; margin-top: .5rem; }
    .ah-user-btn { width: 100%; justify-content: center; }
}

/* Tablas en móvil: scroll horizontal limpio */
@media (max-width: 767.98px) {
    .table-responsive { border-radius: 8px; }
    .table thead th { font-size: .75rem; padding: .65rem .5rem; }
    .table tbody td { padding: .65rem .5rem; }
}