/* ==============================================
   assets/css/style.css - Estilos globales
   Sistema de Gestion Escolar
   ============================================== */

/* Variables de color */
:root {
  --primary:   #2c3e50;
  --secondary: #34495e;
  --accent:    #17a2b8;
  --sidebar-w: 240px;
  --topbar-h:  50px;
}

/* Reset basico */
*, *::before, *::after { box-sizing: border-box; }
body { margin:0; font-family: 'Segoe UI', sans-serif; background:#f4f6f9; color:#333; }
a { text-decoration:none; }

/* ---- TOPBAR ---- */
.topbar {
  position: fixed; top:0; left:0; right:0; height:var(--topbar-h);
  background: var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 15px; z-index:1000; box-shadow:0 2px 5px rgba(0,0,0,0.3);
}
.topbar .brand { font-size:14px; font-weight:600; }
.topbar .btn-toggle { background:none; border:none; color:#fff; font-size:18px; cursor:pointer; }
.topbar .topbar-right { display:flex; align-items:center; gap:10px; font-size:13px; }
.topbar .topbar-right a { color:#adb5bd; }
.topbar .topbar-right a:hover { color:#fff; }

/* ---- SIDEBAR ---- */
.sidebar {
  position:fixed; top:var(--topbar-h); left:0; bottom:0;
  width:var(--sidebar-w); background:var(--secondary);
  overflow-y:auto; transition:transform .3s ease; z-index:999;
}
.sidebar.collapsed { transform:translateX(-100%); }
.sidebar .sidebar-logo {
  padding:20px 15px 10px; text-align:center; border-bottom:1px solid rgba(255,255,255,.1);
}
.sidebar .sidebar-logo img { width:60px; border-radius:50%; }
.sidebar .sidebar-logo .inst-name { color:#fff; font-size:11px; margin-top:6px; font-weight:600; }

/* Menu items */
.sidebar .nav-menu { list-style:none; padding:8px 0; margin:0; }
.sidebar .nav-menu li a {
  display:flex; align-items:center; gap:12px;
  padding:11px 18px; color:#adb5bd; font-size:13.5px;
  transition:background .2s, color .2s;
}
.sidebar .nav-menu li a:hover,
.sidebar .nav-menu li a.active {
  background:rgba(255,255,255,.08); color:#fff;
  border-left:3px solid var(--accent);
}
.sidebar .nav-menu li a i { width:18px; text-align:center; }
.sidebar .nav-section {
  color:#6c757d; font-size:10px; font-weight:700; text-transform:uppercase;
  padding:12px 18px 4px; letter-spacing:1px;
}

/* ---- CONTENIDO PRINCIPAL ---- */
.main-content {
  margin-left:var(--sidebar-w); padding-top:var(--topbar-h);
  min-height:100vh; transition:margin-left .3s ease;
}
.main-content.expanded { margin-left:0; }
.page-content { padding:20px; }

/* ---- CARDS ---- */
.card-stat {
  background:#fff; border-radius:10px; padding:20px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  display:flex; align-items:center; gap:15px;
  transition:transform .2s, box-shadow .2s;
}
.card-stat:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,.12); }
.card-stat .icon {
  width:55px; height:55px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff; flex-shrink:0;
}
.card-stat .info .value { font-size:26px; font-weight:700; line-height:1; }
.card-stat .info .label { font-size:12px; color:#6c757d; margin-top:3px; }

/* Colores de iconos de cards */
.bg-academico  { background: linear-gradient(135deg,#17a2b8,#138496); }
.bg-pagos      { background: linear-gradient(135deg,#28a745,#1e7e34); }
.bg-boletines  { background: linear-gradient(135deg,#fd7e14,#e76b00); }
.bg-matriculas { background: linear-gradient(135deg,#6f42c1,#5a32a3); }

/* ---- TABLAS ---- */
.table-wrapper { background:#fff; border-radius:10px; padding:20px; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.table th { background:var(--primary); color:#fff; font-weight:500; font-size:13px; }
.table td { font-size:13px; vertical-align:middle; }
.table tbody tr:hover { background:#f8f9fa; }

/* ---- FORMULARIOS ---- */
.form-card { background:#fff; border-radius:10px; padding:25px; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.form-label { font-size:13px; font-weight:600; color:#495057; }
.form-control, .form-select { font-size:13px; border-radius:6px; }
.form-control:focus, .form-select:focus { border-color:var(--accent); box-shadow:0 0 0 .2rem rgba(23,162,184,.25); }

/* ---- BOTONES ---- */
.btn { border-radius:6px; font-size:13px; }
.btn-primary { background:var(--accent); border-color:var(--accent); }
.btn-primary:hover { background:#138496; border-color:#117a8b; }

/* ---- BREADCRUMB ---- */
.page-header { margin-bottom:20px; }
.page-header h5 { font-weight:700; color:var(--primary); margin:0; }
.page-header .breadcrumb { font-size:12px; margin:0; }

/* ---- BADGES de desempeno ---- */
.badge-superior { background:#28a745; }
.badge-alto     { background:#17a2b8; }
.badge-basico   { background:#ffc107; color:#333; }
.badge-bajo     { background:#dc3545; }

/* ---- LOGIN ---- */
.login-wrapper {
  min-height:100vh; display:flex;
  background:url('../img/bg_login.jpg') center/cover no-repeat;
}
.login-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
}
.login-box {
  position:relative; z-index:10;
  margin:auto; background:#fff; border-radius:12px;
  padding:40px 35px; width:100%; max-width:400px;
  box-shadow:0 10px 40px rgba(0,0,0,.3);
}
.login-box .logo { text-align:center; margin-bottom:20px; }
.login-box .logo .icon-wrap {
  display:inline-flex; align-items:center; justify-content:center;
  width:70px; height:70px; border-radius:12px;
  background:var(--primary);
}
.login-box h4 { text-align:center; font-weight:700; color:var(--primary); }
.login-box p.sub { text-align:center; color:#888; font-size:13px; }
.btn-login {
  background:var(--accent); color:#fff; border:none;
  width:100%; padding:11px; border-radius:7px;
  font-size:15px; font-weight:600; cursor:pointer;
  transition:background .2s;
}
.btn-login:hover { background:#138496; }

/* ---- PORTAL PADRES - Pestanas ---- */
.student-card {
  background:#fff; border-radius:10px; padding:20px;
  text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.student-card img {
  width:90px; height:90px; border-radius:50%;
  object-fit:cover; border:3px solid var(--accent);
}
.student-card .student-name { font-weight:700; margin-top:10px; }
.student-card .student-group { font-size:12px; color:#6c757d; }

/* Tabla de notas portal */
.nota-cell { font-weight:700; font-size:15px; }

/* ---- CARTERA ---- */
.cartera-table th { white-space:nowrap; }
.cartera-subtotal { background:#e3f2fd; font-weight:700; }
.cartera-total    { background:#d1ecf1; font-weight:700; font-size:15px; }
.sticky-bottom-bar {
  position:sticky; bottom:0; background:#fff;
  padding:10px 20px; box-shadow:0 -3px 10px rgba(0,0,0,.1);
  display:flex; align-items:center; justify-content:space-between;
}

/* ---- RESPONSIVO ---- */
@media (max-width: 768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0; }
  .card-stat .info .value { font-size:20px; }
  .page-content { padding:12px; }
  .login-box { margin:20px; padding:25px 20px; }
}
@media (max-width: 576px) {
  .topbar .brand { font-size:12px; }
  .table-responsive { font-size:12px; }
}