/* =====================================================================
 *  CRM2 EnglishByMica - Tema oscuro estilo Vercel / SaaS moderno
 *  - Negro dominante, sin azules
 *  - Bordes muy sutiles, esquinas refinadas, gradientes muy tenues
 * ===================================================================== */

:root{
  /* Paleta */
  --app-bg:           #050505;
  --app-bg-2:         #08080a;
  --app-panel:        #0c0c0e;
  --app-panel-2:      #101013;
  --app-elev:         #131316;
  --app-border:       rgba(255,255,255,.07);
  --app-border-strong:rgba(255,255,255,.13);
  --app-text:         #ededed;
  --app-text-soft:    rgba(237,237,237,.72);
  --app-text-mute:    rgba(237,237,237,.50);
  --app-accent:       #e7e7e7;     /* "primary" → casi blanco */
  --app-accent-2:     #b07cff;     /* acento sutil violeta */
  --app-accent-amber: #f5c451;     /* reemplazo de "info" */

  /* Sombra suave estilo Vercel */
  --app-shadow-sm: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.4);
  --app-shadow-md: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.45);

  /* Sobrescribir tokens Bootstrap para evitar azules */
  --bs-primary:        #ededed;
  --bs-primary-rgb:    237,237,237;
  --bs-info:           #f5c451;
  --bs-info-rgb:       245,196,81;
  --bs-link-color:     #ededed;
  --bs-link-hover-color: #ffffff;
  --bs-body-bg:        var(--app-bg);
  --bs-body-color:     var(--app-text);
  --bs-border-color:   var(--app-border);
}

/* ──────────────────────────────────────────────────────────
 *  Tipografía / base
 * ────────────────────────────────────────────────────────── */
html, body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  background: var(--app-bg);
  color: var(--app-text);
}

body{
  background:
    radial-gradient(900px 500px at 12% -10%, rgba(176,124,255,.05), transparent 70%),
    radial-gradient(900px 600px at 95% 5%,  rgba(245,196,81,.03), transparent 70%),
    var(--app-bg);
}

.bg-app{ background: transparent; }

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  letter-spacing: -0.018em;
  font-weight: 600;
}

a{ color: var(--app-text); }
a:hover{ color: #fff; }
.link-light{ color: var(--app-text) !important; }
.link-light:hover{ color: #fff !important; }
.link-secondary{ color: var(--app-text-mute) !important; }
.link-secondary:hover{ color: var(--app-text) !important; }

code, .font-monospace{
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
               Monaco, Consolas, monospace;
  font-size: .86em;
  color: #f0e2ad;
}

::selection{ background: rgba(176,124,255,.32); color: #fff; }

/* Scrollbar oscura sutil */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.07);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.14); background-clip: content-box; }

/* ──────────────────────────────────────────────────────────
 *  Layout
 * ────────────────────────────────────────────────────────── */
.app-shell{ min-height: 100vh; }

