/* ================================================================
   IBB SISTEMA — Panel CSS
   Layout sidebar + contenido, dark theme coherente con web pública
   ================================================================ */

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

:root {
  --ibb-blue:    #2B4798;
  --ibb-blue-lt: #577BE5;
  --ibb-gold:    #997A2B;
  --ibb-gold-lt: #C9A84C;

  --bg:       #07101f;
  --bg2:      #0b1628;
  --bg3:      #0f1e35;
  --surface:  #142040;
  --surface2: #1a2a52;

  --text:   #f0f4ff;
  --text2:  #8fa3cc;
  --text3:  #4a5f88;

  --border:      rgba(43,71,152,0.18);
  --border-blue: rgba(43,71,152,0.4);

  --success: #3a9e6f;
  --warning: #d48c20;
  --danger:  #c94040;
  --info:    #3a7fd4;

  --sidebar-w: 256px;
  --topbar-h:  60px;
  --ff: 'Raleway', sans-serif;
  --radius: 6px;
  --transition: 0.18s ease;
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a  { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }

/* ── Layout principal ─────────────────────────────────────────── */
.panel-layout {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ──────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  overflow-y: auto;
  transition: transform var(--transition);
}

.sidebar-header {
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: .75rem;
  flex-shrink: 0;
}
.sidebar-header img { width: 36px; height: 36px; object-fit: contain; }
.sidebar-brand-name { font-size: .88rem; font-weight: 800; line-height: 1.2; }
.sidebar-brand-sub  { font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text3); }

.sidebar-section {
  padding: 1.25rem 0 .5rem;
}
.sidebar-section-title {
  font-size: .6rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--text3);
  padding: 0 1rem .6rem;
}

.sidebar-nav { list-style: none; }
.sidebar-nav-item a {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1rem;
  font-size: .83rem; font-weight: 600;
  color: var(--text2);
  border-left: 3px solid transparent;
  transition: all var(--transition);
  position: relative;
}
.sidebar-nav-item a:hover {
  color: var(--text);
  background: rgba(43,71,152,.08);
  border-left-color: rgba(43,71,152,.4);
}
.sidebar-nav-item a.active {
  color: var(--text);
  background: rgba(43,71,152,.15);
  border-left-color: var(--ibb-blue-lt);
}
.sidebar-nav-icon {
  width: 18px; height: 18px;
  flex-shrink: 0; opacity: .75;
}
.sidebar-nav-item a.active .sidebar-nav-icon,
.sidebar-nav-item a:hover .sidebar-nav-icon { opacity: 1; }

.sidebar-nav-badge {
  margin-left: auto;
  background: var(--danger);
  color: #fff;
  font-size: .6rem; font-weight: 800;
  padding: .1rem .4rem;
  border-radius: 10px;
  min-width: 18px; text-align: center;
}

.sidebar-footer {
  margin-top: auto;
  padding: 1rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-user {
  display: flex; align-items: center; gap: .75rem;
}
.sidebar-user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700;
  color: var(--ibb-blue-lt);
  flex-shrink: 0;
  overflow: hidden;
}
.sidebar-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sidebar-user-name  { font-size: .82rem; font-weight: 700; line-height: 1.2; }
.sidebar-user-rol   { font-size: .68rem; color: var(--text3); text-transform: capitalize; }
.sidebar-logout {
  margin-left: auto;
  background: none; border: none;
  color: var(--text3); font-size: .8rem;
  padding: .25rem .5rem;
  border-radius: var(--radius);
  transition: all var(--transition);
}
.sidebar-logout:hover { color: var(--danger); background: rgba(201,64,64,.08); }

