/* ERP EMTEL v3.36 — sistema visual inspirado en interfaz_definitiva.html.
   Variables, tipografía, filtros, tarjetas y temas centralizados. */
:root {
  color-scheme: light;
  --font-ui: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bg-body: #f4f7fb;
  --bg-container: #ffffff;
  --bg-filter: #ffffff;
  --bg-input: #f8fafc;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  --shadow-sm: 0 1px 2px rgb(15 23 42 / .05);
  --shadow-md: 0 8px 20px rgb(15 23 42 / .08);
  --shadow-hover: 0 20px 25px -5px rgb(15 23 42 / .12), 0 8px 10px -6px rgb(15 23 42 / .10);
  --primary: #3b82f6;
  --primary-strong: #243a85;
  --primary-cyan: #009dd7;
  --bg-btn-active: #eff6ff;
  --text-btn-active: #1d4ed8;
  --cat-blue-text: #2563eb;
  --cat-blue-bg: #eff6ff;
  --cat-blue-border: #bfdbfe;
  --cat-green-text: #16a34a;
  --cat-green-bg: #f0fdf4;
  --cat-green-border: #bbf7d0;
  --cat-purple-text: #7c3aed;
  --cat-purple-bg: #f5f3ff;
  --cat-purple-border: #ddd6fe;
  --cat-red-text: #dc2626;
  --cat-red-bg: #fef2f2;
  --cat-red-border: #fecaca;
  --gi-bg: var(--bg-body);
  --gi-surface: var(--bg-container);
  --gi-surface-2: var(--bg-input);
  --gi-ink: var(--text-main);
  --gi-muted: var(--text-muted);
  --gi-line: var(--border-color);
  --surface: var(--bg-container);
  --text: var(--text-main);
  --muted: var(--text-muted);
  --border: var(--border-color);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg-body: #0f172a;
  --bg-container: #1e293b;
  --bg-filter: #1e293b;
  --bg-input: #162033;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --border-color: #334155;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .30);
  --shadow-md: 0 8px 20px rgb(0 0 0 / .32);
  --shadow-hover: 0 20px 25px -5px rgb(0 0 0 / .48), 0 8px 10px -6px rgb(0 0 0 / .40);
  --primary: #60a5fa;
  --bg-btn-active: #1e3a8a;
  --text-btn-active: #93c5fd;
  --cat-blue-text: #60a5fa;
  --cat-blue-bg: rgb(37 99 235 / .12);
  --cat-blue-border: rgb(96 165 250 / .28);
  --cat-green-text: #4ade80;
  --cat-green-bg: rgb(22 163 74 / .12);
  --cat-green-border: rgb(74 222 128 / .26);
  --cat-purple-text: #a78bfa;
  --cat-purple-bg: rgb(124 58 237 / .12);
  --cat-purple-border: rgb(167 139 250 / .26);
  --cat-red-text: #f87171;
  --cat-red-bg: rgb(220 38 38 / .12);
  --cat-red-border: rgb(248 113 113 / .26);
  --gi-bg: var(--bg-body);
  --gi-surface: var(--bg-container);
  --gi-surface-2: var(--bg-input);
  --gi-ink: var(--text-main);
  --gi-muted: var(--text-muted);
  --gi-line: var(--border-color);
  --surface: var(--bg-container);
  --text: var(--text-main);
  --muted: var(--text-muted);
  --border: var(--border-color);
  --table-header-bg: #243249;
  --table-row-alt: #19263a;
  --table-row-hover: #243650;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes shimmerLine {
  0% { transform: translateX(-120%) skewX(-20deg); }
  100% { transform: translateX(300%) skewX(-20deg); }
}

@keyframes gentleEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

* { box-sizing: border-box; }
html, body, button, input, select, textarea { font-family: var(--font-ui) !important; }
body { background: var(--bg-body) !important; color: var(--text-main) !important; transition: background-color .3s ease, color .3s ease; }
main, .main, .content, .workspace { color: var(--text-main); }
.view.is-active { animation: gentleEnter .25s ease-out; }

/* Header and navigation */
.topbar {
  background: color-mix(in srgb, var(--bg-container) 90%, transparent) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
}
.section-heading {
  align-items: end !important;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem !important;
  border-bottom: 1px solid var(--border-color);
}
.section-heading h2 { font-size: clamp(1.45rem, 2vw, 1.85rem) !important; font-weight: 750 !important; letter-spacing: -.025em; }
.eyebrow { color: var(--primary-cyan) !important; font-size: .72rem !important; font-weight: 750 !important; letter-spacing: .11em !important; }

