/* ============================================================
   CandiDatos Laborales — estilos comunes de la plataforma
   Solo usa las variables --cl-* de assets/marca/marca.css.
   Ningún color va escrito en HEX en este archivo.
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body.cl-base{background:var(--cl-fondo-alterno);min-height:100vh}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
[data-a]{cursor:pointer}
img{max-width:100%}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--cl-esp-4)}
.sp{flex:1}
.row{display:flex;gap:var(--cl-esp-2);align-items:center}
.center{text-align:center}
.suave{color:var(--cl-texto-suave)}
.muted{color:var(--cl-texto-suave);font-size:14px}

/* Íconos (línea 2 px, esquinas redondeadas · estilo Lucide) */
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:middle}
.ico.lg{width:24px;height:24px}

/* Distintivo de maqueta */
.mock{position:fixed;bottom:var(--cl-esp-3);right:var(--cl-esp-3);z-index:90;font:700 12px/1 var(--cl-fuente-texto);letter-spacing:.08em;text-transform:uppercase;background:color-mix(in srgb,var(--cl-alerta) 12%,var(--cl-blanco));color:var(--cl-alerta);padding:8px 12px;border-radius:var(--cl-radio-full);box-shadow:var(--cl-sombra)}

/* Botones pequeños (variante de .cl-btn) */
.cl-btn.sm{font-size:14px;padding:8px 14px}
.cl-btn.full{width:100%}
.btn-ok{background:color-mix(in srgb,var(--cl-exito) 12%,var(--cl-blanco));color:var(--cl-exito);cursor:default}

/* Etiquetas de estado (los estados no son colores de marca) */
.t-exito{background:color-mix(in srgb,var(--cl-exito) 12%,var(--cl-blanco));color:var(--cl-exito)}
.t-alerta{background:color-mix(in srgb,var(--cl-alerta) 12%,var(--cl-blanco));color:var(--cl-alerta)}
.t-error{background:color-mix(in srgb,var(--cl-error) 10%,var(--cl-blanco));color:var(--cl-error)}
.t-neutro{background:var(--cl-fondo-alterno);color:var(--cl-texto-suave)}
.cl-tag.may{font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* Avatar de organización: iniciales en círculo, como en el manual */
.org{width:48px;height:48px;border-radius:var(--cl-radio-full);background:var(--cl-fondo-tinte);color:var(--cl-azul-candi);display:grid;place-items:center;font:600 16px/1 var(--cl-fuente-texto);flex-shrink:0}
.org.sm{width:40px;height:40px;font-size:14px}
.org.lg{width:56px;height:56px;font-size:18px}

/* Barra de progreso */
.prog{height:8px;background:var(--cl-fondo-alterno);border-radius:var(--cl-radio-full);overflow:hidden}
.prog i{display:block;height:100%;background:var(--cl-azul-candi);border-radius:var(--cl-radio-full)}

/* Avisos */
.aviso{display:flex;gap:var(--cl-esp-2);align-items:flex-start;border-radius:var(--cl-radio-md);padding:12px 14px;font-size:14px;line-height:1.5}
.aviso .ico{margin-top:1px}
.aviso.info{background:var(--cl-fondo-tinte);color:var(--cl-texto)}
.aviso.info .ico{color:var(--cl-azul-candi)}
.aviso.alerta{background:color-mix(in srgb,var(--cl-alerta) 10%,var(--cl-blanco));color:var(--cl-texto)}
.aviso.alerta .ico{color:var(--cl-alerta)}
.aviso b{font-weight:600}

/* Campos */
.cl-campo{margin-top:var(--cl-esp-3)}
.cl-ayuda{font-size:14px}  /* marca.css la deja en 13 px; la sección 5 pide mínimo 14 px */
.cl-input,.cl-select,.cl-textarea{width:100%}
.tel{display:flex;gap:var(--cl-esp-2)}
.tel .pref{padding:11px 14px;border:1px solid var(--cl-borde);border-radius:var(--cl-radio-md);background:var(--cl-fondo-alterno);font-weight:600}
.otp{display:flex;gap:var(--cl-esp-2)}
.otp .cl-input{text-align:center;font-size:20px;font-weight:700;padding:10px 0}

/* Ventana (modal) y hoja inferior */
.ov{position:fixed;inset:0;background:color-mix(in srgb,var(--cl-azul-noche) 55%,transparent);display:none;align-items:center;justify-content:center;z-index:80;padding:var(--cl-esp-3)}
.ov.on{display:flex}
.modal{background:var(--cl-blanco);border-radius:var(--cl-radio-lg);width:100%;max-width:440px;padding:var(--cl-esp-4);position:relative;box-shadow:var(--cl-sombra);max-height:92vh;overflow-y:auto}
.cerrar{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--cl-texto-suave);padding:6px;border-radius:var(--cl-radio-md)}
.cerrar:focus-visible{outline:3px solid var(--cl-azul-datos)}
.pasos{display:flex;gap:6px;margin-bottom:var(--cl-esp-3)}
.pasos i{flex:1;height:4px;border-radius:var(--cl-radio-full);background:var(--cl-borde)}
.pasos i.on{background:var(--cl-azul-candi)}
.ok-ic{width:64px;height:64px;border-radius:var(--cl-radio-full);background:color-mix(in srgb,var(--cl-exito) 12%,var(--cl-blanco));color:var(--cl-exito);display:grid;place-items:center;margin:4px auto 12px}
.ok-ic .ico{width:32px;height:32px}

/* Nota de simulación en la maqueta */
.simul{font-size:14px;background:color-mix(in srgb,var(--cl-alerta) 10%,var(--cl-blanco));color:var(--cl-texto);border-radius:var(--cl-radio-md);padding:8px 12px;margin-top:var(--cl-esp-2)}

/* Aviso flotante */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);opacity:0;visibility:hidden;background:var(--cl-azul-noche);color:var(--cl-blanco);padding:12px 18px;border-radius:var(--cl-radio-md);font-size:14px;transition:.25s;z-index:95;max-width:calc(100% - 32px)}
.toast.on{transform:translateX(-50%);opacity:1;visibility:visible}

/* Estado vacío */
.vacio{text-align:center;padding:var(--cl-esp-5) var(--cl-esp-3)}
.vacio img{width:240px;margin:0 auto var(--cl-esp-3);display:block}
.vacio p{margin:var(--cl-esp-2) 0 var(--cl-esp-3)}