/* ============================================================
   IDESUN OS — App styles
   Layout · Componentes · Módulos · Responsive
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-15);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--petroleo); }
button { font-family: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--naranja-vivo); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--naranja-100); }

/* Scrollbars discretos */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============ LOGIN ============ */
.login-screen {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: 1.05fr 1fr;
}
.login-brand {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 700px at 85% -10%, rgba(252,139,69,.16), transparent 55%),
    linear-gradient(160deg, var(--petroleo-800), var(--petroleo-900));
  color: var(--text-inv);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 48px 56px;
}
.login-brand .rings {
  position: absolute; top: -140px; left: -140px; width: 460px; height: 460px;
  border-radius: 50%; border: 1px solid rgba(252,139,69,.28); pointer-events: none;
}
.login-brand .rings::before, .login-brand .rings::after {
  content: ""; position: absolute; inset: 60px; border-radius: 50%;
  border: 1px solid rgba(252,139,69,.2);
}
.login-brand .rings::after { inset: 130px; border-color: rgba(255,255,255,.12); }
.login-brand .diag {
  position: absolute; right: -110px; top: 0; bottom: 0; width: 220px;
  background: linear-gradient(200deg, rgba(252,139,69,.9), rgba(255,122,56,.75));
  transform: skewX(-12deg); opacity: .14; pointer-events: none;
}
.brand-lockup { display: flex; align-items: center; gap: 14px; }
.brand-lockup .name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-20); letter-spacing: .02em; }
.brand-lockup .sede { font-size: var(--fs-11); letter-spacing: .32em; color: var(--naranja); font-weight: 600; }
.login-hero h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 700; color: #fff; }
.login-hero h1 .accent { color: var(--naranja); }
.login-hero p { margin-top: 14px; max-width: 420px; color: var(--text-inv-2); font-size: var(--fs-16); }
.login-foot { font-size: var(--fs-12); color: var(--text-inv-2); letter-spacing: .06em; }

.login-panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--bg); }
.login-card { width: min(400px, 100%); }
.login-card h2 { font-size: var(--fs-24); }
.login-card .sub { color: var(--text-2); margin: 6px 0 20px; font-size: var(--fs-14); }

/* ============================================================
   VISTA DE ALUMNO — la barra que no se puede ignorar.
   Mientras administración, dirección o un profesor miran el portal de un
   alumno, esta franja ámbar queda SIEMPRE a la vista (sticky, por encima
   del propio topbar): dice de quién es lo que se está viendo, que es de
   solo lectura, y tiene la única salida. Nadie debe poder olvidar que
   está observando la pantalla de otra persona.
   ============================================================ */
.vista-banner {
  position: sticky; top: 0; z-index: 31;
  min-height: 44px; display: flex; align-items: center; gap: 10px;
  padding: 6px 22px; flex-wrap: wrap;
  background: #FFF3E4; color: #93400F; border-bottom: 2px solid var(--naranja);
}
.vista-banner svg { flex: none; }
.vista-banner .vb-t { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vista-banner b { font-family: var(--font-display); font-size: var(--fs-13); letter-spacing: .04em; white-space: nowrap; }
.vista-banner .vb-quien { font-size: var(--fs-13); font-weight: 600; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vista-banner .btn {
  flex: none; min-height: 34px;
  background: var(--naranja); color: #fff; border: 0; font-weight: 700;
}
.vista-banner .btn:hover { filter: brightness(.94); }
/* Con la barra presente, el topbar pegajoso se acomoda debajo de ella.
   La barra mide SIEMPRE 44 px —una sola línea, con puntos suspensivos—
   para que este corrimiento nunca quede corto ni largo. */
.main:has(.vista-banner) .topbar { top: 44px; }
.vista-banner { height: 44px; flex-wrap: nowrap; overflow: hidden; }
.vista-banner .vb-t { flex-wrap: nowrap; overflow: hidden; }
/* En el teléfono: se queda el QUIÉN (que es lo que importa) y la salida
   se abrevia a "Salir" — la barra sigue diciendo "solo lectura" en el rol
   del menú y en cada intento de escritura. */
@media (max-width: 640px) {
  .vista-banner { padding: 6px 12px; gap: 8px; }
  .vista-banner b { display: none; }
  .vista-banner .vb-larga { display: none; }
}

.role-picker {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: var(--surface-2); padding: 5px; border-radius: var(--r-md); margin-bottom: 18px;
}
.role-opt {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 8px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-14); color: var(--text-3);
  transition: all var(--t-fast);
}
.role-opt:hover { color: var(--text-2); }
.role-opt.active { background: var(--petroleo); color: #fff; box-shadow: var(--shadow-2); }
.demo-hint {
  margin-top: 22px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--petroleo-50); border: 1px dashed var(--petroleo-100);
  font-size: var(--fs-12); color: var(--text-2);
}
.demo-hint b { color: var(--petroleo); }
.demo-hint .demo-fill { color: var(--petroleo); font-weight: 600; cursor: pointer; background: none; border: 0; padding: 0; font-size: inherit; text-decoration: underline; }
.login-error {
  display: none; margin-top: 14px; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--coral-100); color: var(--danger); font-size: var(--fs-13); font-weight: 500;
}
.login-error.show { display: block; animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-5px);} 50% { transform: translateX(5px);} 75% { transform: translateX(-3px);} }

/* ============ FORM CONTROLS ============ */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: var(--fs-13); font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.input, select.input, textarea.input {
  width: 100%; padding: 11px 14px; border-radius: var(--r-md);
  border: 1.5px solid var(--border-strong); background: var(--surface);
  font: inherit; color: var(--text); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus { outline: none; border-color: var(--petroleo); box-shadow: 0 0 0 3px var(--petroleo-100); }
textarea.input { resize: vertical; min-height: 90px; }
.input-wrap { position: relative; }
.input-wrap .toggle-pass {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; color: var(--text-3); padding: 6px; border-radius: 8px;
}
.check { display: flex; gap: 8px; align-items: center; font-size: var(--fs-14); color: var(--text-2); }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-md); border: 1.5px solid transparent;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-14);
  cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), opacity var(--t-fast);
  text-decoration: none; white-space: nowrap;
}
.btn:active { transform: scale(.97); }
/* El naranja de marca con letra blanca daba 2.6:1: el texto del botón
   principal era lo MENOS legible de la pantalla. Se conserva exactamente el
   naranja del escudo y se cambia la letra a tinta oscura — 6.8:1— así el
   botón sigue siendo el más llamativo y además se lee. */
.btn-primary { background: var(--naranja-vivo); color: var(--tinta); font-weight: 700; box-shadow: var(--shadow-2); }
.btn-primary:hover { background: var(--naranja); }
.btn-dark { background: var(--petroleo); color: #fff; }
.btn-dark:hover { background: var(--petroleo-600); }
.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-soft { background: var(--petroleo-50); color: var(--petroleo); }
.btn-soft:hover { background: var(--petroleo-100); }
.btn-danger-soft { background: var(--coral-100); color: var(--danger); }
/* Rojo sólido, reservado para lo que destruye información: vaciar el
   padrón, eliminar un documento del archivero. Que se distinga del
   «danger-soft» no es capricho — uno avisa, el otro no tiene vuelta. */
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { filter: brightness(.92); }
.btn-sm { padding: 6px 12px; font-size: var(--fs-13); border-radius: 9px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--r-md); border: 0; background: transparent;
  color: var(--text-2); cursor: pointer; position: relative; transition: background var(--t-fast);
}
.icon-btn:hover { background: var(--surface-2); }

/* ============ APP SHELL ============ */
.shell { display: none; }
.shell.active { display: block; }
.app-layout { min-height: 100vh; min-height: 100dvh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 40;
  background: linear-gradient(180deg, var(--petroleo-800), var(--petroleo-900));
  color: var(--text-inv); display: flex; flex-direction: column;
  transition: transform var(--t-med);
}
.sidebar-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; }
.sidebar-head .t { line-height: 1.1; }
.sidebar-head .name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-16); letter-spacing: .02em; color: #fff; }
.sidebar-head .sub { font-size: var(--fs-11); color: var(--text-inv-2); letter-spacing: .14em; }
.side-role {
  margin: 2px 18px 12px; padding: 4px 10px; display: inline-block; align-self: flex-start;
  border-radius: var(--r-full); background: rgba(252,139,69,.16); color: var(--naranja);
  font-size: var(--fs-11); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  font-family: var(--font-display);
}
.side-nav { flex: 1; overflow-y: auto; padding: 4px 12px 12px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.side-link {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 12px; margin: 1px 0; border-radius: 10px; border: 0; background: none;
  color: var(--text-inv-2); font-family: var(--font-body); font-size: var(--fs-14); font-weight: 500;
  cursor: pointer; text-align: left; transition: background var(--t-fast), color var(--t-fast);
}
.side-link svg { flex: 0 0 auto; opacity: .85; }
.side-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.side-link.active { background: rgba(252,139,69,.15); color: #fff; }
.side-link.active svg { color: var(--naranja); opacity: 1; }
.side-link .badge { margin-left: auto; }
.sidebar-foot { padding: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.side-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; width: 100%; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; }
.side-user:hover { background: rgba(255,255,255,.07); }
.side-user .n { font-size: var(--fs-13); font-weight: 600; color: #fff; line-height: 1.2; }
.side-user .r { font-size: var(--fs-11); color: var(--text-inv-2); }

.main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px; padding: 0 22px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
}
.topbar .menu-btn { display: none; }
.search-trigger {
  flex: 1; max-width: 460px; display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: var(--r-md); border: 1.5px solid var(--border);
  background: var(--surface); color: var(--text-3); font: inherit; font-size: var(--fs-14);
  cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search-trigger:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.search-trigger kbd {
  margin-left: auto; font-family: var(--font-display); font-size: var(--fs-11);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; color: var(--text-3);
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.notif-dot {
  position: absolute; top: 6px; right: 6px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--r-full); background: var(--coral); color: #fff;
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg); font-family: var(--font-display);
}
/* Sin esta regla, el display:flex de arriba anula el atributo hidden y el
   contador se ve aunque esté en cero (o en sesiones reales, donde se oculta). */
.notif-dot[hidden] { display: none; }
.topbar .avatar-btn { border: 0; background: none; padding: 3px; border-radius: 50%; cursor: pointer; }

.content { flex: 1; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 26px 26px 90px; animation: viewIn var(--t-med) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: var(--fs-28); font-weight: 700; }
.page-head .crumb { font-size: var(--fs-13); color: var(--text-3); margin-bottom: 4px; display: flex; gap: 6px; align-items: center; }
.page-head .crumb a { color: var(--text-3); text-decoration: none; }
.page-head .crumb a:hover { color: var(--petroleo); text-decoration: underline; }
.page-sub { color: var(--text-2); font-size: var(--fs-14); margin-top: 4px; max-width: 60ch; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ============ MOBILE TABBAR ============ */
.tabbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px); border-top: 1px solid var(--border);
  grid-auto-flow: column; grid-auto-columns: 1fr;
}
.tab-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: none; color: var(--text-3); font-family: var(--font-display);
  font-size: 10.5px; font-weight: 600; cursor: pointer; padding-top: 6px;
}
.tab-item.active { color: #93400F; }
.tab-item.active svg { color: #93400F; }

/* ============ GENERIC COMPONENTS ============ */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: 20px;
}
.card.hoverable { transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); cursor: pointer; }
.card.hoverable:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); border-color: var(--border-strong); }
.card-title { font-size: var(--fs-16); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.link-all { font-size: var(--fs-13); font-weight: 600; color: var(--petroleo); text-decoration: none; font-family: var(--font-display); }
.link-all:hover { text-decoration: underline; }

.grid { display: grid; gap: 16px; }
/* minmax(0,…) es lo que impide que una tabla ancha (el historial de pagos
   del alumno) estire su columna y empuje la página fuera de la pantalla en
   tablet. Sin esto, a 820 px la vista se desplazaba 100 px en horizontal. */
.grid-split { grid-template-columns: var(--split, minmax(0, 1.35fr) minmax(0, 1fr)); align-items: start; }
.grid-split > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.stat-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; transition: transform var(--t-fast), box-shadow var(--t-fast); }
.stat-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.stat-icon {
  width: 44px; height: 44px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.stat-card .v { font-family: var(--font-display); font-size: var(--fs-24); font-weight: 700; line-height: 1.05; }
.stat-card .l { font-size: var(--fs-12); color: var(--text-2); margin-top: 2px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: var(--r-full); font-size: var(--fs-12); font-weight: 600; font-family: var(--font-display);
  white-space: nowrap;
}
.chip-petroleo { background: var(--petroleo-50); color: var(--petroleo); }
.chip-naranja { background: var(--naranja-100); color: #93400F; }
.chip-verde { background: var(--verde-100); color: var(--verde-bosque); }
.chip-mostaza { background: var(--mostaza-100); color: #75530A; }
.chip-coral { background: var(--coral-100); color: var(--danger); }
.chip-neutral { background: var(--surface-2); color: var(--text-2); }
.chip-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.avatar {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: #fff; flex: 0 0 auto;
  background: var(--petroleo); user-select: none;
}
.avatar.sz-28 { width: 28px; height: 28px; font-size: 11px; }
.avatar.sz-34 { width: 34px; height: 34px; font-size: 12.5px; }
.avatar.sz-42 { width: 42px; height: 42px; font-size: 15px; }
.avatar.sz-56 { width: 56px; height: 56px; font-size: 20px; }
.avatar.sz-84 { width: 84px; height: 84px; font-size: 30px; }

.progress { height: 7px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: inherit; background: var(--naranja-vivo); transition: width .6s var(--ease); }
.progress.verde > i { background: var(--verde); }
.progress.petroleo > i { background: var(--petroleo); }
.progress.mostaza > i { background: var(--mostaza); }

.ring { position: relative; width: 84px; height: 84px; }
.ring svg { transform: rotate(-90deg); }
.ring .ring-txt {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-display);
}
.ring .ring-txt b { font-size: var(--fs-18); }
.ring .ring-txt span { font-size: 10.5px; color: var(--text-2); letter-spacing: .03em; }

.tabs { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: var(--r-md); width: fit-content; max-width: 100%; overflow-x: auto; }
.tabs .tab {
  border: 0; background: none; padding: 7px 16px; border-radius: 9px; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-13); color: var(--text-2);
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); white-space: nowrap;
}
.tabs .tab.active { background: var(--surface); color: var(--petroleo); box-shadow: var(--shadow-1); }
.tabs .tab .count { margin-left: 6px; font-size: var(--fs-11); background: var(--naranja-100); color: #93400F; border-radius: var(--r-full); padding: 1px 7px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
table.dt { width: 100%; border-collapse: collapse; font-size: var(--fs-14); min-width: 640px; }
table.dt th {
  text-align: left; font-family: var(--font-display); font-size: var(--fs-12); letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-2); font-weight: 700;
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2);
  position: sticky; top: 0;
}
table.dt td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.dt tr:last-child td { border-bottom: 0; }
table.dt tbody tr { transition: background var(--t-fast); }
table.dt tbody tr:hover { background: var(--petroleo-50); }
.grade-input {
  width: 64px; padding: 6px 8px; text-align: center; border-radius: 8px;
  border: 1.5px solid var(--border-strong); font: inherit; font-family: var(--font-display); font-weight: 600;
}
.grade-input:focus { outline: none; border-color: var(--naranja-vivo); box-shadow: 0 0 0 3px var(--naranja-100); }

