/* Oscar Henao & Asociados SAS — identidad institucional laboralempresarial.com */
:root{
  --navy:#292A50; --navy-oscuro:#18192F;
  --dorado:#C99058; --dorado-claro:#D8AA72;
  --gris:#f4f4f7; --texto:#22232e;
}
*{box-sizing:border-box;font-family:Georgia,'Book Antiqua','Times New Roman',serif;}
body{margin:0;background:var(--gris);color:var(--texto);}
.barra{background:var(--navy);color:#fff;display:flex;justify-content:space-between;align-items:center;
  padding:14px 26px;flex-wrap:wrap;gap:8px;}
.marca-mini{font-weight:bold;letter-spacing:.4px;}
.barra nav a{color:#fff;margin-left:16px;text-decoration:none;font-size:15px;}
.barra nav a:hover{color:var(--dorado-claro);}
.barra nav a.destacado{background:var(--dorado);padding:7px 14px;border-radius:6px;}
.contenedor{max-width:1000px;margin:26px auto;background:#fff;padding:30px;border-radius:10px;
  box-shadow:0 2px 8px rgba(24,25,47,.10);}
.contenedor.estrecho{max-width:560px;}
h1,h2,h3{color:var(--navy);}
h2 small{color:#888;font-weight:normal;font-size:60%;}
h3{border-bottom:2px solid var(--dorado);padding-bottom:6px;}
/* Login */
.login-bg{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-oscuro) 100%);}
.login-card{background:#fff;padding:38px 34px;border-radius:12px;width:360px;text-align:center;
  border-top:5px solid var(--dorado);}
