/* ── Brand design tokens ─────────────────────────────────────────────────────*/
:root {
    /* okicom brand blue — más vivo y limpio */
    --brand:          #1D8CF0;
    --brand-dark:     #1677D4;
    --brand-darker:   #1060B8;
    --brand-10:       rgba(29,140,240,.10);
    --brand-20:       rgba(29,140,240,.20);

    /* sidebar zinc-900: negro neutro sin tono azul */
    --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; }

/* ── 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,159,218,.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"], 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);
}

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

/* ── 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; }
/* Pijama — filas alternas */
.e-grid .e-altrow { background-color: #F8FAFB !important; }
.e-grid .e-row:hover .e-rowcell { background-color: #EEF6FF !important; }
/* Toolbar de búsqueda */
.e-grid .e-toolbar { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; }
.e-grid .e-search-wrapper { margin: 0 !important; }
/* Botón de ordenación */
.e-grid .e-columnheader .e-sortfilterdiv { color: var(--brand) !important; }
/* Paginador */
.e-grid .e-gridpager { background: var(--surface) !important; border-top: 1px solid var(--border) !important; }
/* Selección */
.e-grid .e-selectionbackground { background: var(--brand-10) !important; }
.e-grid td.e-selectionbackground { color: var(--text) !important; }
/* Filter menu */
.e-grid .e-filtermenudiv { color: var(--text-muted) !important; }
/* Cursor pointer para filas clicables */
.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%; }