/* ================================================================
   THESHOP THEME — Barber Pole Classic  |  Red + Navy + White
   ----------------------------------------------------------------
   Source  : Classic barber pole tricolor + Tailwind CSS blue/red scales
   Identity: Barbershop · Tradition · Craftsmanship · Americana
   ----------------------------------------------------------------
   PALETTE
   ┌──────────────┬───────────┬──────────────────────────────────┐
   │ Role         │ Hex       │ Notes                            │
   ├──────────────┼───────────┼──────────────────────────────────┤
   │ Background   │ #F7F5F0   │ Porcelain white — page canvas    │
   │ Surface      │ #FFFFFF   │ Cards, modals                    │
   │ Primary      │ #14224E   │ Sidebar / Navbar (deep navy)     │
   │ Secondary    │ #14224E   │ Nav gradient top / hovers        │
   │ Tertiary     │ #2B4AA0   │ Elevated / active nav surfaces   │
   │ Accent       │ #C8102E   │ Barber-pole red — interactive    │
   │ Steel        │ #64748B   │ Chrome details, muted text       │
   └──────────────┴───────────┴──────────────────────────────────┘

   PRIMARY SCALE (navy 100→900)
   100: #DBEAFE   300: #93C5FD   500: #3B82F6
   700: #14224E   900: #14224E
   (ÍTEM 252, Héctor 2026-07-21: NAVY OFICIAL ÚNICO #14224E — el viejo
    #1E3A8A Tailwind quedó RETIRADO de toda la casa; 700 y 900 colapsan
    al oficial a propósito. Los gradientes que mezclaban ambos navies
    quedan puros en #14224E.)

   ACCENT SCALE (barber red)
   light: #E4405F   base: #C8102E   dark: #9E0C24

   CONTRAST RATIOS (WCAG 2.1) — recalculados con el navy oficial
   #FFFFFF on #14224E  →  15.3 : 1  ✅ AAA  (nav primary text)
   #BFDBFE on #14224E  →  10.8 : 1  ✅ AAA  (nav secondary labels)
   #14224E on #F7F5F0  →  14.1 : 1  ✅ AAA  (body text)
   #C8102E on #FFFFFF  →   6.4 : 1  ✅ AA   (accent text on white)
   #FFFFFF on #C8102E  →   6.4 : 1  ✅ AA   (button text)
   #FFFFFF on #9E0C24  →   9.3 : 1  ✅ AAA  (button hover text)

   ⚠ Red (#C8102E) is reserved for CTAs, active states and the
     pole stripe — NOT for large background areas, keeping the UI
     calm (70% white, 20% navy, 10% red).

   GRADIENTS
   Sidebar : linear-gradient(180deg, #14224E 0%, #14224E 100%)
   Header  : linear-gradient(135deg, #14224E 0%, #14224E 100%)
   Button  : linear-gradient(135deg, #C8102E 0%, #9E0C24 100%)
   Pole    : repeating-linear-gradient(135deg,
               #C8102E 0 12px, #FFFFFF 12px 24px, #14224E 24px 36px)

   TOOL PROVENANCE
   Barber pole tricolor → brand identity (red/white/blue)
   Tailwind CSS blue scale → navy primary tokens
   Pantone 186 C (#C8102E) → classic barber-pole red

   JUSTIFICATION
   The barber pole is the oldest storefront sign still in use; its
   red/white/blue instantly says "barbershop" without a single word.
   TheShop keeps the canvas porcelain-white (like the classic barber
   chair), anchors navigation in deep navy for calm and legibility,
   and reserves the Pantone barber red exclusively for actions —
   buttons, active nav, and the signature pole stripe under the
   header — so the tricolor reads as craft, not carnival.
   ================================================================ */

