/* ============================================================
   RC INVERSIONES — ESTILOS COMPLETOS (fondo blanco en contenido)
   ============================================================ */

:root {
  --gold:        #C9A84C;
  --gold-light:  #E2C46A;
  --gold-dark:   #8B6914;
  --gold-bg:     rgba(201,168,76,0.10);
  --dark:        #0D1117;
  --dark2:       #161B22;
  --dark3:       #1E2530;
  --dark4:       #252D3A;
  --border:      rgba(201,168,76,0.18);
  --border2:     rgba(0,0,0,0.10);        /* antes era blanco/07, ahora negro/10 para fondo blanco */
  --text:        #1A1F2B;                 /* texto oscuro para fondo blanco */
  --text2:       #5A6478;                 /* secundario */
  --text3:       #9AA3B0;                 /* terciario */
  --red:         #D94040;
  --red-bg:      rgba(217,64,64,0.10);
  --green:       #22A05B;
  --green-bg:    rgba(34,160,91,0.10);
  --blue:        #2F7FD4;
  --blue-bg:     rgba(47,127,212,0.10);
  --purple:      #7C55D6;
  --purple-bg:   rgba(124,85,214,0.10);
  --sidebar-w:   260px;
  --header-h:    64px;
  --radius:      12px;
  --radius-sm:   8px;
  --shadow:      0 4px 24px rgba(0,0,0,0.10);
  --shadow-gold: 0 4px 20px rgba(201,168,76,0.30);

  /* superficie blanca para el contenido */
  --surface:     #FFFFFF;
  --surface2:    #F7F8FA;
  --surface3:    #EFF1F5;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--surface2);   /* fondo general blanco-gris muy suave */
  color: var(--text);
  min-height: 100vh;
}

/* ============================================================
   LOGIN
   ============================================================ */
.login-page { overflow: hidden; height: 100vh; }

.login-wrapper {
  display: flex;
  height: 100vh;
}

/* Brand side — se mantiene oscuro (identidad premium) */
.login-brand {
  flex: 1.1;
  position: relative;
  background: var(--dark2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.login-brand::before {
  content:'';
  position:absolute;
  width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,168,76,.13) 0%,transparent 65%);
  top:-200px;left:-200px;
}
.login-brand::after {
  content:'';
  position:absolute;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,168,76,.07) 0%,transparent 65%);
  bottom:-150px;right:-100px;
}
.login-brand .login-brand-inner { position:relative;z-index:2;padding:3rem; }

.brand-logo-box {
  display:flex;align-items:center;gap:.75rem;
  margin-bottom:2.5rem;
}
.logo-diamond { color:var(--gold);font-size:2rem;filter:drop-shadow(0 0 10px rgba(201,168,76,.7)); }
.logo-diamond.sm { font-size:1rem; }
.brand-rc {
  font-family:'Playfair Display',serif;
  font-size:1.8rem;font-weight:900;
  color:var(--gold);letter-spacing:6px;
}
.brand-headline {
  font-family:'Playfair Display',serif;
  font-size:3.4rem;font-weight:900;
  line-height:1.1;
  color:#E8ECF0;                  /* blanco sobre fondo oscuro del brand side */
  margin-bottom:1.2rem;
}
.brand-desc { font-size:1rem;color:#8B95A3;line-height:1.75;margin-bottom:2.5rem; }
.brand-line-dots { display:flex;align-items:center;gap:8px; }
.dot { display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--gold);opacity:.45; }
.dot-lg { width:24px;border-radius:4px;opacity:1; }

/* Form side — blanco */
.login-form-side {
  flex: 0.9;
  background: var(--surface);
  display:flex;align-items:center;justify-content:center;
  padding:2rem;
  border-left:1px solid rgba(0,0,0,0.07);
}
.login-box { width:100%;max-width:400px; }
.login-box-logo {
  display:flex;align-items:center;gap:.5rem;
  color:var(--gold-dark);font-weight:600;font-size:.82rem;
  letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:2rem;
}
.login-title {
  font-family:'Playfair Display',serif;
  font-size:2rem;font-weight:700;
  color:var(--text);margin-bottom:.4rem;
}
.login-sub { color:var(--text2);font-size:.88rem;margin-bottom:1.8rem; }