.subtab-strip {
  display: flex !important;
  flex-wrap: wrap;
  gap: .7rem !important;
  margin-bottom: 1.5rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.subtab {
  min-height: 40px;
  padding: .55rem 1.05rem !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 9px !important;
  background: var(--bg-container) !important;
  color: var(--text-muted) !important;
  box-shadow: var(--shadow-sm);
  font-weight: 600 !important;
  transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
.subtab:hover { color: var(--text-main) !important; border-color: color-mix(in srgb, var(--primary) 50%, var(--border-color)) !important; transform: translateY(-1px); }
.subtab.is-active { background: var(--bg-btn-active) !important; color: var(--text-btn-active) !important; border-color: color-mix(in srgb, var(--primary) 36%, transparent) !important; }

/* Filters */
.list-toolbar,
.sheet-toolbar,
.academy-filter-toolbar,
.filters-block {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(240px, 2fr);
  gap: 1rem 1.25rem !important;
  align-items: end !important;
  padding: 1.15rem !important;
  margin: 1rem 0 1.6rem !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  background: var(--bg-filter) !important;
  box-shadow: var(--shadow-sm) !important;
}
.list-toolbar .field,
.sheet-toolbar .field { min-width: 0 !important; margin: 0 !important; }
.field > span:first-child,
.filter-label {
  color: var(--text-muted) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase;
  line-height: 1.25;
}
.field small, .hint { color: var(--text-muted) !important; }
input, select, textarea, .input-icon, .rich-program-select__button, .check-dropdown__button {
  min-height: 42px;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  background: var(--bg-input) !important;
  color: var(--text-main) !important;
  box-shadow: none !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input:focus, select:focus, textarea:focus, .rich-program-select__button:focus-visible {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent) !important;
  outline: 0 !important;
}
input[readonly], select:disabled, textarea[readonly] {
  opacity: .84;
  background: color-mix(in srgb, var(--bg-input) 80%, var(--border-color)) !important;
  cursor: not-allowed;
}

/* Generic cards and forms */
.card, .form-section, .spreadsheet-shell, .report-html-card, .modal-card, .app-dialog, .dialog-panel, .login-card {
  color: var(--text-main) !important;
  background: var(--bg-container) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-sm);
}
.form-section { border-radius: 14px !important; padding: clamp(1rem, 2vw, 1.5rem) !important; }
.academic-config-block {
  border-radius: 14px !important;
  border-color: var(--border-color) !important;
  background: color-mix(in srgb, var(--bg-container) 96%, var(--primary) 4%) !important;
}
.academic-config-block > legend { color: var(--text-main) !important; font-weight: 750 !important; }
.field-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Reference-inspired academic cards */
.program-card-grid, .group-card-grid, #turnList {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem !important;
}
.structure-card-modern {
  position: relative;
  isolation: isolate;
  padding: 3px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--program-accent, var(--primary)) 28%, var(--border-color)) !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.175,.885,.32,1.275), box-shadow .4s ease;
}
.structure-card-modern::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(120deg, color-mix(in srgb, var(--program-accent, var(--primary)) 28%, var(--border-color)), var(--program-accent, var(--primary)), color-mix(in srgb, var(--program-accent, var(--primary)) 28%, var(--border-color)));
  background-size: 300% 300%;
  transition: opacity .4s ease;
}
.structure-card-modern:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover) !important; }
.structure-card-modern:hover::before { opacity: 1; animation: gradientShift 2.5s ease infinite; }
.structure-card-modern > summary,
.structure-card-modern > .detail-card__body {
  position: relative;
  z-index: 1;
  background: var(--bg-container) !important;
}
.structure-card-modern > summary {
  min-height: 154px;
  padding: 1.35rem !important;
  border-radius: 15px !important;
  overflow: hidden;
}
.structure-card-modern > summary::after {
  content: '';
  position: absolute;
  inset-block: 0;
  left: -45%;
  width: 35%;
  pointer-events: none;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--text-main) 4%, transparent), transparent);
  transform: skewX(-20deg);
}
.structure-card-modern:hover > summary::after { animation: shimmerLine .85s ease-out forwards; }
.structure-card-modern[open] > summary { border-radius: 15px 15px 0 0 !important; }
.structure-card-modern > .detail-card__body { margin-top: -1px; padding: 0 1.35rem 1.2rem !important; border-radius: 0 0 15px 15px !important; }
.structure-avatar {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: color-mix(in srgb, var(--program-accent, var(--primary)) 20%, var(--border-color)) !important;
  background: transparent !important;
  border: 0 !important;
  transition: color .3s ease;
}
.structure-card-modern:hover .structure-avatar { color: var(--program-accent, var(--primary)) !important; }
.program-type-kicker {
  position: relative;
  color: var(--program-accent, var(--primary)) !important;
  font-size: .7rem !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
}
.program-type-kicker::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -.25rem;
  width: 0;
  height: 2px;
  background: var(--program-accent, var(--primary));
  transition: width .3s ease;
}
.structure-card-modern:hover .program-type-kicker::after { width: 100%; }
.structure-title { font-size: 1.05rem !important; font-weight: 650 !important; line-height: 1.35 !important; }
.structure-chipline { color: var(--text-muted) !important; font-size: .82rem !important; }
.status-pill { border-radius: 6px !important; font-weight: 750 !important; }
.detail-card__body .button-row { padding-top: .75rem; border-top: 1px solid var(--border-color); }