/* ── Color tokens ──────────────────────────────────────────────── */
:root {
    /* Primary scale (navy) */
    --primary-100: #DBEAFE;
    --primary-300: #93C5FD;
    --primary-500: #3B82F6;
    --primary-700: #14224E;
    --primary-900: #14224E;

    /* Neutral scale */
    --neutral-100: #FFFFFF;
    --neutral-300: #E4E1D8;
    --neutral-700: #475569;
    --neutral-900: #14224E;

    /* Semantic tokens */
    --primary-color:    #14224E;
    --secondary-color:  #14224E;
    --tertiary-color:   #2B4AA0;
    --accent-color:     #C8102E;
    --gold-color:       #B45309;   /* amounts/prices — amber, AA on white */

    /* text-primary/secondary drive the DARK nav surfaces;
       body text on light background is set explicitly below */
    --text-primary:     #FFFFFF;
    --text-secondary:   #BFDBFE;

    /* Bootstrap cascade overrides — light theme: dark navy text on
       porcelain background */
    --bs-body-color:     #14224E;
    --bs-body-color-rgb: 20, 34, 78;
    --bs-body-bg:        #F7F5F0;
    --bs-table-color:    #14224E;

    --bs-secondary-color:     rgba(20, 34, 78, 0.70);
    --bs-secondary-color-rgb: 20, 34, 78;
    --bs-tertiary-color:      rgba(20, 34, 78, 0.50);
    --bs-tertiary-color-rgb:  20, 34, 78;
    --bs-emphasis-color:      #14224E;
    --bs-emphasis-color-rgb:  20, 34, 78;
    --bs-heading-color:       inherit;

    --background-color: #F7F5F0;
    --auth-bg-image:    none;
    --hero-overlay:     linear-gradient(to top right, rgba(20,34,78,0.10) 0%, rgba(20,34,78,0.24) 100%);
    --surface-color:    #FFFFFF;
    --surface:          #FFFFFF;
    --border-color:     #D8D4C8;

    --success-color: #15803D;
    --warning-color: #B45309;
    --danger-color:  #B91C1C;
    --info-color:    #1D4ED8;

    /* Gradients */
    --gradient-sidebar: linear-gradient(180deg, #14224E 0%, #14224E 100%);
    --gradient-header:  linear-gradient(135deg, #14224E 0%, #14224E 100%);
    --gradient-btn:     linear-gradient(135deg, #C8102E 0%, #9E0C24 100%);
    --gradient-overlay: rgba(20, 34, 78, 0.20);

    /* Signature barber-pole stripe */
    --barber-stripe: repeating-linear-gradient(135deg,
        #C8102E 0px,  #C8102E 12px,
        #FFFFFF 12px, #FFFFFF 24px,
        #14224E 24px, #14224E 36px);

    --shadow-sm: 0 1px 3px rgba(20, 34, 78, 0.10);
    --shadow-md: 0 4px 8px rgba(20, 34, 78, 0.12);
    --shadow-lg: 0 10px 20px rgba(20, 34, 78, 0.16);
}

/* ── Base ──────────────────────────────────────────────────────── */
body {
    background-color: var(--background-color);
    background-image:
        radial-gradient(ellipse at 25% 35%, rgba(20, 34, 78, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 70%, rgba(200, 16, 46, 0.03) 0%, transparent 50%);
    color: #14224E;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #1D4ED8;
}

a:hover, .btn-link:hover {
    color: #C8102E;
}

/* ── Navigation ────────────────────────────────────────────────── */
.navbar, .nav-menu, .sidebar, .top-row {
    background: var(--gradient-sidebar);
    border-bottom: 1px solid var(--primary-900);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
}

/* Signature barber-pole stripe under the header */
.top-row {
    border-bottom: 4px solid transparent;
    border-image: var(--barber-stripe) 1;
}

.sidebar .nav-link,
.nav-link {
    color: var(--text-secondary);
    transition: color 0.18s ease, background-color 0.18s ease;
}

.nav-link:hover {
    color: #FFFFFF;
    background-color: var(--tertiary-color);
}

.nav-link.active {
    color: #FFFFFF;
    background-color: var(--tertiary-color);
    border-left: 3px solid var(--accent-color);
    box-shadow: 0 0 10px rgba(200, 16, 46, 0.22) inset;
    font-weight: 600;
}

.top-row a {
    color: var(--primary-100);
}

.top-row a:hover {
    color: #FFFFFF;
}

/* ── Buttons ───────────────────────────────────────────────────── */
.btn-primary {
    background: var(--gradient-btn);
    border-color: #9E0C24;
    color: #ffffff;
    font-weight: 500;
    box-shadow: 0 0 12px rgba(200, 16, 46, 0.20);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #9E0C24 0%, #7C081B 100%);
    border-color: #7C081B;
    color: #ffffff;
    box-shadow: 0 0 20px rgba(200, 16, 46, 0.32);
}

.btn-outline-primary {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.btn-outline-primary:hover {
    background: var(--gradient-btn);
    border-color: var(--accent-color);
    color: #ffffff;
    box-shadow: 0 0 12px rgba(200, 16, 46, 0.26);
}

.btn-outline-secondary {
    color: var(--primary-700);
    border-color: var(--primary-700);
}

.btn-outline-secondary:hover {
    background-color: var(--primary-700);
    color: #ffffff;
    border-color: var(--primary-900);
}

/* ── Cards ─────────────────────────────────────────────────────── */
.card {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    color: #14224E;
}

.card-header {
    background: var(--gradient-header);
    border-bottom: 1px solid var(--primary-900);
    color: #FFFFFF;
    font-weight: 600;
}

.card-footer {
    background-color: #EFEDE6;
    border-top: 1px solid var(--border-color);
    color: #14224E;
}

/* ── Forms ─────────────────────────────────────────────────────── */
.form-control,
.form-select {
    background-color: #FFFFFF;
    color: #14224E;
    border: 1px solid #B9B4A5;
}

.form-control:focus,
.form-select:focus {
    background-color: #FFFFFF;
    color: #14224E;
    border-color: var(--primary-700);
    box-shadow: 0 0 0 0.2rem rgba(20, 34, 78, 0.20);
}

.form-control::placeholder {
    color: var(--neutral-700);
    opacity: 0.65;
}

.form-label {
    color: #14224E;
}

.form-text {
    color: var(--neutral-700);
}

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

.input-group-text {
    background-color: #EFEDE6;
    border-color: #B9B4A5;
    color: var(--neutral-700);
}

/* ── Tables ────────────────────────────────────────────────────── */
.table {
    color: #14224E;
    --bs-table-color:         #14224E;
    --bs-table-striped-color: #14224E;
    --bs-table-hover-color:   #14224E;
    --bs-table-active-color:  #14224E;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(20, 34, 78, 0.045);
    --bs-table-hover-bg: rgba(20, 34, 78, 0.09);
    --bs-table-border-color: var(--border-color);
}

/* Keep .table-light coherent with the light palette */
.table-light {
    --bs-table-bg:            #EFEDE6;
    --bs-table-color:         #14224E;
    --bs-table-striped-color: #14224E;
    --bs-table-active-color:  #14224E;
    --bs-table-hover-color:   #14224E;
    --bs-table-border-color:  var(--border-color);
    color: #14224E !important;
    background-color: #EFEDE6 !important;
}

/* Hard target every cell as final safety net */
.table > :not(caption) > * > * {
    color: inherit;
}

.table-hover tbody tr:hover {
    background-color: rgba(20, 34, 78, 0.09);
    color: #14224E;
}

/* ── Alerts ────────────────────────────────────────────────────── */
.alert-success {
    background-color: rgba(21, 128, 61, 0.10);
    color: #14532D;
    border-color: rgba(21, 128, 61, 0.40);
}

.alert-warning {
    background-color: rgba(180, 83, 9, 0.10);
    color: #7C3A06;
    border-color: rgba(180, 83, 9, 0.40);
}

.alert-danger {
    background-color: rgba(185, 28, 28, 0.08);
    color: #7C081B;
    border-color: rgba(200, 16, 46, 0.40);
}

.alert-info {
    background-color: rgba(29, 78, 216, 0.08);
    color: #14224E;
    border-color: rgba(29, 78, 216, 0.40);
}

/* ── Modals ────────────────────────────────────────────────────── */
.modal-content {
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    color: #14224E;
}

.modal-header {
    background: var(--gradient-header);
    border-bottom: 4px solid transparent;
    border-image: var(--barber-stripe) 1;
    color: #FFFFFF;
}

.modal-body {
    background-color: var(--surface-color);
    color: #14224E;
}

.modal-footer {
    background-color: #EFEDE6;
    border-top: 1px solid var(--border-color);
}

/* ── Dropdowns ─────────────────────────────────────────────────── */
.dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

.dropdown-item {
    color: #14224E;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--primary-100);
    color: var(--accent-color);
}

.dropdown-divider {
    border-color: var(--border-color);
}

/* ── Badges ────────────────────────────────────────────────────── */
.badge.bg-primary {
    background-color: var(--accent-color) !important;
    color: #FFFFFF;
    font-weight: 600;
}

/* ── Pagination ────────────────────────────────────────────────── */
.pagination .page-link {
    background-color: #FFFFFF;
    border-color: var(--border-color);
    color: var(--primary-700);
}

.pagination .page-link:hover {
    background-color: var(--primary-100);
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.pagination .page-item.active .page-link {
    background: var(--gradient-btn);
    border-color: var(--accent-color);
    color: #ffffff;
    font-weight: 600;
}

.pagination .page-item.disabled .page-link {
    background-color: #EFEDE6;
    color: rgba(20, 34, 78, 0.35);
    border-color: var(--border-color);
}

/* ── Barbershop-specific helpers ───────────────────────────────── */
/* Prices / amounts */
.currency-symbol,
.amount-positive,
.finance-highlight {
    color: var(--gold-color);
    font-weight: 600;
}

.amount-negative,
.balance-negative {
    color: var(--danger-color);
    font-weight: 600;
}

.balance-positive {
    color: var(--success-color);
    font-weight: 600;
}

/* Decorative barber-pole stripe — use on section dividers, the
   kiosk welcome header, or the waiting-list "now serving" banner */
.barber-stripe {
    height: 6px;
    background: var(--barber-stripe);
    border-radius: 3px;
}

/* ── Misc UI ───────────────────────────────────────────────────── */
.breadcrumb-item.active { color: var(--neutral-700); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--border-color); }

hr { border-color: var(--border-color); opacity: 1; }

.spinner-border { color: var(--accent-color); }

/* ── Variant blocks ────────────────────────────────────────────── */

/* Midnight Shop: dark variant — navy canvas, white text */
/* :root {
    --background-color: #0B1330;
    --surface-color:    #14224E;
    --border-color:     #24408F;
    --bs-body-color:    #FFFFFF;
    --bs-body-bg:       #0B1330;
    --gradient-sidebar: linear-gradient(180deg, #14224E 0%, #0B1330 100%);
}
*/

/* Vintage Shop: warmer whites, oxblood red */
/* :root {
    --background-color: #F5F0E6;
    --accent-color:     #8E1B2C;
    --gradient-btn:     linear-gradient(135deg, #8E1B2C 0%, #6E1120 100%);
    --border-color:     #D8CDB4;
}
*/

/* ── Adaptador para el layout Razor Pages (Bootstrap 4) de MBS ──── */
/* La franja del poste de barbero bajo el navbar */
.navbar {
    border-bottom: 4px solid transparent;
    border-image: var(--barber-stripe) 1;
}

.navbar .navbar-brand {
    color: #FFFFFF;
    font-weight: 700;
    letter-spacing: 1px;
}

.navbar .navbar-brand:hover {
    color: var(--primary-100);
}

/* Bootstrap pone text-dark con !important en varios links del layout.
   UN SOLO color de fuente en todo el menu (pedido de Hector): el mismo
   azul clarito del tema en todos los items, blanco solo en hover */
.navbar .nav-link.text-dark,
.navbar a.text-dark {
    color: var(--text-secondary) !important;
}

.navbar .nav-link.text-dark:hover,
.navbar a.text-dark:hover {
    color: #FFFFFF !important;
}

.navbar .nav-link,
.navbar .dropdown-toggle {
    color: var(--text-secondary);
}

.navbar .nav-link:hover,
.navbar .dropdown-toggle:hover {
    color: #FFFFFF;
    background-color: transparent;
}

.navbar-toggler {
    border-color: var(--primary-300);
}

/* Submenus del navbar: colores del tema (via variables CSS, para que al
   cambiar de tema los dropdowns se adapten solos) + esquinas redondeadas */
.navbar .dropdown-menu {
    background: var(--gradient-sidebar);
    border: 1px solid var(--tertiary-color);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 8px;
    margin-top: 6px;
    overflow: hidden;
}

.navbar .dropdown-menu .dropdown-item {
    color: var(--text-secondary);
    border-radius: 8px;
    padding: 8px 14px;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
    background-color: var(--tertiary-color);
    color: #FFFFFF;
}

.navbar .dropdown-menu .dropdown-item.disabled {
    color: rgba(191, 219, 254, 0.45);
}

.navbar .dropdown-menu .dropdown-divider {
    border-color: var(--tertiary-color);
}

footer.footer {
    background: transparent;
    color: var(--neutral-700);
    border-top: 1px solid var(--border-color) !important;
}

footer.footer a {
    color: var(--accent-color);
}

/* Encabezados de pagina en navy */
h1, h2, h3 {
    color: var(--primary-900);
}

/* Tablas de los index pages (patron PayrollSuitePro adaptado a Bootstrap 4) */
.thead-light th {
    background-color: #EFEDE6 !important;
    color: var(--primary-900) !important;
    border-color: var(--border-color) !important;
    font-weight: 600;
    white-space: nowrap;
}

.card .table td {
    vertical-align: middle;
}

/* Watermark sutil de barberia (pedido de Hector: "un poco de transparency
   para que las paginas no se vean tan vacias"): LA MISMA FOTO del hero del
   Home (rotacion semanal, inyectada como --mbs-watermark en _Layout) al 6%
   de opacidad, fija detras de todo el contenido. No intercepta clicks. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: var(--mbs-watermark, url('/images/backgrounds/mbs-bg-1.jpg'));
    background-size: cover;
    background-position: center;
    opacity: 0.06;
    pointer-events: none;
    z-index: -1;
}

/* Texto legible sobre --surface-color (lo usa el panel de accesibilidad) */
:root { --surface-text: #14224E; }