/* ============================================================
   Plataforma de Reclutamiento IA — sistema de diseño
   Dirección: petróleo + coral sobre neutros tibios
   Tipografía: Outfit (títulos, local) + system-ui (cuerpo/datos)
   Sin dependencias externas (cero CDNs)
   ============================================================ */

/* ---------- tipografía local (Outfit variable 400-800) ---------- */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/static/fonts/outfit-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/static/fonts/outfit-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */
:root {
  /* paleta nueva */
  --petroleo:   #0F3D3E;   /* marca, barra, títulos */
  --petroleo2:  #17595B;   /* hover, links */
  --coral:      #E86A4F;   /* acciones */
  --coral2:     #D4573C;   /* hover de acción */

  --fondo:   #F7F5F1;      /* neutro tibio */
  --tarjeta: #FFFFFF;
  --texto:   #1C2321;
  --texto2:  #6B7069;
  --borde:   #E5E1D8;

  --peligro: #C2402A; --ok: #1E6B43; --aviso: #8A5A16;

  /* alias históricos (los usan estilos inline en plantillas) */
  --primario:  var(--petroleo);
  --primario2: var(--petroleo2);
  --acento:    var(--coral);

  --radio: 12px;
  --sombra: 0 1px 2px rgba(28, 35, 33, .05), 0 2px 8px rgba(28, 35, 33, .04);
  --display: 'Outfit', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 15px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
}
h1, h2, h3, h4 { font-family: var(--display); color: var(--petroleo); letter-spacing: -.01em; }
h1 { font-size: 26px; font-weight: 700; }
h2 { font-size: 19px; font-weight: 650; }
h3 { font-size: 16px; font-weight: 650; }
a { color: var(--petroleo2); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--petroleo2); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- layout ---------- */
.contenedor { max-width: 1080px; margin: 0 auto; padding: 24px 16px; }
.angosto { max-width: 640px; }

header.barra {
  background: var(--petroleo); color: #fff; padding: 10px 0;
  border-bottom: 3px solid var(--coral);
}
header.barra .contenedor {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding-top: 0; padding-bottom: 0;
}
header.barra a {
  color: rgba(255,255,255,.82); padding: 5px 10px; border-radius: 8px;
  font-size: 14px; transition: background .15s, color .15s;
}
header.barra a:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }
header.barra a.activo { color: #fff; background: rgba(255,255,255,.14); font-weight: 600; }
header.barra .marca {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  margin-right: auto; letter-spacing: -.01em;
}
header.barra .marca::after { content: "●"; color: var(--coral); font-size: 10px; margin-left: 6px; vertical-align: 2px; }
header.barra .quien { opacity: .6; font-size: 13px; padding: 0 6px; }

/* ---------- tarjetas / tablas ---------- */
.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra); padding: 22px; margin-bottom: 16px;
}
.tarjeta h1, .tarjeta h2 { margin-top: 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--texto2); font-weight: 600; font-size: 12px;
     text-transform: uppercase; letter-spacing: .05em; }
th, td { padding: 10px; border-bottom: 1px solid var(--borde); }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: #FAF8F4; }

/* ---------- formularios ---------- */
label { display: block; font-weight: 600; font-size: 13.5px; margin: 14px 0 4px; }
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=password], input[type=date], select, textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--borde);
  border-radius: 8px; font: inherit; background: #fff; color: var(--texto);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--petroleo2); outline-offset: 0; border-color: transparent;
}
textarea { min-height: 90px; resize: vertical; }
.ayuda { color: var(--texto2); font-size: 12.5px; margin-top: 3px; }

