/* Nueva marca TDM para el portal PUBLICO de vacantes y postulacion (2026-10-21): tipografia Vinci Sans y paleta de marca.
   Se carga al final del <head> de landing, detalle, verificacion, formulario y gracias, para pisar las variables de cada pagina.
   No se aplica al panel administrativo (alli solo cambia el logo). Referencia visual: mockup-portal-vacantes-nueva-marca.html */
@import url('tdm-logo.css');
@font-face{font-family:'Vinci Sans';font-weight:400;font-style:normal;src:url('../fonts/VinciSans-Regular.otf') format('opentype');font-display:swap}
@font-face{font-family:'Vinci Sans';font-weight:500;font-style:normal;src:url('../fonts/VinciSans-Medium.otf') format('opentype');font-display:swap}
@font-face{font-family:'Vinci Sans';font-weight:700;font-style:normal;src:url('../fonts/VinciSans-Bold.otf') format('opentype');font-display:swap}

:root{
  --navy-1:#423C75; --navy-2:#423C75; --navy-3:#0083B3; --navy-4:#0083B3;   /* Indigo TDM (cian solo en foco y etiquetas) */
  --accent:#423C75; --accent-ink:#352f60; --accent-bg:#F3F4F8;
  --bg:#F3F4F8; --bg-2:#F3F4F8; --border:#E3E4EA;
  --ink:#4A4C4E; --ink-2:#4A4C4E; --muted:#828282;
  --font-h:'Vinci Sans',Arial,sans-serif; --font-b:'Vinci Sans',Arial,sans-serif;
  --tdm-cian:#0083B3; --tdm-cian-fondo:#E1F2F8; --tdm-profundo:#1F1C45;
}
body,input,select,textarea,button{font-family:'Vinci Sans',Arial,sans-serif}
body{font-weight:400;color:var(--ink)}
h1,h2,h3,h4{font-family:'Vinci Sans',Arial,sans-serif;font-weight:700;color:var(--navy-1)}

/* ---- logo: reglas en tdm-logo.css (archivo original del cliente, con su lema) ---- */
.tdm-logo-pie{display:inline-block;background:#fff;border-radius:12px;padding:12px 16px;--s:.055px}   /* el logo a todo color va sobre fondo blanco */
.sitio-header-row{padding:12px 0}

/* ---- iconos ---- */
.tdm-ico{width:15px;height:15px;flex-shrink:0;vertical-align:-3px}
.vac-meta span,.meta span{display:inline-flex;align-items:center;gap:6px}

/* ---- botones ---- */
.btn,.sitio-header .btn{font-family:'Vinci Sans',Arial,sans-serif;font-weight:700}
.btn-accent,.sitio-header .btn,.btn{background:var(--navy-1);color:#fff}
.btn:hover,.btn-accent:hover,.sitio-header .btn:hover{background:var(--accent-ink)}
.btn-line{background:#fff;color:var(--navy-1);border-color:var(--border)}
.btn-line:hover{background:var(--bg);border-color:var(--navy-1)}

/* ---- portada de vacantes ---- */
.franja h1{color:var(--navy-1);font-weight:700}
.franja p{color:var(--ink);font-weight:400}
.sidebar{border:1px solid var(--border)}
.sidebar h4{color:var(--navy-1);font-weight:700}
.campo-filtro label{color:var(--navy-1);font-weight:700}
.campo-filtro input,.campo-filtro select{border:1px solid var(--border);color:var(--ink);font-weight:400}
.campo-filtro input::placeholder{color:var(--muted)}
.campo-filtro input:focus,.campo-filtro select:focus{border-color:var(--tdm-cian);box-shadow:0 0 0 3px rgba(0,131,179,.14)}
.campo-filtro select,select.input{appearance:none;-webkit-appearance:none;padding-right:38px;background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1.5l6 6 6-6' fill='none' stroke='%23423C75' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 14px center}
.btn-limpiar{background:var(--bg);color:var(--navy-1);font-weight:500}
.btn-limpiar:hover{background:#e8e9f1}
.resultados-cabecera span{color:var(--muted);font-weight:400}
.vac-card{border:1px solid var(--border)}
.vac-card:hover{box-shadow:0 8px 24px rgba(66,60,117,.10);border-color:#d4d5e0;transform:none}
.vac-card h3{color:var(--navy-1);font-weight:700}
.vac-fecha,.vac-meta{color:var(--muted);font-weight:400}
.vac-foot{border-top:1px solid var(--border)}
.pill-disc,.aviso-inclusivo{background:var(--tdm-cian-fondo);color:var(--tdm-cian);font-weight:700}
.pill-disc{display:inline-flex;align-items:center;gap:6px}
.pill-disc .tdm-ico,.aviso-inclusivo .tdm-ico{color:var(--tdm-cian)}
.aviso-inclusivo .tdm-ico{width:20px;height:20px}
body .site-footer{background:var(--tdm-profundo)}
.footer-grid h4{color:#fff}
.footer-marca h4{margin:18px 0 6px}
.footer-marca p{margin-top:0}

/* ---- paginas internas: detalle, verificacion, formulario, gracias ---- */
.card-form,.card{border:1px solid var(--border)}
.card-form h1,.card h2{color:var(--navy-1);font-weight:700}
.volver{color:var(--muted)}.volver:hover{color:var(--navy-1)}
.meta{color:var(--muted)}
.sub,.card-form > p.sub,.card p{color:var(--ink)}
.field .label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--navy-1)}
.pregunta-match > .label,.pregunta-match .label{text-transform:none;letter-spacing:0;font-size:14.5px}
.field .hint{color:var(--muted)}
.section-title{font-size:14px;font-weight:700;color:var(--navy-1);letter-spacing:.05em}
.input,select.input{border:1px solid var(--border);color:var(--ink);font-weight:400}
.input::placeholder{color:var(--muted)}
.input:focus,select.input:focus{outline:none;border-color:var(--tdm-cian);box-shadow:0 0 0 3px rgba(0,131,179,.14)}
.input-codigo{color:var(--navy-1)}
.enlace,.alert-ok-id a{color:var(--navy-1);font-weight:500}
.vacante-elegida{background:var(--bg);border:1px solid var(--border)}
.vacante-elegida b{color:var(--navy-1)}
.vacante-elegida span{color:var(--muted)}
.dropzone{display:block;color:var(--navy-1);font-weight:700}
.dropzone:hover{border-color:var(--navy-1);color:var(--navy-1)}
.dropzone.tiene-archivo{border-color:var(--navy-1);color:var(--navy-1)}
input[type=radio],input[type=checkbox]{accent-color:var(--navy-1)}
.label-privacidad a{color:var(--navy-1);font-weight:500;text-decoration:underline}
.sin-detalle{background:var(--bg);color:var(--muted)}

/* ---- video de la portada de vacantes (reemplaza a los filtros) ---- */
.layout.con-video{grid-template-columns:272px minmax(0,1fr)} /* video 20% mas chico (antes 340px) */
.layout.sin-video{grid-template-columns:1fr}
.video-col{position:sticky;top:20px;margin-top:33px} /* 33px = alto de la cabecera "N vacantes disponibles": el video arranca a la altura de la primera vacante */
.video{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--border);box-shadow:0 8px 24px rgba(66,60,117,.12)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:860px){.layout.con-video,.layout.sin-video{grid-template-columns:1fr}.video-col{position:static;width:80%;margin:0 auto}}