/* Accordions and platform blocks */
.academic-accordion {
  margin: 1rem 0;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  overflow: clip;
  background: var(--bg-container);
  box-shadow: var(--shadow-sm);
}
.academic-accordion > summary {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: .6rem;
  align-items: center;
  min-height: 52px;
  padding: .8rem 1rem;
  cursor: pointer;
  color: var(--text-main);
  font-weight: 750;
  background: color-mix(in srgb, var(--bg-container) 92%, var(--primary) 8%);
}
.academic-accordion > summary small { justify-self: end; color: var(--text-muted); font-weight: 500; }
.academic-accordion[open] > summary { border-bottom: 1px solid var(--border-color); }
.academic-accordion__body { padding: 1rem; }
.platform-brand-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: .75rem 0 1rem;
  padding: .75rem .9rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-input);
}
.platform-brand-row img { width: 42px; height: 42px; object-fit: contain; flex: 0 0 42px; }
.platform-brand-row div { display: grid; gap: .1rem; }
.platform-brand-row strong { color: var(--text-main); }
.platform-brand-row small { color: var(--text-muted); }
.program-module-controls-v336 { display: grid; grid-template-columns: repeat(2, minmax(130px, 170px)); gap: .75rem; }
.program-grade-toggle-v336 { margin: .75rem 0; }
.group-calendar-block-v336 .modern-days-selector { margin: .4rem 0 1rem; padding: 0; border: 0; }
.module-note-readonly-item { background: var(--bg-input) !important; border-color: var(--border-color) !important; }
.module-note-readonly-item strong { color: var(--primary-strong) !important; }
html[data-theme="dark"] .module-note-readonly-item strong { color: #93c5fd !important; }

/* Buttons */
.btn { border-radius: 8px !important; font-weight: 600 !important; transition: transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease !important; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, #243a85, #009dd7) !important; border-color: transparent !important; box-shadow: 0 7px 16px rgb(36 58 133 / .18) !important; }
.btn-soft, .btn-ghost { background: var(--bg-container) !important; color: var(--text-muted) !important; border-color: var(--border-color) !important; }
.btn-soft:hover, .btn-ghost:hover { color: var(--text-main) !important; border-color: var(--text-muted) !important; }

/* Tables and dialogs */
table, th, td { border-color: var(--border-color) !important; }
th { background: color-mix(in srgb, var(--bg-container) 86%, var(--primary) 14%) !important; color: var(--text-main) !important; }
tbody tr:hover td { background: color-mix(in srgb, var(--bg-container) 91%, var(--primary) 9%) !important; }
.entity-dialog-modern, .app-dialog { background: var(--bg-container) !important; color: var(--text-main) !important; }

/* Theme toggle based on reference */
.theme-toggle-card { padding: .35rem .75rem .55rem !important; }
.theme-toggle-button {
  min-height: 42px !important;
  border-radius: 999px !important;
  border-color: rgb(255 255 255 / .16) !important;
  background: rgb(255 255 255 / .08) !important;
  font-weight: 600 !important;
}
.theme-toggle-button:hover { background: rgb(255 255 255 / .15) !important; }

/* Login */
.login-card { border-radius: 18px !important; box-shadow: var(--shadow-hover) !important; }
.login-page { background: radial-gradient(circle at 15% 10%, color-mix(in srgb, #009dd7 18%, transparent), transparent 34%), var(--bg-body) !important; }

@media (max-width: 1120px) {
  .list-toolbar, .sheet-toolbar, .academy-filter-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .list-toolbar .search-field, .sheet-toolbar .search-field { grid-column: span 2; }
  .field-grid.cols-5, .group-main-grid-v336 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 820px) {
  .program-card-grid, .group-card-grid, #turnList { grid-template-columns: 1fr !important; }
  .field-grid.cols-4, .field-grid.cols-5, .group-main-grid-v336 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .program-module-head-v336 { align-items: stretch !important; }
  .program-module-controls-v336 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .list-toolbar, .sheet-toolbar, .academy-filter-toolbar { grid-template-columns: 1fr !important; gap: .8rem !important; padding: .9rem !important; }
  .list-toolbar .search-field, .sheet-toolbar .search-field { grid-column: auto; }
  .field-grid.cols-2, .field-grid.cols-3, .field-grid.cols-4, .field-grid.cols-5, .group-main-grid-v336 { grid-template-columns: 1fr !important; }
  .span-2, .span-3 { grid-column: auto !important; }
  .subtab-strip { gap: .45rem !important; }
  .subtab { flex: 1 1 auto; justify-content: center; }
  .program-module-controls-v336 { grid-template-columns: 1fr; }
  .academic-accordion > summary { grid-template-columns: auto 1fr; }
  .academic-accordion > summary small { grid-column: 1 / -1; justify-self: start; }
  .structure-card-modern > summary { min-height: 135px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Tarjetas académicas definitivas v3.36 */
.academic-card-v336 {
  position: relative;
  isolation: isolate;
  padding: 3px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--program-accent, var(--primary)) 28%, var(--border-color));
  transition: transform .4s cubic-bezier(.175,.885,.32,1.275), box-shadow .4s ease;
  overflow: hidden;
}
.academic-card-v336::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, color-mix(in srgb, var(--program-accent, var(--primary)) 28%, var(--border-color)), var(--program-accent, var(--primary)), color-mix(in srgb, var(--program-accent, var(--primary)) 28%, var(--border-color)));
  background-size: 300% 300%;
  transition: opacity .4s ease;
}
.academic-card-v336:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.academic-card-v336:hover::before { opacity: 1; animation: gradientShift 2.5s ease infinite; }
.academic-card-inner-v336 {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  min-height: 270px;
  height: 100%;
  padding: 1.35rem;
  border-radius: 15px;
  background: var(--bg-container);
  overflow: hidden;
}
.academic-card-inner-v336::after {
  content: '';
  position: absolute;
  inset-block: 0;
  left: -50%;
  width: 38%;
  pointer-events: none;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--text-main) 4%, transparent), transparent);
  transform: skewX(-20deg);
}
.academic-card-v336:hover .academic-card-inner-v336::after { animation: shimmerLine .85s ease-out forwards; }
.academic-card-header-v336 { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.academic-card-category-v336 { position: relative; display: inline-flex; align-items: center; gap: .3rem; color: var(--program-accent, var(--primary)); font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.academic-card-category-v336::after { content: ''; position: absolute; left: 0; bottom: -.25rem; width: 0; height: 2px; background: var(--program-accent, var(--primary)); transition: width .3s ease; }
.academic-card-v336:hover .academic-card-category-v336::after { width: 100%; }
.academic-card-code-v336 { font-size: 1.4rem; font-weight: 800; color: color-mix(in srgb, var(--program-accent, var(--primary)) 18%, var(--border-color)); line-height: 1; transition: color .3s ease; }
.academic-card-v336:hover .academic-card-code-v336 { color: var(--program-accent, var(--primary)); }
.academic-card-title-v336 { position: relative; z-index: 1; min-height: 2.75em; margin: .1rem 0; font-size: 1.08rem; font-weight: 650; line-height: 1.35; color: var(--text-main); }
.academic-card-route-v336 { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: .75rem; color: var(--text-muted); font-size: .84rem; }
.academic-card-route-v336 strong { color: var(--text-main); }
.academic-card-compact-v336 { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-height: 28px; color: var(--text-muted); font-size: .82rem; transition: opacity .2s ease; }
.academic-card-v336:hover .academic-card-compact-v336 { opacity: 0; pointer-events: none; }
.academic-card-reveal-v336 { position: relative; z-index: 1; display: flex; gap: 1.25rem; padding: .7rem .85rem; margin-top: -2.1rem; border-radius: 8px; background: var(--bg-input); opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .4s cubic-bezier(.175,.885,.32,1.275); }
.academic-card-v336:hover .academic-card-reveal-v336 { opacity: 1; transform: translateY(0); }
.academic-card-reveal-v336 > div { display: flex; flex-direction: column; min-width: 0; }
.academic-card-reveal-v336 strong { color: var(--text-main); font-size: .95rem; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.academic-card-reveal-v336 strong.is-active { color: var(--cat-green-text); }
.academic-card-reveal-v336 strong.is-inactive { color: var(--cat-red-text); }
.academic-card-reveal-v336 small { color: var(--text-muted); font-size: .66rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.academic-card-meta-v336 { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .8rem; color: var(--text-muted); font-size: .75rem; }
.academic-card-meta-v336 span { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.academic-card-actions-v336 { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .45rem; margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--border-color); }
@media (max-width: 620px) {
  .academic-card-inner-v336 { min-height: 250px; padding: 1.1rem; }
  .academic-card-meta-v336 { grid-template-columns: 1fr; }
  .academic-card-reveal-v336 { gap: .8rem; }
}