/* ── Topbar ───────────────────────────────────────────────────── */
.topbar {
  position: fixed;
  top: 0; left: var(--sidebar-w); right: 0;
  height: var(--topbar-h);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  z-index: 90;
}
.topbar-title {
  font-size: .95rem; font-weight: 700;
  flex: 1;
}
.topbar-actions { display: flex; align-items: center; gap: .75rem; }
.topbar-btn {
  display: flex; align-items: center; gap: .4rem;
  padding: .4rem .85rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: .78rem; font-weight: 600;
  color: var(--text2);
  transition: all var(--transition);
}
.topbar-btn:hover { background: var(--surface2); border-color: var(--border-blue); color: var(--text); }
.topbar-btn-primary { background: var(--ibb-blue); border-color: var(--ibb-blue); color: #fff; }
.topbar-btn-primary:hover { background: var(--ibb-blue-lt); border-color: var(--ibb-blue-lt); }

/* ── Contenido principal ──────────────────────────────────────── */
.panel-main {
  flex: 1;
  margin-left: var(--sidebar-w);
  margin-top: var(--topbar-h);
  padding: 2rem 1.75rem;
  min-width: 0;
}

/* ── Page header ──────────────────────────────────────────────── */
.page-header {
  margin-bottom: 1.75rem;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.page-header-left {}
.page-title  { font-size: 1.3rem; font-weight: 800; margin-bottom: .25rem; }
.page-subtitle { font-size: .85rem; color: var(--text2); }
.page-actions { display: flex; gap: .75rem; align-items: center; }

/* ── Stats cards ──────────────────────────────────────────────── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  transition: border-color var(--transition);
}
.stat-card:hover { border-color: var(--border-blue); }
.stat-card-label {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text3);
  margin-bottom: .5rem;
}
.stat-card-value {
  font-size: 1.8rem; font-weight: 900;
  color: var(--text); line-height: 1;
}
.stat-card-value.blue   { color: var(--ibb-blue-lt); }
.stat-card-value.gold   { color: var(--ibb-gold-lt); }
.stat-card-value.green  { color: #6de0b0; }
.stat-card-value.red    { color: #e88888; }
.stat-card-sub  { font-size: .75rem; color: var(--text3); margin-top: .4rem; }

/* ── Alert cards del panel ────────────────────────────────────── */
.panel-alert {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid;
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  margin-bottom: .75rem;
  font-size: .85rem;
}
.panel-alert-warning { border-left-color: var(--warning); }
.panel-alert-danger  { border-left-color: var(--danger); }
.panel-alert-info    { border-left-color: var(--info); }
.panel-alert-success { border-left-color: var(--success); }
.panel-alert-icon    { font-size: 1.1rem; flex-shrink: 0; margin-top: .1rem; }
.panel-alert-content {}
.panel-alert-title   { font-weight: 700; margin-bottom: .15rem; }
.panel-alert-desc    { color: var(--text2); font-size: .82rem; }

/* ── Tabla ────────────────────────────────────────────────────── */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.table-toolbar {
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--border);
  display: flex; gap: .75rem; align-items: center; flex-wrap: wrap;
}
.table-search {
  flex: 1; min-width: 200px;
  background: var(--bg3); border: 1px solid var(--border-blue);
  border-radius: var(--radius);
  color: var(--text);
  padding: .45rem .85rem;
  font-family: var(--ff); font-size: .85rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.table-search:focus { border-color: var(--ibb-blue-lt); box-shadow: 0 0 0 3px rgba(87,123,229,.15); }
::placeholder { color: var(--text3); }

table { width: 100%; border-collapse: collapse; }
thead tr { background: var(--bg3); border-bottom: 1px solid var(--border); }
th {
  padding: .7rem 1rem;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text3); text-align: left;
  white-space: nowrap;
}
td {
  padding: .75rem 1rem;
  font-size: .85rem; color: var(--text2);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(43,71,152,.05); color: var(--text); }
td strong { color: var(--text); font-weight: 700; }

/* ── Acciones en tabla ────────────────────────────────────────── */
.table-actions { display: flex; gap: .5rem; align-items: center; }
.action-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text3); font-size: .8rem;
  transition: all var(--transition);
}
.action-btn:hover        { background: var(--surface2); border-color: var(--border-blue); color: var(--text); }
.action-btn.edit:hover   { border-color: var(--ibb-blue-lt); color: var(--ibb-blue-lt); }
.action-btn.delete:hover { border-color: var(--danger); color: #e88888; }
.action-btn.view:hover   { border-color: var(--success); color: #6de0b0; }

/* ── Forms del panel ──────────────────────────────────────────── */
.panel-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.form-section {
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}
.form-section:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.form-section-title {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ibb-blue-lt);
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: .5rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .4rem; }

label {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text3);
}
input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], input[type="password"], input[type="number"],
select, textarea {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border-blue);
  border-radius: var(--radius);
  color: var(--text);
  padding: .6rem .85rem;
  font-family: var(--ff); font-size: .9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--ibb-blue-lt);
  box-shadow: 0 0 0 3px rgba(87,123,229,.15);
}
textarea { resize: vertical; min-height: 100px; }
select option { background: var(--bg2); }