.login-card .marca{color:var(--navy);font-weight:bold;font-size:19px;letter-spacing:.5px;}
.login-card .marca span{color:var(--dorado);}
.login-card .sub{color:#777;font-size:13px;margin-top:6px;}
/* Formularios */
label{display:block;text-align:left;margin:12px 0 4px;font-size:14px;color:var(--navy);}
input,textarea,select{width:100%;padding:10px;border:1px solid #ccc;border-radius:6px;font-size:15px;background:#fff;}
textarea{min-height:64px;resize:vertical;}
button{margin-top:14px;background:var(--dorado);color:#fff;border:0;padding:12px 20px;border-radius:6px;
  cursor:pointer;font-size:15px;font-weight:bold;}
button:hover{background:var(--dorado-claro);}
button.mini{margin:2px;padding:6px 10px;font-size:12px;background:var(--navy);}
.form.fila{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}
.form.fila div{flex:1;min-width:180px;}
form.inline{display:inline-flex;gap:6px;align-items:center;margin:2px 6px 2px 0;}
form.inline input{width:150px;padding:6px;font-size:13px;}
/* Tablas y paneles */
.tabla{width:100%;border-collapse:collapse;margin-top:10px;}
.tabla th{background:var(--navy);color:#fff;padding:9px;text-align:left;font-size:13px;}
.tabla td{border-bottom:1px solid #eee;padding:9px;font-size:14px;}
.panel{border:1px solid #e6e2da;border-radius:10px;padding:18px 22px;margin:18px 0;background:#fcfbf8;}
.chip{padding:3px 10px;border-radius:12px;font-size:12px;color:#fff;background:var(--dorado);}
.chip.en_curso{background:#2e7d32;}
.vacio{color:#888;font-style:italic;}
.ok{color:#2e7d32;font-weight:bold;} .error{color:#b71c1c;font-weight:bold;}
.ayuda{color:#666;font-size:14px;}
/* Wizard */
.progreso{background:#e8e8ee;height:9px;border-radius:6px;overflow:hidden;margin:10px 0 4px;}
.barra-prog{background:linear-gradient(90deg,var(--dorado),var(--dorado-claro));height:100%;transition:width .4s;}
.modulo{border:1px solid #e3e3ea;border-radius:10px;padding:16px 20px;margin:18px 0;background:#fff;}
.pregunta{border-left:4px solid #c9c9d4;padding:12px 16px;margin:14px 0;background:#fafafc;border-radius:0 8px 8px 0;}
.pregunta.guardada{border-left-color:#2e7d32;}
.pregunta.sin-guardar{border-left-color:#b71c1c;}
.pregunta .txt{margin:0 0 3px;font-weight:bold;color:var(--navy);}
.pregunta .ref{margin:0 0 8px;color:var(--dorado);font-size:12.5px;font-style:italic;}
.opts label{display:inline-flex;align-items:center;gap:5px;margin:0 14px 6px 0;font-size:14px;color:#333;}
.fila-detalle{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0;}
.fila-detalle select{width:auto;min-width:110px;}
.fila-detalle input[type=file]{width:auto;flex:1;min-width:180px;border:none;padding:4px 0;}
.ev{color:#2e7d32;font-size:12.5px;font-weight:bold;}
/* Semáforo */
.punto{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;vertical-align:middle;}
.punto.verde{background:#2e7d32;} .punto.ambar{background:#e69114;} .punto.rojo{background:#b71c1c;}
@media(max-width:640px){.contenedor{margin:10px;padding:18px;}.barra nav a{margin-left:10px;font-size:14px;}}

/* --- Subpáginas modulares (actualización) --- */
.progreso.mini{height:7px;margin:2px 0;}
.boton-tabla{display:inline-block;background:var(--navy);color:#fff;padding:7px 13px;border-radius:6px;
  text-decoration:none;font-size:13.5px;margin:2px;}
.boton-tabla:hover{background:var(--dorado);}
.nav-modulos{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:22px;
  border-top:1px solid #e8e8ee;padding-top:16px;}
code{background:#f0f0f4;padding:1px 6px;border-radius:4px;font-family:Consolas,monospace;font-size:13px;}

/* --- v3 --- */
.pregunta .num{color:var(--dorado);font-weight:bold;margin-right:4px;}
.panel.selector{background:#f6f3ec;border-color:var(--dorado-claro);}

/* --- v4: logo en la portada de ingreso --- */
.logo-login{display:block;margin:0 auto 6px;max-width:230px;width:80%;height:auto;}
.login-card{padding-top:26px;}
.op-todas{display:block;margin-top:8px;color:var(--navy);font-style:italic;}

/* --- v5: riesgo automático --- */
.riesgo-auto{font-size:13px;font-weight:bold;color:#8a8fa3;padding:4px 10px;border-radius:12px;background:#f0f0f4;}
.riesgo-auto.alto{color:#fff;background:#b71c1c;}
.riesgo-auto.medio{color:#5a4300;background:#f5c518;}
.riesgo-auto.bajo{color:#fff;background:#2e7d32;}

/* ============ v6: experiencia tipo aplicación móvil ============ */
/* Respuestas como botones táctiles */
.opts{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0;}
.opts label.op{border:1.5px solid #c7c7d2;border-radius:22px;padding:9px 16px;cursor:pointer;
  background:#fff;font-size:14px;user-select:none;transition:all .15s;}
.opts label.op input{display:none;}
.opts label.op:has(input:checked){color:#fff;border-color:transparent;background:var(--navy);}
.opts label.op:has(input[value="Cumple"]:checked){background:#2e7d32;}
.opts label.op:has(input[value="No cumple"]:checked){background:#b71c1c;}
.opts label.op:has(input[value="Parcial"]:checked){background:#e6a817;color:#3d2e00;}
.opts label.op:has(input[value="No aplica"]:checked){background:#8a8fa3;}
.op-todas{border-style:dashed !important;}
/* Barra de avance pegajosa al desplazarse */
.sticky-prog{position:sticky;top:0;background:#fff;z-index:40;padding:8px 0 2px;}
.sticky-prog .ayuda{margin:4px 0 0;}
/* Tablas deslizables */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* Móvil: lienzo completo tipo app */
@media(max-width:640px){
  body{background:#fff;}
  .contenedor{margin:0;padding:14px 12px 90px;border-radius:0;box-shadow:none;max-width:100%;}
  .barra{position:sticky;top:0;z-index:60;padding:12px 14px;}
  .barra nav a{margin-left:8px;font-size:13.5px;}
  .barra nav a.destacado{padding:6px 10px;}
  .sticky-prog{top:0;}
  h2{font-size:20px;margin:10px 0 6px;}
  .pregunta{padding:12px 12px;margin:12px 0;}
  .opts label.op{flex:1 1 44%;text-align:center;padding:12px 8px;font-size:15px;}
  input,textarea,select{font-size:16px;} /* evita el zoom automático en iPhone */
  textarea{min-height:76px;}
  button{width:100%;padding:14px;font-size:16px;}
  .fila-detalle{gap:8px;}
  .fila-detalle input[type=file]{min-width:100%;}
  .nav-modulos{position:fixed;left:0;right:0;bottom:0;background:#fff;padding:10px 12px;
    border-top:2px solid var(--dorado);margin:0;z-index:60;box-shadow:0 -2px 10px rgba(0,0,0,.08);}
  .nav-modulos a{flex:1;text-align:center;padding:12px 6px;font-size:13px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;}
  .login-card{width:92%;padding:28px 22px;}
  .form.fila div{min-width:100%;}
  .tabla th,.tabla td{font-size:12.5px;padding:7px 6px;}
  .panel{padding:14px;}
}

/* ============ v7: responsive definitivo (iPhone · Android · iPad) ============ */
html{-webkit-text-size-adjust:100%;}
body{overflow-x:hidden;max-width:100vw;}
img{max-width:100%;height:auto;}
.contenedor{overflow-x:hidden;}
/* La barra nunca desborda: los enlaces se deslizan si no caben */
.barra{flex-wrap:nowrap;gap:8px;}
.barra .marca-mini{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%;}
.barra nav{display:flex;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;
  white-space:nowrap;max-width:100%;scrollbar-width:none;}
.barra nav::-webkit-scrollbar{display:none;}
/* Las tablas se deslizan dentro de su marco, sin arrastrar la página */
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.tabla-scroll .tabla{min-width:600px;}
/* Selector de modalidades: opciones en lista vertical, texto junto a su casilla */
.panel.selector .opts{flex-direction:column;align-items:stretch;}
.panel.selector .opts label.op{display:flex;align-items:center;gap:10px;width:100%;
  text-align:left;flex:1 1 100%;border-radius:10px;}
.panel.selector .opts label.op::before{content:'';flex:0 0 18px;height:18px;border:2px solid #b9b9c6;
  border-radius:5px;background:#fff;}
.panel.selector .opts label.op:has(input:checked)::before{background:#fff;border-color:#fff;
  content:'\2713';display:flex;align-items:center;justify-content:center;color:var(--navy);
  font-weight:bold;font-size:13px;}
.enlace-compra a{color:var(--dorado);text-decoration:none;font-weight:bold;}
.producto .precio{font-size:30px;font-weight:bold;color:var(--navy);text-align:center;margin:4px 0 10px;}
.producto .precio span{font-size:14px;color:#777;font-weight:normal;}
.boton-tabla.grande{display:block;text-align:center;background:var(--dorado);font-size:16px;padding:13px;}
/* iPad y tabletas (641 a 1024 px) */
@media(min-width:641px) and (max-width:1024px){
  .contenedor{max-width:94%;padding:24px 22px;}
  .opts label.op{padding:11px 18px;font-size:15px;}
  .tabla th,.tabla td{font-size:13.5px;}
  button{font-size:16px;}
}
/* Teléfonos */
@media(max-width:640px){
  .barra nav a{margin-left:0;margin-right:10px;}
  h2 small{display:block;margin-top:2px;}
  .panel{padding:14px 12px;}
  .modulo{padding:12px 10px;}
}

/* --- v7.1: panel de cuentas con acciones ordenadas --- */
.acciones{display:flex;flex-direction:column;gap:6px;min-width:230px;}
.fila-acc{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.fila-acc form{display:flex;gap:6px;align-items:center;margin:0;}
.clave-form input{max-width:150px;}
.mini.rojo{background:#b71c1c;color:#fff;}
.mini.verde{background:#2e7d32;color:#fff;}
.mini.gris{background:#8a8fa3;color:#fff;}

/* ============ v8: ficha de escalonamiento ============ */
.advertencia-ficha{background:#fff8ec;border-left:4px solid var(--dorado);}
.advertencia-ficha p{margin:0;font-size:14px;color:#5a4a2a;}
.campo-ficha .ficha-subs{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0;}
.campo-ficha .sub-campo{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#555;min-width:150px;flex:1;}
.campo-ficha .sub-campo input{padding:10px;border:1.5px solid #c7c7d2;border-radius:8px;font-size:15px;}
.fila-apagada td{color:#8a8fa3;background:#f7f7fa;}
.punto.gris{background:#b9b9c6;}
.oblig{color:#b71c1c;font-size:12.5px;}
@media(max-width:640px){.campo-ficha .sub-campo{min-width:100%;}}