/* =========================
   EGLC App UI (v3) - “Product UI”
   - Limpio, consistente, profesional
   - Hereda primary del theme: --ega-primary
   - Light/Dark friendly
   ========================= */

.eglc-app{
  font-family: inherit;
  color: var(--eglc-text);
}

:root{
  --eglc-primary: var(--ega-primary, var(--e-global-color-primary, #2563eb));
  --eglc-text: var(--e-global-color-text, #0f172a);
  --eglc-bg: var(--e-global-color-6d5d3c9, #ffffff);

  /* neutrales */
  --eglc-muted: rgba(15,23,42,.72);
  --eglc-border: rgba(2,6,23,.10);

  /* superficies */
  --eglc-surface: #ffffff;
  --eglc-surface-2: rgba(2,6,23,.02);
  --eglc-surface-3: rgba(2,6,23,.04);

  /* layout tokens */
  --eglc-radius: 14px;
  --eglc-radius-sm: 10px;
  --eglc-gap: 12px;

  /* typographic */
  --eglc-h: 20px;
  --eglc-font: 14px;

  /* shadows */
  --eglc-shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.06);

  /* focus ring */
  --eglc-focus: 0 0 0 3px color-mix(in srgb, var(--eglc-primary) 25%, transparent);
}

@supports not (color: color-mix(in srgb, white, black)){
  :root{ --eglc-focus: 0 0 0 3px rgba(37,99,235,.22); }
}

@media (prefers-color-scheme: dark) {
  :root{
    --eglc-text: rgba(248,250,252,.92);
    --eglc-bg: #0b1220;
    --eglc-muted: rgba(226,232,240,.72);
    --eglc-border: rgba(226,232,240,.14);

    --eglc-surface: rgba(15,23,42,.72);
    --eglc-surface-2: rgba(226,232,240,.06);
    --eglc-surface-3: rgba(226,232,240,.10);

    --eglc-shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.35);
  }
}

/* Base containers */
.eglc-shell{
  display: block;
}

.eglc-body{
  display: grid;
  gap: var(--eglc-gap);
}

.eglc-card{
  background: var(--eglc-surface);
  border: 1px solid var(--eglc-border);
  border-radius: var(--eglc-radius);
  box-shadow: var(--eglc-shadow-1);
  padding: 16px;
}

.eglc-card h3{
  margin: 0 0 12px;
  font-size: var(--eglc-h);
  letter-spacing: .2px;
}

.eglc-subtle{
  color: var(--eglc-muted);
  margin: 0 0 12px;
  font-size: 13px;
}

/* Topbar (sticky) */
.eglc-topbar{
  position: sticky;
  top: 0;
  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eglc-gap);

  background: color-mix(in srgb, var(--eglc-bg) 70%, var(--eglc-surface) 30%);
  border: 1px solid var(--eglc-border);
  border-radius: var(--eglc-radius);
  padding: 10px 10px;
  box-shadow: var(--eglc-shadow-1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@supports not (background: color-mix(in srgb, white, black)){
  .eglc-topbar{ background: var(--eglc-surface); }
}

.eglc-topbar__left,
.eglc-topbar__right{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.eglc-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--eglc-border);
  background: var(--eglc-surface);
}

.eglc-chip strong{
  font-weight: 800;
  font-size: 12px;
  opacity: .85;
}

/* Inputs / Selects */
.eglc-select,
.eglc-input{
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--eglc-border);
  background: var(--eglc-surface);
  color: var(--eglc-text);
  padding: 0 10px;
  min-width: 220px;
  outline: none;
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}

.eglc-input{ min-width: 160px; }
.eglc-select{ cursor: pointer; }

.eglc-select:focus,
.eglc-input:focus{
  border-color: color-mix(in srgb, var(--eglc-primary) 45%, var(--eglc-border));
  box-shadow: var(--eglc-focus);
}

/* Buttons */
.eglc-btn{
  appearance: none;
  border: 1px solid var(--eglc-border);
  background: var(--eglc-surface);
  color: var(--eglc-text);
  cursor: pointer;

  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  font-weight: 750;
  letter-spacing: .2px;

  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}

.eglc-btn:hover{
  transform: translateY(-1px);
  background: var(--eglc-surface-2);
}

.eglc-btn:active{
  transform: translateY(0);
}

.eglc-btn:disabled{
  opacity: .55;
  cursor: not-allowed;
}

.eglc-btn--primary{
  background: var(--eglc-primary);
  border-color: color-mix(in srgb, var(--eglc-primary) 75%, black);
  color: #fff;
}

.eglc-btn--primary:hover{
  filter: brightness(1.02);
  background: color-mix(in srgb, var(--eglc-primary) 92%, white);
}

.eglc-link{
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--eglc-primary);
  font-weight: 800;
  padding: 0;
  height: auto;
}

/* Rows */
.eglc-row{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0 12px;
}

.eglc-hr{
  border: 0;
  border-top: 1px solid var(--eglc-border);
  margin: 14px 0;
}

/* Lists */
.eglc-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.eglc-item{
  width: 100%;
  text-align: left;
  border: 1px solid var(--eglc-border);
  background: var(--eglc-surface);
  color: var(--eglc-text);
  border-radius: 12px;
  padding: 12px 12px;
  cursor: pointer;
  font-weight: 650;
  transition: background .12s ease, transform .12s ease, box-shadow .12s ease;
}

.eglc-item:hover{
  background: var(--eglc-surface-2);
  transform: translateY(-1px);
}

.eglc-item.is-active{
  border-color: color-mix(in srgb, var(--eglc-primary) 45%, var(--eglc-border));
  background: color-mix(in srgb, var(--eglc-primary) 10%, var(--eglc-surface));
}

/* Table */
.eglc-table{
  border: 1px solid var(--eglc-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--eglc-surface);
}

.eglc-thead,
.eglc-tr{
  display: grid;
  align-items: center;
}

.eglc-thead{
  background: var(--eglc-surface-3);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .2px;
  text-transform: none;
}

.eglc-thead > div,
.eglc-tr > div{
  padding: 10px 12px;
  border-bottom: 1px solid var(--eglc-border);
}

.eglc-tr:last-child > div{ border-bottom: none; }

.eglc-tr{
  background: var(--eglc-surface);
}

.eglc-tr:nth-child(even){
  background: var(--eglc-surface-2);
}

/* Grade input */
.eglc-grade{
  width: 100%;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--eglc-border);
  background: var(--eglc-surface);
  color: var(--eglc-text);
  padding: 0 10px;
}

/* Toast */
.eglc-toast{
  position: sticky;
  top: 58px;
  z-index: 25;
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--eglc-border);
  background: var(--eglc-surface);
  box-shadow: var(--eglc-shadow-1);
  font-weight: 650;
}

.eglc-toast[data-type="ok"]{ border-color: rgba(34,197,94,.45); }
.eglc-toast[data-type="err"]{ border-color: rgba(239,68,68,.55); }
.eglc-toast[data-type="info"]{ border-color: rgba(59,130,246,.45); }

/* Weekly attendance checkbox */
.eglc-check{
  width: 18px;
  height: 18px;
  accent-color: var(--eglc-primary);
  cursor: pointer;
}

/* Responsive */
@media (max-width: 720px) {
  .eglc-topbar{ padding: 10px; }
  .eglc-select, .eglc-input{ min-width: 160px; width: 100%; }
  .eglc-chip{ width: 100%; justify-content: space-between; }
}