/* =========================================================
   Identidad institucional ISTY (colores del logo) para los
   cuatro simuladores. Se carga al final y sustituye los colores
   propios de cada carrera.
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&display=swap");
:root {
  --isty-verde-osc: #1B4D22; --isty-verde: #2E8B2E; --isty-verde-cl: #3BA34A; --isty-amarillo: #F2E21B; --isty-dorado: #C9A227;
  --isty-grad: linear-gradient(90deg, #2E8B2E, #7cbf2a 55%, #F2E21B);
  --primary: #2E8B2E; --accent: #C9A227; --bg: #f6f8f2; --surface-2: #edf4e8; --border: #d9e4d3;
  /* colores de carrera reemplazados por el institucional */
  --fire: #2E8B2E; --obra: #2E8B2E; --adm: #2E8B2E;
}
:root[data-theme="dark"] { --primary: #5cbf6a; --bg: #0f1a12; --surface: #172619; --surface-2: #1f3323; --border: #2c4230; --fire: #4caf5a; --obra: #4caf5a; --adm: #4caf5a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --primary: #5cbf6a; --bg: #0f1a12; --surface: #172619; --surface-2: #1f3323; --border: #2c4230; --fire: #4caf5a; --obra: #4caf5a; --adm: #4caf5a; } }

/* encabezado */
.topbar, .cior-top, .obra-top, .adm-top { background: var(--isty-verde-osc) !important; position: relative; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--isty-grad); }
.brand-logo img { width: 42px; height: 42px; border-radius: 50%; display: block; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--isty-verde-osc); box-shadow: 0 0 0 2px rgba(255,255,255,.6); font: 800 11px Nunito, sans-serif; letter-spacing: -.04em; }
.brand-name { font-family: "Playfair Display", Georgia, serif; letter-spacing: .01em; }
h1 { font-family: "Playfair Display", Georgia, serif; }

/* botones, etiquetas y acentos */
.btn-primary, .cior-btn, .obra-btn, .adm-btn, .btn-primary.cior-btn, .btn-primary.obra-btn, .btn-primary.adm-btn { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-ar { background: linear-gradient(135deg, var(--isty-verde-osc), var(--isty-verde) 60%, #8cbf26); color: #fff; }
.cior-pill, .obra-pill, .adm-pill, .cior-step, .obra-step, .adm-step, .step { background: var(--primary); color: #fff; }
.mapa-col h3, .cior-h3, .obra-h3, .adm-h3 { background: var(--isty-verde-osc) !important; }
.cior-dialog, .obra-dialog, .adm-dialog, .dialog { border-left-color: var(--primary); }
.hub-card .tags, .choice small.tags { color: var(--isty-verde); }
:root[data-theme="dark"] .hub-card .tags, :root[data-theme="dark"] .choice small.tags { color: #9be3a5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hub-card .tags, :root:not([data-theme="light"]) .choice small.tags { color: #9be3a5; } }
.hub-card:hover, .choice[aria-pressed="true"] { border-color: var(--primary); }
.hub-card .em { filter: saturate(1.05); }
.score-ring, .cior-ring, .obra-ring, .adm-ring { background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--surface-2) 0); }
.crit-bar i { background: var(--isty-grad); }
.hero h1, .setup-head h1 { color: var(--isty-verde-osc); }
:root[data-theme="dark"] .hero h1, :root[data-theme="dark"] .setup-head h1 { color: #9be3a5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero h1, :root:not([data-theme="light"]) .setup-head h1 { color: #9be3a5; } }
a { color: var(--isty-verde); }
.form-card { border-top: 5px solid var(--isty-verde); }
.isty-user b { color: #fff; }

/* ================= Capa visual profesional (isty-ui.js) ================= */
.isty-ic { display: inline-flex; vertical-align: -0.14em; line-height: 1; }
.isty-ic .isty-icon-svg { width: 1.05em; height: 1.05em; }
.isty-av { display: inline-flex; vertical-align: -0.22em; line-height: 1; }
.isty-av .isty-avatar-svg { width: 1.3em; height: 1.3em; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.cv-av .isty-av .isty-avatar-svg, .case-av .isty-av .isty-avatar-svg, .mini-student .av .isty-avatar-svg, .u-av .isty-avatar-svg, .choice .em .isty-avatar-svg, .student .isty-avatar-svg { width: 1em; height: 1em; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.cv-av .isty-av .isty-avatar-svg { border: 4px solid #fff; }
.isty-talking .cv-person .isty-mouth, .isty-talking .case-head .isty-mouth { animation: istyTalk .22s infinite alternate ease-in-out; }
@keyframes istyTalk { from { transform: scaleY(.4); } to { transform: scaleY(1.6); } }
.cv-person .isty-av { animation: istyBreath 3.2s infinite ease-in-out; transform-origin: 50% 100%; }
@keyframes istyBreath { 50% { transform: translateY(-2px) scale(1.012); } }

/* íconos de las tarjetas del menú como insignias */
.hub-card .em { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(135deg, var(--isty-verde), #7cbf2a); color: #fff; font-size: 28px; box-shadow: 0 8px 18px rgba(46,139,46,.28); }
.hub-card .em .isty-icon-svg { width: 28px; height: 28px; }
.hub-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
.hub-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(27,77,34,.16); }
.choice .em .isty-ic { color: var(--isty-verde); }
.icon-btn .isty-icon-svg { width: 20px; height: 20px; }
.btn .isty-ic, .act .isty-ic, .tab .isty-ic { margin-right: .15em; }

/* interfaz tipo tablero / videojuego */
.class-bar { background: linear-gradient(90deg, rgba(27,77,34,.07), rgba(242,226,27,.07)); border: 1px solid var(--border); border-radius: 14px; padding: 8px 12px; }
.clock { font-variant-numeric: tabular-nums; font-weight: 800; background: var(--isty-verde-osc); color: #fff; border-radius: 10px; padding: 6px 12px; }
.gauge { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; box-shadow: 0 2px 8px rgba(27,77,34,.06); }
.gauge-bar { height: 8px !important; }
.gauge-bar i { background-image: linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,0)) !important; box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.dialog { box-shadow: 0 10px 28px rgba(27,77,34,.12); }
.dialog-choices .btn { transition: transform .12s, box-shadow .12s, border-color .12s; text-align: left; }
.dialog-choices .btn:hover:not(:disabled) { transform: translateX(3px); border-color: var(--primary); box-shadow: 0 4px 12px rgba(27,77,34,.12); }
.btn:active:not(:disabled) { transform: scale(.98); }
.score-ring { box-shadow: 0 0 0 6px rgba(242,226,27,.25), 0 10px 26px rgba(27,77,34,.25); }
.kpi { border-top: 4px solid var(--isty-verde); }
.report-head { background: linear-gradient(120deg, rgba(46,139,46,.08), rgba(242,226,27,.12)); }
.toast { background: var(--isty-verde-osc) !important; color: #fff !important; border-left: 5px solid var(--isty-amarillo); }
.screen.isty-enter { animation: istyEnter .35s ease both; }
@keyframes istyEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cv-stage { box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 12px 30px rgba(0,0,0,.12); }
.cv-bubble { border: 2px solid rgba(46,139,46,.25); }
.cv-prop { backdrop-filter: blur(4px); }
@media (prefers-reduced-motion: reduce) { .screen.isty-enter, .cv-person .isty-av, .isty-talking .isty-mouth { animation: none !important; } }