.sidebar{
  width: 248px;
  min-width: 248px;
  background: linear-gradient(180deg, rgba(12,12,14,.92), rgba(8,8,10,.94));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid var(--app-border) !important;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.sidebar-header{ border-bottom: 1px solid var(--app-border); }

.sidebar .nav-link{
  color: var(--app-text-soft);
  border-radius: 8px;
  padding: .48rem .7rem;
  margin: .08rem 0;
  display: flex;
  align-items: center;
  font-size: .9rem;
  font-weight: 450;
  transition: background .12s ease, color .12s ease;
  border: 1px solid transparent;
}
.sidebar .nav-link i{ font-size: 1rem; opacity: .85; }
.sidebar .nav-link:hover{
  background: rgba(255,255,255,.04);
  color: #fff;
}
.sidebar .nav-link.active{
  background: rgba(255,255,255,.06);
  color: #fff;
  border-color: var(--app-border-strong);
  box-shadow: var(--app-shadow-sm);
}

.offcanvas{
  background: linear-gradient(180deg, rgba(12,12,14,.96), rgba(8,8,10,.98)) !important;
  border-right: 1px solid var(--app-border) !important;
}
.offcanvas .nav-link{
  color: var(--app-text-soft);
  border-radius: 8px;
  padding: .55rem .8rem;
  margin: .08rem 0;
  font-size: .92rem;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
}
.offcanvas .nav-link:hover{ background: rgba(255,255,255,.05); color: #fff; }
.offcanvas .nav-link.active{
  background: rgba(255,255,255,.07);
  color: #fff;
  border-color: var(--app-border-strong);
}

.brand-icon{
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--app-border-strong);
  background: #0f0f12;
  box-shadow: var(--app-shadow-sm);
}

.topbar{
  background: rgba(8,8,10,.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--app-border) !important;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar .h5{
  font-weight: 600;
  letter-spacing: -0.022em;
  font-size: 1.05rem;
}

.content{ min-width: 0; }

/* ──────────────────────────────────────────────────────────
 *  Cards / superficies
 * ────────────────────────────────────────────────────────── */
.card{
  border: 1px solid var(--app-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0)) ,
    var(--app-panel);
  border-radius: 12px;
  box-shadow: var(--app-shadow-sm);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.card:hover{ border-color: var(--app-border-strong); }
.card .card-header{
  border-bottom: 1px solid var(--app-border);
  background: transparent;
}
.card-body{ padding: 1.05rem 1.1rem; }
@media (min-width: 992px){ .card-body{ padding: 1.15rem 1.25rem; } }

/* Variantes "stat card" — los 4 KPIs del dashboard */
.kpi-card .display-6{
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: 2rem;
}
.kpi-card .text-secondary{ font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }

/* Alertas suaves */
.alert{
  border: 1px solid var(--app-border);
  background: var(--app-panel);
  color: var(--app-text);
  border-radius: 10px;
}
.alert-soft{
  background: rgba(255,255,255,.04);
  border-radius: 10px;
}
.alert-success{ border-color: rgba(34,197,94,.25); background: rgba(34,197,94,.06); color: #d6f5e3; }
.alert-danger { border-color: rgba(239, 68, 68,.28); background: rgba(239,68,68,.07);  color: #ffd7d7; }
.alert-warning{ border-color: rgba(245,196,81,.28); background: rgba(245,196,81,.07);  color: #ffe9b8; }
.alert-info   { border-color: rgba(176,124,255,.30); background: rgba(176,124,255,.07); color: #ecdcff; }

/* ──────────────────────────────────────────────────────────
 *  Tablas
 * ────────────────────────────────────────────────────────── */
.table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--app-border);
  --bs-table-hover-bg: rgba(255,255,255,.025);
  border-radius: 12px;
  font-size: .92rem;
}
.table thead th{
  color: var(--app-text-mute);
  font-weight: 500;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--app-border);
}
.table.table-dark{
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,.02);
  --bs-table-hover-bg: rgba(255,255,255,.04);
  --bs-table-color: var(--app-text);
  --bs-table-border-color: var(--app-border);
}
.table > :not(caption) > * > *{
  background-color: transparent !important;
  color: var(--app-text);
  border-bottom-color: var(--app-border);
  padding: .7rem .65rem;
}
.table-hover tbody tr:hover > *{ background: rgba(255,255,255,.025) !important; }

/* ──────────────────────────────────────────────────────────
 *  Botones
 * ────────────────────────────────────────────────────────── */
.btn{
  border-radius: 9px;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: .42rem .85rem;
  transition: background .12s ease, border-color .12s ease, transform .04s ease, color .12s ease, box-shadow .12s ease;
  border: 1px solid transparent;
}
.btn:active{ transform: translateY(.5px); }

.btn-sm{ padding: .28rem .65rem; font-size: .8rem; border-radius: 8px; }
.btn-lg{ padding: .55rem 1rem;   font-size: .98rem; border-radius: 10px; }

/* "primary" se vuelve un botón blanco estilo Vercel */
.btn-primary{
  background: #fff;
  color: #0a0a0b !important;
  border-color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 1px 2px rgba(0,0,0,.25);
}
.btn-primary:hover{ background: #ededed; border-color: #ededed; color: #0a0a0b !important; }
.btn-primary:focus, .btn-primary:focus-visible{
  background:#fff; color:#0a0a0b !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.15);
}

.btn-outline-light{
  border: 1px solid var(--app-border-strong);
  background: rgba(255,255,255,.02);
  color: var(--app-text);
}
.btn-outline-light:hover{ background: rgba(255,255,255,.07); color: #fff; border-color: rgba(255,255,255,.22); }

.btn-secondary{
  background: var(--app-elev);
  border-color: var(--app-border-strong);
  color: var(--app-text);
}
.btn-secondary:hover{ background: #1c1c20; color: #fff; border-color: rgba(255,255,255,.22); }

.btn-soft{
  border: 1px solid var(--app-border);
  background: rgba(255,255,255,.025);
  color: var(--app-text);
  border-radius: 9px;
}
.btn-soft:hover{
  background: rgba(255,255,255,.06);
  border-color: var(--app-border-strong);
  color: #fff;
}

.btn-success{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.35);
  color: #b7f5cb !important;
}
.btn-success:hover{ background: rgba(34,197,94,.22); border-color: rgba(34,197,94,.55); color:#dcffe7 !important; }

.btn-outline-success{
  background: transparent;
  border-color: rgba(34,197,94,.35);
  color: #c1f5d1;
}
.btn-outline-success:hover{ background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.55); color:#dcffe7; }

.btn-warning, .btn-outline-warning{
  background: transparent;
  border-color: rgba(245,196,81,.40);
  color: #ffe9b8;
}
.btn-warning{ background: rgba(245,196,81,.14); }
.btn-warning:hover, .btn-outline-warning:hover{ background: rgba(245,196,81,.22); color: #fff3cf; border-color: rgba(245,196,81,.6); }

.btn-danger{
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.40);
  color: #ffc7c7 !important;
}
.btn-danger:hover{ background: rgba(239,68,68,.22); color:#ffd9d9 !important; border-color: rgba(239,68,68,.65); }
.btn-outline-danger{
  background: transparent;
  border-color: rgba(239,68,68,.40);
  color: #ffc7c7;
}
.btn-outline-danger:hover{ background: rgba(239,68,68,.10); color:#ffd9d9; border-color: rgba(239,68,68,.65); }

.btn-outline-info, .btn-info{
  background: rgba(245,196,81,.10);
  border-color: rgba(245,196,81,.30);
  color: #ffe9b8;
}
.btn-outline-info:hover, .btn-info:hover{ background: rgba(245,196,81,.18); color:#fff3cf; border-color: rgba(245,196,81,.5); }

.btn-link{ color: var(--app-text-soft); text-decoration: none; }
.btn-link:hover{ color: #fff; }

.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.10);
}

/* ──────────────────────────────────────────────────────────
 *  Form controls
 * ────────────────────────────────────────────────────────── */
.form-control, .form-select, .input-group-text{
  background: rgba(255,255,255,.025);
  border: 1px solid var(--app-border-strong);
  color: var(--app-text);
  border-radius: 9px;
  font-size: .92rem;
  padding: .45rem .7rem;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.form-control::placeholder{ color: rgba(237,237,237,.32); }
.form-control:focus, .form-select:focus{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.35);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
.form-control[disabled], .form-select[disabled]{
  background: rgba(255,255,255,.02);
  color: rgba(237,237,237,.45);
}
.input-group-text{
  background: rgba(255,255,255,.04);
  color: var(--app-text-soft);
}

.form-label{
  font-size: .8rem;
  font-weight: 500;
  color: var(--app-text-soft);
  margin-bottom: .35rem;
  letter-spacing: -0.005em;
}

.form-check-input{
  background-color: rgba(255,255,255,.03);
  border-color: var(--app-border-strong);
}
.form-check-input:checked{
  background-color: #fff;
  border-color: #fff;
}
.form-check-input:focus{ box-shadow: 0 0 0 3px rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
.form-switch .form-check-input{ background-image: none; position: relative; }
.form-switch .form-check-input:not(:checked){ background-color: rgba(255,255,255,.08); }

/* ──────────────────────────────────────────────────────────
 *  Modal / Offcanvas
 * ────────────────────────────────────────────────────────── */
.modal-content{
  background: var(--app-panel-2);
  border: 1px solid var(--app-border-strong);
  border-radius: 14px;
  box-shadow: var(--app-shadow-md);
}
.modal-header, .modal-footer{ border-color: var(--app-border); }
.modal-backdrop.show{ opacity: .72; background: #000; }

/* Close button blanco siempre */
.btn-close{
  filter: invert(1) grayscale(100%) brightness(220%);
  opacity: .55;
}
.btn-close:hover{ opacity: 1; }

/* ──────────────────────────────────────────────────────────
 *  Badges / chips
 * ────────────────────────────────────────────────────────── */
.badge{
  font-weight: 500;
  font-size: .72rem;
  padding: .32em .58em;
  letter-spacing: .005em;
  border-radius: 6px;
}
.badge.rounded-pill{ border-radius: 999px; padding: .3em .65em; }

.text-bg-primary{
  background-color: rgba(255,255,255,.10) !important;
  color: #fff !important;
  border: 1px solid var(--app-border-strong);
}
.text-bg-secondary{
  background-color: rgba(255,255,255,.05) !important;
  color: var(--app-text-soft) !important;
  border: 1px solid var(--app-border);
}
.text-bg-success{
  background-color: rgba(34,197,94,.13) !important;
  color: #c1f5d1 !important;
  border: 1px solid rgba(34,197,94,.30);
}
.text-bg-warning{
  background-color: rgba(245,196,81,.13) !important;
  color: #ffe9b8 !important;
  border: 1px solid rgba(245,196,81,.30);
}
.text-bg-danger{
  background-color: rgba(239,68,68,.13) !important;
  color: #ffc7c7 !important;
  border: 1px solid rgba(239,68,68,.30);
}
.text-bg-info{
  background-color: rgba(176,124,255,.14) !important;
  color: #ecdcff !important;
  border: 1px solid rgba(176,124,255,.32);
}
.text-bg-light{
  background-color: rgba(255,255,255,.06) !important;
  color: var(--app-text) !important;
  border: 1px solid var(--app-border-strong);
}
.text-bg-dark{
  background-color: rgba(0,0,0,.5) !important;
  color: var(--app-text-soft) !important;
  border: 1px solid var(--app-border);
}

/* Chip genérico (usado en dashboard) */
.chip{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .26rem .65rem;
  border-radius: 999px;
  border: 1px solid var(--app-border-strong);
  background: rgba(255,255,255,.04);
  font-size: .78rem;
  color: var(--app-text-soft);
}
.chip i{ color: var(--app-text-soft); }

/* Tag de sección (encabezados de secciones en alumnos / grupos) */
.section-title{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--app-text-mute);
}
.section-title .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.35);
  display: inline-block;
}
.section-title.is-active .dot   { background: #22c55e; }
.section-title.is-paused .dot   { background: #f5c451; }
.section-title.is-baja .dot     { background: #ef4444; }
.section-title.is-archived .dot { background: rgba(255,255,255,.25); }

/* ──────────────────────────────────────────────────────────
 *  Texto utilitario
 * ────────────────────────────────────────────────────────── */
.text-secondary{ color: var(--app-text-mute) !important; }
.text-success { color: #6cd49a !important; }
.text-warning { color: #f3c25c !important; }
.text-danger  { color: #f08585 !important; }
.text-info    { color: #c8a8ff !important; }
.text-primary { color: #fff !important; }

hr{ border-color: var(--app-border); opacity: 1; }
.border-secondary{ border-color: var(--app-border) !important; }
.border-bottom, .border-end, .border-start, .border-top{ border-color: var(--app-border) !important; }

/* ──────────────────────────────────────────────────────────
 *  Tooltip Bootstrap (oscuro)
 * ────────────────────────────────────────────────────────── */
.tooltip-inner{
  background: #18181b;
  color: var(--app-text);
  border: 1px solid var(--app-border-strong);
  border-radius: 8px;
  font-size: .76rem;
  padding: .35rem .55rem;
}
.tooltip .tooltip-arrow::before{ display: none; }

/* ──────────────────────────────────────────────────────────
 *  Misc
 * ────────────────────────────────────────────────────────── */
.opacity-75{ opacity: .8 !important; }

.collapse + .card, .collapse .card{ background: var(--app-panel); }

/* Cards de "alumno / grupo / lead" — leve gradient + hover lift */
.card.lift{ transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.card.lift:hover{ transform: translateY(-1px); box-shadow: var(--app-shadow-md); border-color: var(--app-border-strong); }

/* Sticky topbar de alumnos: queda debajo del header principal al hacer scroll */
.students-topbar{
  position: sticky;
  top: calc(var(--app-topbar-height, 3.35rem) + 1px);
  z-index: 45;
  background: rgba(8,8,10,.88) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--app-border) !important;
  border-radius: 12px !important;
  margin-left: -.15rem;
  margin-right: -.15rem;
  padding-left: .65rem !important;
  padding-right: .65rem !important;
}

/* Responsive: sidebar */
@media (max-width: 991.98px){
  .sidebar{ display: none; }
}