@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   FABRIC BARBERÍAS - ADMINLTE OVERRIDE THEME
   Primary: #9C1006 (Deep Red)
   Warning/Accent: #FAB400 (Mustard Yellow)
   Secondary: #6F6F6E (Medium Grey)
   Dark/Sidebar: #2D2D2D (Charcoal)

   This static stylesheet is the single source of brand styling. The Laravel
   Mix / SCSS pipeline (webpack.mix.js, resources/sass/*) is dormant and is
   intentionally NOT used for theming.
   ========================================================================== */

/* -----------------------------------------
   0. BRAND TOKENS (single source of truth)
   Literal values are kept inline below as fallbacks for older engines.
   ----------------------------------------- */
:root {
    --fabric-primary: #9C1006;   /* Deep Red */
    --fabric-primary-hover: #7a0c04;
    --fabric-primary-active: #680a03;
    --fabric-accent: #FAB400;    /* Mustard Yellow */
    --fabric-accent-hover: #d99c00;
    --fabric-accent-active: #c78f00;
    --fabric-secondary: #6F6F6E; /* Medium Grey */
    --fabric-secondary-hover: #595958;
    --fabric-dark: #2D2D2D;      /* Charcoal */
    --fabric-dark-hover: #1a1a1a;
}

/* -----------------------------------------
   1. BUTTONS
   ----------------------------------------- */
.btn-primary { background-color: #9C1006; border-color: #9C1006; color: #ffffff; }
.btn-primary:hover, .btn-primary:focus { background-color: #7a0c04; border-color: #680a03; color: #ffffff; }

.btn-warning { background-color: #FAB400; border-color: #FAB400; color: #2D2D2D; font-weight: bold; }
.btn-warning:hover, .btn-warning:focus { background-color: #d99c00; border-color: #c78f00; color: #2D2D2D; }

.btn-secondary { background-color: #6F6F6E; border-color: #6F6F6E; color: #ffffff; }
.btn-secondary:hover, .btn-secondary:focus { background-color: #595958; border-color: #4d4d4c; color: #ffffff; }

.btn-dark { background-color: #2D2D2D; border-color: #2D2D2D; color: #ffffff; }
.btn-dark:hover, .btn-dark:focus { background-color: #1a1a1a; border-color: #1a1a1a; color: #ffffff; }

/* Outline Buttons */
.btn-outline-primary { color: #9C1006; border-color: #9C1006; }
.btn-outline-primary:hover { background-color: #9C1006; border-color: #9C1006; color: #ffffff; }

.btn-outline-warning { color: #FAB400; border-color: #FAB400; }
.btn-outline-warning:hover { background-color: #FAB400; border-color: #FAB400; color: #2D2D2D; }

.btn-outline-secondary { color: #6F6F6E; border-color: #6F6F6E; }
.btn-outline-secondary:hover { background-color: #6F6F6E; border-color: #6F6F6E; color: #ffffff; }

.btn-outline-dark { color: #2D2D2D; border-color: #2D2D2D; }
.btn-outline-dark:hover { background-color: #2D2D2D; border-color: #2D2D2D; color: #ffffff; }

/* -----------------------------------------
   2. TEXT & BACKGROUNDS
   ----------------------------------------- */
.text-primary { color: #9C1006 !important; }
.text-warning { color: #FAB400 !important; }
.text-secondary { color: #6F6F6E !important; }
.text-dark { color: #2D2D2D !important; }

.bg-primary { background-color: #9C1006 !important; color: #ffffff !important; }
.bg-warning { background-color: #FAB400 !important; color: #2D2D2D !important; }
.bg-secondary { background-color: #6F6F6E !important; color: #ffffff !important; }
.bg-dark { background-color: #2D2D2D !important; color: #ffffff !important; }

/* -----------------------------------------
   3. ADMINLTE CARDS & BORDERS
   ----------------------------------------- */
.border-top-primary { border-top-color: #9C1006 !important; }
.border-top-warning { border-top-color: #FAB400 !important; }
.border-top-secondary { border-top-color: #6F6F6E !important; }
.border-top-dark { border-top-color: #2D2D2D !important; }

.card-primary.card-outline { border-top-color: #9C1006; }
.card-warning.card-outline { border-top-color: #FAB400; }
.card-secondary.card-outline { border-top-color: #6F6F6E; }
.card-dark.card-outline { border-top-color: #2D2D2D; }

/* -----------------------------------------
   4. SIDEBAR MENUS (The Industrial Look)
   ----------------------------------------- */
/* Make the sidebar Charcoal instead of generic blue/black */
.sidebar-dark-primary { background-color: #2D2D2D !important; }

/* The active menu item gets the Deep Red */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active, 
.sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: #9C1006 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Sidebar Logo Area Border */
.sidebar-dark-primary .brand-link { border-bottom: 1px solid #3a3a3a !important; color: #ffffff !important; }

/* -----------------------------------------
   5. BADGES
   ----------------------------------------- */
.badge-primary { background-color: #9C1006; color: #ffffff; }
.badge-warning { background-color: #FAB400; color: #2D2D2D; }
.badge-secondary { background-color: #6F6F6E; color: #ffffff; }
.badge-dark { background-color: #2D2D2D; color: #ffffff; }

/* -----------------------------------------
   6. LOGIN SCREEN REFRESH
   ----------------------------------------- */
.login-page { background-color: #2D2D2D !important; }
.login-card-body, .register-card-body { 
    background: #ffffff; 
    border-top: 5px solid #9C1006; /* Red brand stripe at the top */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
.login-logo a { color: #ffffff !important; font-weight: bold; letter-spacing: 1px; }
.login-logo a b { color: #FAB400 !important; } /* Highlights half the logo in Yellow */

/* ==========================================================================
   OBSIDIAN & GOLD DESIGN SYSTEM
   The modern admin surface language. Section 0 above stays the historical
   brand palette; the tokens and overrides below are the current standard and,
   coming later in the cascade, win for the properties they touch.
   ========================================================================== */

:root {
    /* Base Surfaces */
    --fabric-obsidian: #0F172A;
    --fabric-charcoal: #334155;
    --fabric-ice: #F8FAFC;
    --fabric-slate: #E2E8F0;

    /* Brand Accents */
    --fabric-gold: #D97706;
    --fabric-gold-light: #FBBF24;

    /* Semantic System */
    --semantic-success: #10B981;
    --semantic-danger: #E11D48;
    --semantic-warning: #F59E0B;
    --semantic-info: #0EA5E9;
}

/* -----------------------------------------
   7. GLOBAL SURFACE
   ----------------------------------------- */
body { background-color: var(--fabric-ice); }

/* -----------------------------------------
   8. FORM CONTROL STANDARDIZATION
   ----------------------------------------- */
.form-control,
.form-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 38px;
    border-radius: 8px;
    background-color: #ffffff;
    border: 1px solid var(--fabric-slate);
}
.form-control-lg,
.input-group-lg > .form-control,
.input-group-lg > .form-select { min-height: 42px; }

.form-control:focus,
.form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--fabric-charcoal);
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
    outline: 0;
}

/* Keep the Select2 single-value box vertically aligned at 38px */
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }

/* -----------------------------------------
   9. TABLE STANDARDIZATION (uppercase micro-labels, borderless interior)
   ----------------------------------------- */
.table thead th {
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--fabric-charcoal);
    border-top: 0;
    border-bottom: 1px solid var(--fabric-slate);
}
.table td { border-top: 0; border-bottom: 1px solid #f1f5f9; }
.table tbody tr:hover { background-color: #f8fafc; }

/* -----------------------------------------
   10. BUTTON STANDARDIZATION (Obsidian & Gold)
   ----------------------------------------- */
.btn-primary {
    background-color: var(--fabric-gold);
    border-color: var(--fabric-gold);
    color: #ffffff;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #b45309;
    border-color: #b45309;
    color: #ffffff;
}
.btn-secondary {
    background-color: var(--fabric-charcoal);
    border-color: var(--fabric-charcoal);
    color: #ffffff;
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: #1e293b;
    border-color: #1e293b;
    color: #ffffff;
}

/* ==========================================================================
   OPT-IN SAAS COMPONENT CLASSES
   Applied explicitly by modern admin CRUD views. No legacy screen is affected
   unless it adopts one of these class names.
   ========================================================================== */

/* -----------------------------------------
   Data tables
   ----------------------------------------- */
.premium-data-table-wrapper {
    background: #ffffff;
    border: 1px solid var(--fabric-slate);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}
.premium-data-table-wrapper > .table,
.premium-data-table-wrapper > .fintech-table { margin-bottom: 0; }

.fintech-table { width: 100%; margin-bottom: 0; background: #ffffff; }
.fintech-table thead th {
    background: var(--fabric-ice);
    text-transform: uppercase;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--fabric-charcoal);
    padding: 0.85rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--fabric-slate);
}
.fintech-table tbody td {
    padding: 0.85rem 1rem;
    border: 0;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: var(--fabric-obsidian);
}
.fintech-table tbody tr:last-child td { border-bottom: 0; }
.fintech-table tbody tr:hover { background: #f8fafc; }

/* -----------------------------------------
   Cards & containers
   ----------------------------------------- */
.card-modern {
    background: #ffffff;
    border: 1px solid var(--fabric-slate);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.premium-card {
    background: #ffffff;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
    padding: 1.5rem;
}
.form-zone {
    background: #ffffff;
    border: 1px solid var(--fabric-slate);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.form-zone-header {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--fabric-charcoal);
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--fabric-slate);
}
/* Tighter form zone for use inside modals. */
.form-zone--compact {
    padding: 1rem;
    margin-bottom: 1rem;
}
.form-zone--compact .form-zone-header {
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Scrollable body region for tall modals (e.g. multi-session Nueva Reserva).
   Keeps .modal-header and .modal-footer fixed while this inner region scrolls. */
.modal-scroll-body {
    max-height: calc(85vh - 220px);
    overflow-y: auto;
    padding-right: 6px;
}
.modal-scroll-body::-webkit-scrollbar {
    width: 8px;
}
.modal-scroll-body::-webkit-scrollbar-track {
    background: var(--fabric-ice, #f1f3f7);
    border-radius: 8px;
}
.modal-scroll-body::-webkit-scrollbar-thumb {
    background: var(--fabric-slate, #cbd2e0);
    border-radius: 8px;
}
.modal-scroll-body::-webkit-scrollbar-thumb:hover {
    background: var(--fabric-charcoal, #8a94a6);
}
.modal-scroll-body {
    scrollbar-width: thin;
    scrollbar-color: var(--fabric-slate, #cbd2e0) var(--fabric-ice, #f1f3f7);
}

/* -----------------------------------------
   Metrics & KPI strips
   ----------------------------------------- */
.metric-card {
    background: #ffffff;
    border: 1px solid var(--fabric-slate);
    border-left: 4px solid var(--fabric-gold);
    border-radius: 10px;
    padding: 1.25rem;
}
.metric-card .metric-value { font-size: 1.75rem; font-weight: 700; color: var(--fabric-obsidian); line-height: 1.1; }
.metric-card .metric-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fabric-charcoal);
    font-weight: 600;
}
.pqr-kpi-card {
    background: var(--fabric-obsidian);
    color: var(--fabric-ice);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}
.pqr-kpi-card .metric-value { font-size: 1.9rem; font-weight: 700; color: #ffffff; }
.pqr-kpi-card .metric-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fabric-gold-light);
    font-weight: 600;
}

/* -----------------------------------------
   Soft badges (never reach for bg-danger / text-primary)
   ----------------------------------------- */
.badge-soft-success { background: rgba(16, 185, 129, 0.12); color: #047857; font-weight: 600; border-radius: 6px; padding: 0.35em 0.65em; }
.badge-soft-danger  { background: rgba(225, 29, 72, 0.12);  color: #be123c; font-weight: 600; border-radius: 6px; padding: 0.35em 0.65em; }
.badge-soft-warning { background: rgba(245, 158, 11, 0.14); color: #b45309; font-weight: 600; border-radius: 6px; padding: 0.35em 0.65em; }
.badge-soft-info    { background: rgba(14, 165, 233, 0.12); color: #0369a1; font-weight: 600; border-radius: 6px; padding: 0.35em 0.65em; }
.badge-soft-muted   { background: rgba(51, 65, 85, 0.10);   color: var(--fabric-charcoal); font-weight: 600; border-radius: 6px; padding: 0.35em 0.65em; }

/* -----------------------------------------
   Premium button tiers (Obsidian & Gold)
   ----------------------------------------- */
.btn-premium-primary {
    background-color: var(--fabric-gold) !important;
    color: var(--fabric-obsidian) !important;
    font-weight: 700 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    padding: 0.5rem 1.25rem !important;
    line-height: 1.5 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1) !important;
    transition: all 0.15s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}
.btn-premium-primary:hover {
    background-color: var(--fabric-gold-light) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(217, 119, 6, 0.2) !important;
}

.btn-premium-dark {
    background-color: var(--fabric-obsidian) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border: 1px solid var(--fabric-obsidian) !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    transition: all 0.15s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}
.btn-premium-dark:hover {
    background-color: var(--fabric-charcoal) !important;
    color: #ffffff !important;
}

.btn-premium-outline {
    background-color: #ffffff !important;
    color: var(--fabric-charcoal) !important;
    font-weight: 600 !important;
    border: 1px solid var(--fabric-slate) !important;
    border-radius: 8px !important;
    padding: 0.5rem 1.25rem !important;
    line-height: 1.5 !important;
    transition: all 0.15s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}
.btn-premium-outline:hover {
    background-color: var(--fabric-ice) !important;
    color: var(--fabric-obsidian) !important;
    border-color: #cbd5e1 !important;
}

/* Compact variant for both premium tiers — Bootstrap's .btn-sm padding is
   otherwise silently overridden by the !important full-size padding above,
   so a "small" premium button renders at full height. Needed anywhere a
   premium action sits in a dense toolbar/table row alongside .form-control-sm
   controls or other .btn-sm siblings. */
.btn-premium-primary.btn-sm,
.btn-premium-outline.btn-sm {
    padding: 0.3rem 0.85rem !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
}

.btn-soft-danger {
    background-color: #fee2e2 !important;
    color: var(--semantic-danger) !important;
    font-weight: 600 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    transition: all 0.15s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}
.btn-soft-danger:hover {
    background-color: #fecaca !important;
    color: #b91c1c !important;
}
.btn-action-soft {
    background: rgba(51, 65, 85, 0.08);
    border: 0;
    color: var(--fabric-charcoal);
    font-weight: 600;
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    line-height: 1.4;
}
.btn-action-soft:hover, .btn-action-soft:focus {
    background: rgba(51, 65, 85, 0.16);
    color: var(--fabric-obsidian);
}

/* -----------------------------------------
   Multi-select Select2 pill tag geometry
   ----------------------------------------- */
.select2-container--default .select2-selection--multiple { padding: 3px 6px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--fabric-obsidian);
    border: 0;
    border-radius: 6px;
    color: #ffffff;
    padding: 2px 8px;
    margin-top: 4px;
    font-size: 0.8rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--fabric-gold-light);
    margin-right: 4px;
    float: none;
    border: 0;
    background: transparent;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ffffff;
    background: transparent;
}

/* ==========================================================================
   STRUCTURAL PAYLOAD — OBSIDIAN & GOLD
   Modern chrome geometry layered over the 2017 AdminLTE shell. Consumes the
   :root tokens defined above.
   ========================================================================== */

/* -----------------------------------------
   11. MODERN TYPOGRAPHY
   ----------------------------------------- */
body,
h1, h2, h3, h4, h5, h6,
.nav-link,
.form-control {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* -----------------------------------------
   12. SIDEBAR GEOMETRY (Obsidian surface + floating gold active pill)
   Keyed on structural selectors so it does not depend on the legacy
   .sidebar-dark-primary DOM class (removed from the layout).
   ----------------------------------------- */
.main-sidebar { background-color: var(--fabric-obsidian) !important; }

.nav-sidebar .nav-item > .nav-link {
    position: relative;
    border-radius: 8px;
    margin: 2px 8px;
}

.nav-sidebar .nav-item > .nav-link.active {
    background-color: rgba(217, 119, 6, 0.14); /* translucent --fabric-gold */
    color: #ffffff;
    box-shadow: none;
}
.nav-sidebar .nav-item > .nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background-color: var(--fabric-gold);
}

/* -----------------------------------------
   13. CARD FLATTENING (no colored border-top, soft ambient shadow)
   ----------------------------------------- */
.card {
    border: 1px solid var(--fabric-slate);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.05);
}
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--fabric-slate);
}

/* Neutralize AdminLTE state-colored headers */
.card-primary:not(.card-outline) > .card-header,
.card-secondary:not(.card-outline) > .card-header,
.card-info:not(.card-outline) > .card-header,
.card-success:not(.card-outline) > .card-header,
.card-warning:not(.card-outline) > .card-header,
.card-danger:not(.card-outline) > .card-header {
    background-color: transparent;
    color: inherit;
}

/* Neutralize the heavy colored top stripe (keep the 3px width, drop the hue) */
.card-primary,
.card-secondary,
.card-info,
.card-success,
.card-warning,
.card-danger,
.card.card-primary.card-outline,
.card.card-secondary.card-outline,
.card.card-info.card-outline,
.card.card-success.card-outline,
.card.card-warning.card-outline,
.card.card-danger.card-outline {
    border-top-color: var(--fabric-slate) !important;
}

/* -----------------------------------------
   14. AGENDA APPOINTMENT STATUS COLORS
   Pastel status fills for the calendar grid. Backgrounds are light, so text
   inside a block defaults to the dark Obsidian ink for readability.
   ----------------------------------------- */
.bg-status-booked    { background-color: #6bc4f1 !important; color: var(--fabric-obsidian); } /* Blue */
.bg-status-confirmed { background-color: #e2b449 !important; color: var(--fabric-obsidian); } /* Yellow */
.bg-status-arrived   { background-color: #f0a9f5 !important; color: var(--fabric-obsidian); } /* Purple */
.bg-status-no_show   { background-color: #f6c0ba !important; color: var(--fabric-obsidian); } /* Light Rose */
.bg-status-pending   { background-color: #f18b93 !important; color: var(--fabric-obsidian); } /* Dark Rose */
.bg-status-waiting   { background-color: #c2e781 !important; color: var(--fabric-obsidian); } /* Green */
/* completed still renders on the grid (only 'cancelled' is filtered out); the green
   pay-stripe + lock icon (§16) carry the "finalised & paid" meaning */
.bg-status-completed {
    background-color: #f3e8ff !important; /* Soft pastel violet/lavender */
    color: var(--fabric-obsidian) !important;
}

/* -----------------------------------------
   14b. AGENDA GRID — BOUNDED SCROLL + PINNED PROVIDER HEADER
   The grid table lives in a bounded 2-axis scroll region so vertical scrolling
   pins the provider header row while horizontal scrolling across provider
   columns keeps working. CSS-only: no JS clone-header, no scroll listener.
   ----------------------------------------- */
.calendar-grid-scroll {
    max-height: calc(100vh - 210px);
    overflow: auto;
}
/* `table.table` keeps this ahead of AdminLTE's `.table .thead-light th` (0,0,2,1) */
.calendar-grid-scroll table.table thead th {
    position: sticky;
    top: 0;
    z-index: 3; /* above .appointment-cell (position: relative) + !important status fills */
    background: var(--fabric-ice);
    /* collapsed table borders don't travel with a sticky cell — draw the rule here */
    box-shadow: inset 0 -1px 0 var(--fabric-slate);
}

/* -----------------------------------------
   14c. AGENDA GRID — SCHEDULE BLOCK CELL
   A blocked-time cell reads as quietly unavailable: a light slate ground with a
   hairline hatch, charcoal text, and a muted icon — clearly below the pastel
   appointment cards in the visual hierarchy. Obsidian & Gold tokens only.
   ----------------------------------------- */
.calendar-block-cell {
    background-color: var(--fabric-ice);
    background-image: repeating-linear-gradient(45deg, var(--fabric-slate) 0 1px, transparent 1px 9px);
    color: var(--fabric-charcoal);
}
.calendar-block-cell .cbc-title { font-weight: 700; }
.calendar-block-cell .cbc-icon { color: #94A3B8; }
.calendar-block-cell.is-editable { cursor: pointer; }

/* -----------------------------------------
   AGENDA QUICK CARD — STATUS DOT SWATCHES
   (opt-in component of the §15 Global Modal Design System, kept beside the
   .bg-status-* fills it depends on). Uniform fixed-size swatches; the current
   status is shown by a ring + a separate static "Estado:" label, and each
   dot's Spanish label appears on hover through a pure-CSS ::after tooltip.
   ----------------------------------------- */
.status-dot-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.status-line {
    margin-left: 0.75rem;
    font-size: 0.875rem;
    color: var(--fabric-charcoal);
}
.status-dot {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid #ffffff;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.status-dot:hover {
    transform: scale(1.15);
}
.status-dot.is-active {
    box-shadow: 0 0 0 2px var(--fabric-obsidian);
}
.status-dot::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--fabric-obsidian);
    color: #ffffff;
    font-size: 0.7rem;
    line-height: 1;
    white-space: nowrap;
    padding: 0.25rem 0.45rem;
    border-radius: 4px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
}
.status-dot:hover::after {
    opacity: 1;
}

/* Quick Card operational-notes callout. */
.notes-callout {
    background: rgba(51, 65, 85, 0.06);
    border-left: 3px solid var(--fabric-gold, #d97706);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    font-size: 0.875rem;
}

/* -----------------------------------------
   16. COMPLETED / PAID APPOINTMENT CARD (AgendaPro-style cues)
   ----------------------------------------- */
/* The appointment <td> (with its rowspan) is the positioning context, so the
   pay-stripe and lock icon span the FULL time-slot height, not just the text. */
.appointment-cell {
    position: relative;
    overflow: hidden;
}

.appointment-grid-card {
    width: 100%;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.appointment-grid-card.is-paid {
    padding-left: 20px !important;
}

.appointment-paid-stripe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 14px;
    background-color: #10B981; /* Green payment indicator */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    user-select: none;
    pointer-events: none;
}

.appointment-lock-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.7rem;
    color: var(--fabric-charcoal);
    opacity: 0.6;
}

.appointment-service-label {
    font-size: 0.72rem;
    color: var(--fabric-charcoal);
    font-weight: 500;
    line-height: 1.1;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appointment-time-label {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 2px;
}

/* -----------------------------------------
   15. GLOBAL MODAL DESIGN SYSTEM (Obsidian & Gold)
   Applies to every Bootstrap-4 modal shell, including the server-rendered
   CSS-overlay modals used by Livewire components.
   ----------------------------------------- */
.modal-content {
    border: 1px solid var(--fabric-slate) !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
    overflow: hidden;
    background-color: #ffffff;
}

.modal-header {
    border-bottom: 1px solid var(--fabric-slate) !important;
    background-color: #ffffff !important;
    padding: 1.25rem 1.5rem !important;
    align-items: center !important;
}

.modal-title {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--fabric-obsidian) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
}

.modal-header-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(217, 119, 6, 0.12);
    color: var(--fabric-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.modal-header .close {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--fabric-charcoal);
    opacity: 0.6;
    transition: opacity 0.15s ease;
    padding: 1rem 1.5rem;
    margin: -1.25rem -1.5rem -1.25rem auto;
}

.modal-header .close:hover {
    opacity: 1;
    color: var(--fabric-obsidian);
}

.modal-body {
    padding: 1.5rem !important;
}

.modal-footer {
    border-top: 1px solid var(--fabric-slate) !important;
    background-color: var(--fabric-ice) !important;
    padding: 1rem 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
}

/* Modal content components */
.modal-context-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--fabric-ice);
    border: 1px solid var(--fabric-slate);
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--fabric-charcoal);
    margin-bottom: 1.25rem;
}

.modal-context-pill i {
    color: var(--fabric-gold);
}

.modal-total-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--fabric-obsidian);
    color: var(--fabric-gold-light);
    font-weight: 800;
    font-size: 0.85rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    letter-spacing: 0.3px;
}

.service-select-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--fabric-slate);
    background-color: #ffffff;
    transition: all 0.15s ease;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.service-select-item:hover {
    background-color: var(--fabric-ice);
    border-color: rgba(217, 119, 6, 0.4);
}

.service-select-item.is-selected {
    background-color: rgba(217, 119, 6, 0.05);
    border-color: var(--fabric-gold);
}

.btn-link-action {
    background: none;
    border: 0;
    padding: 0;
    margin-top: 6px;
    color: var(--fabric-gold);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}

.btn-link-action:hover {
    color: var(--fabric-gold-light);
    text-decoration: underline;
    transform: translateY(-1px);
}

.btn-link-action:focus,
.btn-link-action:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Borderless circular icon button for modal header trays. Invisible until
   hover; the .text-danger variant tints the hover state to the danger token. */
.btn-action-ghost {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--fabric-charcoal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-action-ghost:hover {
    background: rgba(15, 23, 42, 0.06);
    color: var(--fabric-obsidian);
}
.btn-action-ghost.text-danger:hover {
    background: rgba(225, 29, 72, 0.10);
    color: var(--semantic-danger) !important;
}
.btn-action-ghost:disabled,
.btn-action-ghost[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}
.btn-action-ghost:disabled:hover,
.btn-action-ghost[disabled]:hover {
    background: transparent;
    color: var(--fabric-charcoal);
}

/* Segmented in-modal tab strip (e.g. the Detalle de Reserva Quick Card's
   "Cita" / "Pago" switch). Borderless text buttons over a slate hairline;
   the active tab is marked by a gold underline, never a size change. */
.modal-segment-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--fabric-slate);
    margin-bottom: 1rem;
}
.modal-segment-tab {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0.5rem 0.9rem;
    margin-bottom: -1px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fabric-charcoal);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.modal-segment-tab:hover {
    color: var(--fabric-obsidian);
}
.modal-segment-tab:focus,
.modal-segment-tab:focus-visible {
    outline: none;
    box-shadow: none;
}
.modal-segment-tab.is-active {
    color: var(--fabric-obsidian);
    border-bottom-color: var(--fabric-gold);
}

/* Table-free service line: name / duration / price on one flex row with a
   soft divider. Read-only counterpart to the interactive .service-select-item. */
.service-ticket-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--fabric-slate);
    font-size: 0.875rem;
}
.service-ticket-item:last-child {
    border-bottom: 0;
}
.service-ticket-item .sti-name {
    font-weight: 700;
    color: var(--fabric-charcoal);
}
.service-ticket-item .sti-meta {
    color: #94A3B8;
    font-size: 0.8rem;
}
.service-ticket-item .sti-price {
    font-weight: 700;
    color: var(--fabric-gold);
    white-space: nowrap;
}

/* WhatsApp contact pill — official brand green, rounded pill. .is-disabled
   renders it muted and non-interactive (no usable customer mobile). */
.btn-whatsapp-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: #25D366;
    color: #ffffff !important;
    border: none;
    border-radius: 9999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.btn-whatsapp-pill:hover {
    background-color: #20BA56;
    color: #ffffff !important;
    text-decoration: none;
}
.btn-whatsapp-pill.is-disabled {
    background-color: var(--fabric-slate);
    color: #94A3B8 !important;
    pointer-events: none;
    opacity: 0.7;
}

/* -----------------------------------------
   17. APPOINTMENT STATUS MICRO-CHIP
   Compact translucent pill inside a grid appointment block. Sits bottom-left,
   never stretches, and reads consistently over every pastel status colour.
   ----------------------------------------- */
.appointment-status-chip {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: auto;
    margin-top: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: var(--fabric-obsidian);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.4;
    white-space: nowrap;
}

/* -----------------------------------------
   18. CHECKOUT RECEIPT SUMMARY (POS checkout modal)
   Borderless soft card that tallies the checkout: services, products, the
   total to charge, what has been paid, and the outstanding balance. Clear
   hierarchy — the total is the largest line, the balance is coloured by state.
   ----------------------------------------- */
.receipt-summary {
    background-color: var(--fabric-ice);
    border: 1px solid var(--fabric-slate);
    border-radius: 12px;
    padding: 1rem 1.25rem;
}
.receipt-summary__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
}
.receipt-summary__label {
    color: var(--fabric-charcoal);
    font-size: 0.85rem;
    font-weight: 500;
}
.receipt-summary__value {
    color: var(--fabric-obsidian);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.receipt-summary__divider {
    height: 1px;
    background-color: var(--fabric-slate);
    margin: 0.5rem 0;
}
.receipt-summary__row--total .receipt-summary__label {
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--fabric-obsidian);
}
.receipt-summary__row--total .receipt-summary__value {
    font-size: 1.35rem;
    font-weight: 800;
}
.receipt-summary__row--balance .receipt-summary__label {
    font-weight: 700;
    color: var(--fabric-obsidian);
}
.receipt-summary__value--due     { color: var(--semantic-danger);  font-size: 1.05rem; font-weight: 800; }
.receipt-summary__value--settled { color: var(--semantic-success); font-size: 1.05rem; font-weight: 800; }
.receipt-summary__row--meta .receipt-summary__label,
.receipt-summary__row--meta .receipt-summary__value {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--fabric-charcoal);
}

/* -----------------------------------------
   19. PREMIUM BUTTONS — SUCCESS / DANGER TIERS + TACTILE STATES
   Extends section 10. "Confirmar Cobro" and other primary modal submits use
   these: rounded corners, a soft coloured shadow, and a pressed state.
   ----------------------------------------- */
.btn-premium-success {
    background-color: var(--semantic-success) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.5rem 1.25rem !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.24) !important;
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}
.btn-premium-success:hover:not(:disabled) {
    background-color: #059669 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.32) !important;
}
.btn-premium-success:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.24) !important;
}
.btn-premium-success:disabled {
    opacity: 0.5 !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

.btn-premium-danger {
    background-color: var(--semantic-danger) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.5rem 1.25rem !important;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.24) !important;
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}
.btn-premium-danger:hover:not(:disabled) {
    background-color: #be123c !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(225, 29, 72, 0.32) !important;
}
.btn-premium-danger:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.24) !important;
}
.btn-premium-danger:disabled {
    opacity: 0.5 !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* Deepen the resting shadow and add a pressed state to the gold + outline
   tiers so every primary modal submit reads as tactile. */
.btn-premium-primary { box-shadow: 0 4px 12px rgba(217, 119, 6, 0.18) !important; }
.btn-premium-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.2) !important;
}
.btn-premium-primary:disabled { opacity: 0.5 !important; box-shadow: none !important; cursor: not-allowed; }
.btn-premium-outline:active:not(:disabled) {
    transform: translateY(0);
    background-color: var(--fabric-slate) !important;
}

/* -----------------------------------------
   20. GLOBAL SWEETALERT2 SKIN (Obsidian & Gold)
   Every Swal.fire in the app inherits this. Legacy call sites that still pass
   an inline confirmButtonColor are intentionally overridden here.
   ----------------------------------------- */
.swal2-popup {
    border-radius: 16px !important;
    padding: 2rem !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25) !important;
}
.swal2-title {
    color: var(--fabric-obsidian) !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
}
.swal2-html-container {
    color: var(--fabric-charcoal) !important;
    font-size: 0.95rem !important;
}
.swal2-actions {
    gap: 0.75rem !important;
    margin-top: 1.25rem !important;
}
.swal2-styled {
    border-radius: 8px !important;
    padding: 0.55rem 1.4rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
}
.swal2-styled.swal2-confirm {
    background-color: var(--fabric-gold) !important;
    color: var(--fabric-obsidian) !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.24) !important;
}
.swal2-styled.swal2-confirm:hover {
    background-color: var(--fabric-gold-light) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(217, 119, 6, 0.3) !important;
}
.swal2-styled.swal2-confirm:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.24) !important;
}
.swal2-styled.swal2-cancel {
    background-color: #ffffff !important;
    color: var(--fabric-charcoal) !important;
    border: 1px solid var(--fabric-slate) !important;
}
.swal2-styled.swal2-cancel:hover {
    background-color: var(--fabric-ice) !important;
    color: var(--fabric-obsidian) !important;
}
.swal2-styled:focus {
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12) !important;
}
.swal2-timer-progress-bar {
    background: rgba(217, 119, 6, 0.35) !important;
}

/* Clean, lighter-weight status icons */
.swal2-icon { border-width: 3px !important; }
.swal2-icon.swal2-success { border-color: var(--semantic-success) !important; color: var(--semantic-success) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--semantic-success) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(16, 185, 129, 0.3) !important; }
.swal2-icon.swal2-error { border-color: var(--semantic-danger) !important; color: var(--semantic-danger) !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--semantic-danger) !important; }
.swal2-icon.swal2-warning { border-color: var(--semantic-warning) !important; color: var(--semantic-warning) !important; }
.swal2-icon.swal2-info { border-color: var(--semantic-info) !important; color: var(--semantic-info) !important; }
.swal2-icon.swal2-question { border-color: var(--fabric-charcoal) !important; color: var(--fabric-charcoal) !important; }
/* -----------------------------------------
   TOP NAVBAR — direct access links (Obsidian & Gold)
   Agenda / Clientes / Productos on the left, Ayuda on the right.
   ----------------------------------------- */
.main-header.navbar {
    border-bottom: 1px solid var(--fabric-slate);
}
.main-header .navbar-nav .nav-link.top-nav-link {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #64748B; /* slate — inactive */
    padding: 0.45rem 0.9rem;
    margin: 0 0.1rem;
    border-radius: 8px;
    transition: background-color .15s ease, color .15s ease;
}
.main-header .navbar-nav .nav-link.top-nav-link:hover,
.main-header .navbar-nav .nav-link.top-nav-link:focus {
    color: #0F172A; /* obsidian — hover */
    background-color: var(--fabric-ice);
}
.main-header .navbar-nav .nav-link.top-nav-link.active {
    color: #0F172A;
    font-weight: 600;
    background-color: rgba(212, 175, 55, 0.12); /* soft gold pill */
}
.main-header .navbar-nav .nav-link.top-nav-link.active:hover,
.main-header .navbar-nav .nav-link.top-nav-link.active:focus {
    color: #0F172A;
    background-color: rgba(212, 175, 55, 0.18);
}
@media (max-width: 575.98px) {
    /* xs: the .d-none.d-sm-inline-block links are already hidden; keep the
       toggle + user menu on a single un-stretched row. */
    .main-header .navbar-nav .nav-link.top-nav-link {
        padding: 0.45rem 0.6rem;
    }
}

/* -----------------------------------------
   "Reportes" top-nav dropdown (Obsidian & Gold)
   Scoped to .reports-nav so the user menu is untouched. No FA icons; soft
   ice hover; a gold inset rule instead of the harsh Bootstrap active fill.
   ----------------------------------------- */
.main-header .navbar-nav .reports-nav .dropdown-menu {
    border: 1px solid var(--fabric-slate);
    border-radius: 10px;
    padding: 0.35rem;
    margin-top: 0.35rem;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}
.main-header .navbar-nav .reports-nav .dropdown-item {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--fabric-obsidian);
    border-radius: 7px;
    padding: 0.5rem 0.85rem;
}
.main-header .navbar-nav .reports-nav .dropdown-item:hover,
.main-header .navbar-nav .reports-nav .dropdown-item:focus {
    background-color: var(--fabric-ice);
    color: var(--fabric-obsidian);
}
.main-header .navbar-nav .reports-nav .dropdown-item.active,
.main-header .navbar-nav .reports-nav .dropdown-item:active {
    background-color: var(--fabric-ice);
    color: var(--fabric-obsidian);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--fabric-gold);
}