.field { margin-bottom:1.2rem; }
.field label {
  display:block;font-size:.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.8px;
  color:var(--text2);margin-bottom:.45rem;
}
.input-icon-wrap { position:relative;display:flex;align-items:center; }
.field-icon {
  position:absolute;left:13px;
  width:17px;height:17px;fill:var(--text3);
  pointer-events:none;transition:fill .2s;
}
.input-icon-wrap input,
.input-icon-wrap select,
.input-icon-wrap textarea {
  width:100%;
  background: var(--surface2);
  border:1px solid var(--border2);
  border-radius:var(--radius-sm);
  padding:.8rem 1rem .8rem 2.7rem;
  font-family:'DM Sans',sans-serif;font-size:.93rem;
  color:var(--text);outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.input-icon-wrap input:focus,
.input-icon-wrap select:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,168,76,.12);
  background: var(--surface);
}
.eye-btn {
  position:absolute;right:10px;
  background:none;border:none;cursor:pointer;padding:4px;
}
.eye-btn svg { width:17px;height:17px;fill:var(--text3); }

/* Botón submit login — negro con texto blanco */
.btn-login-submit {
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  background: #1A1F2B;
  color: #FFFFFF;
  border:none;border-radius:var(--radius-sm);
  padding:.9rem 1.5rem;
  font-family:'DM Sans',sans-serif;font-size:.93rem;font-weight:600;
  cursor:pointer;margin-top:1.5rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transition:transform .15s,box-shadow .15s,background .15s;
}
.btn-login-submit svg { width:17px;height:17px;fill:#FFFFFF; }
.btn-login-submit:hover {
  transform:translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
  background: #252D3A;
}

.login-demo-hint { text-align:center;margin-top:1.5rem;font-size:.77rem;color:var(--text3); }
.login-demo-hint strong { color:var(--gold-dark); }

/* ============================================================
   LAYOUT: SIDEBAR + HEADER
   ============================================================ */
.app-body { overflow:hidden;height:100vh;display:flex; }

/* SIDEBAR — se mantiene oscuro (menú premium) */
.sidebar {
  width:var(--sidebar-w);
  height:100vh;
  background: var(--dark2);
  border-right:1px solid rgba(201,168,76,0.12);
  display:flex;flex-direction:column;
  flex-shrink:0;
  transition:transform .3s;
  overflow-y:auto;
  overflow-x:hidden;
}

.sidebar-logo {
  display:flex;align-items:center;gap:.85rem;
  padding:1.4rem 1.4rem 1.2rem;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.logo-brand {
  font-family:'Playfair Display',serif;
  font-size:1.05rem;font-weight:700;color:var(--gold);
}
.logo-sub { font-size:.72rem;color:#4E5A6A;margin-top:1px; }

.sidebar-nav { flex:1;padding:1rem 0; }
.nav-section-label {
  font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;
  color:#4E5A6A;padding:.6rem 1.4rem .3rem;
}
.nav-item {
  display:flex;align-items:center;gap:.75rem;
  padding:.72rem 1.4rem;
  color:#8B95A3;font-size:.88rem;font-weight:500;
  text-decoration:none;
  border-left:3px solid transparent;
  transition:all .18s;
  cursor:pointer;
}
.nav-item svg { width:18px;height:18px;fill:currentColor;flex-shrink:0; }
.nav-item:hover { background:var(--dark3);color:#E8ECF0;border-left-color:var(--gold-dark); }
.nav-item.active {
  background:rgba(201,168,76,0.10);
  color:var(--gold-light);
  border-left-color:var(--gold);
}

.sidebar-footer {
  padding:1rem 1.2rem;
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex;align-items:center;gap:.6rem;
}
.sidebar-user { display:flex;align-items:center;gap:.65rem;flex:1;min-width:0; }
.user-avatar {
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:var(--dark);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.85rem;flex-shrink:0;
}
.user-name { font-size:.83rem;font-weight:600;color:#E8ECF0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.user-role { font-size:.72rem;color:#4E5A6A; }
.btn-logout {
  width:32px;height:32px;border-radius:var(--radius-sm);
  background:none;border:1px solid rgba(255,255,255,0.08);
  display:flex;align-items:center;justify-content:center;
  color:#8B95A3;text-decoration:none;
  transition:background .18s,color .18s;flex-shrink:0;
}
.btn-logout svg { width:16px;height:16px;fill:currentColor; }
.btn-logout:hover { background:var(--red-bg);color:var(--red);border-color:var(--red); }

/* MAIN WRAPPER */
.main-wrapper {
  flex:1;display:flex;flex-direction:column;
  overflow:hidden;height:100vh;
}

/* TOPBAR — se mantiene oscuro */
.topbar {
  height:var(--header-h);min-height:var(--header-h);
  background: var(--dark2);
  border-bottom:1px solid rgba(255,255,255,0.06);
  display:flex;align-items:center;
  padding:0 1.5rem;gap:1rem;
}
.btn-toggle-sidebar {
  background:none;border:none;cursor:pointer;
  padding:6px;border-radius:6px;color:#8B95A3;
  display:none;
}
.btn-toggle-sidebar svg { width:22px;height:22px;fill:currentColor; }
.topbar-title {
  font-family:'Playfair Display',serif;
  font-size:1.1rem;font-weight:700;color:#E8ECF0;flex:1;
}
.topbar-right { display:flex;align-items:center;gap:1rem; }
.topbar-badge {
  display:flex;align-items:center;gap:.4rem;
  font-size:.78rem;color:#8B95A3;
}
.badge-dot { width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block; }
.topbar-user { font-size:.85rem;font-weight:600;color:#E8ECF0; }

/* PAGE CONTENT — FONDO BLANCO */
.page-content {
  flex:1;overflow-y:auto;padding:1.8rem 2rem;
  background: var(--surface2);   /* blanco suave como fondo de página */
}

/* ============================================================
   FORMS (inside page content)
   ============================================================ */
.field input,
.field select,
.field textarea {
  width:100%;
  background: var(--surface);
  border:1px solid var(--border2);
  border-radius:var(--radius-sm);
  padding:.75rem 1rem;
  font-family:'DM Sans',sans-serif;font-size:.9rem;
  color:var(--text);outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,168,76,.10);
}
.field textarea { resize:vertical;min-height:80px; }
select option { background: var(--surface); color: var(--text); }

/* ============================================================
   PAGE HEADER
   ============================================================ */
.page-header {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem;
}
.page-h2 {
  font-family:'Playfair Display',serif;
  font-size:1.5rem;font-weight:700;color:var(--text);
}
.page-p { font-size:.85rem;color:var(--text2);margin-top:.25rem; }

/* ============================================================
   SEARCH BAR
   ============================================================ */
.search-bar { margin-bottom:1.25rem; }
.search-input-wrap { position:relative;max-width:460px; }
.search-input-wrap svg {
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;fill:var(--text3);pointer-events:none;
}
.search-input-wrap input {
  width:100%;
  background: var(--surface);
  border:1px solid var(--border2);
  border-radius:var(--radius-sm);
  padding:.72rem 1rem .72rem 2.6rem;
  font-family:'DM Sans',sans-serif;font-size:.88rem;
  color:var(--text);outline:none;
  transition:border-color .2s;
}
.search-input-wrap input:focus { border-color:var(--gold); }

/* ============================================================
   PANEL / TABLE — fondo blanco
   ============================================================ */
.panel {
  background: var(--surface);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.panel-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 1.4rem;
  border-bottom:1px solid rgba(0,0,0,0.07);
  background: var(--surface);
}
.panel-title { font-weight:600;font-size:.95rem;color:var(--text); }

.table-wrap { overflow-x:auto; }
.data-table { width:100%;border-collapse:collapse; }
.data-table th {
  background: var(--surface2);
  padding:.7rem 1rem;
  text-align:left;
  font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.7px;
  color:var(--text2);
  border-bottom:1px solid rgba(0,0,0,0.08);
  white-space:nowrap;
}
.data-table td {
  padding:.8rem 1rem;
  font-size:.87rem;color:var(--text);
  border-bottom:1px solid rgba(0,0,0,0.06);
  vertical-align:middle;
  background: var(--surface);
}
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background: var(--surface2); }
.td-id { font-size:.78rem;color:var(--text3);font-weight:600; }
.td-date { font-size:.8rem;color:var(--text2);white-space:nowrap; }
.td-empty,.td-loading { text-align:center;color:var(--text3);padding:2.5rem;font-size:.87rem; }
.td-actions { display:flex;gap:.4rem;align-items:center; }
.cell-name { font-weight:600; }
.cell-sub { font-size:.78rem;color:var(--text3);margin-top:2px; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display:inline-flex;align-items:center;
  padding:.2rem .65rem;
  border-radius:20px;
  font-size:.75rem;font-weight:600;
  white-space:nowrap;
}
.badge-active   { background:var(--green-bg);color:#166534; }
.badge-inactive { background:var(--red-bg);color:#9B1C1C; }
.badge-tipo-administrador { background:var(--gold-bg);color:var(--gold-dark); }
.badge-tipo-externo { background:var(--blue-bg);color:#1e40af; }
.btn-toggle { cursor:pointer;border:none;font-family:inherit;font-size:.75rem; }
.btn-toggle[disabled] { cursor:default;opacity:.8; }

/* ============================================================
   ACTION BUTTONS
   ============================================================ */
.btn-action {
  width:30px;height:30px;border-radius:6px;
  border:1px solid rgba(0,0,0,0.10);
  background: var(--surface);
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.btn-action svg { width:14px;height:14px; }
.btn-action.view svg { fill:var(--blue); }
.btn-action.view:hover { background:var(--blue-bg);border-color:var(--blue); }
.btn-action.edit svg { fill:var(--gold-dark); }
.btn-action.edit:hover { background:var(--gold-bg);border-color:var(--gold); }
.btn-action.delete svg { fill:var(--red); }
.btn-action.delete:hover { background:var(--red-bg);border-color:var(--red); }

/* ============================================================
   BUTTONS — negro con texto blanco como base
   ============================================================ */
.btn {
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.62rem 1.1rem;
  border-radius:var(--radius-sm);
  font-family:'DM Sans',sans-serif;font-size:.87rem;font-weight:600;
  cursor:pointer;border:none;transition:all .18s;text-decoration:none;
}
.btn svg { width:16px;height:16px;fill:currentColor; }

/* Botón principal: negro */
.btn-gold {
  background: #1A1F2B;
  color: #FFFFFF;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.btn-gold:hover {
  background: #252D3A;
  transform:translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.20);
}
.btn-gold svg { fill: #FFFFFF; }

/* Botón ghost: borde gris, fondo transparente */
.btn-ghost {
  background:transparent;color:var(--text2);
  border:1px solid rgba(0,0,0,0.12);
}
.btn-ghost:hover { background:var(--surface3);color:var(--text); }

/* Botón outline: borde dorado */
.btn-outline {
  background:transparent;color:var(--gold-dark);
  border:1px solid var(--border);
}
.btn-outline:hover { background:var(--gold-bg); }
.btn-sm { padding:.45rem .85rem;font-size:.8rem; }

/* ============================================================
   MODAL — fondo blanco
   ============================================================ */
.modal-overlay {
  position:fixed;inset:0;
  background:rgba(0,0,0,0.45);
  display:none;align-items:center;justify-content:center;
  z-index:1000;padding:1rem;
  backdrop-filter:blur(4px);
}
.modal-overlay.open { display:flex; }

.modal {
  background: var(--surface);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:var(--radius);
  width:100%;max-width:540px;
  max-height:90vh;display:flex;flex-direction:column;
  box-shadow: 0 12px 48px rgba(0,0,0,0.16);
  animation:modalIn .2s ease;
}
.modal-lg { max-width:720px; }
.modal-xl { max-width:900px; }

@keyframes modalIn {
  from { opacity:0;transform:translateY(-16px) scale(.97); }
  to   { opacity:1;transform:none; }
}

.modal-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem 1.5rem;
  border-bottom:1px solid rgba(0,0,0,0.07);
  flex-shrink:0;
  background: var(--surface);
}
.modal-header h3 {
  font-family:'Playfair Display',serif;
  font-size:1.1rem;font-weight:700;
  color: var(--text);
}
.modal-close {
  background:none;border:none;cursor:pointer;
  color:var(--text2);font-size:1.1rem;
  width:28px;height:28px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;
}
.modal-close:hover { background:var(--surface3);color:var(--text); }

.modal-body {
  padding:1.4rem 1.5rem;
  overflow-y:auto;flex:1;
  background: var(--surface);
}
.modal-footer {
  display:flex;align-items:center;justify-content:flex-end;gap:.75rem;
  padding:1rem 1.5rem;
  border-top:1px solid rgba(0,0,0,0.07);
  flex-shrink:0;
  background: var(--surface);
}

/* form inside modal */
.form-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:0; }
.form-row .field { margin-bottom:1rem; }
.form-section-title {
  font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;color:var(--gold-dark);
  border-bottom:1px solid var(--border);
  padding-bottom:.4rem;margin-bottom:.9rem;
}

/* ============================================================
   VER CLIENTE (inside modal)
   ============================================================ */
.ver-grid { display:grid;grid-template-columns:1fr 1fr;gap:1.5rem; }
.ver-col {}
.ver-section-title {
  font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:1px;color:var(--gold-dark);
  border-bottom:1px solid var(--border);
  padding-bottom:.35rem;margin-bottom:.8rem;
  display:flex;align-items:center;justify-content:space-between;
}
.ver-field {
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:.45rem 0;
  border-bottom:1px solid rgba(0,0,0,0.06);
  font-size:.85rem;gap:.5rem;
}
.ver-field span { color:var(--text2);font-size:.82rem;flex-shrink:0; }
.ver-field strong { color:var(--text);text-align:right;word-break:break-word; }

/* Archivos */
.arch-grid { display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.5rem; }
.arch-item {
  position:relative;
  width:100px;
  background:var(--surface2);border:1px solid rgba(0,0,0,0.08);border-radius:8px;
  padding:.5rem;text-align:center;
}
.arch-thumb {
  width:100%;height:70px;object-fit:cover;border-radius:5px;
  cursor:pointer;transition:opacity .15s;
}
.arch-thumb:hover { opacity:.8; }
.arch-file-icon { height:70px;display:flex;align-items:center;justify-content:center; }
.arch-file-icon svg { width:36px;height:36px;fill:var(--text3); }
.arch-name {
  font-size:.7rem;color:var(--text2);margin-top:.3rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.arch-del {
  position:absolute;top:4px;right:4px;
  background:var(--red);color:#fff;border:none;
  width:18px;height:18px;border-radius:50%;
  font-size:.65rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s;
}
.arch-item:hover .arch-del { opacity:1; }
.btn-upload-small {
  font-size:.72rem;color:var(--gold-dark);
  border:1px solid var(--border);border-radius:4px;
  padding:.15rem .5rem;cursor:pointer;
  background: transparent;
}
.btn-upload-small:hover { background:var(--gold-bg); }

/* Historial */
.hist-list { max-height:280px;overflow-y:auto;padding-right:.3rem; }
.hist-item {
  padding:.65rem .75rem;
  background:var(--surface2);border-radius:8px;
  margin-bottom:.5rem;
  border-left:3px solid var(--gold);
}
.hist-accion { font-weight:600;font-size:.83rem;color:var(--gold-dark); }
.hist-detalle { font-size:.8rem;color:var(--text);margin:.15rem 0; }
.hist-meta { font-size:.72rem;color:var(--text3); }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dashboard-grid { display:flex;flex-direction:column;gap:1.5rem; }

.stats-row { display:grid;grid-template-columns:repeat(4,1fr);gap:1rem; }
.stat-card {
  background: var(--surface);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:var(--radius);
  padding:1.25rem 1.4rem;
  display:flex;align-items:center;gap:1rem;
  box-shadow: var(--shadow);
  transition:transform .15s,box-shadow .15s;
}
.stat-card:hover { transform:translateY(-2px);box-shadow:0 8px 28px rgba(0,0,0,0.12); }
.stat-icon {
  width:46px;height:46px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.stat-icon svg { width:24px;height:24px; }
.stat-card.gold .stat-icon { background:var(--gold-bg); }
.stat-card.gold .stat-icon svg { fill:var(--gold-dark); }
.stat-card.green .stat-icon { background:var(--green-bg); }
.stat-card.green .stat-icon svg { fill:var(--green); }
.stat-card.blue .stat-icon { background:var(--blue-bg); }
.stat-card.blue .stat-icon svg { fill:var(--blue); }
.stat-card.purple .stat-icon { background:var(--purple-bg); }
.stat-card.purple .stat-icon svg { fill:var(--purple); }
.stat-num {
  font-family:'Playfair Display',serif;
  font-size:2rem;font-weight:900;color:var(--text);line-height:1;
}
.stat-label { font-size:.8rem;color:var(--text2);margin-top:.3rem; }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  padding:.75rem 1rem;border-radius:var(--radius-sm);
  font-size:.85rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;
}
.alert-error { background:var(--red-bg);color:#9B1C1C;border:1px solid rgba(217,64,64,.25); }
.alert-info  { background:var(--blue-bg);color:#1e3a8a;border:1px solid rgba(47,127,212,.2);line-height:1.5; }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position:fixed;bottom:2rem;right:2rem;
  padding:.8rem 1.4rem;border-radius:var(--radius-sm);
  font-size:.88rem;font-weight:600;
  opacity:0;transform:translateY(10px);
  transition:all .25s;pointer-events:none;z-index:9999;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.toast.show { opacity:1;transform:translateY(0); }
.toast.ok  { background:var(--green-bg);color:#166534;border:1px solid rgba(34,160,91,.3); }
.toast.err { background:var(--red-bg);color:#9B1C1C;border:1px solid rgba(217,64,64,.3); }

/* Loading spin */
.loading-spin {
  width:36px;height:36px;border-radius:50%;
  border:3px solid rgba(0,0,0,0.08);border-top-color:var(--gold);
  animation:spin .7s linear infinite;margin:2rem auto;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width:5px;height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.12);border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.22); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .stats-row { grid-template-columns:1fr 1fr; }
  .ver-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; }
}

@media (max-width: 700px) {
  :root { --sidebar-w: 240px; }
  .sidebar {
    position:fixed;left:0;top:0;
    z-index:500;height:100vh;
    transform:translateX(-100%);
  }
  .sidebar.open { transform:none; }
  .btn-toggle-sidebar { display:flex; }
  .main-wrapper { width:100%; }
  .stats-row { grid-template-columns:1fr; }
  .page-content { padding:1.2rem; }
  .brand-headline { font-size:2.2rem; }
  .login-wrapper { flex-direction:column; }
  .login-brand { min-height:200px;flex:none; }
  .login-form-side { flex:1; }
}