.list { display: flex; flex-direction: column; }
.list-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 4px;
  border-bottom: 1px solid var(--border); text-decoration: none; color: inherit;
}
.list-row:last-child { border-bottom: 0; }
.list-row.clickable { cursor: pointer; border-radius: 10px; padding: 13px 10px; margin: 0 -10px; transition: background var(--t-fast); border-bottom: 1px solid var(--border); }
.list-row.clickable:hover { background: var(--surface-2); }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .t { font-weight: 600; font-size: var(--fs-14); }
.list-row .s { font-size: var(--fs-12.5, 12.5px); color: var(--text-3); margin-top: 1px; }

.file-chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px 8px 9px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  font-size: var(--fs-13); font-weight: 500; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast);
  color: inherit; text-decoration: none;
}
.file-chip:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); }
.ficon {
  width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  /* 12px, no 10.5: es el mismo valor que antes solo se daba en pantallas
     táctiles (más abajo, en las correcciones para el teléfono), pero
     esta etiqueta también se lee en escritorio con mouse — "ARQ", "PDF",
     "!" — y por debajo de 11px deja de leerse ahí también. */
  font-family: var(--font-display); font-size: 12px; font-weight: 800; color: #fff; letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.ficon.pdf { background: var(--coral); }
.ficon.docx { background: #2B579A; }
.ficon.xlsx { background: #217346; }
.ficon.pptx { background: #C43E1C; }
.ficon.canva { background: #7B2FF7; }
.ficon.img { background: #8A6206; }
.ficon.video { background: var(--petroleo); }
.ficon.link { background: var(--salvia); }
.ficon.zip { background: #6B7280; }

.empty {
  padding: 44px 20px; text-align: center; color: var(--text-3);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.empty .e-ic { width: 52px; height: 52px; border-radius: var(--r-lg); background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.empty b { color: var(--text-2); font-family: var(--font-display); }
.empty span { font-size: var(--fs-13); max-width: 34ch; }

/* ============ MODAL / SHEET ============ */
.overlay {
  position: fixed; inset: 0; z-index: 80; background: rgba(6, 40, 47, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: fadeIn var(--t-fast) both;
}
@keyframes fadeIn { from { opacity: 0; } }
.modal {
  width: min(600px, 100%); max-height: min(84vh, 760px); overflow-y: auto;
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-4);
  animation: popIn var(--t-med) both;
}
.modal.wide { width: min(760px, 100%); }
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 24px 0;
}
.modal-head h3 { font-size: var(--fs-20); }
.modal-body { padding: 16px 24px 24px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 24px 22px; flex-wrap: wrap; }

/* ============ TOAST ============ */
.toast-zone { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 11px 18px;
  background: var(--tinta); color: #fff; border-radius: var(--r-full);
  font-size: var(--fs-14); font-weight: 500; box-shadow: var(--shadow-3);
  animation: toastIn var(--t-med) both;
}
.toast svg { color: #6FCF97; }
.toast.warn svg { color: var(--mostaza); }
.toast.leaving { animation: toastOut var(--t-med) both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px) scale(.96); } }

/* ============ SEARCH OVERLAY ============ */
.search-overlay { align-items: flex-start; padding-top: 12vh; }
.search-box { width: min(640px, 100%); background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-4); overflow: hidden; animation: popIn var(--t-med) both; }
.search-box .s-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.search-box input { flex: 1; border: 0; font: inherit; font-size: var(--fs-16); outline: none; background: none; color: var(--text); }
.search-results { max-height: 52vh; overflow-y: auto; padding: 8px; }
.s-group { font-family: var(--font-display); font-size: var(--fs-11); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 700; padding: 12px 12px 4px; }
.s-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 10px; border: 0; background: none; cursor: pointer; font: inherit;
}
.s-item:hover, .s-item.hl { background: var(--petroleo-50); }
.s-item .si { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--petroleo); flex: 0 0 auto; }
.s-item .t { font-weight: 600; font-size: var(--fs-14); }
.s-item .s { font-size: var(--fs-12); color: var(--text-3); }

/* ============ NOTIFICATIONS PANEL ============ */
.notif-panel {
  position: fixed; top: 10px; right: 10px; bottom: 10px; z-index: 90;
  width: min(400px, calc(100vw - 20px));
  background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-4);
  display: flex; flex-direction: column; animation: slideIn var(--t-med) both;
}
@keyframes slideIn { from { opacity: 0; transform: translateX(24px); } }
.notif-panel .n-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 10px; }
.notif-panel .n-head h3 { font-size: var(--fs-18); }
.notif-list { flex: 1; overflow-y: auto; padding: 6px 10px 16px; }
.notif-item {
  display: flex; gap: 12px; padding: 12px; border-radius: var(--r-md); cursor: pointer;
  transition: background var(--t-fast); position: relative;
}
.notif-item:hover { background: var(--surface-2); }
.notif-item.unread { background: var(--naranja-50); }
.notif-item.unread:hover { background: var(--naranja-100); }
.notif-item .ni { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.notif-item .t { font-size: var(--fs-14); font-weight: 600; line-height: 1.3; }
.notif-item .b { font-size: var(--fs-13); color: var(--text-2); margin-top: 2px; }
.notif-item .time { font-size: var(--fs-11); color: var(--text-3); margin-top: 4px; display: block; }

/* ============ SCHEDULE ============ */
.schedule-grid { display: grid; grid-template-columns: 52px repeat(6, 1fr); gap: 6px; min-width: 760px; }
.sch-day-head { text-align: center; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-13); padding: 8px 4px; color: var(--text-2); }
.sch-day-head.today { color: #93400F; }
.sch-day-head .d { display: block; font-size: var(--fs-11); font-weight: 500; color: var(--text-3); }
.sch-hour { font-size: var(--fs-11); color: var(--text-3); text-align: right; padding-right: 6px; font-family: var(--font-display); transform: translateY(-7px); }
.sch-cell { min-height: 52px; border-radius: 10px; background: var(--surface-2); opacity: .55; }
.class-block {
  border-radius: 10px; padding: 8px 10px; cursor: pointer; overflow: hidden;
  border-left: 3.5px solid var(--petroleo); background: var(--petroleo-50);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  display: flex; flex-direction: column; gap: 1px; justify-content: center;
}
.class-block:hover { transform: scale(1.02); box-shadow: var(--shadow-2); }
.class-block .m { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-12); line-height: 1.25; }
.class-block .info { font-size: var(--fs-11); color: var(--text-2); }
.today-list .class-block { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }

/* ============ COURSE CARDS ============ */
.course-card { position: relative; overflow: hidden; }
.course-card .cc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.course-band { position: absolute; top: 0; left: 0; right: 0; height: 5px; }
.course-card h3 { font-size: var(--fs-16); }
.cc-meta { font-size: var(--fs-13); color: var(--text-2); display: flex; flex-direction: column; gap: 3px; margin: 8px 0 12px; }
.cc-meta span { display: flex; gap: 7px; align-items: center; }
.cc-stats { display: flex; gap: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.cc-stats .st b { font-family: var(--font-display); font-size: var(--fs-16); display: block; line-height: 1.1; }
.cc-stats .st span { font-size: var(--fs-11); color: var(--text-3); }

/* ============ TASKS ============ */
.task-row { align-items: flex-start; }
.task-row .due { text-align: right; font-family: var(--font-display); flex: 0 0 auto; }
.task-row .due b { font-size: var(--fs-13); display: block; }
.task-row .due span { font-size: var(--fs-11); color: var(--text-3); }
.task-row .due.urgent b { color: var(--danger); }
.upload-zone {
  border: 2px dashed var(--border-strong); border-radius: var(--r-lg); padding: 26px;
  text-align: center; color: var(--text-3); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast);
}
.upload-zone:hover, .upload-zone.drag { border-color: var(--naranja-vivo); background: var(--naranja-50); color: #93400F; }
.upload-progress { height: 6px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; margin-top: 12px; }
.upload-progress > i { display: block; height: 100%; background: var(--naranja-vivo); width: 0; transition: width .18s linear; }

/* ============ ATTENDANCE ============ */
.att-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-12); color: var(--text-2); }
.att-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; }
.cal { width: 100%; }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-family: var(--font-display); font-size: var(--fs-11); color: var(--text-3); font-weight: 600; letter-spacing: .04em; margin-bottom: 6px; }
/* min-width:0 es lo que impide que el calendario se salga de la pantalla:
   sin él, un evento con nombre largo ("Congreso Estudiantil de Enfermería")
   estira su columna y arrastra a las otras seis, y el mes acaba midiendo el
   doble que la ventana. Con min-width:0 la celda puede encogerse y el
   nombre se corta con puntos suspensivos, como ya estaba previsto. */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-grid > * { min-width: 0; }
.cal-head { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-day {
  aspect-ratio: 1; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-12); font-family: var(--font-display); font-weight: 500; color: var(--text-2); position: relative;
}
.cal-day.out { color: var(--border-strong); }
.cal-day.p { background: var(--verde-100); color: var(--verde-bosque); font-weight: 700; }
.cal-day.r { background: var(--mostaza-100); color: #8A6206; font-weight: 700; }
.cal-day.f { background: var(--coral-100); color: var(--danger); font-weight: 700; }
.cal-day.j { background: var(--petroleo-100); color: var(--petroleo); font-weight: 700; }
.cal-day.today-ring { outline: 2px solid var(--naranja-vivo); outline-offset: 1px; }

.att-seg { display: inline-flex; gap: 4px; }
.att-seg button {
  width: 38px; height: 34px; border-radius: 9px; border: 1.5px solid var(--border);
  background: var(--surface); cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-12);
  color: var(--text-3); transition: all var(--t-fast);
}
.att-seg button:hover { border-color: var(--border-strong); }
.att-seg button.sel-p { background: var(--verde); border-color: var(--verde); color: #fff; }
.att-seg button.sel-r { background: var(--mostaza); border-color: var(--mostaza); color: #fff; }
.att-seg button.sel-f { background: var(--coral); border-color: var(--coral); color: #fff; }
.att-seg button.sel-j { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }

/* ============ LIBRARY ============ */
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; }
.book { cursor: pointer; text-align: left; background: none; border: 0; padding: 0; font: inherit; }
.book .cover {
  aspect-ratio: 3/4.2; border-radius: 6px 12px 12px 6px; position: relative; overflow: hidden;
  box-shadow: 4px 6px 16px rgba(16,26,26,.18), inset -2px 0 5px rgba(255,255,255,.22), inset 4px 0 8px rgba(0,0,0,.22);
  transition: transform var(--t-med), box-shadow var(--t-med);
  transform-origin: left center; display: flex; flex-direction: column; justify-content: space-between; padding: 14px 12px 12px 16px;
  color: #fff;
}
.book:hover .cover { transform: perspective(700px) rotateY(-14deg) translateY(-3px); box-shadow: 14px 14px 30px rgba(16,26,26,.28), inset -2px 0 5px rgba(255,255,255,.22), inset 4px 0 8px rgba(0,0,0,.22); }
.book .cover::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 1.5px; background: rgba(255,255,255,.28); }
.book .cover .bt { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-14); line-height: 1.25; }
.book .cover .ba { font-size: var(--fs-11); opacity: .85; }
.book .cover .fav {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; color: #fff;
}
.book .meta { margin-top: 9px; }
.book .meta .t { font-weight: 600; font-size: var(--fs-13); line-height: 1.3; }
.book .meta .a { font-size: var(--fs-12); color: var(--text-3); }
.reader-page { background: #FDFCF8; border: 1px solid var(--border); border-radius: var(--r-md); padding: 34px 38px; font-size: var(--fs-15); line-height: 1.9; color: #2A3230; min-height: 380px; }

/* ============ EVENTS / ANNOUNCEMENTS ============ */
.event-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.event-cover { height: 130px; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 14px; color: #fff; }
.event-cover::after { content: ""; position: absolute; right: -34px; top: -20px; width: 120px; height: 200%; background: rgba(255,255,255,.13); transform: rotate(18deg); }
.event-cover .chip { position: relative; z-index: 1; }
.event-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.event-body h3 { font-size: var(--fs-16); }
.event-meta { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-13); color: var(--text-2); }
.event-meta span { display: flex; align-items: center; gap: 7px; }

.aviso { border-left: 4px solid var(--petroleo); }
.aviso.importante { border-left-color: var(--mostaza); }
.aviso.urgente { border-left-color: var(--coral); }
.aviso .a-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.aviso h3 { font-size: var(--fs-15); }
.aviso .a-body { color: var(--text-2); font-size: var(--fs-14); margin-top: 6px; }
.aviso .a-foot { font-size: var(--fs-12); color: var(--text-3); margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ============ CAFETERIA ============ */
.menu-hero { background: linear-gradient(135deg, var(--petroleo-800), var(--petroleo-600)); color: #fff; border: 0; position: relative; overflow: hidden; }
.menu-hero::after { content: ""; position: absolute; right: -50px; top: -40px; width: 200px; height: 200px; border-radius: 50%; border: 1.5px solid rgba(252,139,69,.35); }
.menu-hero .price { font-family: var(--font-display); font-size: var(--fs-28); font-weight: 700; color: var(--naranja); }
.menu-item-line { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px dashed rgba(255,255,255,.2); font-size: var(--fs-14); }
.menu-item-line:last-child { border-bottom: 0; }
.menu-item-line .k { color: var(--text-inv-2); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-display); }

/* ============ PROFILE ============ */
.profile-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.profile-head .info h2 { font-size: var(--fs-24); }
.profile-head .info .meta { color: var(--text-2); font-size: var(--fs-14); margin-top: 3px; }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 8px 16px; font-size: var(--fs-14); }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lock-tag { font-size: var(--fs-11); color: var(--text-3); display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border-radius: var(--r-full); padding: 2px 9px; }

.switch { position: relative; width: 42px; height: 24px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; z-index: 1; }
.switch i {
  position: absolute; inset: 0; border-radius: var(--r-full); background: var(--border-strong); transition: background var(--t-fast); pointer-events: none;
}
.switch i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform var(--t-fast); box-shadow: var(--shadow-1);
}
.switch input:checked + i { background: var(--verde); }
.switch input:checked + i::after { transform: translateX(18px); }