.form-hint { font-size: .75rem; color: var(--text3); margin-top: .25rem; }
.form-error { font-size: .75rem; color: #e88888; margin-top: .25rem; }
input.error, select.error, textarea.error { border-color: var(--danger); }

/* Checkbox / Radio custom */
.check-group { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.check-group input[type="checkbox"],
.check-group input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--ibb-blue-lt);
  cursor: pointer;
}
.check-label { font-size: .85rem; color: var(--text2); font-weight: 500; text-transform: none; letter-spacing: 0; }

/* ── Botones del panel ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1.25rem;
  border-radius: var(--radius);
  font-family: var(--ff);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: all var(--transition);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary   { background: var(--ibb-blue); border-color: var(--ibb-blue); color: #fff; }
.btn-primary:hover { background: var(--ibb-blue-lt); border-color: var(--ibb-blue-lt); }
.btn-secondary { background: var(--surface); border-color: var(--border); color: var(--text2); }
.btn-secondary:hover { background: var(--surface2); border-color: var(--border-blue); color: var(--text); }
.btn-danger    { background: rgba(201,64,64,.15); border-color: rgba(201,64,64,.4); color: #e88888; }
.btn-danger:hover { background: rgba(201,64,64,.25); }
.btn-success   { background: rgba(58,158,111,.15); border-color: rgba(58,158,111,.4); color: #6de0b0; }
.btn-sm        { padding: .35rem .85rem; font-size: .72rem; }
.btn-lg        { padding: .7rem 1.6rem; font-size: .85rem; }

/* ── Niveles progress ─────────────────────────────────────────── */
.level-track {
  display: flex; gap: .5rem;
  align-items: center;
}
.level-dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--border-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 800;
  color: var(--text3);
  transition: all var(--transition);
}
.level-dot.done    { background: var(--ibb-blue); border-color: var(--ibb-blue); color: #fff; }
.level-dot.current { background: var(--surface2); border-color: var(--ibb-blue-lt); color: var(--ibb-blue-lt); }

/* ── Lecciones track ──────────────────────────────────────────── */
.lecciones-track {
  display: flex; flex-wrap: wrap; gap: .3rem;
}
.leccion-pill {
  width: 28px; height: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700;
  color: var(--text3);
  transition: all var(--transition);
  cursor: default;
}
.leccion-pill.done    { background: rgba(58,158,111,.2); border-color: rgba(58,158,111,.5); color: #6de0b0; }
.leccion-pill.current { background: rgba(87,123,229,.2); border-color: var(--ibb-blue-lt); color: var(--ibb-blue-lt); }

/* ── Asistencia dots ──────────────────────────────────────────── */
.attendance-dots { display: flex; gap: .3rem; }
.att-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
}
.att-dot.yes  { background: #3a9e6f; }
.att-dot.no   { background: var(--danger); }
.att-dot.none { background: var(--border-blue); }

/* ── Tags/Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: .15rem .55rem;
  border-radius: 20px;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.badge-blue    { background: rgba(43,71,152,.2);  color: var(--ibb-blue-lt);  border: 1px solid rgba(43,71,152,.3); }
.badge-gold    { background: rgba(153,122,43,.2); color: var(--ibb-gold-lt);  border: 1px solid rgba(153,122,43,.3); }
.badge-green   { background: rgba(58,158,111,.2); color: #6de0b0;              border: 1px solid rgba(58,158,111,.3); }
.badge-red     { background: rgba(201,64,64,.2);  color: #e88888;              border: 1px solid rgba(201,64,64,.3); }
.badge-gray    { background: rgba(74,95,136,.15); color: var(--text3);         border: 1px solid var(--border); }
.badge-warning { background: rgba(212,140,32,.2); color: #e8b84b;              border: 1px solid rgba(212,140,32,.3); }

/* ── Alerts flash ─────────────────────────────────────────────── */
.flash {
  padding: .8rem 1.1rem;
  border-radius: var(--radius);
  border-left: 3px solid;
  font-size: .85rem;
  margin-bottom: 1.25rem;
}
.flash-success { background: rgba(58,158,111,.1); border-color: var(--success); color: #6de0b0; }
.flash-danger  { background: rgba(201,64,64,.1);  border-color: var(--danger);  color: #e88888; }
.flash-warning { background: rgba(212,140,32,.1); border-color: var(--warning); color: #e8b84b; }
.flash-info    { background: rgba(58,127,212,.1); border-color: var(--info);    color: #7ab8f5; }

/* ── Responsive sidebar ───────────────────────────────────────── */
@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.5);
  }
  .topbar { left: 0; }
  .panel-main { margin-left: 0; padding: 1.5rem 1rem; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
}

/* ── Utilities ────────────────────────────────────────────────── */
.text-muted  { color: var(--text2); }
.text-dimmed { color: var(--text3); }
.text-danger { color: #e88888; }
.text-success{ color: #6de0b0; }
.text-center { text-align: center; }
.text-sm     { font-size: .82rem; }
.fw-bold     { font-weight: 700; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
[x-cloak] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   PROFESSIONAL POLISH — panel
   ═══════════════════════════════════════════════════════════════ */

/* Sidebar: gradiente sutil y logo destacado */
.sidebar {
  background: linear-gradient(180deg, #071220 0%, #0b1628 100%);
  border-right: 1px solid rgba(43,71,152,.2);
}
.sidebar-header {
  background: linear-gradient(135deg, rgba(43,71,152,.15), rgba(153,122,43,.08));
  border-bottom: 1px solid rgba(43,71,152,.22);
}
.sidebar-brand-name { color: #fff; }

/* Sidebar items: hover mejorado */
.sidebar-nav-item a {
  border-radius: 0 6px 6px 0;
  margin-right: .5rem;
}
.sidebar-nav-item a.active {
  background: linear-gradient(90deg, rgba(43,71,152,.22), rgba(43,71,152,.12));
}

/* Sidebar footer: avatar más elegante */
.sidebar-user-avatar {
  background: linear-gradient(135deg, var(--ibb-blue), var(--ibb-blue-lt));
}

/* Topbar: degradado sutil */
.topbar {
  background: linear-gradient(90deg, var(--bg2), #0d1830);
  border-bottom: 1px solid rgba(43,71,152,.22);
}

/* Stat cards: acento izquierdo de color */
.stat-card {
  border-left: 3px solid var(--ibb-blue);
  background: linear-gradient(135deg, var(--surface), var(--bg3));
}
.stat-card:hover { border-left-color: var(--ibb-blue-lt); }
.stat-card:nth-child(2) { border-left-color: var(--ibb-gold-lt); }
.stat-card:nth-child(3) { border-left-color: #6de0b0; }
.stat-card:nth-child(4) { border-left-color: #e88888; }

/* Tabla: filas zebra sutil */
tbody tr:nth-child(even) td { background: rgba(255,255,255,.015); }

/* Table wrap: shadow card */
.table-wrap {
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}

/* Botones: más redondeados y sombra en primary */
.btn-primary { box-shadow: 0 3px 12px rgba(43,71,152,.35); }
.btn-primary:hover { box-shadow: 0 5px 18px rgba(43,71,152,.5); transform: translateY(-1px); }

/* Form panel: mejor contraste */
.panel-form { box-shadow: 0 4px 20px rgba(0,0,0,.2); }

/* Panel main: fondo levemente diferente para contraste */
.panel-main { background: #08111e; min-height: calc(100vh - var(--topbar-h)); }

/* Page title: línea decorativa */
.page-title::after {
  content: '';
  display: block;
  width: 32px; height: 3px;
  background: linear-gradient(90deg, var(--ibb-blue-lt), var(--ibb-gold-lt));
  border-radius: 2px;
  margin-top: .4rem;
}

/* Flash messages: iconos automáticos */
.flash-success::before { content: '✓ '; }
.flash-danger::before  { content: '✗ '; }
.flash-warning::before { content: '⚠ '; }
.flash-info::before    { content: 'ℹ '; }

/* Progress bars simples */
.progress-bar {
  height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ibb-blue), var(--ibb-blue-lt));
  border-radius: 2px;
  transition: width .5s ease;
}

/* Scrollbar del panel */
::-webkit-scrollbar       { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(43,71,152,.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ibb-blue); }

/* Toggle switch */
.toggle-wrap { display: flex; align-items: center; gap: .75rem; }
.toggle {
  position: relative; width: 40px; height: 22px;
  display: inline-block; flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--bg3); border: 1px solid var(--border-blue);
  border-radius: 22px; transition: .2s;
}
.toggle-slider::before {
  content: ''; position: absolute;
  height: 16px; width: 16px;
  left: 2px; bottom: 2px;
  background: var(--text3);
  border-radius: 50%; transition: .2s;
}
.toggle input:checked + .toggle-slider { background: var(--ibb-blue); border-color: var(--ibb-blue-lt); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); background: #fff; }

/* Responsive extras */
@media (max-width: 480px) {
  .page-header { flex-direction: column; align-items: flex-start; }
  .stats-row   { grid-template-columns: 1fr 1fr; }
}