/* ==============================================================================
   TOTALISYS COLLEGE — assets/css/preicfes.css
   ------------------------------------------------------------------------------
   Estilos de Pre-ICFES (carpeta preicfes/): la prueba pública del estudiante, el
   panel de instituciones y el panel del super-administrador.

   Se carga DESPUÉS de style.css y site.css (ver preicfes/partials/layout.php) y
   reutiliza sus variables de marca (--tc-*). Todo lo propio queda escopado bajo la
   clase .voc para no alterar el sitio ni el menú/pie (clases tc-* del sitio).
   Es una copia independiente de vocacional.css (a propósito: cada sistema se puede
   subir o quitar sin afectar al otro) más los estilos de la prueba (.pic-*) al final.
   ============================================================================== */

/* --- 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; } }

/* ==============================================================================
   PRE-ICFES — estilos propios (prefijo .pic-). Todo bajo .voc; los botones de la
   prueba anulan la regla genérica ".voc button" (relleno azul) a propósito.
   ============================================================================== */
.voc .pic-card { background: var(--card); border: 1px solid var(--bd); border-radius: 16px; padding: 22px 22px; margin: 0 0 18px; box-shadow: 0 1px 2px rgba(20,35,63,.04); }
.voc .pic-h1 { font-size: 1.6rem; margin: 0 0 4px; }
.voc .pic-eyebrow { color: var(--mu); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 4px; }
.voc .pic-sub { color: var(--mu); margin: 4px 0 12px; }
.voc .pic-nota { color: var(--mu); font-size: .85rem; line-height: 1.5; }
.voc .pic-aviso { background: #fff6e0; border: 1px solid #f0d58a; border-radius: 10px; padding: 10px 12px; font-size: .9rem; }
.voc .pic-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 10px 0; }
.voc .pic-chips li { background: #eaf3fb; color: var(--tc-navy); border-radius: 999px; padding: 4px 12px; font-size: .85rem; font-weight: 600; }
.voc .pic-reglas { padding-left: 20px; color: var(--mu); font-size: .92rem; line-height: 1.55; }
.voc .pic-form { margin-top: 18px; border-top: 1px solid var(--bd); padding-top: 14px; }
.voc .pic-form input[type=text], .voc .pic-form input:not([type=checkbox]) { width: 100%; font-size: 1rem; margin-bottom: 10px; }
.voc .pic-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .voc .pic-fila { grid-template-columns: 1fr; } }
.voc .pic-chk { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; line-height: 1.45; color: var(--tx); margin: 4px 0 10px; }
.voc .pic-chk input { flex: none; margin-top: 3px; width: auto; }
.voc .pic-chk2 { display: inline-flex; gap: 6px; align-items: center; margin: 0 14px 6px 0; font-size: .9rem; color: var(--tx); }
.voc .pic-chk2 input { width: auto; }
.voc .pic-err { color: #b3261e; min-height: 1.2em; font-size: .9rem; margin: 4px 0 8px; }
.voc .pic-go { width: 100%; padding: 14px; font-size: 1.05rem; border-radius: 12px; }

/* --- Prueba ------------------------------------------------------------------ */
.voc .pic-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--bd); border-radius: 12px; padding: 8px 14px; margin-bottom: 12px; box-shadow: 0 2px 6px rgba(20,35,63,.06); }
.voc .pic-reloj { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.1rem; color: var(--tc-navy); }
.voc .pic-reloj.pic-poco { color: #c62828; }
.voc .pic-prog { flex: 1; color: var(--mu); font-size: .88rem; }
.voc .pic-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.voc .pic-tab { background: #fff; color: var(--tx); border: 1px solid var(--bd); border-radius: 10px; padding: 7px 12px; font-size: .88rem; }
.voc .pic-tab small { display: block; color: var(--mu); font-size: .72rem; }
.voc .pic-tab.on { background: var(--tc-navy); color: #fff; border-color: var(--tc-navy); }
.voc .pic-tab.on small { color: rgba(255,255,255,.8); }
.voc .pic-nav { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.voc .pic-n { min-width: 34px; padding: 5px 0; border-radius: 8px; background: #fff; color: var(--tx); border: 1px solid var(--bd); font-size: .82rem; }
.voc .pic-n.hecho { background: #dff3ea; border-color: #9fd6bd; }
.voc .pic-n.on { outline: 2px solid var(--tc-blue); }
.voc .pic-pregunta { background: var(--card); border: 1px solid var(--bd); border-radius: 16px; padding: 18px; }
.voc .pic-ctx { background: #f4f8fb; border-left: 4px solid var(--tc-blue); border-radius: 8px; padding: 12px 14px; margin: 0 0 14px; font-size: .95rem; line-height: 1.6; white-space: pre-line; }
.voc .pic-enun { font-size: 1.05rem; line-height: 1.55; font-weight: 600; margin: 0 0 14px; }
.voc .pic-op { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; background: #fff; color: var(--tx); border: 1px solid var(--bd); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; font-size: 1rem; line-height: 1.45; }
.voc .pic-op:hover { background: #f4f8fb; }
.voc .pic-op.sel { background: #e3efff; border-color: var(--tc-blue); }
.voc .pic-let { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #eef2f6; display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.voc .pic-op.sel .pic-let { background: var(--tc-blue); color: #fff; }
.voc .pic-pie { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.voc .pic-esperando { text-align: center; padding: 40px 10px; color: var(--mu); }
.pic-modal { position: fixed; inset: 0; background: rgba(20,35,63,.55); display: grid; place-items: center; z-index: 1000; padding: 16px; }
.pic-modal-c { background: #fff; border-radius: 16px; padding: 22px; max-width: 420px; width: 100%; }
.pic-modal-f { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* --- Resultado / revisión ------------------------------------------------------ */
.voc .pic-global { text-align: center; margin: 12px 0 18px; }
.voc .pic-gnum { font-size: 3.4rem; font-weight: 800; color: var(--tc-blue); line-height: 1; }
.voc .pic-gnum small { font-size: 1.1rem; color: var(--mu); font-weight: 600; }
.voc .pic-glab { color: var(--mu); font-size: .9rem; margin-top: 4px; }
.voc .pic-tabla-w { overflow-x: auto; }
.voc .pic-barra { display: block; height: 10px; background: var(--bar); border-radius: 6px; overflow: hidden; min-width: 90px; }
.voc .pic-barra i { display: block; height: 100%; background: var(--tc-gradient); }
.voc .pic-niv { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: .8rem; font-weight: 700; background: #eef2f6; }
.voc .pic-niv1 { background: #fde7df; color: #9a3412; } .voc .pic-niv2 { background: #fff2cc; color: #8a6100; }
.voc .pic-niv3 { background: #dff3ea; color: #146c43; } .voc .pic-niv4 { background: #d6e8ff; color: #1d4f8f; } .voc .pic-niv5 { background: #d6e8ff; color: #1d4f8f; }
.voc .pic-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.voc .pic-acciones .tc-btn { display: inline-block; text-decoration: none; }
.voc .pic-det { border: 1px solid var(--bd); border-radius: 12px; padding: 10px 14px; margin: 10px 0; background: #fff; }
.voc .pic-det > summary { cursor: pointer; }
.voc .pic-rev { border-left: 4px solid var(--bd); padding: 6px 0 6px 12px; margin: 14px 0; }
.voc .pic-rev.ok { border-color: #2e9e6a; } .voc .pic-rev.mal { border-color: #d64545; } .voc .pic-rev.blank { border-color: #c9a227; }
.voc .pic-q { margin: 0 0 6px; line-height: 1.5; }
.voc .pic-ops { margin: 6px 0; padding-left: 22px; }
.voc .pic-ops li { margin: 3px 0; line-height: 1.45; }
.voc .pic-ops li.c { font-weight: 700; color: #146c43; } .voc .pic-ops li.m:not(.c) { color: #b3261e; }
.voc .pic-tag { font-size: .75rem; font-weight: 700; border-radius: 6px; padding: 1px 6px; }
.voc .pic-tag.ok { background: #dff3ea; color: #146c43; } .voc .pic-tag.mal { background: #fde2e2; color: #b3261e; }
.voc .pic-exp { background: #f4f8fb; border-radius: 8px; padding: 8px 10px; font-size: .9rem; margin: 6px 0 0; }
.voc .pic-blank { color: #8a6100; font-size: .85rem; margin: 2px 0; }

/* --- Portada ------------------------------------------------------------------- */
.voc .pic-cta { background: linear-gradient(135deg, #f1f7ff, #eefaf5); }
.voc .pic-pasos { padding-left: 20px; line-height: 1.6; }
.voc .pic-pasos li { margin-bottom: 10px; }
.voc .pic-lista { padding-left: 20px; line-height: 1.65; }

/* --- Paneles ------------------------------------------------------------------- */
.voc .pic-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.voc .pic-t td, .voc .pic-t th { font-size: 13px; }
.voc .pic-off td { opacity: .5; }
.voc .pic-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.voc .pic-kpi { background: #f4f8fb; border-radius: 12px; padding: 12px 14px; }
.voc .pic-kpi b { display: block; font-size: 1.7rem; color: var(--tc-blue); }
.voc .pic-kpi span { color: var(--mu); font-size: .82rem; }
.voc textarea { font: inherit; padding: 8px; border: 1px solid var(--bd); border-radius: 8px; }

/* Durante la prueba se oculta el menú del sitio para que el cronómetro (barra fija) quede visible arriba. */
body.pic-enprueba .tc-nav { display: none; }
.voc .pic-acciones a.tc-btn { padding: 10px 18px; border-radius: 10px; border: 2px solid var(--tc-blue); color: var(--tc-blue); background: #fff; font-weight: 600; }
.voc .pic-acciones a.tc-btn.tc-btn-primary { background: var(--tc-blue); color: #fff; }

/* Botón con aspecto de enlace (informes: descargar PDF) */
.pic-btn{display:inline-block;background:#1d4f8f;color:#fff!important;padding:8px 16px;border-radius:8px;text-decoration:none;font-weight:700}
.pic-btn:hover{background:#163f73}