*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --ink: #17162a; --sub: #55506f; --line: #e0ddee;
    --bg: #f5f4fa; --card: #ffffff;
    --violet-50:#F1EEFC; --violet-100:#DAD3F7; --violet-400:#7C5CE0; --violet-600:#5B3FC0; --violet-800:#3C298A;
    --teal-50:#E4F7F2; --teal-400:#1FA98A; --teal-600:#0E7A62;
    --amber-50:#FDF2E1; --amber-400:#E0A22C; --amber-600:#8a611a;
    --red-50:#FCE9E9; --red-400:#DD5252; --red-600:#A32D2D;
    --green-50:#E7F7EA; --green-400:#3CB458; --green-600:#227A38;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --sp: 4px; /* línea base de espaciado: 4px, 8px, 12px, 16px, 24px... */
  }
  body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; min-height: 100vh; }

  #login-screen, #portal-gate {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: linear-gradient(160deg, rgba(29,20,64,.55), rgba(11,58,58,.55)), url('/static/images/login-bg.jpg');
    background-size: cover; background-position: center;
  }
  .login-card {
    background: rgba(255,255,255,0.96); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.6); border-radius: 16px; padding: 40px 36px;
    width: 100%; max-width: 380px; box-shadow: 0 24px 60px rgba(10,8,30,0.35);
  }
  .login-escudo { display: block; width: 84px; height: 84px; object-fit: contain; margin: 0 auto 14px; border-radius: 12px; }
  .login-kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--violet-600); margin-bottom: 10px; text-align: center; }
  .login-card h1 { font-size: 23px; font-weight: 800; margin-bottom: 6px; letter-spacing: -.01em; text-align: center; }
  .login-card p { font-size: 14px; color: var(--sub); margin-bottom: 24px; text-align: center; }
  .login-card input { width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-size: 16px; margin-bottom: 12px; outline: none; font-family: var(--font); }
  .login-card input:focus { border-color: var(--violet-400); box-shadow: 0 0 0 3px var(--violet-50); }
  .login-card button { width: 100%; background: var(--violet-600); color: white; border: none; border-radius: 8px; padding: 13px; font-weight: 700; font-size: 16px; cursor: pointer; font-family: var(--font); letter-spacing: .01em; }
  .login-card button:hover { background: var(--violet-800); }
  .login-err { color: var(--red-600); font-size: 14px; margin-top: 10px; min-height: 18px; }
  .pass-match-msg { font-size: 12.5px; margin-top: 4px; margin-bottom: 4px; min-height: 16px; font-weight: 600; }
  .pass-match-msg.ok { color: var(--teal-600); }
  .pass-match-msg.err { color: var(--red-600); }
  .login-err.ok { color: var(--teal-600); }
  .login-card button.login-link { width: auto; display: block; margin: 16px auto 0; background: none; color: var(--violet-600); font-weight: 600; font-size: 13.5px; padding: 6px 10px; box-shadow: none; }
  .login-card button.login-link:hover { background: var(--violet-50); }

  header { background: var(--card); border-bottom: 1px solid var(--line); padding: 0 26px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 4px rgba(0,0,0,0.05); flex-wrap: wrap; gap: 10px; min-width: 0; }
  .brand { display: flex; align-items: center; gap: 14px; padding: 16px 0; }
  .brand-icon { width: 40px; height: 40px; background: var(--violet-600); border-radius: 9px; display: flex; align-items: center; justify-content: center; color: white; font-size: 19px; flex-shrink: 0; }
  .brand h1 { font-size: 17px; font-weight: 700; line-height: 1.25; }
  .brand p { font-size: 13px; color: var(--sub); }
  .hdr-actions { display: flex; gap: 8px; align-items: center; padding: 10px 0; }
  .hbtn { padding: 8px 15px; border-radius: 8px; border: 1px solid var(--line); background: white; color: var(--sub); cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 600; }
  .hbtn:hover { border-color: var(--violet-100); color: var(--violet-600); background: var(--violet-50); }

  /* ── Sidebar vertical (menú principal) ── */
  #app { display: flex; min-height: 100vh; }
  .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: 64px; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 64px; z-index: 500;
    display: flex; flex-direction: column; align-items: stretch;
    background: rgba(30,41,59,.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid rgba(255,255,255,.08);
    transition: width .28s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
  }
  .sidebar.expanded { width: 244px; box-shadow: 6px 0 30px rgba(0,0,0,.35); }
  .hamburger-btn { position: fixed; top: 0; left: 0; width: 64px; height: 54px; z-index: 600; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: transparent; border: none; cursor: pointer; }
  .hamburger-btn span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .2s; }
  .hamburger-btn.expanded span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger-btn.expanded span:nth-child(2) { opacity: 0; }
  .hamburger-btn.expanded span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 54px 14px 16px; flex: none; }
  .sidebar-escudo { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; flex: none; }
  .sidebar-wordmark { height: 22px; width: auto; object-fit: contain; opacity: 0; transition: opacity .15s; filter: brightness(0) invert(1); }
  .sidebar.expanded .sidebar-wordmark { opacity: .92; transition-delay: .1s; }
  .sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding-bottom: 12px; }
  .sidebar-section { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }
  .sidebar-sep { height: 1px; background: rgba(255,255,255,.1); margin: 12px 14px; flex: none; }
  .sidebar-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; white-space: nowrap; cursor: pointer; color: rgba(255,255,255,.72); background: transparent; border: none; border-radius: 8px; font-family: var(--font); font-size: 13.5px; font-weight: 600; text-align: left; width: 100%; }
  .sidebar-item:hover { background: rgba(255,255,255,.08); color: #fff; }
  .sidebar-item.active { background: rgba(124,92,255,.28); color: #fff; }
  .si-icon { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10.5px; font-weight: 800; flex: none; }
  .si-icon-img { background: rgba(255,255,255,.92); border-radius: 7px; padding: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.5); }
  .si-icon-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }
  .si-label { opacity: 0; transition: opacity .12s; overflow: hidden; text-overflow: ellipsis; }
  .sidebar.expanded .si-label { opacity: 1; transition-delay: .1s; }
  @media (max-width: 700px) {
    .app-main { margin-left: 0; }
    .sidebar { width: 0; border-right: none; }
    .sidebar.expanded { width: 82vw; max-width: 280px; }
    .hamburger-btn { top: 10px; left: 10px; width: 44px; height: 44px; background: rgba(30,41,59,.9); border-radius: 10px; backdrop-filter: blur(8px); }
    header { padding-left: 62px; }
  }

  .tabs-bar { background: var(--card); border-bottom: 1px solid var(--line); padding: 0 26px; display: flex; gap: 4px; overflow-x: auto; align-items: center; }
  .tab { padding: 13px 16px; border: none; background: none; cursor: pointer; font-family: var(--font); font-size: 15px; font-weight: 600; color: var(--sub); white-space: nowrap; border-bottom: 3px solid transparent; }
  .tab:hover { color: var(--ink); }
  .tab.active { color: var(--violet-600); border-bottom-color: var(--violet-600); }
  .tab.workspace-tab { font-size: 14px; }
  .tab-sep { width: 1px; height: 22px; background: var(--line); margin: 0 6px; flex-shrink: 0; }

  main { width: 100%; max-width: 1080px; margin: 0 auto; padding: 24px 22px 70px; min-width: 0; }
  .workspace-tabs-bar { margin: -24px -22px 22px; padding: 0 22px; position: sticky; top: 0; z-index: 90; background: var(--card); border-bottom: 1px solid var(--line); }
  .panel { display: none; }
  .panel.active { display: block; }

  .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
  select, input[type=text], input[type=password], input[type=number], input[type=date], input[type=datetime-local], input[type=email], textarea {
    background: white; border: 1px solid var(--line); border-radius: 8px; color: var(--ink);
    padding: 10px 12px; font-family: var(--font); font-size: 16px; outline: none;
    /* 16px, no 15px: bajo eso Safari en iOS hace zoom automático al enfocar el campo */
  }
  select:focus, input:focus, textarea:focus { border-color: var(--violet-400); box-shadow: 0 0 0 3px var(--violet-50); }
  label.f-label { display: block; font-size: 13.5px; font-weight: 500; color: var(--sub); text-transform: none; letter-spacing: normal; margin-bottom: 6px; }
  .hint { font-size: 14px; color: var(--sub); margin-bottom: 12px; line-height: 1.5; }
  .autosave-error { color: var(--red-600); font-weight: 600; }

  .card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; margin-bottom: 16px; }
  .gdocs-card { max-width: 640px; margin-left: auto; margin-right: auto; }
  .gdocs-aviso { margin-top: 14px; background: var(--amber-50); border: 1px solid var(--amber-400); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; color: var(--amber-600); }
  .gdocs-guardado { margin-top: 10px; color: var(--teal-600); font-weight: 700; font-size: 14px; }
  .gdocs-preview-wrap { margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg); }
  .gdocs-preview { width: 100%; height: 480px; border: none; display: block; }
  @media (max-width: 700px) { .gdocs-preview { height: 340px; } }
  .ia-analisis-doc { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--indigo-50, #EEF2FF); border: 1px dashed var(--indigo-400, #818CF8); }
  .ia-analisis-doc-top { font-size: 13.5px; font-weight: 600; }
  .ia-pct-input { width: 100%; }
  .ia-analisis-doc-portal { border-color: var(--indigo-400, #818CF8); }
  .ia-analisis-pct { font-size: 34px; font-weight: 800; color: var(--indigo-600, #4F46E5); margin-top: 6px; }
  .resumen-ia-row { cursor: pointer; }
  .resumen-ia-row:hover { background: var(--bg); }
  .resumen-ia-chevron { width: 20px; text-align: right; color: var(--sub); }
  .resumen-ia-detalle td { background: var(--bg); font-size: 13.5px; color: var(--sub); line-height: 1.5; padding: 10px 14px; }
  .resumen-ia-detalle p { margin: 0; }
  .card-collapsible { padding: 0; overflow: hidden; }
  .card-collapsible > summary { padding: 16px 22px; cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; display: flex; align-items: center; justify-content: space-between; }
  .card-collapsible > summary::-webkit-details-marker { display: none; }
  .card-collapsible > summary::after { content: '▸'; font-weight: 400; color: var(--sub); transition: transform .15s; }
  .card-collapsible[open] > summary::after { transform: rotate(90deg); }
  .card-collapsible[open] > summary { border-bottom: 1px solid var(--line); }
  .card-collapsible > .card-collapsible-body { padding: 18px 22px 20px; }
  .card h3 { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
  .btn { padding: 10px 18px; min-height: 44px; border-radius: 8px; border: 1px solid var(--line); background: white; color: var(--sub); cursor: pointer; font-family: var(--font); font-size: 15px; font-weight: 600; }
  .btn:hover { border-color: var(--violet-100); color: var(--violet-600); background: var(--violet-50); }
  .btn.primary { background: var(--violet-600); color: white; border-color: var(--violet-600); }
  .btn.primary:hover { background: var(--violet-800); }
  .btn.danger { color: var(--red-600); border-color: transparent; background: transparent; }
  .btn.danger:hover { background: var(--red-50); }
  .btn.small { padding: 7px 12px; min-height: 38px; font-size: 13.5px; }
  .btn:disabled { opacity: .5; cursor: not-allowed; }
  /* Área táctil mínima recomendada (44px) en el portal de estudiantes, mayoritariamente usado desde celular */
  #portal .btn, #portal .tab, #colega .btn, #colega .tab { min-height: 44px; }

  table { width: 100%; border-collapse: collapse; font-size: 15px; }
  th, td { text-align: left; padding: 10px 10px; border-bottom: 1px solid var(--line); }
  .td-integrantes { padding: 16px !important; line-height: 1.6; }
  .td-integrantes div { padding: 1px 0; }
  th { color: var(--sub); font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; }

  /* Tablas -> tarjetas apiladas en pantallas angostas (celular). Requiere que cada <td> tenga
     data-label="..." con el nombre de columna; si no lo tiene, la celda simplemente no muestra
     etiqueta pero sigue siendo legible. */
  @media (max-width: 700px) {
    table.table-responsive thead { display: none; }
    table.table-responsive, table.table-responsive tbody, table.table-responsive tr, table.table-responsive td { display: block; width: 100%; }
    table.table-responsive tr { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; padding: 4px 12px; }
    table.table-responsive td { border-bottom: none; padding: 8px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
    table.table-responsive td:before { content: attr(data-label); font-size: 12px; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: 0.4px; text-align: left; }
    table.table-responsive td:not([data-label]) { justify-content: flex-start; }
  }

  .pill { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 20px; font-size: 13px; font-weight: 700; }
  .pill-menor { background: var(--teal-50); color: var(--teal-600); }
  .pill-mayor { background: var(--red-50); color: var(--red-600); }
  .pill-neutro { background: var(--violet-50); color: var(--violet-800); }
  .pill-pendiente { background: var(--amber-50); color: var(--amber-600); }
  .pill-entregado { background: var(--teal-50); color: var(--teal-600); }
  .pill-atrasado { background: var(--red-50); color: var(--red-600); }

  /* dashboard de proyectos */
  .dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
  .proyecto-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
  .proyecto-card-archivado { opacity: .65; background: var(--bg); }
  .pc-nombre { font-size: 17px; font-weight: 700; }
  .pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
  .pc-editar { flex: none; border: 1px solid var(--line); background: white; color: var(--sub); border-radius: 7px; width: 28px; height: 28px; cursor: pointer; font-size: 13px; }
  .pc-editar:hover { border-color: var(--violet-400); color: var(--violet-600); }
  .pc-cursos { display: flex; flex-wrap: wrap; gap: 6px; }
  .pill-curso { background: var(--teal-50); color: var(--teal-600); }
  .pc-meta { font-size: 14px; color: var(--sub); }

  /* buscador multi-select para integrantes de grupo */
  .ms-wrap { position: relative; margin-bottom: 12px; }
  .ms-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
  .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--violet-50); color: var(--violet-800); border: 1px solid var(--violet-100); border-radius: 20px; padding: 6px 8px 6px 14px; font-size: 14px; font-weight: 600; }
  .chip button { background: none; border: none; color: var(--violet-600); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 50%; }
  .chip button:hover { background: var(--violet-100); }
  .ms-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); max-height: 260px; overflow-y: auto; z-index: 20; display: none; margin-top: 4px; }
  .ms-dropdown.show { display: block; }
  .ms-option { padding: 10px 14px; font-size: 15px; cursor: pointer; }
  .ms-option:hover { background: var(--violet-50); }
  .ms-empty { padding: 10px 14px; font-size: 14px; color: var(--sub); }

  /* checklist de alumnos por curso (grupos entre cursos) */
  .checklist { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 6px; }
  .checklist label { display: flex; align-items: center; gap: 8px; font-size: 14.5px; padding: 4px 0; cursor: pointer; }

  .grupos-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
  .grupo-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; transition: box-shadow .15s, border-color .15s; }
  .grupo-card-abierto { border-color: var(--violet-400); box-shadow: 0 4px 16px rgba(91,63,192,.1); }
  .grupo-header { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--card); border: none; border-left: 4px solid var(--line); padding: 12px 14px; cursor: pointer; font-family: var(--font); }
  .grupo-header:hover { background: var(--bg); }
  .grupo-avatar { flex: none; width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 800; font-size: 12.5px; }
  .grupo-header-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .grupo-header-top { display: flex; align-items: center; gap: 8px; }
  .grupo-num { font-weight: 700; font-size: 15px; }
  .grupo-header-sub { font-size: 13px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .grupo-header-tema { font-size: 12.5px; color: var(--violet-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .grupo-chevron { flex: none; color: var(--sub); font-size: 13px; }
  .grupo-body { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
  .grupo-integ { font-size: 14px; color: var(--sub); margin-top: 10px; }

  /* submenu de grupos en Evaluar / Eval Flash */
  .evaluar-layout { display: flex; gap: 18px; align-items: flex-start; }
  .grupo-menu { width: 240px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
  .grupo-menu-item { display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; font-family: var(--font); }
  .grupo-menu-item:hover { border-color: var(--violet-100); }
  .grupo-menu-item.active { border-color: var(--violet-400); background: var(--violet-50); box-shadow: 0 0 0 1px var(--violet-400); }
  .gm-num { font-weight: 700; font-size: 15px; }
  .gm-integ { font-size: 13.5px; color: var(--sub); margin-top: 2px; }
  .gm-tema { font-size: 13px; color: var(--violet-600); font-weight: 600; margin-top: 4px; }
  .evaluar-body { flex: 1; min-width: 0; }
  @media (max-width: 720px) { .evaluar-layout { flex-direction: column; } .grupo-menu { width: 100%; flex-direction: row; flex-wrap: wrap; } .grupo-menu-item { width: auto; flex: 1 1 200px; } }
  .pie-est-row { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .pie-est-row:last-child { border-bottom: none; }

  .btn.ghost { background: transparent; color: var(--sub); border-color: var(--line); }
  .btn.ghost:hover { background: var(--bg); }
  .ia-sugerencia { margin: 4px 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--indigo-50, #EEF2FF); border: 1px dashed var(--indigo-400, #818CF8); }
  .ia-sugerencia-top { font-size: 13.5px; font-weight: 600; }
  .ia-sugerencia-comentario { font-size: 13px; color: var(--sub); margin-top: 4px; line-height: 1.4; }
  .ia-sugerencia-acciones { display: flex; gap: 8px; margin-top: 8px; }

  .eje-card { border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 10px; }
  .eje-top { display: flex; justify-content: space-between; margin-bottom: 10px; }
  .eje-nom { font-weight: 700; font-size: 16px; }
  .eje-pond { font-size: 14px; color: var(--sub); font-weight: 600; }
  .rubrica-nivel-row { padding: 8px 0; border-top: 1px solid var(--line); }
  .rubrica-nivel-row:first-of-type { border-top: none; }
  .rubrica-nivel-row p { margin: 4px 0 0; font-size: 13.5px; color: var(--sub); line-height: 1.5; }
  .nivel-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
  .nbtn { padding: 8px 15px; border-radius: 20px; border: 1.5px solid var(--line); background: white; color: var(--sub); cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 600; text-align: left; max-width: 280px; }
  .rbtn { padding: 8px 15px; border-radius: 20px; border: 1.5px solid var(--line); background: white; color: var(--sub); cursor: pointer; font-family: var(--font); font-size: 14px; font-weight: 600; text-align: left; }
  .rbtn.rbtn-selected { border-color: var(--violet-600); background: var(--violet-50); color: var(--violet-600); }
  .nbtn:hover { border-color: var(--violet-100); }
  .nbtn.sel-logrado { background: var(--teal-50); border-color: var(--teal-400); color: var(--teal-600); }
  .nbtn.sel-medio { background: var(--amber-50); border-color: var(--amber-400); color: var(--amber-600); }
  .nbtn.sel-no_logrado { background: var(--red-50); border-color: var(--red-400); color: var(--red-600); }
  .nbtn.sel-active { background: var(--violet-50); border-color: var(--violet-400); color: var(--violet-800); }

  .total-card { background: var(--violet-50); border: 1px solid var(--violet-100); border-radius: 12px; padding: 18px 22px; margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; text-align: center; }
  .total-metric .tm-label { font-size: 12px; font-weight: 700; color: var(--violet-800); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; }
  .total-metric .tm-val { font-size: 26px; font-weight: 700; color: var(--violet-800); }

  /* eval flash */
  .btn-flash { flex: 1 1 160px; min-height: 68px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; font-family: var(--font); font-size: 15px; font-weight: 700; color: white; }
  .flash-red { background: var(--red-400); }
  .flash-red:hover { background: var(--red-600); }
  .flash-yellow { background: var(--amber-400); }
  .flash-yellow:hover { background: var(--amber-600); }
  .flash-green { background: var(--green-400); }
  .flash-green:hover { background: var(--green-600); }
  .flash-log-item { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .flash-log-item:last-child { border-bottom: none; }
  .flash-log-item.active { background: var(--violet-50, #f2effc); border-radius: 8px; padding-left: 10px; padding-right: 10px; }
  .flash-log-fecha { color: var(--sub); font-size: 13px; }
  .flash-log-obs { flex-basis: 100%; color: var(--sub); font-size: 13.5px; margin-top: 2px; }
  .comentarios-campo { margin-top: 6px; margin-bottom: 4px; }
  .comentario-item { background: var(--amber-50); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; margin-top: 6px; }
  .comentario-item div { margin-top: 2px; }
  .campo-solo-lectura { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: 14.5px; margin-top: 4px; white-space: pre-wrap; }

  /* editor de niveles dinámicos */
  .nivel-edit-row-nuevo { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 10px; }

  #bug-report-widget { position: fixed; bottom: 20px; right: 20px; z-index: 800; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
  #bug-report-toggle { width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--amber-400, #E0A22C); color: white; font-size: 18px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.22); }
  #bug-report-toggle:hover { background: var(--amber-600, #8a611a); }
  #bug-report-panel { width: 280px; max-width: calc(100vw - 40px); background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(10,8,30,.28); padding: 14px 16px; }
  #bug-report-panel h4 { margin: 0 0 4px; font-size: 15px; }
  #bug-report-panel textarea { width: 100%; margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-family: var(--font); font-size: 14px; resize: vertical; }
  #bug-report-panel button { margin-top: 8px; width: 100%; }
  @media (max-width: 700px) { #bug-report-widget { bottom: 14px; right: 14px; } }

  #toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--ink); color: white; padding: 12px 22px; border-radius: 8px; font-size: 15px; font-weight: 500; z-index: 9999; transition: transform .25s, opacity .25s; opacity: 0; pointer-events: none; }
  #toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
  #toast.err { background: var(--red-600); }

  .empty { color: var(--sub); font-size: 14px; padding: 22px 0; text-align: center; }
  .hidden { display: none !important; }

  #boot-loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--bg); color: var(--sub); font-size: 15px; z-index: 500; }
  .boot-spinner { width: 34px; height: 34px; border: 3px solid var(--violet-100); border-top-color: var(--violet-600); border-radius: 50%; animation: boot-spin .7s linear infinite; }
  @keyframes boot-spin { to { transform: rotate(360deg); } }
  #boot-error { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); z-index: 500; padding: 20px; }
  #boot-error .login-card { text-align: center; }
  #boot-error button { width: 100%; margin-top: 14px; }

  #modo-prueba-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 600; background: var(--amber-600, #b45309); color: white; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 16px; font-size: 14px; font-weight: 600; flex-wrap: wrap; text-align: center; }
  #modo-prueba-banner button { background: white; color: var(--amber-600, #b45309); border: none; border-radius: 6px; padding: 6px 14px; font-weight: 700; cursor: pointer; }
  body:has(#modo-prueba-banner:not(.hidden)) header { margin-top: 44px; }

  /* ── Calendario visual: grilla mes (escritorio) + agenda (móvil) ── */
  .cal-grid-wrap { display: block; }
  .cal-agenda-wrap { display: none; }
  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .cal-dow { text-align: center; font-size: 12px; font-weight: 700; color: var(--sub); text-transform: uppercase; letter-spacing: .4px; padding-bottom: 4px; }
  .cal-dia { height: 106px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: var(--card); display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
  .cal-dia-vacio { border: none; background: transparent; }
  .cal-dia-hoy { border-color: var(--violet-400); box-shadow: 0 0 0 2px var(--violet-100); }
  .cal-dia-clickable { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
  .cal-dia-clickable:hover { border-color: var(--violet-400); box-shadow: 0 0 0 2px var(--violet-100); }
  .cal-dia-top { display: flex; align-items: center; justify-content: space-between; }
  .cal-dia-num { font-size: 13px; font-weight: 700; color: var(--sub); }
  .cal-dia-hoy .cal-dia-num { color: var(--violet-600); }
  .cal-add-btn { width: 20px; height: 20px; line-height: 1; border-radius: 50%; border: 1px solid var(--line); background: white; color: var(--sub); cursor: pointer; font-size: 14px; padding: 0; flex: none; }
  .cal-add-btn:hover { border-color: var(--violet-400); color: var(--violet-600); }
  .cal-dia-marcas { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
  .cal-marca { font-size: 10.5px; line-height: 1.3; padding: 2px 5px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
  .cal-marca-clase { background: var(--line); color: var(--sub); }
  .cal-marca-entrega { background: var(--red-50); color: var(--red-600); }
  .cal-marca-hito { background: var(--violet-50); color: var(--violet-600); }
  .cal-marca-evaluacion { background: var(--amber-50); color: var(--amber-600); }
  .cal-marca-mas { background: transparent; color: var(--violet-600); font-weight: 700; padding: 2px 5px 0; }
  .cal-popover {
    position: fixed; z-index: 700; width: 260px; max-height: 320px; overflow: auto;
    background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.6); border-radius: 12px; box-shadow: 0 14px 40px rgba(10,8,30,.28);
    padding: 12px 14px; animation: calPopIn .12s ease-out;
  }
  @keyframes calPopIn { from { opacity:0; transform: translateY(-4px); } to { opacity:1; transform: translateY(0); } }
  .cal-pop-fecha { font-size: 13px; font-weight: 700; text-transform: capitalize; margin-bottom: 8px; color: var(--ink); }
  .cal-pop-lista { display: flex; flex-direction: column; gap: 8px; }
  .cal-pop-item { display: flex; align-items: center; gap: 8px; }
  .cal-pop-item .cal-marca { flex: none; white-space: nowrap; }
  .cal-pop-titulo { font-size: 12.5px; flex: 1; word-break: break-word; }
  .cal-pop-del { flex: none; border: none; background: transparent; color: var(--red-600); font-size: 16px; cursor: pointer; line-height: 1; padding: 2px 4px; }
  .cal-pop-del:hover { background: var(--red-50); border-radius: 6px; }
  .cal-agenda-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
  .cal-agenda-item:last-child { border-bottom: none; }
  .cal-agenda-fecha { font-size: 13px; color: var(--sub); font-weight: 600; white-space: nowrap; text-transform: capitalize; }
  .cal-agenda-hoy { background: var(--violet-50); border-radius: 8px; }
  .cal-agenda-titulo { font-size: 14px; text-align: right; }
  @media (max-width: 700px) {
    .cal-grid-wrap { display: none; }
    .cal-agenda-wrap { display: block; }
  }
  @media (max-width: 640px) { .total-card { grid-template-columns: 1fr; gap: 12px; } th:nth-child(n+4), td:nth-child(n+4) { display: none; } }