/* ============ CALENDAR MODULE ============ */
.ucal-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.fchip {
  border: 1.5px solid var(--border-strong); background: var(--surface); border-radius: var(--r-full);
  /* 26 px de alto era un blanco de toque muy chico en teléfono; 32 px es
     lo mínimo cómodo sin que el filtro pese más que el calendario. */
  padding: 7px 14px; min-height: 32px; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-12);
  color: var(--text-2); cursor: pointer; transition: all var(--t-fast); display: inline-flex; align-items: center; gap: 6px;
}
.fchip i { width: 8px; height: 8px; border-radius: 50%; }
.fchip.on { border-color: var(--petroleo); background: var(--petroleo-50); color: var(--petroleo); }
.ucal-day { min-width: 0; overflow: hidden; min-height: 96px; aspect-ratio: auto; border: 1px solid var(--border); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 3px; }
.ucal-day .dn { font-size: var(--fs-12); font-family: var(--font-display); font-weight: 600; color: var(--text-3); }
.ucal-day.today-ring .dn { color: #93400F; }
.ucal-ev { min-width: 0; font-size: 10.5px; padding: 2px 6px; border-radius: 5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }

/* ============ SKELETON ============ */
.skel { position: relative; overflow: hidden; background: var(--surface-2); border-radius: 8px; min-height: 14px; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%);} to { transform: translateX(100%);} }

/* ============ AUDIT NOTE ============ */
.audit-note { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-12); color: var(--text-3); background: var(--surface-2); border-radius: var(--r-md); padding: 10px 13px; }
.audit-note svg { flex: 0 0 auto; margin-top: 1px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1023px) {
  .sidebar { transform: translateX(-100%); box-shadow: none; }
  .sidebar.open { transform: none; box-shadow: var(--shadow-4); z-index: 60; } /* por ENCIMA del tabbar: sin esto, 'Cerrar sesión' queda tapado en móvil */
  .main { margin-left: 0; }
  .topbar .menu-btn { display: inline-flex; }
  .side-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(6,40,47,.4); animation: fadeIn var(--t-fast) both; } /* también cubre el tabbar mientras el menú está abierto */
  /* minmax(0,…) otra vez: sin él, una cifra como $1,758,764 fija el ancho
     mínimo de su columna y las cuatro tarjetas de dinero se salen de un
     teléfono. */
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card, .stat-card > div { min-width: 0; }
  .stat-card .v { overflow-wrap: anywhere; font-size: var(--fs-18); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
/* Tablet: cuatro tarjetas en fila no caben a 820 px y empujaban la página
   fuera de la pantalla. A partir de aquí van de dos en dos. */
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-split { grid-template-columns: 1fr; }
}

/* En teléfono, un renglón con varias etiquetas seguidas (una incidencia con
   su prioridad y su estado) no cabe en una sola línea: se permite que baje. */
@media (max-width: 767px) {
  .list-row { flex-wrap: wrap; }
  .list-row .grow { flex: 1 1 100%; }
  /* El anillo tiene medida fija: no debe encogerse dentro de un renglón
     estrecho, se le deja su lugar y el texto se acomoda alrededor. */
  .ring { flex: 0 0 auto; }
  .chip { white-space: normal; }
}

/* Los comparativos de Dirección son tablas de seis columnas: en teléfono se
   desplazan dentro de su propia caja, como cualquier tabla, en vez de
   empujar la pantalla completa. */
#tree-box, .exec-scroll { overflow-x: auto; }

/* Texto que no cabe: en vez de estirar su caja, se parte. Afecta sobre todo
   a los renglones de lista en teléfono (nombres largos de materias, notas de
   incidencias) y a las fichas de datos del perfil. */
.list-row .grow { min-width: 0; overflow: hidden; }
.list-row .t, .list-row .s, .kv dd, .kv dt { overflow-wrap: anywhere; }

/* En teléfonos estrechos las cifras de dinero se leen mejor una debajo de
   otra que apretadas de dos en dos. */
@media (max-width: 460px) {
  .grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .content { padding: 18px 16px calc(var(--tabbar-h) + 40px); }
  .tabbar { display: grid; }
  .login-screen { grid-template-columns: 1fr; }
  .login-brand { min-height: 34vh; padding: 28px 24px; }
  .login-hero p { display: none; }
  .grid-2, .grid-3, .grid-split { grid-template-columns: minmax(0, 1fr); }
  .grid-2 > *, .grid-3 > *, .grid-split > * { min-width: 0; }
  /* minmax(0,…) otra vez: sin él, una cifra como $1,758,764 fija el ancho
     mínimo de su columna y las cuatro tarjetas de dinero se salen de un
     teléfono. */
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card, .stat-card > div { min-width: 0; }
  .stat-card .v { overflow-wrap: anywhere; font-size: var(--fs-18); }
  .page-head h1 { font-size: var(--fs-24); }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 10px; }
  .search-trigger span.lbl { display: none; }
  .search-trigger { flex: 0 0 auto; width: 42px; height: 42px; justify-content: center; padding: 0; border-radius: var(--r-md); }
  .search-trigger kbd { display: none; }
  .topbar { padding: 0 14px; }
  .modal { border-radius: var(--r-xl) var(--r-xl) 0 0; align-self: flex-end; max-height: 92vh; width: 100%; }
  .overlay { padding: 0; align-items: flex-end; }
  .search-overlay { align-items: flex-start; padding: 0; }
  .search-box { border-radius: 0 0 var(--r-xl) var(--r-xl); }
  .notif-panel { top: 0; right: 0; bottom: 0; width: 100vw; border-radius: 0; }
  .toast-zone { bottom: calc(var(--tabbar-h) + 18px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============ COMMAND CENTER (Dirección) — piel ejecutiva oscura ============
   Paleta de series validada (6/6 checks del método de dataviz) contra la
   superficie #052831: naranja #D96410 · aqua #279D80 · mostaza #BE8700 ·
   azul #3E92CE. Estados (siempre con icono+texto, nunca solo color):
   bien #2FBF71 · info #4D9FDB · atención #DD9E00 · crítico #F1705F.       */
.content.exec {
  background: #04191F;
  /* Dirección reutiliza pantallas pensadas para fondo blanco (alumnos,
     calendario, archivo). Redefinir aquí los tokens de texto y de estado es
     lo que hace que TODAS ellas se lean sobre el fondo oscuro sin tener que
     duplicar cada regla: cualquier var(--text-2) que aparezca dentro del
     tablero ejecutivo toma automáticamente su versión clara. */
  --text: #E9F2F4;
  --text-2: #C3DBE0;
  --text-3: #9FC2CA;
  --surface: #052831;
  --surface-2: rgba(255,255,255,.05);
  --border: rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.16);
  --danger: #F1948A;
  --warn: #E9C46A;
  --verde: #7FD8A6;
  --ex-card: #052831;
  --ex-ink: #F2F7F5;
  --ex-ink2: #AECBD1;
  --ex-mut: #7FA3AB;
  --ex-grid: #12404C;
  --ex-border: rgba(255,255,255,.09);
  --ex-s1: #D96410; --ex-s2: #279D80; --ex-s3: #BE8700; --ex-s4: #3E92CE;
  --ex-good: #2FBF71; --ex-info: #4D9FDB; --ex-warn: #DD9E00; --ex-crit: #F1705F;
  color: var(--ex-ink);
}
.content.exec h1, .content.exec h2, .content.exec h3 { color: var(--ex-ink); }
.content.exec .page-sub { color: var(--ex-ink2); }
.content.exec .card {
  background: var(--ex-card); border: 1px solid var(--ex-border);
  box-shadow: 0 4px 18px rgba(0,0,0,.28); color: var(--ex-ink);
}
.content.exec .card-title { color: var(--ex-ink); }
.content.exec .stat-card .v { color: var(--ex-ink); }
.content.exec .stat-card .l { color: var(--ex-mut); }
.content.exec .dt th { color: var(--ex-mut); border-color: var(--ex-grid); background: rgba(255,255,255,.02); }
.content.exec .dt td { border-color: var(--ex-grid); color: var(--ex-ink2); }
.content.exec .dt td b { color: var(--ex-ink); }
.content.exec .dt tbody tr:hover td { background: rgba(255,255,255,.03); }
.content.exec .list-row { border-color: var(--ex-grid); }
.content.exec .list-row .t { color: var(--ex-ink); }
.content.exec .list-row .s { color: var(--ex-mut); }
.content.exec .input, .content.exec select.input {
  background: #0A3540; border-color: var(--ex-grid); color: var(--ex-ink);
}
.content.exec .empty { color: var(--ex-ink2); }
.content.exec .empty b { color: var(--ex-ink); }
.content.exec .audit-note { background: rgba(77,159,219,.08); border: 1px solid rgba(77,159,219,.25); color: var(--ex-ink2); }
.content.exec .chip { background: rgba(255,255,255,.07); color: var(--ex-ink2); border-color: transparent; }
.content.exec .progress { background: rgba(255,255,255,.10); }
.content.exec .link-all { color: var(--ex-info); }
.content.exec a { color: var(--ex-info); }

/* Barra ejecutiva "IDESUN HOY" */
.exec-today {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(217,100,16,.14), rgba(5,40,49,.4));
  border: 1px solid var(--ex-border); border-radius: 16px; padding: 12px 18px; margin-bottom: 18px;
}
.exec-today .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.exec-today .lbl { font-family: var(--font-display); font-weight: 700; letter-spacing: .08em; font-size: 13px; }
.exec-today .items { display: flex; gap: 7px 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--ex-ink2); }
.exec-today .items b { color: var(--ex-ink); font-family: var(--font-display); }

/* KPI financiero */
.exec-kpi { padding: 14px 16px; }
.exec-kpi .k-lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--ex-mut); display: flex; align-items: center; gap: 6px; }
.exec-kpi .k-val { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.2vw, 26px); margin-top: 2px; }
.exec-kpi .k-delta { font-size: 11.5px; margin-top: 2px; color: var(--ex-mut); }
.exec-kpi .k-delta.up { color: var(--ex-good); }
.exec-kpi .k-delta.down { color: var(--ex-crit); }
.exec-kpi .k-info { cursor: help; opacity: .6; font-size: 11px; }

/* Sección */
.exec-sect { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; }
.exec-sect .t { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .16em; color: var(--ex-mut); }
.exec-sect::after { content: ""; flex: 1; height: 1px; background: var(--ex-grid); }

/* Alertas */
.exec-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ex-grid); margin-bottom: 8px; cursor: pointer; transition: background .15s; }
.exec-alert:hover { background: rgba(255,255,255,.04); }
.exec-alert .pr { flex: none; font-size: 14px; line-height: 1.3; }
.exec-alert .tx { font-size: 13px; color: var(--ex-ink2); line-height: 1.45; }
.exec-alert .tx b { color: var(--ex-ink); }

/* Tooltip simple para gráficas */
.exec-tip { position: fixed; z-index: 999; background: #0A3540; border: 1px solid var(--ex-grid); color: var(--ex-ink);
  font-size: 12px; padding: 8px 11px; border-radius: 10px; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.4); display: none; }
.exec-tip b { font-family: var(--font-display); }

