/* ============================================================
   theme.css
   Identidad visual global de CasasRurales.
   Fuente única de verdad para paleta corporativa, tipografía base
   y overrides globales de Bootstrap.
   ============================================================ */

/* Custom truetype font para AraSuite basada en Baloo Bhaina 2 (los .ttf deben estar en wwwroot/fonts). */
@font-face {
    font-family: "AraSuite Baloo Bhaina 2";
    src: url("../fonts/AraSuiteBalooBhaina2-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "AraSuite Baloo Bhaina 2";
    src: url("../fonts/AraSuiteBalooBhaina2-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "AraSuite Baloo Bhaina 2";
    src: url("../fonts/AraSuiteBalooBhaina2-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "AraSuite Baloo Bhaina 2";
    src: url("../fonts/AraSuiteBalooBhaina2-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "AraSuite Baloo Bhaina 2";
    src: url("../fonts/AraSuiteBalooBhaina2-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}






:root {
    /* =========================
       CasasRurales - identidad visual global
       ========================= */
    --brand-dark: #073344;
    --brand-dark-elevated: #0B4052;
    --brand-dark-soft: #164B5E;

    /* Color interactivo principal: turquesa corporativo */
    --brand-primary: #297685;
    --brand-primary-hover: #236774;
    --brand-primary-active: #1D5863;
    --brand-primary-dark: #1D5863;
    --brand-primary-soft: #E7F1F3;

    /* Segundo color corporativo / acento cálido */
    --brand-secondary: #E1BD88;
    --brand-secondary-hover: #D3AA6B;
    --brand-secondary-soft: #F7EEDD;
    --brand-accent: #E1BD88;
    --brand-accent-hover: #D3AA6B;
    --brand-accent-soft: #F7EEDD;

    /* =========================
       App semantic colors
       ========================= */
    --app-bg: #F8F7F3;
    --app-surface: #FFFFFF;
    --app-surface-alt: #F3F5F4;
    --app-text: #17313A;
    --app-text-muted: #718294;
    --app-placeholder: #A8B2B7;
    --app-border: #D6E0E3;
    --app-shadow: 0 18px 55px rgba(7, 51, 68, 0.14);

    /* =========================
       Bootstrap bridge
       ========================= */
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 41, 118, 133;
    --bs-link-color: var(--brand-primary-dark);
    --bs-link-hover-color: var(--brand-primary);
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-border-color: var(--app-border);
}


/* =========================
   Global base
   ========================= */
body {
    background-color: var(--app-bg);
    color: var(--app-text);
    font-family: "AraSuite Baloo Bhaina 2", "Nunito", sans-serif;       /* Custom truetype font para AraSuite basada en Baloo Bhaina 2. (bloques @font-face definidos arriba). */
}

a {
    color: var(--brand-primary-dark);
}

a:hover {
    color: var(--brand-primary);
}


/* Placeholders deliberadamente más suaves que el texto auxiliar (.form-text). */
.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--app-placeholder);
    opacity: 1;
}

/* =========================
   Header / footer helpers
   ========================= */
.app-header {
    background-color: var(--brand-dark);
    color: #fff;
}

.app-header a,
.app-header .nav-link,
.app-header .navbar-brand {
    color: #fff;
}

.app-header a:hover,
.app-header .nav-link:hover,
.app-header .navbar-brand:hover {
    color: var(--brand-primary);
}

.app-footer {
    background-color: var(--brand-dark);
    color: #fff;
}

.app-footer a {
    color: var(--brand-primary);
}

.app-footer a:hover {
    color: #fff;
}

/* Variante footer suave, por si luego quieres probarla
.app-footer {
    background-color: var(--brand-primary-soft);
    color: var(--brand-dark);
}
*/

/* =========================
   Bootstrap component overrides
   ========================= */

/* Buttons */
.btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

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

.btn-primary:active,
.btn-primary.active,
.btn-primary.dropdown-toggle.show {
    background-color: var(--brand-primary-active) !important;
    border-color: var(--brand-primary-active) !important;
    color: #fff !important;
}

.btn-outline-primary {
    color: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
    color: #fff !important;
}

/* Botones: quitar el azul por defecto */
.btn:focus,
.btn:active,
.btn:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Opcional: añadir focus personalizado (recomendado) */
.btn:focus-visible {
    box-shadow: 0 0 0 2px var(--brand-primary-soft);
}

.btn.disabled, 
.btn:disabled, 
fieldset:disabled .btn {
    opacity: .35;
}





/* Links / text helpers */
.text-primary {
    color: var(--brand-primary-dark) !important;
}

.bg-primary {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* Forms */
.form-check-input:checked {
    background-color: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
}

.form-check-input:focus {
    border-color: var(--brand-primary-dark) !important;
    box-shadow: 0 0 0 0.25rem rgba(41, 118, 133, 0.25) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary-dark) !important;
    box-shadow: 0 0 0 0.25rem rgba(41, 118, 133, 0.18) !important;
}

/* Pagination */
.page-link {
    color: var(--brand-primary-dark) !important;
}

.page-link:hover {
    color: var(--brand-primary) !important;
}

.page-item.active .page-link {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* Badges */
.badge.bg-primary {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* Alerts / soft highlight helpers */
.bg-brand-soft {
    background-color: var(--brand-primary-soft) !important;
}

.border-brand {
    border-color: var(--brand-primary-dark) !important;
}

.text-brand-dark {
    color: var(--brand-primary-dark) !important;
}

.text-brand-secondary {
    color: var(--brand-secondary) !important;
}

/* Cards / panels */
.card,
.modal-content,
.list-group-item {
    border-color: var(--app-border);
}

/* Tables */
.table {
    --bs-table-striped-bg: #F4F8F9;
    --bs-table-hover-bg: var(--brand-primary-soft);
}

/* Navbar toggler on dark headers */
.app-header .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.25);
}

.app-header .navbar-toggler-icon {
    filter: invert(1);
}









/* =========================
   Global control style
   ========================= 
    estilos globales para todos los controles de la app (bordes rectos, transiciones suaves...)
*/


/* Quitar bordes redondeados en toda la app */
.btn,
.form-control,
.form-select,
.form-check-input,
.input-group-text {
    border-radius: 0 !important;
}

/* Transiciones suaves globales */
.btn,
.form-control,
.form-select,
.form-check-input {
    transition: all 0.15s ease-in-out;
}

/* Inputs base */
.form-control,
.form-select {
    border: 1px solid var(--app-border);
    background-color: #fff;
}

    /* Focus elegante (muy importante para UX) */
    .form-control:focus,
    .form-select:focus {
        border-color: var(--brand-primary-dark);
        box-shadow: 0 0 0 0.2rem rgba(41, 118, 133, 0.15);
    }

/* Botones base */
.btn {
    font-weight: 500;
    letter-spacing: 0.2px;
}