/* ── Brand design tokens ─────────────────────────────────────────────────────*/
:root {
    /* Brand: #2c98E0 (set by user). Derivatives compute darker shades. */
    --brand:          #2c98E0;
    --brand-dark:     #1F86C7;
    --brand-darker:   #1672AC;
    --brand-10:       rgba(44,152,224,.10);
    --brand-20:       rgba(44,152,224,.20);

    /* Sidebar zinc-900: same neutral dark as AdminPortal */
    --sidebar-bg:     #18181B;
    --sidebar-border: rgba(255,255,255,.06);
    --topbar-bg:      #ffffff;
    --topbar-border:  #E4E8EF;
    --topbar-h:       62px;

    --body-bg:        #F2F5F9;
    --surface:        #ffffff;
    --border:         #DDE3EC;

    --text:           #111827;
    --text-secondary: #4B5563;
    --text-muted:     #9CA3AF;

    --radius:         8px;
    --radius-sm:      5px;
    --shadow-sm:      0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:      0 4px 12px rgba(0,0,0,.09);
}

/* ── Reset ───────────────────────────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    color: var(--text);
    background: var(--body-bg);
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 22px; font-weight: 600; color: var(--text); margin: 0 0 4px; }
h2 { font-size: 17px; font-weight: 600; margin: 0 0 8px; }
p  { margin: 0 0 12px; line-height: 1.6; }

.page-title { font-size: 22px; font-weight: 600; color: var(--text); margin: 0 0 24px; }
.page-section-title { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.page-section-subtitle { color: var(--text-secondary); font-size: 13px; margin: 0 0 18px; }

/* ── Page chrome (no card wrapper around the grid) ───────────────────────────*/
/* Used by inner pages (Pacientes/Users/Accesos): the SfGrid stretches
   full-width below, while the header above keeps the card-header look
   (white surface, soft shadow, brand-colored title) familiar from the
   previous Bootstrap card-header. */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 18px;
    padding: 16px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.page-header .page-title {
    margin: 0;
    color: var(--brand);
    font-weight: 700;
}
.page-header-badges { display: flex; gap: 8px; flex-wrap: wrap; }

.page-footer {
    margin-top: 16px;
    padding: 12px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

/* ── Buttons ─────────────────────────────────────────────────────────────────*/
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background 140ms, box-shadow 140ms, border-color 140ms;
    white-space: nowrap;
    line-height: 1.4;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary { background: var(--brand); color: white; border-color: var(--brand); }
.btn-primary:hover:not(:disabled) {
    background: var(--brand-darker);
    border-color: var(--brand-darker);
    box-shadow: 0 2px 8px rgba(44,152,224,.35);
}
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { background: #F5F8FB; border-color: #B8C8D8; }
.btn-warning   { background: #E67C00; color: white; border-color: #E67C00; }
.btn-warning:hover:not(:disabled)   { background: #CC6D00; }
.btn-danger    { background: #C0392B; color: white; border-color: #C0392B; }
.btn-danger:hover:not(:disabled)    { background: #A93226; }

/* ── Cards ───────────────────────────────────────────────────────────────────*/
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 20px 24px;
}

/* ── Status badges ───────────────────────────────────────────────────────────*/
.badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
}
.badge-success { background: #E6F7F0; color: #1A7A4A; }
.badge-warning { background: #FEF6E6; color: #9A5D00; }
.badge-danger  { background: #FEECEB; color: #B03020; }
.badge-info    { background: #E6F3FC; color: #1A6191; }
.badge-muted   { background: #EAEEF2; color: #5A6E7A; }

/* ── Tables ──────────────────────────────────────────────────────────────────*/
table { width: 100%; border-collapse: collapse; }
th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-secondary);
    padding: 10px 12px;
    border-bottom: 2px solid var(--border);
}
td {
    padding: 11px 12px;
    border-bottom: 1px solid #EDF2F7;
    vertical-align: middle;
    font-size: 13.5px;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: #F7FAFE; }

/* ── Forms ───────────────────────────────────────────────────────────────────*/
input, select, textarea { font-family: inherit; font-size: 13.5px; color: var(--text); }
input[type="text"], input[type="email"], input[type="number"],
input[type="password"], input[type="tel"], input[type="url"],
input[type="search"], select, textarea {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    background: var(--surface);
    transition: border-color 140ms, box-shadow 140ms;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-10);
}

/* ── Bootstrap reconciliation: keep our tokens winning ───────────────────────*/
.bg-primary { background: var(--brand) !important; }
.text-primary { color: var(--brand) !important; }
.border-primary { border-color: var(--brand) !important; }
.spinner-border.text-primary { color: var(--brand) !important; }

/* Validation states from Identity / EditForm */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

/* Blazor error boundary (preserved from previous app.css, theme-neutral) */
.blazor-error-boundary {
    background: #b32121;
    color: white;
    padding: 1rem;
    border-radius: var(--radius-sm);
}
.blazor-error-boundary::after { content: "An error has occurred."; }

/* Blazor's runtime-error banner. Hidden by default; Blazor's JS sets
   display:block when an unhandled exception bubbles up to the circuit.
   Without this rule the Bootstrap "alert show" classes carried by the
   markup make the banner permanently visible. */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0; left: 0;
    width: 100%;
    z-index: 1000;
    background: #FFF8E1;
    color: #5C4400;
    border-top: 1px solid #F0D58C;
    padding: 10px 18px;
    box-shadow: 0 -1px 4px rgba(0,0,0,.08);
    font-size: 13.5px;
}
#blazor-error-ui .reload { color: var(--brand); margin-left: 12px; font-weight: 600; }
#blazor-error-ui .btn-close { float: right; }

/* ── Misc ────────────────────────────────────────────────────────────────────*/
.auth-loading {
    display: flex; align-items: center; justify-content: center;
    min-height: 200px; color: var(--text-muted);
}

/* ── Syncfusion Grid overrides ───────────────────────────────────────────────*/
.e-grid {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    overflow: hidden;
    font-size: 13.5px !important;
    font-family: inherit !important;
}
.e-grid .e-headercell {
    background: #F8FAFB !important;
    color: var(--text-secondary) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
}
.e-grid .e-rowcell { color: var(--text) !important; padding: 10px 14px !important; }
.e-grid .e-altrow { background-color: #F8FAFB !important; }
.e-grid .e-row:hover .e-rowcell { background-color: #EEF6FF !important; }
.e-grid .e-toolbar { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; }
.e-grid .e-search-wrapper { margin: 0 !important; }
.e-grid .e-columnheader .e-sortfilterdiv { color: var(--brand) !important; }
.e-grid .e-gridpager { background: var(--surface) !important; border-top: 1px solid var(--border) !important; }
.e-grid .e-selectionbackground { background: var(--brand-10) !important; }
.e-grid td.e-selectionbackground { color: var(--text) !important; }
.e-grid .e-filtermenudiv { color: var(--text-muted) !important; }
.e-grid.grid-clickable .e-row { cursor: pointer; }

/* ── Syncfusion sidebar overrides ────────────────────────────────────────────*/
.e-sidebar.portal-sidebar {
    top: var(--topbar-h) !important;
    height: calc(100vh - var(--topbar-h)) !important;
    background: var(--sidebar-bg) !important;
    border-right: none !important;
}
.e-sidebar.portal-sidebar .e-content { height: 100%; }

/* ── Form-floating tweaks (Bootstrap 5 component used by Identity forms) ────*/
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--text-muted);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder { text-align: start; }