.boton {
  display: inline-block; background: var(--coral); color: #fff; border: 0;
  padding: 10px 20px; border-radius: 9px; font-family: var(--display);
  font-size: 14.5px; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; margin-top: 16px; transition: background .15s;
}
.boton:hover { background: var(--coral2); text-decoration: none; }
.boton.secundario { background: #fff; color: var(--petroleo); border: 1px solid var(--borde); }
.boton.secundario:hover { background: #F4F1EA; }
.boton.chico { padding: 5px 12px; font-size: 13px; margin-top: 0; }

/* ---------- etiquetas de estado ---------- */
.pildora {
  display: inline-block; padding: 2px 10px; border-radius: 99px;
  font-family: var(--display); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.p-activa, .p-colocado, .p-cubierta { background: #DFF0E2; color: #1E6B43; }
.p-borrador, .p-disponible { background: #EEEBE4; color: #5B6058; }
.p-pausada, .p-llamada { background: #FBEED3; color: #8A5A16; }
.p-cerrada, .p-descartado { background: #FBE3DC; color: #A03A24; }
.p-aplico, .p-proceso { background: #DFEDEE; color: #16565A; }
.p-filtrado { background: #E7E4F5; color: #4D3F94; }
.p-entrevista_bot { background: #F7E3EE; color: #953868; }
.p-psicometria { background: #F9E7D8; color: #92511C; }
.p-shortlist { background: #DDF0EA; color: #145F4E; }

/* ---------- camino del pipeline (elemento distintivo) ----------
   Uso: <div class="camino"><span class="paso hecho">aplicó</span>
        <span class="paso actual">filtrado</span><span class="paso">...</span></div> */
.camino { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 10px 0; }
.camino .paso {
  font-family: var(--display); font-size: 12px; font-weight: 600;
  padding: 3px 11px; border-radius: 99px; color: var(--texto2);
  background: #EEEBE4; white-space: nowrap;
}
.camino .paso.hecho { background: #DFEDEE; color: var(--petroleo2); }
.camino .paso.actual { background: var(--coral); color: #fff; }
.camino .paso.malo { background: #FBE3DC; color: #A03A24; }
.camino .paso + .paso { margin-left: 14px; position: relative; }
.camino .paso + .paso::before {
  content: "›"; position: absolute; left: -11px; top: 50%;
  transform: translateY(-54%); color: #C9C4B8; font-weight: 700;
}

/* ---------- scores ---------- */
.score { font-weight: 700; font-variant-numeric: tabular-nums; }
.score.alto { color: var(--ok); } .score.medio { color: var(--aviso); }
.score.bajo { color: var(--peligro); } .score.na { color: var(--texto2); font-weight: 400; }

.error { background: #FBE3DC; color: #A03A24; padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; }
.exito { background: #DFF0E2; color: #1E6B43; padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; }
.mudo { color: var(--texto2); }
.fila-flex { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.m0 { margin: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
pre.json { background: #FAF8F4; border: 1px solid var(--borde); border-radius: 8px;
           padding: 12px; font-size: 12.5px; overflow-x: auto; }

/* ---------- barras de filtros ---------- */
.filtros { margin: 12px 0; gap: 8px; }
.filtros select, .filtros input { width: auto; padding: 6px 9px; font-size: 13px; }

/* ---------- kanban del pipeline ---------- */
.contenedor.amplio { max-width: 1600px; }
.kanban { display: flex; gap: 10px; overflow-x: auto; align-items: flex-start; padding-bottom: 12px; }
.kanban .columna {
  flex: 0 0 205px; background: #EFEAE0; border-radius: 12px;
  padding: 8px; min-height: 140px;
}
.kanban .columna h4 { margin: 2px 4px 8px; display: flex; justify-content: space-between; align-items: center; }
.kanban .columna.sobre { outline: 2px dashed var(--coral); outline-offset: -2px; }
.kanban .lista { min-height: 60px; }
.kanban .tarjeta-k {
  background: #fff; border: 1px solid var(--borde); border-radius: 9px;
  padding: 8px 10px; margin-bottom: 8px; cursor: grab; box-shadow: var(--sombra);
}
.kanban .tarjeta-k.arrastrando { opacity: .4; }

/* ---------- módulo histórico / banco de talento ---------- */
.barra-stat { background: #EBE7DE; border-radius: 6px; height: 14px; overflow: hidden; }
.barra-stat > span { display: block; height: 100%; background: var(--petroleo2); border-radius: 6px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; }
.kpi .v { font-family: var(--display); font-size: 27px; font-weight: 700; color: var(--petroleo); }
.kpi .t { font-size: 12px; color: var(--texto2); }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs a { padding: 5px 12px; border-radius: 99px; border: 1px solid var(--borde); font-size: 13px; text-decoration: none; color: var(--texto2); background: #fff; }
.tabs a.activo { background: var(--petroleo); border-color: var(--petroleo); color: #fff; }

/* ---------- landing pública ---------- */
.hero-vacante {
  background: var(--petroleo); color: #fff; border-radius: var(--radio);
  padding: 26px 24px; margin-bottom: 16px;
}
.hero-vacante h1 { color: #fff; margin: 0 0 6px; }
.hero-vacante .meta { color: rgba(255,255,255,.75); font-size: 14px; }
.hero-vacante .sueldo {
  display: inline-block; margin-top: 12px; background: rgba(232,106,79,.18);
  border: 1px solid rgba(232,106,79,.55); color: #FFD9CE;
  font-family: var(--display); font-weight: 650; font-size: 15px;
  padding: 5px 14px; border-radius: 99px;
}