/* ==============================================================================
   TOTALISYS COLLEGE — assets/css/vocacional.css
   ------------------------------------------------------------------------------
   Estilos del Test Vocacional (vocacionaltest/): el test público, el panel de
   orientadores y el panel del super-administrador.

   Se carga DESPUÉS de style.css y site.css (ver vocacionaltest/partials/layout.php)
   y reutiliza sus variables de marca (--tc-*). Todo lo propio del test queda
   escopado bajo la clase .voc para no alterar el sitio ni el menú/pie, que usan
   las clases tc-* del sitio principal. Reemplaza al <style> que traía el test
   (paleta índigo + modo oscuro) y a la constante CSS de api/config.php: el test
   ahora hereda la identidad de Totalisys y, como el sitio, solo tiene tema claro.
   ============================================================================== */

/* --- Variables del test, derivadas de la paleta de la marca ------------------ */
.voc {
    --bg:   var(--tc-paper);
    --card: var(--tc-white);
    --tx:   var(--tc-ink);
    --mu:   var(--tc-ink-soft);
    --pr:   var(--tc-blue);
    --bd:   var(--tc-line);
    --bar:  #e1ebe8;
    font-family: var(--tc-font-body);
    color: var(--tx);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.voc *, .voc *::before, .voc *::after { box-sizing: border-box; }

/* Contenedor central: 640px para el test (lectura cómoda en celular), 1100px en paneles. */
.voc-main { max-width: 640px; margin: 0 auto; padding: 28px 16px 56px; }
.voc-main.voc-ancho { max-width: 1100px; }

/* --- Menú: que quepan Inicio / Precios / Test / Solicitar en pantallas angostas -- */
.voc-nav .tc-nav-links {
    /* style.css, en móvil, convierte .tc-nav-links en un panel a pantalla completa (position:fixed,
       height:100vh) que solo se muestra con el botón hamburguesa + main.js. Esta página no carga
       main.js, así que se deja el menú como una fila normal y se anulan esas propiedades. */
    display: flex; position: static; height: auto; top: auto; overflow: visible; z-index: auto;
    background: transparent; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: flex-end;
}
@media (max-width: 640px) {
    .voc-nav .tc-nav-inner { flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
    .voc-nav .tc-nav-links { gap: 12px 16px; width: 100%; justify-content: flex-start; padding: 0; }
    .voc-nav .tc-nav-links a { font-size: 0.88rem; }
}

/* Botón "Solicitar licencia" del menú: texto blanco (la regla .tc-nav-links a lo dejaba oscuro sobre el degradado). */
.voc-nav .tc-nav-links a.tc-btn { color: var(--tc-white); }
/* Eslogan del pie: contraste legible sobre el azul oscuro. */
.tc-footer .tc-footer-tagline { color: rgba(255,255,255,0.7); }

/* --- Franja de título bajo el menú (degradado del logo) ----------------------- */
.voc-hero { background: var(--tc-gradient); color: var(--tc-white); }
.voc-hero-in { max-width: 1100px; margin: 0 auto; padding: 34px 24px; }
.voc-hero-in.voc-estrecha { max-width: 640px; padding-left: 16px; padding-right: 16px; }   /* alinea la franja con el test (640px + 16px de margen) */
.voc-hero h1 { color: var(--tc-white); margin: 0 0 6px; font-size: clamp(1.4rem, 3.2vw, 2rem); }
.voc-hero p { color: rgba(255,255,255,0.88); margin: 0; max-width: 720px; }

/* --- Tipografía y elementos base dentro del test ----------------------------- */
.voc h1 { font-size: 1.5rem; margin: 0 0 8px; }
.voc h2 { font-size: 1.15rem; margin: 0 0 8px; }
.voc h3 { font-size: 1rem; margin: 14px 0 6px; }
.voc p  { margin: 0 0 12px; color: var(--mu); }
.voc small { color: var(--mu); }
.voc a  { color: var(--tc-blue); }
.voc ul { margin: 6px 0 0; padding-left: 20px; color: var(--tx); }
.voc label { font-size: 13px; color: var(--mu); display: block; margin-bottom: 3px; font-weight: 500; }
.voc button { font: inherit; cursor: pointer; }

/* Campos de formulario (test, panel y admin). */
.voc input, .voc select {
    font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bd);
    background: var(--tc-white); color: var(--tx); max-width: 100%;
}
.voc #app input { width: 100%; font-size: 1rem; margin-bottom: 12px; }   /* campos grandes del test del estudiante */

/* --- Tarjetas: .card (test del estudiante) y .c (paneles) --------------------- */
.voc .card, .voc .c {
    background: var(--card); border: 1px solid var(--bd); border-radius: var(--tc-radius);
    padding: 20px; margin-bottom: 14px; box-shadow: 0 1px 0 rgba(15,40,72,0.02);
}
.voc .c.ok { color: #146c4f; background: var(--tc-mint-soft); border-color: #bfe5d4; }
.voc .c.er, .voc .er { color: #b3261e; }
.voc .c.er { background: #fdecea; border-color: #f4c7c3; }
.voc .ok { color: #146c4f; }

/* --- Botones ------------------------------------------------------------------ */
.voc button, .voc .b {
    background: var(--tc-blue); color: var(--tc-white); border: 0; text-decoration: none;
    padding: 9px 16px; border-radius: 10px; display: inline-block; font-weight: 600; font-size: 0.92rem;
}
.voc button:hover, .voc .b:hover { background: var(--tc-blue-soft); }
.voc .r { background: #c62828; }
.voc .r:hover { background: #a61f1f; }
.voc .s { background: #6b7280; }
/* Botón-icono de acciones en tablas (p. ej. ✉️ reenviar informe): compacto; con .r se pinta rojo si el envío está pendiente. */
.voc button.ico { padding: 3px 8px; font-size: 0.95rem; line-height: 1.2; background: #6b7280; }
.voc button.ico.r { background: #c62828; }
.voc .s:hover { background: #4b5563; }
/* Botón principal del test del estudiante (degradado de marca, ancho completo). */
.voc .main { background: var(--tc-gradient); color: #fff; border: 0; border-radius: 12px; padding: 14px 20px; font-weight: 600; width: 100%; font-size: 1rem; }
.voc .main:hover { filter: brightness(1.06); background: var(--tc-gradient); }
.voc .ghost { background: none; border: 1px solid var(--bd); color: var(--tx); border-radius: 12px; padding: 10px 16px; margin-top: 8px; width: 100%; }
.voc .ghost:hover { border-color: var(--tc-blue); background: none; }

/* --- Test del estudiante: progreso, preguntas, opciones y resultados ---------- */
.voc .prog { height: 8px; background: var(--bar); border-radius: 8px; overflow: hidden; margin-bottom: 6px; }
.voc .prog i { display: block; height: 100%; background: var(--tc-gradient); transition: width .25s; }
.voc .tag { display: inline-block; font-size: .75rem; padding: 2px 10px; border-radius: 20px; background: var(--tc-mint-soft); color: var(--tc-teal); margin-bottom: 10px; font-weight: 600; }
.voc .q { font-size: 1.2rem; font-weight: 600; margin: 0 0 16px; color: var(--tx); font-family: var(--tc-font-display); }
.voc .opt { display: block; width: 100%; text-align: left; padding: 13px 14px; margin-bottom: 8px; border: 1px solid var(--bd); border-radius: 12px; background: var(--tc-white); color: var(--tx); font-weight: 500; }
.voc .opt:hover, .voc .opt:active { border-color: var(--tc-teal); background: var(--tc-mint-soft); }
.voc .row { margin-bottom: 14px; }
.voc .row b { display: flex; justify-content: space-between; font-size: .95rem; }
.voc .bar { height: 12px; background: var(--bar); border-radius: 8px; overflow: hidden; margin-top: 4px; }
.voc .bar i { display: block; height: 100%; border-radius: 8px; background: var(--tc-gradient); }   /* el test fija su color inline por área */
.voc .top { border-color: var(--tc-teal); }

/* --- Paneles: tablas, rejillas y navegación interna --------------------------- */
.voc .w { overflow-x: auto; }
.voc table { width: 100%; border-collapse: collapse; }
.voc th, .voc td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--bd); font-size: 14px; vertical-align: middle; }
.voc th { color: var(--tc-navy); font-family: var(--tc-font-display); font-size: 13px; }
.voc .g { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.voc nav a { margin-right: 16px; text-decoration: none; font-weight: 500; }
.voc nav a:hover { text-decoration: underline; }
.voc details > summary { cursor: pointer; }

/* --- Portada pública del test (sin código de enlace) -------------------------- */
.voc .voc-pasos { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.voc .voc-pasos li { display: flex; gap: 12px; align-items: flex-start; color: var(--tx); }
.voc .voc-pasos li > b { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--tc-gradient); color: #fff; display: grid; place-items: center; font-size: 0.85rem; }
.voc .voc-aviso { font-size: 0.85rem; color: var(--mu); }

@media print { .voc .noprint { display: none; } .tc-nav, .tc-footer, .voc-hero { display: none; } }