/* Modal en modo exec (drill-down) */
.overlay .modal.exec-modal { background: var(--ex-card, #052831); color: #F2F7F5; }
.overlay .modal.exec-modal .modal-head h3 { color: #F2F7F5; }
.overlay .modal.exec-modal .dt th { color: #7FA3AB; border-color: #12404C; }
.overlay .modal.exec-modal .dt td { border-color: #12404C; color: #AECBD1; }
.overlay .modal.exec-modal .dt td b { color: #F2F7F5; }

/* ============ Animaciones de entrada del Command Center ============
   Truco: los keyframes solo definen "from"; el navegador anima hacia el
   valor calculado (inline) del elemento, así una sola clase sirve para
   cualquier ancho/alto/arco. Respetan prefers-reduced-motion. */
@keyframes cc-fade { from { opacity: 0; } }
@keyframes cc-grow-h { from { width: 0; } }
@keyframes cc-grow-v { from { transform: scaleY(0); } }
@keyframes cc-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.anim-arc { animation: cc-fade .8s ease-out both; }
.anim-bar { animation: cc-grow-h .7s cubic-bezier(.22,.9,.35,1) both; }
.anim-bar-v { transform-box: fill-box; transform-origin: 50% 100%; animation: cc-grow-v .7s cubic-bezier(.22,.9,.35,1) both; }
.anim-line { stroke-dasharray: 1; animation: cc-draw 1s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .anim-arc, .anim-bar, .anim-bar-v, .anim-line { animation: none; stroke-dasharray: none; }
}

/* En el Command Center los encabezados llevan pestañas y notas al lado:
   deben poder bajar de línea en vez de recortarse. */
.exec .card-head { flex-wrap: wrap; }
.exec .card-head .card-title { min-width: 0; }

/* En el tablero ejecutivo las tarjetas de una misma fila se estiran a la
   misma altura: si no, la más corta deja un hueco negro muy visible. */
.exec .grid-split { align-items: stretch; }

/* ============================================================
   ACCESO ADMINISTRATIVO (discreto)
   Los perfiles públicos son Alumnos y Profesores. "Administrativos"
   es una sola puerta, sin submenús: quien mire la pantalla no tiene
   por qué enterarse de qué áreas internas existen. El rol lo decide
   la autenticación, no este botón.
   ============================================================ */
.role-picker { margin-bottom: 10px; }
.role-picker.dimmed { opacity: .5; }
.staff-entry {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 16px; padding: 6px 2px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-12); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
  transition: color var(--t-fast);
}
.staff-entry:hover { color: var(--petroleo); }
.staff-entry.active { color: var(--petroleo); }
.staff-entry.active::after { content: "·"; }

/* ============================================================
   PIEL DE INTENDENCIA — pensada para usarse de pie, con prisa,
   en una pantalla compartida o una tablet: objetivos grandes
   (mínimo 56 px), mucho contraste y un solo camino a la vez.
   Reutiliza los tokens de IDESUN OS: es el mismo sistema, no
   otra plataforma.
   ============================================================ */
.intendencia .int-hero {
  background: linear-gradient(135deg, var(--petroleo) 0%, var(--petroleo-900) 100%);
  color: #fff; border-radius: var(--r-lg); padding: 20px 24px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.intendencia .int-hero .greet { font-family: var(--font-display); font-size: clamp(20px, 3vw, 30px); font-weight: 700; line-height: 1.15; }
.intendencia .int-hero .sub { color: var(--text-inv-2); font-size: var(--fs-14); margin-top: 4px; }
.intendencia .int-hero .who { margin-left: auto; text-align: right; }

.intendencia .int-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.intendencia .int-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; }
.intendencia .int-kpi .v { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4vw, 40px); line-height: 1; }
.intendencia .int-kpi .l { font-size: var(--fs-13); color: var(--text-2); margin-top: 6px; font-weight: 600; }
.intendencia .int-kpi.ok .v { color: var(--ok); }
.intendencia .int-kpi.warn .v { color: var(--warn); }
.intendencia .int-kpi.crit .v { color: var(--danger); }

/* Botón grande: el objetivo táctil mínimo del módulo */
.intendencia .int-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 60px; padding: 16px 26px; border-radius: 14px; border: 2px solid transparent;
  font-family: var(--font-display); font-weight: 700; font-size: 17px; cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast);
}
.intendencia .int-btn:active { transform: scale(.98); }
.intendencia .int-btn.primary { background: var(--naranja-vivo); color: var(--tinta); }
.intendencia .int-btn.primary:hover { background: var(--naranja); }
.intendencia .int-btn.dark { background: var(--petroleo); color: #fff; }
.intendencia .int-btn.ghost { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.intendencia .int-btn.ghost:hover { background: var(--surface-2); }
.intendencia .int-btn.danger { background: var(--coral-100); color: var(--danger); border-color: var(--coral-100); }
.intendencia .int-btn.block { width: 100%; }
.intendencia .int-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Tarjeta de tarea */
.intendencia .int-task {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  background: var(--surface); border: 2px solid var(--border); border-left-width: 8px;
  border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 10px; cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.intendencia .int-task:hover { box-shadow: var(--shadow-2); }
.intendencia .int-task .t { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.intendencia .int-task .s { font-size: var(--fs-13); color: var(--text-2); margin-top: 3px; }
.intendencia .int-task .st { margin-left: auto; text-align: right; white-space: nowrap; }
.intendencia .int-task.pendiente { border-left-color: var(--mostaza); }
.intendencia .int-task.en_proceso { border-left-color: var(--petroleo-600); }
.intendencia .int-task.completada { border-left-color: var(--salvia); opacity: .72; }
.intendencia .int-task.cancelada { border-left-color: var(--border-strong); opacity: .5; }
.intendencia .int-task.urgente { border-color: var(--coral); }

/* Estado con TEXTO + icono, nunca solo color (accesibilidad) */
.int-state { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-13); }
.int-state .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.int-state.limpio { color: var(--ok); } .int-state.limpio .dot { background: var(--ok); }
.int-state.pendiente { color: #8A6206; } .int-state.pendiente .dot { background: var(--mostaza); }
.int-state.en_proceso { color: var(--petroleo); } .int-state.en_proceso .dot { background: var(--petroleo-600); }
.int-state.incidencia { color: var(--danger); } .int-state.incidencia .dot { background: var(--coral); }
.int-state.sin_revision { color: var(--text-3); } .int-state.sin_revision .dot { background: var(--border-strong); }

/* Checklist táctil */
.intendencia .int-check {
  display: flex; align-items: center; gap: 16px; width: 100%; text-align: left;
  min-height: 64px; padding: 12px 18px; margin-bottom: 8px; cursor: pointer;
  background: var(--surface); border: 2px solid var(--border); border-radius: 14px;
  font-size: 17px; font-weight: 600; color: var(--text); transition: all var(--t-fast);
}
.intendencia .int-check .box {
  width: 34px; height: 34px; flex: none; border-radius: 9px; border: 2px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center; font-size: 20px; color: transparent;
}
.intendencia .int-check.done { background: var(--verde-50); border-color: var(--salvia); }
.intendencia .int-check.done .box { background: var(--salvia); border-color: var(--salvia); color: #fff; }
.intendencia .int-check .when { margin-left: auto; font-size: var(--fs-12); color: var(--text-3); font-weight: 500; }

/* Rejilla de espacios / categorías de problema */
.intendencia .int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.intendencia .int-pick {
  min-height: 92px; padding: 14px; border-radius: 14px; border: 2px solid var(--border);
  background: var(--surface); cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; transition: all var(--t-fast);
}
.intendencia .int-pick:hover, .intendencia .int-pick.sel { border-color: var(--petroleo); background: var(--petroleo-50); }
.intendencia .int-pick .ic { font-size: 26px; line-height: 1; }

/* Teclado de PIN */
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 300px; margin: 0 auto; }
.pin-pad button {
  min-height: 66px; border-radius: 14px; border: 2px solid var(--border); background: var(--surface);
  font-family: var(--font-display); font-size: 26px; font-weight: 700; cursor: pointer; color: var(--text);
}
.pin-pad button:active { background: var(--petroleo-50); }
.pin-dots { display: flex; gap: 14px; justify-content: center; margin: 18px 0 20px; }
.pin-dots i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); display: block; }
.pin-dots i.on { background: var(--petroleo); border-color: var(--petroleo); }
.who-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.who-pick button {
  display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 16px;
  border-radius: 14px; border: 2px solid var(--border); background: var(--surface); cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; text-align: left; color: var(--text);
}
.who-pick button:hover { border-color: var(--petroleo); background: var(--petroleo-50); }

@media (max-width: 900px) {
  .intendencia .int-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* Guía en pantalla del módulo de Intendencia — pensada para leerse de un
   vistazo por alguien que no usa computadoras a diario. */
.int-steps {
  background: var(--naranja-50); border: 2px dashed var(--naranja); border-radius: var(--r-lg);
  padding: 16px 20px; margin-bottom: 16px; position: relative;
}
.int-steps.ok { background: var(--verde-50); border-color: var(--salvia); }
.int-steps .t {
  display: flex; align-items: center; gap: 8px; font-family: var(--font-display);
  font-weight: 800; font-size: 14px; letter-spacing: .06em; color: #93400F; margin-bottom: 8px;
}
.int-steps.ok .t { color: var(--verde); }
.int-steps ol { margin: 0; padding-left: 22px; }
.int-steps li { font-size: 16px; line-height: 1.75; color: var(--text); }
.int-guia-x {
  position: absolute; top: 8px; right: 10px; background: none; border: 0; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--text-3);
  /* objetivo táctil cómodo: es un botón chico, pero no minúsculo */
  min-height: 40px; padding: 8px 12px; border-radius: 10px;
}
.int-guia-x:hover { color: var(--text); }
.int-help .paso { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.int-help .paso .n {
  flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--petroleo); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
}
.int-help .paso div { font-size: 15.5px; line-height: 1.65; color: var(--text-2); }
.int-help .paso div b { color: var(--text); }

/* ============================================================
   CORRECCIÓN DE CONTRASTE EN EL PANEL DE DIRECCIÓN
   Las tablas y listas traían el fondo blanco del tema claro,
   mientras la piel ejecutiva pinta el texto en tinta clara:
   el resultado era texto casi invisible. Aquí se completa la
   piel oscura para TODOS los contenedores que la usan.
   ============================================================ */
.content.exec .table-wrap { background: var(--ex-card); border-color: var(--ex-border); }
.content.exec table.dt { background: transparent; }
.content.exec .dt tbody tr { background: transparent; }
.content.exec .dt tbody tr:hover { background: rgba(255,255,255,.045); }
.content.exec .dt td, .content.exec .dt th { background: transparent; }
/* Tinta un punto más clara: sobre #052831 el gris azulado anterior
   quedaba por debajo de una lectura cómoda en pantallas de oficina. */
.content.exec .dt td { color: #CFE2E6; }
.content.exec .dt th { color: #9FC2CA; background: rgba(255,255,255,.03); }
.content.exec .list-row { border-color: var(--ex-grid); }
.content.exec .list-row .t { color: var(--ex-ink); }
.content.exec .list-row .s { color: #A8C6CC; }
.content.exec .empty { background: transparent; color: var(--ex-ink2); }
.content.exec .empty b { color: var(--ex-ink); }
.content.exec .empty span { color: var(--ex-mut); }
.content.exec .audit-note { background: rgba(255,255,255,.04); border-color: var(--ex-grid); color: #C3DBE0; }
.content.exec .audit-note b { color: var(--ex-ink); }
.content.exec .progress { background: var(--ex-grid); }
.content.exec .chip { background: rgba(255,255,255,.07); color: #CFE2E6; border-color: var(--ex-grid); }
.content.exec .chip-neutral { background: rgba(255,255,255,.07); color: #CFE2E6; }
.content.exec .field label { color: var(--ex-ink2); }
.content.exec .btn-ghost { color: #CFE2E6; border-color: var(--ex-grid); background: transparent; }
.content.exec .btn-ghost:hover { background: rgba(255,255,255,.06); }
.content.exec .btn-soft { background: rgba(255,255,255,.09); color: #E4F0F2; }
.content.exec .link-all { color: var(--ex-info); }
/* Los estados en la bitácora deben distinguirse sobre fondo oscuro */
.content.exec .dt td b { color: #FFFFFF; }

/* ============================================================
   IDESUN OS beta 1.420 — menú agrupado, filtros y archivo escolar
   ============================================================ */

/* Encabezado de grupo en el menú lateral. Antes las once entradas de
   contabilidad se leían como una lista corrida y el módulo de gastos
   del edificio pasaba desapercibido. */
.side-group {
  display: block; margin: 14px 0 4px; padding: 0 12px;
  /* 11px es el piso de legibilidad del sistema. Estaba en 10.5 y en un
     teléfono los encabezados del menú se leían con esfuerzo. */
  font-family: var(--font-display); font-size: var(--fs-11); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.66);
}
.side-group:first-child { margin-top: 4px; }

.filter-label {
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  color: var(--text-3); margin-bottom: 10px; text-transform: uppercase;
}
.chip-danger { background: var(--coral-100); color: var(--danger); }

/* --- Archivo de control escolar --- */
.fold-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 12px; }
.fold {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 15px 15px 13px; cursor: pointer; text-align: left; width: 100%;
  transition: border-color .16s, transform .16s, box-shadow .16s;
  display: flex; flex-direction: column; gap: 8px; min-height: 132px;
}
.fold:hover { border-color: var(--petroleo); transform: translateY(-2px); box-shadow: var(--sh-md); }
.fold.on { border-color: var(--petroleo); box-shadow: 0 0 0 2px var(--petroleo-50); }
.fold .ic {
  width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; background: var(--petroleo-50); color: var(--petroleo);
}
.fold .n { font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1.25; }
.fold .d { font-size: 11.5px; color: var(--text-3); line-height: 1.4; flex: 1; }
.fold .m { font-size: 11px; font-weight: 700; color: var(--petroleo); display: flex; gap: 8px; align-items: center; }
.fold .m .z { font-weight: 400; color: var(--text-3); }

.doc-row {
  display: flex; gap: 12px; align-items: center; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
  margin-bottom: 8px;
}
.doc-row .ext {
  width: 40px; height: 40px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  /* 11 px, no 10: es la etiqueta que dice de qué tipo es cada documento y
     hay que poder leerla de un vistazo en una lista de cincuenta. */
  font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .03em;
  background: var(--surface-2); color: var(--text-2); flex: 0 0 auto;
}
.doc-row .ext.pdf { background: #FEE9E4; color: #A33038; }
.doc-row .ext.img { background: var(--verde-100); color: var(--verde-bosque); }
.doc-row .ext.doc { background: var(--petroleo-50); color: var(--petroleo); }
.doc-row .ext.xls { background: var(--verde-100); color: #1F6B4E; }
.doc-row .grow { min-width: 0; flex: 1; }
.doc-row .t { font-weight: 700; font-size: 13.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-row .s { font-size: 11.5px; color: var(--text-3); }
.drop-zone {
  border: 2px dashed var(--border-strong); border-radius: var(--r-md); padding: 22px;
  text-align: center; color: var(--text-3); font-size: 13px; background: var(--surface-2);
  transition: border-color .15s, background .15s;
}
.drop-zone.over { border-color: var(--petroleo); background: var(--petroleo-50); color: var(--petroleo); }

/* --- Calendario escolar --- */
.cal-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.cal-m { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; }
.cal-m h4 {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; margin-bottom: 10px; color: var(--text-2);
}
.cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
/* 11 px es el piso de legibilidad de la casa: por debajo, en un teléfono
   con brillo bajo, las iniciales de los días dejan de leerse. */
.cal-days .dow { font-size: 11px; font-weight: 800; color: var(--text-2); text-align: center; padding-bottom: 3px; }
.cal-d {
  aspect-ratio: 1; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; color: var(--text-2); background: var(--surface-2);
  position: relative; border: 1px solid transparent;
}
.cal-d.off { background: transparent; color: transparent; }
.cal-d.hoy { border-color: var(--petroleo); font-weight: 800; color: var(--petroleo); }
/* El número del día va encima del color del evento. Los tonos se eligieron
   ya oscuros para que el blanco pase de 4.5:1; el peso 800 lo remata. */
.cal-d.ev { color: #fff; font-weight: 800; }
.cal-d.dom { opacity: .55; }
.cal-leg { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.cal-leg span {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-2);
}
.cal-leg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* Contraste del calendario y del archivo dentro de la piel ejecutiva */
.content.exec .cal-m,
.content.exec .fold,
.content.exec .doc-row { background: var(--ex-card); border-color: var(--ex-border); }
.content.exec .cal-m h4,
.content.exec .cal-leg span,
.content.exec .fold .n,
.content.exec .doc-row .t { color: #E6F1F3; }
.content.exec .cal-d { background: rgba(255,255,255,.05); color: #B8D2D8; }
/* El día con evento lleva su color de fondo; el número va en blanco firme
   y esta regla debe pesar más que la de arriba, o el número se queda gris
   claro sobre el color y no se lee. */
.content.exec .cal-d.ev { color: #fff; }
/* La pestaña activa usa el azul petróleo de marca, que sobre el fondo
   oscuro del tablero queda azul sobre azul. Aquí toma su versión clara. */
.content.exec .tabs .tab.active { color: #7FC5E8; }
.content.exec .tabs .tab { color: #B8D2D8; }
.content.exec .cal-d.off { background: transparent; }
.content.exec .cal-days .dow,
.content.exec .fold .d,
.content.exec .doc-row .s { color: #93B4BC; }
.content.exec .fold .ic { background: rgba(255,255,255,.07); color: #7ED0C4; }
.content.exec .filter-label { color: #9FC2CA; }
/* Los estados de intendencia y las fichas del archivo usan colores pensados
   para fondo blanco. Dentro del tablero oscuro de Dirección quedaban azul
   marino sobre azul marino (1.6:1). Aquí se les da su versión clara. */
.content.exec .int-state.en_proceso { color: #7FC5E8; }
.content.exec .int-state.pendiente { color: #E9C46A; }
.content.exec .int-state.incidencia { color: #F1948A; }
.content.exec .int-state.completada { color: #7FD8A6; }
.content.exec .fold .m { color: #7ED0C4; }
.content.exec .fold .z { color: #9FC2CA; }
.content.exec .drop-zone { background: rgba(255,255,255,.03); border-color: var(--ex-border); color: #9FC2CA; }

/* ============================================================
   PANTALLAS INSTITUCIONALES
   Avisos, cafetería, salones, carreras, horarios. Piezas nuevas,
   con las mismas medidas y colores del resto del sistema.
   ============================================================ */

/* La frase que explica para qué sirve un campo. Va debajo, no arriba:
   arriba compite con la etiqueta y termina sin leerse. */
.field-help { display: block; font-size: var(--fs-12); color: var(--text-3); margin-top: 6px; line-height: 1.45; }

/* Dos campos lado a lado en escritorio; uno debajo del otro en cuanto la
   pantalla no da. El minmax(0,…) evita que un texto largo estire la columna. */
.form-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }

.check-row { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-14);
  color: var(--text-2); margin-bottom: 16px; cursor: pointer; line-height: 1.45; }
.check-row input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--petroleo); }

.section-title { font-family: var(--font-display); font-size: var(--fs-18); font-weight: 700;
  margin: 6px 0 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--border); }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Selector de dos opciones (menú semanal / una sola fecha) */
.seg-row { display: flex; gap: 0; margin-bottom: 18px; border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md); overflow: hidden; }
.seg { flex: 1; padding: 10px 12px; border: 0; background: var(--surface); cursor: pointer;
  font: inherit; font-weight: 600; font-size: var(--fs-13); color: var(--text-2); }
.seg + .seg { border-left: 1.5px solid var(--border-strong); }
.seg.on { background: var(--petroleo); color: #fff; }
.seg.mudo { opacity: .5; cursor: default; }

/* Aviso de atención dentro de una tarjeta */
.aviso-warn { display: flex; gap: 12px; align-items: flex-start;
  border-left: 4px solid var(--warn); background: var(--mostaza-100); }
.aviso-warn > svg { flex: none; color: var(--warn); margin-top: 2px; }
.aviso-warn a { color: var(--petroleo); font-weight: 600; }

.monto { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-14);
  color: var(--text); white-space: nowrap; }

.icon-btn.sm { padding: 6px; border-radius: 8px; color: var(--text-3); }
.icon-btn.sm:hover { color: var(--text); background: var(--surface-2); }

/* Algo que existe pero ya no está vigente: retirado, inactivo, vencido.
   Se apaga, no se esconde — sigue estando ahí y se puede reactivar. */
.apagado { opacity: .62; }
.apagado:hover { opacity: 1; }

/* ---- Avisos ---- */
.aviso-card { display: flex; flex-direction: column; }
.aviso-body { font-size: var(--fs-14); color: var(--text-2); line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; flex: 1; }
.aviso-meta { font-size: var(--fs-12); color: var(--text-3); margin-top: 10px; line-height: 1.5; }

/* ---- Día de la cafetería / del horario ---- */
.dia-card .list-row { padding: 10px 0; }
.dia-vacio { font-size: var(--fs-13); color: var(--text-3); text-align: center; padding: 18px 6px; line-height: 1.6; }
.dia-vacio span { font-size: var(--fs-12); }

/* ---- Salones ---- */
.espacio-card.fuera { border-left: 4px solid var(--danger); }
.espacio-nombre { font-size: var(--fs-15); font-weight: 600; margin: 2px 0 4px; overflow-wrap: anywhere; }
.espacio-meta { font-size: var(--fs-13); color: var(--text-3); line-height: 1.5; }
.espacio-motivo { font-size: var(--fs-13); color: var(--danger); margin-top: 8px; line-height: 1.5; overflow-wrap: anywhere; }

/* ---- Horarios ---- */
.horario-semana { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.hora { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-13);
  color: var(--petroleo); line-height: 1.3; flex: none; min-width: 46px; }
.hora span { font-weight: 500; color: var(--text-3); }

/* Las mismas piezas dentro del tablero oscuro de Dirección */
.content.exec .field-help,
.content.exec .aviso-meta,
.content.exec .espacio-meta,
.content.exec .dia-vacio { color: var(--ex-ink2); }
.content.exec .check-row { color: var(--ex-ink); }
.content.exec .seg { background: transparent; color: var(--ex-ink2); border-color: var(--ex-border); }
.content.exec .seg.on { background: var(--naranja-vivo); color: var(--tinta); }
.content.exec .seg-row { border-color: var(--ex-border); }
.content.exec .row-actions { border-color: var(--ex-border); }
.content.exec .monto,
.content.exec .espacio-nombre { color: var(--ex-ink); }
.content.exec .hora { color: #7ED0C4; }
.content.exec .aviso-warn { background: rgba(245,174,26,.12); color: var(--ex-ink); }
.content.exec .aviso-warn > svg { color: var(--mostaza); }
.content.exec .aviso-warn a { color: #7ED0C4; }

/* ============================================================
   TELÉFONO — que se pueda usar de verdad desde el celular

   El sistema está pensado para computadora, y esa sigue siendo la
   prioridad. Pero un profesor no va a tener una computadora en el
   salón: va a pasar lista desde su teléfono, de pie, con una mano.
   Y muchos de ellos van a abrirlo en Safari de iPhone, que tiene
   manías propias que rompen cosas que en Chrome de escritorio se
   ven perfectas.

   Cada bloque de aquí abajo corrige una de esas manías. Ninguno
   cambia el diseño: cambian medidas, alturas y zonas tocables.
   ============================================================ */

/* --- 1. Que Safari NO haga zoom al tocar un campo ---
   iOS hace zoom automático en cuanto el campo tiene menos de 16 px
   de letra. El usuario escribe, la página se acerca sola, y ya no
   puede ver el resto del formulario ni encontrar el botón de
   guardar. Es EL motivo número uno de "no jala en el celular".
   Se arregla poniendo la letra en 16 px justos: iOS deja de hacer
   zoom y en pantalla se ve prácticamente igual. */
@media (max-width: 900px) {
  .input,
  select.input,
  textarea.input,
  input[type="text"], input[type="password"], input[type="email"],
  input[type="number"], input[type="search"], input[type="tel"],
  input[type="date"], input[type="time"], input[type="datetime-local"] {
    font-size: 16px;
    /* 44 px es el mínimo que Apple pide para algo que se toca con el dedo. */
    min-height: 44px;
  }
  textarea.input { min-height: 96px; }
}

/* --- 2. Que la barra de Safari no se coma el contenido ---
   En iPhone, 100vh mide la pantalla SIN la barra de direcciones,
   que aparece y desaparece al hacer scroll. Con 100vh el pie de la
   página queda debajo de la barra y no se alcanza. 100dvh mide lo
   que de verdad se ve en ese momento. Se dejan las dos: los
   navegadores viejos usan la primera y los nuevos la segunda. */
.main { min-height: 100vh; min-height: 100dvh; }
.login-screen { min-height: 100vh; min-height: 100dvh; }

/* --- 3. El pico y la barra de gestos del iPhone ---
   En los iPhone sin botón de inicio hay una franja abajo para el
   gesto de salir. Sin esto, el último botón de la pantalla queda
   justo debajo de esa franja y no se puede tocar. */
.modal { padding-bottom: env(safe-area-inset-bottom); }
.sidebar { padding-bottom: env(safe-area-inset-bottom); }
.notif-panel { padding-bottom: env(safe-area-inset-bottom); }

/* --- 4. Ni un pixel de desplazamiento horizontal ---
   100vw incluye el ancho de la barra de scroll; en algunos casos eso
   deja la página dos o tres pixeles más ancha que la pantalla y el
   contenido se puede arrastrar de lado. Se ve como un defecto y hace
   sentir que la página está rota. */
html, body { overflow-x: hidden; }
.notif-panel { width: min(100%, 420px); }
.toast-zone { max-width: calc(100% - 32px); }

/* --- 5. Que Safari no agrande la letra por su cuenta ---
   Al girar el teléfono, iOS "ayuda" inflando el texto de algunos
   bloques. El resultado es una pantalla con tres tamaños de letra
   distintos que no se pidieron. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* --- 6. Que el toque responda de inmediato ---
   Sin esto, iOS espera 300 ms por si el toque era un doble toque
   para hacer zoom. Se siente lento aunque el sistema sea rápido. */
button, a, .btn, .tab-item, .side-link, .list-row[role="button"], label, summary {
  touch-action: manipulation;
}

/* --- 7. Nada de estados "pegados" al tocar ---
   En una pantalla táctil no existe el "pasar el mouse por encima",
   pero Safari deja el estilo de :hover puesto después de tocar. El
   botón se queda encendido y parece seleccionado cuando no lo está. */
@media (hover: none) {
  .btn-ghost:hover { background: transparent; }
  .btn-primary:hover { background: var(--naranja-vivo); }
  .btn-dark:hover { background: var(--petroleo); }
  .btn-soft:hover { background: var(--petroleo-50); }
  .side-link:hover { background: none; color: var(--text-inv-2); }
  .side-link.active:hover { background: rgba(252,139,69,.15); color: #fff; }
  .side-user:hover { background: none; }
  .card.hoverable:hover { transform: none; box-shadow: var(--shadow-1); }
  .icon-btn.sm:hover { background: none; color: var(--text-3); }
  .apagado:hover { opacity: .62; }
  /* A cambio, se marca el momento del toque: sin :hover haría falta
     alguna señal de que el dedo sí dio en el blanco. */
  .btn:active { opacity: .82; }
  .list-row:active, .side-link:active { background: var(--surface-2); }
}

/* --- 8. Zonas tocables del tamaño de un dedo ---
   Un botón de 24 px se falla una de cada tres veces. Apple pide 44.
   Solo se aplica cuando el dispositivo es táctil: en computadora los
   botones chicos están bien y ocupan menos. */
@media (pointer: coarse) {
  /* 44 px es la medida que Apple pide para cualquier cosa que se toca con el
     dedo, y es la diferencia entre "le doy bien" y "se me va al de al lado". */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; padding: 8px 14px; }
  .btn-block { min-height: 48px; }
  .icon-btn, .icon-btn.sm { min-width: 40px; min-height: 40px; }
  .tab-item { font-size: 11px; }
  .list-row .btn-sm { margin: 2px 0; }
  .check-row input, .check input { width: 22px; height: 22px; }
  .row-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* --- 9. Que el scroll no arrastre la página de atrás ---
   Al llegar al final de una lista dentro de un cuadro, iOS empieza a
   mover la página que está detrás. Se siente a rebote y desorienta.

   AQUÍ VIVÍA EL DEFECTO DE "SOLO SE DESLIZA DESDE EL BORDE". Las
   tablas (.table-wrap) se deslizan solo DE LADO, pero tenían el
   contain en LOS DOS EJES. contain corta el encadenamiento del
   scroll hacia la página… también en el eje que la tabla NO puede
   desplazar. Resultado: el dedo puesto SOBRE la lista de alumnos no
   movía nada —la tabla no tiene a dónde ir en vertical y la página
   tenía prohibido heredarlo— y solo funcionaba pegarle en la orilla,
   fuera de la tabla. Con el contain SOLO en horizontal, el gesto
   vertical sobre cualquier renglón vuelve a mover la página, que es
   lo que el dedo espera, y el rebote lateral sigue contenido. Lo
   mismo para todo contenedor que solo se desliza de lado. */
.modal, .side-nav, .notif-panel { overscroll-behavior: contain; }
.table-wrap, .cua-wrap, .exec-scroll, #tree-box, .tabs { overscroll-behavior-x: contain; overscroll-behavior-y: auto; }
.table-wrap, .cua-wrap, .exec-scroll, #tree-box, .tabs { touch-action: pan-x pan-y; }
.table-wrap, .side-nav, .modal, .exec-scroll { -webkit-overflow-scrolling: touch; }

/* --- 10. El botón de guardar siempre a la vista ---
   Al abrir el teclado, la pantalla útil se reduce a la mitad. Si el
   pie del cuadro se va con el resto del formulario, la persona
   escribe y no encuentra dónde guardar. Se queda pegado abajo. */
@media (max-width: 767px) {
  .modal { max-height: 92vh; max-height: 92dvh; display: flex; flex-direction: column; }
  .modal-head { flex: none; }
  .modal-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-foot {
    flex: none; position: sticky; bottom: 0;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    margin-top: 0;
  }
  .modal-foot .btn { flex: 1 1 auto; justify-content: center; }
  .modal-body { padding: 14px 20px 18px; }
  .modal-head { padding: 16px 20px 0; }
  /* Asa de arrastre: la señal universal de "esto se puede cerrar
     hacia abajo". No hace nada, pero le dice a la persona que el
     cuadro es una hoja y no una pantalla nueva de la que no sabe salir. */
  .modal::before {
    content: ""; display: block; flex: none;
    width: 38px; height: 4px; margin: 8px auto 0;
    border-radius: 4px; background: var(--border-strong);
  }
}

/* --- 11. Formularios de dos columnas: una sola en el teléfono ---
   Dos campos lado a lado en 390 px dejan cada uno en 170: no cabe ni
   una fecha completa. */
@media (max-width: 560px) {
  .form-2 { grid-template-columns: 1fr; }
  .seg-row { flex-direction: column; }
  .seg + .seg { border-left: 0; border-top: 1.5px solid var(--border-strong); }
  .head-actions { width: 100%; }
  .head-actions .btn { flex: 1 1 auto; justify-content: center; }
  .page-head { gap: 12px; }
  .page-head > .btn, .page-head .page-actions { width: 100%; }
  .page-head .page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .page-head .page-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* --- 12. Tablas: que se deslicen ellas, no la página ---
   Una tabla de seis columnas nunca va a caber en un teléfono. Lo
   correcto es que la tabla se deslice dentro de su caja. Y que se
   note que se puede deslizar, porque si no, nadie lo intenta. */
@media (max-width: 767px) {
  .table-wrap, .cua-wrap { overflow-x: auto; position: relative; }
  .table-wrap::after, .cua-wrap::after {
    content: "→ desliza"; position: sticky; right: 0; bottom: 0;
    display: block; width: max-content; margin-left: auto;
    font-size: 11px; color: var(--text-3); background: var(--surface);
    padding: 2px 8px; border-radius: var(--r-full); pointer-events: none;
  }
  .dt th, .dt td { white-space: nowrap; }
  .dt td:first-child, .dt th:first-child { white-space: normal; min-width: 150px; }
  /* Una celda con varias etiquetas (los "chip" de materias de un
     profesor, por ejemplo) necesita partirse en varios renglones: cada
     etiqueta ya trae su propio nowrap, pero si la CELDA también lo
     tiene, la lista entera se hace una sola línea larguísima que se
     sale de la tabla en vez de acomodarse hacia abajo. */
  .dt td:has(.chip) { white-space: normal; }
}

/* --- 13. El menú lateral en el teléfono ---
   Es el único camino a las secciones que no caben en la barra de
   abajo. Tiene que abrirse completo, no a medias, y su lista tiene
   que poder deslizarse sin arrastrar la página. */
@media (max-width: 1023px) {
  .sidebar { width: min(292px, 86vw); }
  .side-nav { padding-bottom: 24px; }
}
@media (pointer: coarse) {
  .side-link { padding: 12px; }
  .side-group { margin-top: 14px; }
}

/* --- 14. El fondo oscuro del menú, tocable en toda la pantalla --- */
.side-scrim { touch-action: none; }

/* --- 15. Cuando hay un cuadro abierto, la página de atrás no se mueve ---
   Lo pone y lo quita el JavaScript (ui.js). Sin esto, en iOS uno
   arrastra dentro del formulario y lo que se mueve es la lista de
   atrás; al cerrar el cuadro, la pantalla quedó en otro lugar. */
body.modal-abierto { overflow: hidden; position: relative; }

/* --- 16. Iniciar sesión desde el teléfono ---
   Es la primera pantalla que ve un profesor y la que más se usa:
   tiene que caber sin scroll y con el campo de usuario a la vista. */
@media (max-width: 767px) {
  .login-brand { min-height: 22vh; }
  .login-card { padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); }
  .role-picker { gap: 8px; }
  .role-opt { flex: 1 1 0; justify-content: center; min-height: 44px; }
  .staff-entry { min-height: 40px; }
}

/* --- 17. Encabezado siempre visible ---
   En una lista de 739 alumnos, si la barra de arriba se va con el
   scroll no hay manera de volver al menú sin subir hasta el
   principio. */
@media (max-width: 1023px) {
  .topbar { position: sticky; top: 0; z-index: 30; background: var(--surface); }
}

/* --- 18. Cifras y nombres largos, partidos y no desbordados --- */
@media (max-width: 460px) {
  .stat-card .v { font-size: var(--fs-16); }
  .card-title { overflow-wrap: anywhere; }
  .monto { font-size: var(--fs-13); }
  .section-title { font-size: var(--fs-16); }
}

/* --- 19. Lo que en computadora se lee a 10.5 px, en un teléfono no ---
   Las etiquetas chicas —el número del día en el calendario, el contador de
   una pestaña— caben bien en una pantalla grande a 10.5 px. En un teléfono,
   sostenido a medio metro y a veces con el sol encima, se vuelven una
   mancha. En pantalla táctil se suben a 12; el diseño no cambia, solo se ve.
   (La clave de la carrera en su cuadrito de color, .ficon, se subió a 12 px
   fijo más arriba: por debajo de 11 px no se lee ni en escritorio.) */
@media (pointer: coarse) {
  .ring .ring-txt span { font-size: 12px; }
  .ucal-ev { font-size: 12px; }
  .cal-days .dow { font-size: 12px; }
  .tabs .tab .count { font-size: 12px; }
  .side-role { font-size: 12px; }
  .badge, .chip { font-size: 12px; }
}

/* --- 20. Las pestañas también se tocan con el dedo ---
   "Cuentas por cobrar", "Por validar", "Conceptos": son la navegación de
   cobranza. A 29 px de alto se falla el toque y se acaba en la pestaña de
   al lado, que en cobranza significa mirar el dinero equivocado. */
@media (pointer: coarse) {
  .tabs { width: 100%; }
  .tabs .tab { min-height: 40px; padding: 9px 14px; }
  .role-opt { min-height: 46px; }
  .seg { min-height: 46px; }
  .file-chip { min-height: 44px; }
}

/* --- 21. Los enlaces de "ver todo" también son botones ---
   "Ver bitácora", "Ver todos", "Menú semanal": son texto, pero la persona
   los toca igual que un botón. A 20 px de alto se falla el toque y se acaba
   abriendo el renglón que está debajo. */
@media (pointer: coarse) {
  .link-all { min-height: 34px; display: inline-flex; align-items: center; padding: 0 4px; }
  .card-head .link-all { margin: -6px -4px; }
}

/* --- 22. La barra de abajo, legible en cualquier teléfono ---
   10.5 px es el tamaño de una nota al pie, y esto es la navegación principal
   de quien usa el sistema desde el celular. En pantallas estrechas sube a 11,
   que sigue cabiendo en cuatro columnas y ya se lee de un vistazo. */
@media (max-width: 767px) {
  .tab-item { font-size: 11px; }
}

/* --- 23. Tarjetas de aviso en tablet ---
   El texto de un aviso puede traer una palabra larguísima (un correo, una
   liga). Sin esto, esa palabra estira su tarjeta y rompe la rejilla. */
.grid-2 > *, .grid-3 > * { min-width: 0; }
.aviso-card, .aviso-card * { min-width: 0; }
.aviso-card .chip { overflow-wrap: anywhere; white-space: normal; }
.card-head { min-width: 0; }
.card-head .card-title { min-width: 0; overflow-wrap: anywhere; }

/* --- 24. Botones de filtro con nombres largos ---
   "Licenciatura en Administración · 26" no cabe en el ancho de un iPhone SE,
   y como los botones no parten el texto, ese botón solo se salía de su fila.
   En pantalla chica se les permite partir el nombre en dos renglones. */
@media (max-width: 767px) {
  .btn { white-space: normal; max-width: 100%; text-align: left; }
  .btn-sm { line-height: 1.3; }
  .btn-block, .modal-foot .btn, .page-head .btn { text-align: center; }
}

/* --- 25. Editar y Quitar, separados un dedo ---
   En el horario y en varias listas, el lápiz (editar) y la equis
   (quitar) van pegados. En pantalla táctil eso es pedir que un día
   alguien queriendo editar termine en el diálogo de quitar. Con el
   dedo, cada uno crece a 44 px y se les abre aire en medio; el
   diálogo de confirmación sigue existiendo como segunda red. */
@media (pointer: coarse) {
  .list-row .icon-btn.sm { min-width: 44px; min-height: 44px; }
  .list-row .icon-btn.sm + .icon-btn.sm { margin-left: 8px; }
  .fila-acciones { gap: 10px; }
}

/* --- 27. Pasar lista con el dedo: el control MÁS usado del profesor ---
   Un profesor camina el salón con el iPad marcando P/R/F/J alumno por
   alumno, treinta veces por clase. A 38×34 px se falla el toque y una
   "P" se convierte en "R" sin querer. Con el dedo, cada botón sube a
   44×44 —la medida de Apple— y el pase de lista se vuelve de un toque
   seguro por alumno. En computadora se quedan compactos. */
@media (pointer: coarse) {
  .att-seg { gap: 6px; }
  .att-seg button { width: 44px; height: 44px; font-size: var(--fs-13); }
}

/* --- 26. La cuadrícula de horarios, cómoda en tablet y teléfono ---
   En iPad cabe la semana completa. En el teléfono, la tabla se
   desliza de lado dentro de su marco (la página nunca), la columna
   de la hora se queda fija a la izquierda, y los bloques no se
   encogen hasta volverse ilegibles. */
@media (max-width: 767px) {
  .cua { min-width: 640px; }
  .cua td { min-width: 116px; }
  .cua th.hora { width: 58px; min-width: 58px; padding: 6px 8px; }
}

/* ============================================================
   ACTIVIDADES, EXÁMENES Y EL AULA
   Tres contextos con necesidades distintas:
     · el profesor armando, en su computadora;
     · el PROYECTOR, que se lee desde la última fila del salón;
     · el CELULAR del alumno, de pie y con una mano.
   ============================================================ */

/* ---- Datos: importar y exportar ---- */
.dato-card { display: flex; flex-direction: column; }
.dato-n { font-family: var(--font-display); font-size: var(--fs-24); font-weight: 800;
  color: var(--petroleo); margin: 4px 0 0; flex: 1; }
.dato-n span { font-family: var(--font-body); font-size: var(--fs-12); font-weight: 500; color: var(--text-3); }
.link-boton { border: 0; background: none; padding: 0; font: inherit; font-weight: 700;
  color: var(--petroleo); text-decoration: underline; cursor: pointer; }
.drop-zone {
  border: 2px dashed var(--border-strong); border-radius: var(--r-lg); padding: 26px 18px;
  text-align: center; cursor: pointer; color: var(--text-2); background: var(--surface-2);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.drop-zone:hover { border-color: var(--petroleo); background: var(--petroleo-50); }
.drop-zone.con-archivo { border-color: var(--verde); background: var(--verde-50); }
.drop-zone b { font-size: var(--fs-15); color: var(--text); }
.drop-zone span { font-size: var(--fs-12); color: var(--text-3); }

/* ---- Lista de actividades ---- */
.act-card { display: flex; flex-direction: column; }
.act-meta { font-size: var(--fs-13); color: var(--text-3); margin: 2px 0 0; line-height: 1.5; }
.codigo-chip {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-16);
  letter-spacing: .18em; background: var(--petroleo); color: #fff;
  padding: 5px 12px; border-radius: 8px; flex: none; white-space: nowrap;
}

/* ---- Armado de preguntas ---- */
.list-preguntas { display: flex; flex-direction: column; gap: 10px; }
.preg-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; }
.preg-num {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--petroleo-50); color: var(--petroleo);
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-14);
  display: flex; align-items: center; justify-content: center;
}
.preg-cuerpo { flex: 1; min-width: 0; }
.preg-texto { font-size: var(--fs-15); font-weight: 600; margin: 0 0 8px; line-height: 1.5; overflow-wrap: anywhere; }
.preg-ops { display: flex; gap: 6px; flex-wrap: wrap; }
.preg-op {
  font-size: var(--fs-12); padding: 4px 10px; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text-2);
  display: inline-flex; align-items: center; gap: 4px; overflow-wrap: anywhere;
}
.preg-op.buena { background: var(--verde-100); color: var(--verde-bosque); font-weight: 600; }
.preg-resp { font-size: var(--fs-13); color: var(--text-2); margin: 4px 0 0; overflow-wrap: anywhere; }
.preg-expl { font-size: var(--fs-12); color: var(--text-3); margin: 8px 0 0;
  display: flex; gap: 5px; align-items: flex-start; line-height: 1.5; }
.preg-acciones { display: flex; gap: 2px; flex: none; }

.tipo-card {
  text-align: left; cursor: pointer; border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.tipo-card:hover { border-color: var(--petroleo); transform: translateY(-2px); }
.tipo-card svg { color: var(--petroleo); }
.tipo-card b { font-size: var(--fs-14); }
.tipo-card span { font-size: var(--fs-12); color: var(--text-3); line-height: 1.45; }

.op-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.op-row .op-check { width: 22px; height: 22px; flex: none; accent-color: var(--verde); }
.op-row .op-txt { flex: 1; min-width: 0; }
.par-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.par-row .input { flex: 1; min-width: 0; }
.par-row > span { color: var(--text-3); flex: none; }

/* ============================================================
   LA PANTALLA QUE SE PROYECTA
   Se lee desde el fondo del salón: fondo oscuro, letra enorme, una
   sola cosa a la vez. Todo en clamp() para que crezca con la pantalla
   sin quedarse chico en un proyector viejo ni gigante en un monitor 4K.
   ============================================================ */
.vivo-shell {
  min-height: calc(100vh - 120px); min-height: calc(100dvh - 120px);
  margin: -18px -24px -40px; padding: 22px clamp(16px, 4vw, 48px) 28px;
  background: linear-gradient(160deg, #06333C, #04191F 65%);
  color: #F2F7F5; display: flex; flex-direction: column; gap: 18px;
}
.vivo-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.vivo-titulo { font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 2.2vw, 26px); }
.vivo-materia { font-size: clamp(12px, 1.2vw, 15px); color: #9FC2CA; }
.vivo-codigo { text-align: right; }
.vivo-codigo-l { display: block; font-size: clamp(11px, 1.1vw, 14px); color: #9FC2CA; margin-bottom: 2px; }
.vivo-codigo-l b { color: #F2F7F5; }
.vivo-codigo-n {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 5vw, 60px); letter-spacing: .12em; color: var(--naranja);
  line-height: 1;
}
.vivo-centro { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 12px; min-width: 0; }
.vivo-paso { font-size: clamp(12px, 1.3vw, 16px); color: #9FC2CA; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700; margin: 0; }
.vivo-pregunta { font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 4vw, 48px); line-height: 1.2; margin: 0; max-width: 22ch;
  overflow-wrap: anywhere; }
.vivo-pregunta.chico { font-size: clamp(17px, 2.4vw, 28px); max-width: 34ch; }
.vivo-grande { font-family: var(--font-display); font-weight: 800;
  font-size: clamp(52px, 12vw, 140px); line-height: .95; margin: 0; color: var(--naranja); }
.vivo-sub { font-size: clamp(13px, 1.6vw, 20px); color: #C3DBE0; margin: 0; }
.vivo-espera { font-size: clamp(13px, 1.5vw, 18px); color: #9FC2CA; max-width: 40ch; line-height: 1.6; }
.vivo-espera b { color: var(--naranja); }
.vivo-nombres { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 900px; }
.vivo-nombres span { background: rgba(255,255,255,.08); padding: 5px 12px; border-radius: var(--r-full);
  font-size: clamp(12px, 1.2vw, 15px); }
.vivo-nombres span.bien { background: rgba(127,216,166,.18); color: #7FD8A6; }
.vivo-nombres span.mal { background: rgba(241,112,95,.16); color: #F1948A; }

.vivo-ops { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px; width: 100%; max-width: 1000px; }
.vivo-op { padding: clamp(14px, 2vw, 26px); border-radius: var(--r-lg);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.9vw, 24px);
  overflow-wrap: anywhere; min-width: 0; }
.vivo-op.c0 { background: #C2410C; } .vivo-op.c1 { background: #1F6FA8; }
.vivo-op.c2 { background: #1B6E5A; } .vivo-op.c3 { background: #8A6206; }
.vivo-contando { font-size: clamp(13px, 1.5vw, 19px); color: #C3DBE0; margin: 6px 0 0; }
.vivo-shell .upload-progress { max-width: 520px; width: 100%; background: rgba(255,255,255,.12); }
.vivo-shell .upload-progress i { background: var(--naranja); }

.vivo-barras { display: flex; gap: clamp(8px, 2vw, 26px); align-items: flex-end;
  height: clamp(150px, 26vh, 280px); width: 100%; max-width: 860px; justify-content: center; }
.vb { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.vb-barra { width: 100%; max-width: 130px; background: rgba(255,255,255,.16);
  border-radius: 8px 8px 0 0; transition: height .6s var(--ease); }
.vb.buena .vb-barra { background: var(--naranja); }
.vb-n { font-family: var(--font-display); font-weight: 800; font-size: clamp(14px, 1.8vw, 22px); }
.vb-t { font-size: clamp(11px, 1.2vw, 15px); color: #C3DBE0; text-align: center;
  overflow-wrap: anywhere; display: flex; gap: 3px; align-items: center; }
.vb.buena .vb-t { color: var(--naranja); font-weight: 700; }

.vivo-nube { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center;
  align-items: center; max-width: 1000px; line-height: 1.15; }
.vivo-nube span { font-family: var(--font-display); font-weight: 700; color: #7ED0C4; }
.vivo-nube span:nth-child(3n) { color: var(--naranja); }
.vivo-nube span:nth-child(3n+1) { color: #F2F7F5; }

.vivo-correcta { font-size: clamp(15px, 2vw, 26px); font-weight: 700; color: #7FD8A6;
  display: flex; gap: 8px; align-items: center; margin: 4px 0 0; overflow-wrap: anywhere; }
.vivo-expl { font-size: clamp(12px, 1.4vw, 17px); color: #C3DBE0; max-width: 50ch; line-height: 1.6; margin: 0; }
.vivo-tabla { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.vivo-tabla.grande { max-width: 620px; }
.vivo-fila { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.07);
  padding: 9px 14px; border-radius: 10px; }
.vivo-fila b { font-family: var(--font-display); color: var(--naranja); flex: none; min-width: 22px;
  font-size: clamp(14px, 1.6vw, 20px); }
.vivo-fila span { flex: 1; min-width: 0; text-align: left; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: clamp(13px, 1.5vw, 18px); }
.vivo-fila i { font-family: var(--font-display); font-weight: 800; font-style: normal;
  font-size: clamp(14px, 1.6vw, 20px); }
.vivo-tabla.grande .vivo-fila { padding: 12px 18px; }
.vivo-abajo { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn-grande { padding: 14px 28px; font-size: var(--fs-16); min-height: 52px; }
.vivo-abajo .btn-ghost { border-color: rgba(255,255,255,.24); color: #C3DBE0; }
.vivo-abajo .btn-ghost:hover { background: rgba(255,255,255,.08); }
/* La capa del examen presentado desde el portal. Va por encima de la
   sesión del alumno pero por debajo de los avisos (toast, z-100), para
   que un "no se pudo guardar esa respuesta" siga siendo visible. Cubrir
   la pantalla no es adorno: es lo que evita que se conteste un examen
   con el menú y las notificaciones al lado. */
.ex-portal { position: fixed; inset: 0; z-index: 70; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ex-portal .aula-shell { min-height: 100%; }
body.sin-scroll { overflow: hidden; }


/* ============================================================
   EL AULA — el celular del alumno
   ============================================================ */
.aula-shell {
  min-height: 100vh; min-height: 100dvh;
  background: linear-gradient(165deg, #0B4A56, #06333C 70%);
  color: #F2F7F5; display: flex; flex-direction: column;
  padding: max(18px, env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
}
.aula-shell.activa { justify-content: flex-start; gap: 14px; }
.aula-caja { margin: auto; width: 100%; max-width: 420px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px; }
.aula-caja h1 { font-family: var(--font-display); font-size: var(--fs-24); margin: 4px 0 0; }
.aula-sub { font-size: var(--fs-14); color: #AECBD1; margin: 0; line-height: 1.55; }
.aula-detalle { font-size: var(--fs-13); color: #AECBD1; margin: 0; line-height: 1.6; }
.aula-pie { font-size: var(--fs-12); color: #7FA3AB; margin: 14px 0 0; line-height: 1.5; }
.aula-lab { display: block; width: 100%; text-align: left; font-size: var(--fs-12);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #AECBD1; margin: 12px 0 5px; }
.aula-caja form { width: 100%; }
.aula-codigo, .aula-mat, .aula-input {
  width: 100%; padding: 14px 16px; border-radius: var(--r-md);
  border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07);
  color: #fff; font-family: var(--font-display); font-size: 18px;
}
/* 18 px y no menos: por debajo de 16, Safari hace zoom al tocar el campo y
   el alumno pierde de vista el resto de la pantalla. */
.aula-codigo { font-size: 30px; letter-spacing: .22em; text-align: center; font-weight: 800; }
.aula-mat { font-size: 20px; letter-spacing: .06em; text-align: center; }
.aula-codigo::placeholder, .aula-mat::placeholder, .aula-input::placeholder { color: rgba(255,255,255,.32); }
.aula-codigo:focus, .aula-mat:focus, .aula-input:focus {
  outline: none; border-color: var(--naranja); background: rgba(255,255,255,.11);
}
.aula-caja .btn-block { margin-top: 16px; }
.aula-error { width: 100%; background: rgba(241,112,95,.18); color: #FFD9D2;
  border-radius: var(--r-md); padding: 11px 14px; font-size: var(--fs-13);
  line-height: 1.5; text-align: left; }
.aula-datos { display: flex; gap: 8px; width: 100%; margin: 10px 0 4px; }
.aula-datos > div { flex: 1; background: rgba(255,255,255,.07); border-radius: var(--r-md); padding: 10px 6px; }
.aula-datos b { display: block; font-family: var(--font-display); font-size: var(--fs-20); }
.aula-datos span { font-size: var(--fs-11); color: #AECBD1; }

.aula-barra { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.aula-tit { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-14);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aula-mis-puntos { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-16);
  color: var(--naranja); flex: none; }
.aula-mis-puntos.poco { color: #F1948A; }
.aula-progreso { height: 5px; background: rgba(255,255,255,.12); border-radius: 4px; overflow: hidden; }
.aula-progreso i { display: block; height: 100%; background: var(--naranja); transition: width .4s var(--ease); }

.aula-centro { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 10px; }
.aula-centro svg { color: var(--naranja); }
.aula-centro.bien svg { color: #7FD8A6; }
.aula-centro.mal svg { color: #F1948A; }
.aula-centro h2 { font-family: var(--font-display); font-size: var(--fs-24); margin: 0; }
.aula-puntos { font-family: var(--font-display); font-weight: 800; font-size: 46px;
  color: var(--naranja); margin: 0; line-height: 1; }
.aula-yo { font-size: var(--fs-15); font-weight: 600; background: rgba(255,255,255,.09);
  padding: 8px 18px; border-radius: var(--r-full); margin: 6px 0 0; }
.aula-pos { font-size: var(--fs-14); color: #AECBD1; margin: 4px 0 0; }
.aula-expl { font-size: var(--fs-13); color: #AECBD1; line-height: 1.6; margin: 0; max-width: 34ch; }

.aula-pregunta { flex: 1; display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.aula-paso { font-size: var(--fs-12); color: #AECBD1; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700; margin: 0; }
.aula-enunciado { font-family: var(--font-display); font-size: var(--fs-20);
  line-height: 1.32; margin: 0; overflow-wrap: anywhere; }
.aula-tiempo { align-self: flex-start; background: rgba(255,255,255,.1);
  padding: 5px 14px; border-radius: var(--r-full); font-family: var(--font-display);
  font-weight: 800; font-size: var(--fs-16); }
.aula-tiempo.poco { background: rgba(241,112,95,.24); color: #FFD9D2; }

.aula-ops { display: flex; flex-direction: column; gap: 10px; }
.aula-op { border: 0; border-radius: var(--r-lg); padding: 18px 16px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-16);
  color: #fff; text-align: left; cursor: pointer; min-height: 60px;
  overflow-wrap: anywhere; transition: transform var(--t-fast), box-shadow var(--t-fast); }
.aula-op.c0 { background: #C2410C; } .aula-op.c1 { background: #1F6FA8; }
.aula-op.c2 { background: #1B6E5A; } .aula-op.c3 { background: #8A6206; }
.aula-op:active { transform: scale(.98); }
.aula-op.elegida { box-shadow: 0 0 0 3px #fff inset, 0 0 0 4px var(--naranja); }
.aula-op[disabled] { opacity: .55; }
.aula-escala { display: flex; gap: 8px; }
.aula-num { flex: 1; border: 0; border-radius: var(--r-lg); background: rgba(255,255,255,.1);
  color: #fff; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-24);
  padding: 20px 0; cursor: pointer; min-height: 64px; }
.aula-num:active, .aula-num.elegida { background: var(--naranja); color: var(--tinta); }
.aula-escala-lab { display: flex; justify-content: space-between; font-size: var(--fs-12); color: #AECBD1; }
.aula-huecos { display: flex; flex-direction: column; gap: 8px; }
.aula-relacionar { display: flex; flex-direction: column; gap: 10px; }
.rel-row { display: flex; gap: 10px; align-items: center; }
.rel-izq { flex: 1; min-width: 0; font-size: var(--fs-14); font-weight: 600; overflow-wrap: anywhere; }
.rel-sel, .ord-sel { flex: 1; min-width: 0; background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.2); color: #fff; font-size: 16px; }
.aula-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; }
.aula-nav .btn-ghost { border-color: rgba(255,255,255,.24); color: #C3DBE0; }
.aula-tabla { width: 100%; display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
.aula-fila { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.07);
  padding: 9px 13px; border-radius: 10px; }
.aula-fila.yo { background: rgba(252,139,69,.2); }
.aula-fila b { font-family: var(--font-display); color: var(--naranja); min-width: 20px; flex: none; }
.aula-fila span { flex: 1; min-width: 0; text-align: left; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-14); }
.aula-fila i { font-family: var(--font-display); font-weight: 800; font-style: normal; }
.aula-detalle-lista { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.adl { background: rgba(255,255,255,.06); border-radius: 10px; padding: 11px 13px;
  text-align: left; border-left: 3px solid rgba(255,255,255,.2); }
.adl.bien { border-left-color: #7FD8A6; }
.adl.mal { border-left-color: #F1948A; }
.adl b { display: block; font-size: var(--fs-13); line-height: 1.45; margin-bottom: 3px; overflow-wrap: anywhere; }
.adl span { display: block; font-size: var(--fs-12); color: #AECBD1; }
.adl i { display: block; font-size: var(--fs-12); color: #7FA3AB; font-style: normal; margin-top: 4px; line-height: 1.5; }

/* En teléfono, la pantalla que se proyecta también tiene que ser usable:
   un profesor puede conducir la dinámica desde su celular conectado al
   proyector, o simplemente revisarla en la mano. */
@media (max-width: 767px) {
  .vivo-shell { margin: -18px -16px -40px; padding: 18px 14px calc(24px + env(safe-area-inset-bottom)); }
  .vivo-top { flex-direction: column; gap: 10px; }
  .vivo-codigo { text-align: left; }
  .vivo-ops { grid-template-columns: 1fr; }
  .vivo-barras { height: 150px; gap: 6px; }
  .preg-card { flex-wrap: wrap; }
  .preg-acciones { width: 100%; justify-content: flex-end; }
  .par-row { flex-wrap: wrap; }
  .par-row > span { display: none; }
  .rel-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .rel-sel, .ord-sel { max-width: none !important; }
}


/* ============================================================
   PLAN DE ESTUDIOS, COLEGIATURAS Y REGLAMENTO (1.711)
   ============================================================ */

/* ---- Casilla con etiqueta, del tamaño de un dedo ---- */
.check-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--surface); cursor: pointer; font-size: var(--fs-13);
  min-height: 42px; user-select: none; max-width: 100%;
}
/* La casilla real ocupa TODA la pastilla, no sus 17 px de dibujo.

   Con la casilla chica, el área que de verdad responde al dedo eran 17 px
   en una pastilla de 42: en un teléfono se falla el toque una de cada
   tres veces y parece que el filtro no sirve. Ahora el <input> se estira
   invisible sobre la pastilla completa —sigue siendo un checkbox real,
   con teclado y lector de pantalla— y el cuadrito que se ve lo dibuja el
   propio recuadro con ::before. */
.check-chip { position: relative; }
.check-chip input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.check-chip::before {
  content: ""; flex: none; width: 17px; height: 17px; border-radius: 5px;
  border: 2px solid var(--border-strong); background: var(--surface);
  transition: background .12s ease, border-color .12s ease;
}
.check-chip:has(input:checked)::before {
  background: var(--petroleo) center/13px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  border-color: var(--petroleo);
}
.check-chip:has(input:focus-visible) { outline: 2px solid var(--petroleo); outline-offset: 2px; }
.check-chip span { overflow-wrap: anywhere; }
.check-chip:has(input:checked) { border-color: var(--petroleo); background: var(--petroleo-50); color: var(--petroleo); }

/* ---- Malla curricular ----
   Cuadrícula de semestres, no lista larga: así se lee "en tercero hay
   ocho materias" de un vistazo. En teléfono se apila en una columna. */
.malla { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.malla-sem {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px 16px 12px; display: flex; flex-direction: column;
}
.malla-cab { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.malla-n {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--petroleo); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-15);
  display: flex; align-items: center; justify-content: center;
}
.malla-cab b { font-size: var(--fs-14); text-transform: capitalize; }
.malla-lista { list-style: none; margin: 0; padding: 0; flex: 1; }
.malla-lista li {
  display: flex; gap: 8px; align-items: baseline; padding: 7px 0;
  border-top: 1px solid var(--border); font-size: var(--fs-13); line-height: 1.45;
}
.malla-lista li:first-child { border-top: 0; }
.malla-lista li.otra { background: var(--surface-2); margin: 0 -8px; padding-left: 8px; padding-right: 8px; }
.malla-mat { flex: 1; overflow-wrap: anywhere; }
.malla-acc { display: flex; gap: 2px; flex: none; opacity: 0; transition: opacity var(--t-fast); }
.malla-lista li:hover .malla-acc { opacity: 1; }
.malla-add { margin-top: 10px; align-self: flex-start; }

/* En pantalla táctil no hay hover: los botones se quedarían invisibles
   para siempre y la persona no podría editar nada. */
@media (hover: none) {
  .malla-acc { opacity: 1; }
}

/* ---- Horario propuesto: la semana en cuadrícula ---- */
.horario-grid td { vertical-align: top; padding: 6px; }
.horario-grid .hg-hora { white-space: nowrap; background: var(--surface-2); font-size: var(--fs-13); }
.hg-clase {
  background: var(--petroleo-50); border-left: 3px solid var(--petroleo);
  border-radius: 6px; padding: 7px 9px; margin-bottom: 5px;
  display: flex; flex-direction: column; gap: 1px; min-width: 150px;
}
.hg-clase b { font-size: var(--fs-13); line-height: 1.35; overflow-wrap: anywhere; }
.hg-clase .mini { font-size: var(--fs-12); color: var(--text-2); display: flex; align-items: center; gap: 4px; }

/* ---- Reglamento ---- */
.reg-sec .reg-cuerpo {
  font-size: var(--fs-14); line-height: 1.75; color: var(--text-2);
  white-space: normal; overflow-wrap: anywhere;
}
.reg-sec.reg-oculta { border-left: 4px solid var(--naranja-vivo); background: var(--naranja-50); }
.reg-sec .sub-t { margin: 0 0 6px; }

/* ---- Teléfono ----
   Bloque 25 de los ajustes móviles. La cuadrícula del horario propuesto
   se desliza dentro de su caja en vez de arrastrar la página: un horario
   de cinco días no cabe en 390 px y nunca va a caber. */
@media (max-width: 767px) {
  .malla { grid-template-columns: 1fr; }
  .malla-lista li { padding: 9px 0; }
  .hg-clase { min-width: 128px; }
  .horario-grid { font-size: var(--fs-12); }
  .check-chip { font-size: var(--fs-13); padding: 10px 13px; }
  /* La tabla de "lo que paga cada carrera" tiene una columna por semestre:
     en teléfono se desliza, y la primera columna se queda fija para no
     perder de vista de qué carrera es el número que se está leyendo. */
  .dt th:first-child, .dt td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; }
}

/* El círculo de icono también se usa con texto corto ("1+", "×2"): con el
   tamaño de icono queda en 10.5 px, por debajo del piso de legibilidad. */
.ficon.ficon-txt { font-size: var(--fs-13); font-weight: 800; letter-spacing: -.02em; }

/* ============================================================
   MATERIAS Y GRUPOS (1.720)
   La pantalla de materias del ciclo. Con 311 materias precargadas
   una tabla plana ya no sirve: hay filtros, encendido por lote y
   selectores en la propia fila.
   ============================================================ */

/* Barra de filtros: se acomoda sola en el celular sin que nada se
   salga de la pantalla. */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filtros > .input { flex: 1 1 150px; min-width: 0; }

/* Materia que NO se imparte este periodo. Se atenúa, pero se deja
   legible a propósito: sigue siendo información, no basura. */
.fila-apagada > td { opacity: .5; }
.fila-apagada > td:first-child { opacity: 1; }

/* Selector dentro de la fila de una tabla. */
.input-sm {
  padding: 6px 8px;
  font-size: var(--fs-13);
  height: auto;
  /* 16px en el celular para que iOS no haga zoom al tocarlo. */
}
@media (hover: none) { .input-sm { font-size: 16px; } }

/* Interruptor de encendido/apagado. Es un checkbox real por debajo:
   funciona con teclado y con lector de pantalla igual que siempre. */
.sw { display: inline-flex; align-items: center; cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw span {
  display: block; width: 34px; height: 20px; border-radius: 999px;
  background: var(--border-strong); position: relative;
  transition: background .15s ease;
}
.sw span::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.sw input:checked + span { background: var(--verde); }
.sw input:checked + span::after { transform: translateX(14px); }
.sw input:focus-visible + span { outline: 2px solid var(--petroleo); outline-offset: 2px; }
/* En pantalla táctil el área de toque real es de 44px, aunque el
   dibujo del interruptor sea más chico. */
@media (hover: none) { .sw { min-height: 44px; min-width: 44px; justify-content: center; } }

/* Lista para elegir integrantes de un grupo. Con 739 alumnos tiene que
   tener tope de alto y desplazarse por dentro, no estirar el modal. */
.lista-picker {
  max-height: 46vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 4px; background: var(--bg);
  -webkit-overflow-scrolling: touch;
}
.picker-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px; cursor: pointer;
  font-size: var(--fs-13); min-height: 40px;
}
.picker-row:hover { background: rgba(11,74,86,.06); }
.picker-row input { width: 17px; height: 17px; flex: none; accent-color: var(--petroleo); }
.picker-row b { font-weight: 600; }
.picker-row .mini { margin-left: auto; text-align: right; flex: none; }
@media (hover: none) { .picker-row { min-height: 44px; } }

/* Los botones al final de un renglón de lista. En escritorio van a la
   derecha; en un teléfono de 360 px dos botones no caben junto al texto
   y empujaban el renglón fuera de su tarjeta — así que ahí bajan a su
   propio piso en vez de desbordar. */
.fila-acciones { display: flex; gap: 6px; flex-wrap: wrap; flex: none; }
@media (max-width: 560px) {
  .list-row:has(.fila-acciones) { flex-wrap: wrap; }
  .fila-acciones { flex: 1 0 100%; margin-top: 8px; }
  .fila-acciones .btn { flex: 1 1 auto; justify-content: center; }
}

/* El código de una actividad, en grande. Se lee de lejos y se dicta sin
   equivocarse — el alfabeto del código ya excluye vocales y las letras
   que se confunden al dictarlas (I, L, O, 0, 1). */
.codigo-grande {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(34px, 9vw, 54px); letter-spacing: .18em;
  text-align: center; color: var(--petroleo);
  background: var(--petroleo-50); border: 2px dashed var(--petroleo-100);
  border-radius: var(--r-lg); padding: 18px 10px; line-height: 1;
  user-select: all;
}

/* ============================================================
   IDESUN OS — Usuarios (frontend/js/usuarios.js)
   ============================================================ */

/* Esta tabla tiene siete columnas cuando la ve Dirección, porque además
   de los datos lleva los dos botones de "reiniciar contraseña" y
   "suspender". Con el relleno normal de .dt pedía 1090 px y en el
   monitor de 1280 de la oficina —que después de la barra lateral deja
   980— el botón de suspender se quedaba escondido detrás del borde: la
   acción principal solo aparecía si a alguien se le ocurría deslizar la
   tabla de lado. Se aprieta el relleno SOLO aquí y cabe entera.

   Con esto la tabla mide 978 px y entra justa en esos 980. En pantallas
   más estrechas sigue deslizándose dentro de su caja (.table-wrap),
   igual que el resto de las tablas del sistema. */
.dt.tabla-usuarios th, .dt.tabla-usuarios td { padding-left: 10px; padding-right: 10px; }
.dt.tabla-usuarios .btn-sm { padding: 6px 9px; }
.dt.tabla-usuarios .chip { padding: 3px 8px; }

/* El nombre no debe partirse en cuatro renglones ("C.P. / Cañadero /
   Mendoza / Rosa"): con 739 alumnos y 52 del personal, la columna que
   más se lee es justamente esa. */
.dt.tabla-usuarios th:first-child { min-width: 178px; }

/* ============================================================
   MATERIAS DEL ALUMNO, DETALLE Y MATERIALES
   ============================================================ */

/* --- La tarjeta de materia, ahora clickeable de verdad ---
   Antes tenía el aspecto de tarjeta y ninguna reacción: se veía tocable y
   no llevaba a ningún lado. Aquí se le dan las tres señales que hacen que
   algo se lea como un botón —el cursor, el levantarse al pasar por encima
   y un anillo de foco visible— y las tres apuntan a lo mismo, que sí se
   puede abrir. */
.course-card[role="button"] { cursor: pointer; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.course-card[role="button"]:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 8px 24px rgba(11, 74, 86, .12)); }
.course-card[role="button"]:active { transform: translateY(0); }
.course-card[role="button"]:focus-visible { outline: 3px solid var(--petroleo); outline-offset: 2px; }

.course-card .cc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.course-card .cc-head > svg { flex: none; color: var(--text-3); margin-top: 2px; }
.course-card .cc-title { font-family: var(--font-display); font-size: var(--fs-16); line-height: 1.25; margin: 0; }
.course-card .cc-when { margin: 10px 0 0; color: var(--text-2); }
.course-card .cc-progress { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }

/* --- Barra de progreso (calificación / asistencia) ---
   La pista se dibuja SIEMPRE, aunque no haya dato: si desapareciera, la
   tarjeta cambiaría de alto según el alumno tenga o no calificaciones y la
   rejilla quedaría desalineada. Sin dato, la pista se queda vacía y debajo
   se explica por qué — que no es lo mismo que un cero. */
.prog-row { display: flex; flex-direction: column; gap: 5px; }
.prog-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.prog-lbl { font-size: var(--fs-12); font-weight: 700; color: var(--text-2); letter-spacing: .02em; }
.prog-val { font-family: var(--font-display); font-size: var(--fs-15); font-weight: 700; }
.prog-track { height: 8px; border-radius: 99px; background: var(--border); overflow: hidden; }
.prog-fill { display: block; height: 100%; border-radius: 99px; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.prog-empty { font-size: var(--fs-11); color: var(--text-3); }

/* --- Segmentador de filtro (pestañas de materia / de detalle) ---
   Envuelve en varias líneas a propósito: un alumno puede tener seis o más
   materias, y una fila que se sale de la pantalla esconde justo la que
   busca. Se llama fseg y no seg porque .seg ya existe en esta hoja con
   otro significado (los botones de un conmutador de dos opciones). */
.fseg { display: flex; flex-wrap: wrap; gap: 8px; }
.fseg-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 99px; cursor: pointer;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  font-family: inherit; font-size: var(--fs-13); font-weight: 600; color: var(--text-1);
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.fseg-btn:hover { border-color: var(--petroleo); }
.fseg-btn:focus-visible { outline: 3px solid var(--petroleo); outline-offset: 2px; }
.fseg-btn.active { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }
.fseg-n {
  font-size: var(--fs-11); font-weight: 700; padding: 1px 7px; border-radius: 99px;
  background: var(--border); color: var(--text-2);
}
.fseg-btn.active .fseg-n { background: rgba(255, 255, 255, .22); color: #fff; }

/* --- Fila de material (archivo o enlace) --- */
.mat-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 2px; border-bottom: 1px solid var(--border);
}
.mat-row:last-child { border-bottom: 0; }
.mat-ic {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
}
.mat-row .t { font-weight: 700; font-size: var(--fs-14); }
.mat-row .s { font-size: var(--fs-12); color: var(--text-3); display: block; }
.mat-row .btn { flex: none; align-self: center; }

/* --- Lista de definiciones (ficha de la materia) --- */
dl.def { display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: 8px 16px; margin: 0; }
dl.def dt { font-size: var(--fs-12); font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
dl.def dd { margin: 0; font-size: var(--fs-14); color: var(--text-1); }

@media (max-width: 640px) {
  /* En un celular, la etiqueta encima del dato en vez de al lado: con dos
     columnas, "Horario" empuja las tres líneas del horario a un canal de
     cuatro centímetros y se lee en vertical. */
  dl.def { grid-template-columns: 1fr; gap: 2px 0; }
  dl.def dd { margin-bottom: 8px; }
  .mat-row { flex-wrap: wrap; }
  .mat-row .btn { width: 100%; margin-top: 8px; }
}

/* ============================================================
   CUADRÍCULA SEMANAL DE HORARIOS (IDESUN OS 1.0)
   La tabla es la del papel de la puerta del salón: horas a la
   izquierda, días arriba. En pantallas angostas se desliza DENTRO
   de su propio marco — la página nunca se desborda de lado.
   ============================================================ */
.cua-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.cua { border-collapse: collapse; width: 100%; min-width: 760px; }
.cua th, .cua td { border: 1px solid var(--border); vertical-align: top; }
.cua thead th {
  position: sticky; top: 0; z-index: 2; background: var(--surface-2);
  font-family: var(--font-display); font-size: var(--fs-12); letter-spacing: .05em;
  text-transform: uppercase; padding: 10px 8px; text-align: left;
}
.cua th.hora {
  width: 72px; min-width: 72px; text-align: right; padding: 8px 10px;
  font-family: var(--font-display); font-size: var(--fs-13); background: var(--surface-2);
  position: sticky; left: 0; z-index: 1;
}
.cua th.hora span { font-weight: 400; color: var(--text-3); font-size: var(--fs-12); }
.cua td { padding: 4px; min-width: 128px; }
.cua-bloque {
  border-left: 4px solid var(--petroleo); border-radius: var(--r-sm);
  background: var(--surface-2); padding: 7px 9px; margin: 2px 0;
  display: flex; flex-direction: column; gap: 2px;
}
.cua-bloque b { font-size: var(--fs-13); line-height: 1.25; }
.cua-bloque span { font-size: var(--fs-12); color: var(--text-2); }
.cua-bloque .falta { color: var(--danger); font-weight: 700; }
.cua-bloque.encimado { outline: 2px solid var(--danger); outline-offset: -2px; }
.cua-aviso { border: 0; cursor: pointer; }
.chip-warn { background: var(--mostaza-100); color: #75530A; display: inline-flex; align-items: center; gap: 5px; }
.aviso-ok { display: flex; gap: 12px; align-items: flex-start; background: var(--verde-100); color: var(--verde-bosque); }
.aviso-ok > svg { flex: none; color: var(--verde); margin-top: 2px; }

/* ============================================================
   RELOJ INSTITUCIONAL (arriba a la derecha)
   La hora la manda el servidor en America/Mexico_City. Es solo
   informativo: ninguna decisión del sistema depende de él.
   ============================================================ */
.reloj {
  display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.15; padding-right: 4px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.reloj .r-fecha { font-size: 11px; color: var(--text-3); letter-spacing: .02em; }
.reloj .r-hora { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-15); color: var(--text); }
.content.exec ~ * .reloj .r-hora, .exec .reloj .r-hora { color: var(--text); }
/* En pantallas angostas la fecha estorba: se queda solo la hora, y por
   debajo de 380 px el reloj se retira para no comerse la navegación. */
@media (max-width: 767px) {
  .reloj .r-fecha { display: none; }
  .reloj .r-hora { font-size: var(--fs-13); }
}
/* Solo en las pantallas mas angostas (menos de 340 px) el reloj estorba
   de verdad; en un iPhone SE (375) la hora sola cabe bien y sirve. */
@media (max-width: 339px) { .reloj { display: none; } }

/* ============================================================
   PERSONALIZACIÓN — color de acento y foto de perfil

   --acento SOLO decora: encabezado del menú y el borde del avatar
   propio. Los colores que SIGNIFICAN algo (verde aprobado, ámbar por
   vencer, rojo adeudo o falta, botones peligrosos) NO se tocan aquí,
   a propósito: dos personas mirando la misma pantalla tienen que ver
   el mismo mensaje.
   ============================================================ */
.sidebar { background: linear-gradient(180deg, var(--acento, var(--petroleo-900)), var(--petroleo-800)); }
.side-user .avatar, .avatar-btn .avatar { box-shadow: 0 0 0 2px var(--acento, transparent); }

.pz-color {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--border); background: var(--surface);
  border-radius: var(--r-md); padding: 8px 14px; min-height: 44px;
  font-size: var(--fs-13); font-weight: 600; cursor: pointer;
}
.pz-color span { width: 18px; height: 18px; border-radius: 50%; display: inline-block; flex: none; }
.pz-color.sel { border-color: var(--petroleo); border-width: 2px; background: var(--petroleo-50); }
.pz-color:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 2px; }
/* La foto del menú, redonda y sin deformarse. */
.side-user img.foto, .avatar-btn img.foto { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

/* ============================================================
   SEGUIMIENTO DE ASISTENCIA — LEGIBLE EN LOS DOS TEMAS

   La fila «Sin registro» se pintaba con un fondo amarillo claro puesto
   en línea desde el JS. Sobre el tema blanco se leía; dentro del
   tablero oscuro de Dirección el texto de celda es claro, y quedaba
   texto claro sobre amarillo claro: no se podía leer ni el nombre de
   la materia. La regla es una: el fondo y la tinta se deciden JUNTOS,
   por tema, aquí — nunca uno en el CSS y el otro en el JS.

   Y el estado no depende solo del color: la fila lleva un borde
   izquierdo, el chip lleva un icono y la palabra «Sin registro».
   ============================================================ */
.dt tr.fila-sin-lista td { background: var(--mostaza-100); color: var(--tinta); }
.dt tr.fila-sin-lista td:first-child { box-shadow: inset 4px 0 0 var(--mostaza); }
.dt tr.fila-sin-lista td b, .dt tr.fila-sin-lista td .mini { color: var(--tinta); }
.n-presente { color: var(--verde); }
.n-retardo { color: #75530A; }
.n-falta { color: var(--danger); }
.n-justificado { color: var(--petroleo); }

/* Dentro del tablero oscuro: un velo amarillo tenue, tinta CLARA de
   alto contraste, y el mismo borde. Los chips de estado pasan a fondo
   sólido con tinta casi negra (≥ 7:1): amarillo con negro se lee de
   lejos; amarillo con blanco, no. */
.content.exec .dt tr.fila-sin-lista td { background: rgba(245,174,26,.13); color: #F2F7F5; }
.content.exec .dt tr.fila-sin-lista td b, .content.exec .dt tr.fila-sin-lista td .mini { color: #FFFFFF; }
.content.exec .dt tr.fila-sin-lista:hover td { background: rgba(245,174,26,.20); }
.content.exec .chip-mostaza, .content.exec .chip-warn { background: #F5AE1A; color: #1B1400; }
.content.exec .chip-verde { background: #7FD8A6; color: #04261A; }
.content.exec .chip-coral { background: #F1948A; color: #3A0C08; }
.content.exec .chip-petroleo { background: #7ED0C4; color: #052831; }
.content.exec .n-presente { color: #7FD8A6; }
.content.exec .n-retardo { color: #F5C866; }
.content.exec .n-falta { color: #F1948A; }
.content.exec .n-justificado { color: #7ED0C4; }
.content.exec .stat-card .mini { color: var(--ex-ink2); }
/* Un aviso de advertencia dentro del tablero oscuro: tinta clara sobre
   velo amarillo tenue, y el icono en amarillo pleno. Ya estaba así;
   se deja explícito junto a sus hermanos para que nadie lo separe. */
.content.exec .aviso-warn { color: #F2F7F5; }
.content.exec .aviso-warn b { color: #FFFFFF; }