/* Bolsa de Empleo — Cámara de Comercio e Industria de General Alvear
   Diseño v3: azul fuerte de protagonista (barra y franja de saludo), hoja clara con esquinas
   redondeadas encima, tarjetas blancas con sombra suave, botones píldora e íconos de trazo.
   Tipografía Poppins servida desde /assets/fonts (OFL). Tema claro y oscuro con tokens. */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/poppins-700.woff2") format("woff2"); }

:root {
  --azul: #3563e9;
  --azul-hover: #2a53cf;
  --azul-suave: #eaf0ff;
  --sobre-azul: #ffffff;
  --sobre-azul-tenue: rgba(255, 255, 255, .78);
  --fondo: #f3f6fc;
  --superficie: #ffffff;
  --superficie-2: #f6f8fd;
  --campo: #f2f5fb;
  --tinta: #1a2133;
  --tinta-2: #434b60;
  --tenue: #707890;
  --borde: #e6eaf3;
  --borde-fuerte: #d3d9e7;
  --acento: var(--azul);
  --acento-hover: var(--azul-hover);
  --acento-suave: var(--azul-suave);
  --primario: var(--azul);
  --primario-hover: var(--azul-hover);
  --primario-texto: #ffffff;
  --ok: #16a34a;
  --ok-suave: #e7f7ee;
  --alerta: #d97706;
  --alerta-suave: #fff4e2;
  --error: #e5484d;
  --error-suave: #fdecec;
  --whatsapp: #128c4b;
  --t1: #eaf0ff; --t1-f: #3563e9;
  --t2: #fff0e4; --t2-f: #e8710a;
  --t3: #e6f7ec; --t3-f: #16a34a;
  --t4: #f1ebff; --t4-f: #7c4ddb;
  --t5: #ffe9f1; --t5-f: #db2777;
  --t6: #e2f6f8; --t6-f: #0e8a9a;
  --sombra: 0 1px 2px rgba(28, 45, 95, .04), 0 6px 22px rgba(28, 45, 95, .06);
  --sombra-alta: 0 2px 4px rgba(28, 45, 95, .05), 0 14px 36px rgba(28, 45, 95, .12);
  --radio: 20px;
  --radio-chico: 12px;
  --sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --anillo: 0 0 0 3px rgba(53, 99, 233, .3);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --azul: #4a74f0; --azul-hover: #6188f5; --azul-suave: #1c2747; --sobre-azul-tenue: rgba(255, 255, 255, .75);
    --fondo: #0e1220; --superficie: #161b2c; --superficie-2: #1b2134; --campo: #1e2539; --tinta: #e9ecf4; --tinta-2: #c4c9d8; --tenue: #949bb0;
    --borde: #262d42; --borde-fuerte: #343c55; --acento: #8aa6ff; --acento-hover: #a9bfff;
    --ok: #4cc77f; --ok-suave: #13281d; --alerta: #f0aa45; --alerta-suave: #2c2212; --error: #f37e80; --error-suave: #321a1d; --whatsapp: #1fa463;
    --t1: #1c2747; --t1-f: #8aa6ff; --t2: #2e2016; --t2-f: #f6a560; --t3: #142a1e; --t3-f: #5fd18e;
    --t4: #251d3d; --t4-f: #b597f5; --t5: #34182a; --t5-f: #f27bb0; --t6: #11292d; --t6-f: #4fc8d6;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 22px rgba(0, 0, 0, .25); --sombra-alta: 0 14px 36px rgba(0, 0, 0, .45);
    --anillo: 0 0 0 3px rgba(138, 166, 255, .4); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --azul: #4a74f0; --azul-hover: #6188f5; --azul-suave: #1c2747; --sobre-azul-tenue: rgba(255, 255, 255, .75);
  --fondo: #0e1220; --superficie: #161b2c; --superficie-2: #1b2134; --campo: #1e2539; --tinta: #e9ecf4; --tinta-2: #c4c9d8; --tenue: #949bb0;
  --borde: #262d42; --borde-fuerte: #343c55; --acento: #8aa6ff; --acento-hover: #a9bfff;
  --ok: #4cc77f; --ok-suave: #13281d; --alerta: #f0aa45; --alerta-suave: #2c2212; --error: #f37e80; --error-suave: #321a1d; --whatsapp: #1fa463;
  --t1: #1c2747; --t1-f: #8aa6ff; --t2: #2e2016; --t2-f: #f6a560; --t3: #142a1e; --t3-f: #5fd18e;
  --t4: #251d3d; --t4-f: #b597f5; --t5: #34182a; --t5-f: #f27bb0; --t6: #11292d; --t6-f: #4fc8d6;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 22px rgba(0, 0, 0, .25); --sombra-alta: 0 14px 36px rgba(0, 0, 0, .45);
  --anillo: 0 0 0 3px rgba(138, 166, 255, .4); color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--azul); color: var(--tinta);
       font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento-hover); text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { line-height: 1.25; letter-spacing: -.015em; margin: 0 0 .45em; font-weight: 600; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.08rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
li { margin-bottom: .35em; }
strong { font-weight: 600; }
[hidden] { display: none !important; }
.tenue { color: var(--tenue); }
.chico { font-size: .85rem; }
.en-linea { display: inline; margin: 0; }
.mt { margin-top: 14px; }
.mb { margin-bottom: 28px; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: none; box-shadow: var(--anillo); border-radius: 10px; }
.icono { width: 20px; height: 20px; flex: none; }

/* ---------- cabeza azul: barra + franja ---------- */
.cabeza { background: var(--azul); color: var(--sobre-azul); padding-bottom: 30px; }
.barra { position: relative; z-index: 10; }
.barra-in { max-width: 1120px; margin: 0 auto; padding: 0 20px; height: 70px; display: flex; align-items: center; gap: 20px; }
.marca { display: flex; align-items: center; gap: 11px; color: var(--sobre-azul); margin-right: auto; min-width: 0; }
.marca:hover { color: var(--sobre-azul); text-decoration: none; }
.marca-logo { width: 38px; height: 38px; border-radius: 12px; background: #fff; display: grid; place-items: center; flex: none; }
.marca-logo img { width: 26px; height: 26px; display: block; }
.marca > span:last-child { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.marca strong { font-size: 1rem; font-weight: 600; }
.marca small { font-size: .74rem; color: var(--sobre-azul-tenue); }
.nav { display: flex; align-items: center; gap: 4px; }
.nav > a, .nav-salir { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; color: var(--sobre-azul-tenue);
                       font-weight: 500; font-size: .88rem; background: none; border: 0; cursor: pointer; white-space: nowrap; }
.nav > a:hover, .nav-salir:hover { color: var(--sobre-azul); background: rgba(255, 255, 255, .12); text-decoration: none; }
.nav > a[aria-current="page"] { color: var(--sobre-azul); background: rgba(255, 255, 255, .2); }
.nav > a.btn { margin-left: 6px; padding: 7px 16px; }
.nav > a.btn-claro { background: #fff; color: #3563e9; }
.nav > a.btn-claro:hover { background: #f0f4ff; color: #2a53cf; }
.nav-cuenta { padding-left: 5px !important; }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--azul); display: inline-grid; place-items: center;
          font-size: .72rem; font-weight: 600; flex: none; letter-spacing: 0; }
.menu-btn { display: none; background: rgba(255, 255, 255, .16); color: var(--sobre-azul); border: 0; border-radius: 999px; padding: 7px 16px; font-weight: 500; font-size: .88rem; cursor: pointer; }
@media (max-width: 1100px) { .marca small { display: none; } }
/* La barra del admin tiene más enlaces: el subtítulo de la marca se oculta antes. */
@media (max-width: 1400px) { .barra-admin .marca small { display: none; } }
@media (max-width: 860px) {
  .barra-in { height: 62px; }
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 12px; right: 12px; top: calc(100% - 4px); background: var(--superficie); border-radius: var(--radio);
         box-shadow: var(--sombra-alta); flex-direction: column; align-items: stretch; padding: 10px; gap: 2px; }
  .nav.abierto { display: flex; }
  .nav > a, .nav-salir { color: var(--tinta-2); padding: 11px 14px; font-size: .98rem; border-radius: var(--radio-chico); width: 100%; }
  .nav > a:hover, .nav-salir:hover { background: var(--superficie-2); color: var(--tinta); }
  .nav > a[aria-current="page"] { background: var(--azul-suave); color: var(--acento); }
  .nav .avatar { background: var(--azul); color: #fff; }
  .nav .en-linea { display: block; }
  .nav > a.btn { margin: 8px 0 0; justify-content: center; background: var(--azul); color: #fff; }
}

.franja { max-width: 1120px; margin: 0 auto; padding: 14px 20px 18px; }
.saludo { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.avatar-grande { width: 56px; height: 56px; font-size: 1.1rem; border: 3px solid rgba(255, 255, 255, .35); background-clip: padding-box; }
.saludo-hola { margin: 0; color: var(--sobre-azul-tenue); font-size: .88rem; }
.saludo-nombre { margin: 0; font-size: 1.55rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.mini { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.mini li { margin: 0; background: rgba(255, 255, 255, .15); border-radius: 999px; padding: 6px 14px; font-size: .84rem; color: var(--sobre-azul-tenue); }
.mini strong { color: var(--sobre-azul); font-size: 1rem; }
@media (max-width: 640px) { .mini { margin-left: 0; width: 100%; } .saludo-nombre { font-size: 1.3rem; } }

/* ---------- hoja clara ---------- */
.hoja { flex: 1; display: flex; flex-direction: column; background: var(--fondo); border-radius: 30px 30px 0 0; margin-top: -30px; position: relative; }
.contenido { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 34px 20px 64px; }
.angosto { max-width: 460px; margin: 0 auto; }
.medio { max-width: 760px; margin: 0 auto; }
.pie-in { max-width: 1120px; margin: 0 auto; padding: 22px 20px 28px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .82rem; color: var(--tenue); border-top: 1px solid var(--borde); }
.pie p { margin: 0; }
.pie a { color: var(--tenue); }
.tarjeta { background: var(--superficie); border-radius: var(--radio); padding: 26px; margin-bottom: 20px; box-shadow: var(--sombra); }
.tarjeta > :last-child { margin-bottom: 0; }
.tarjeta > h2:first-child { margin-bottom: .7em; }
.encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.encabezado h1 { margin: 0 0 2px; }
.encabezado p { margin: 0; }
.columnas { display: grid; grid-template-columns: 270px 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .columnas { grid-template-columns: 1fr; gap: 16px; } }
.grilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
@media (max-width: 640px) { .grilla-2, .grilla-3 { grid-template-columns: 1fr; } }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.separador { border: 0; border-top: 1px solid var(--borde); margin: 26px 0; }
.texto-largo { white-space: pre-line; }
.titulo-seccion { font-size: 1.1rem; margin: 0 0 14px; }
.titulo-seccion .tenue { font-weight: 400; font-size: .9rem; }

/* ---------- portada ---------- */
.portada { padding: 18px 0 8px; }
.sobretitulo { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 500; color: var(--sobre-azul);
               background: rgba(255, 255, 255, .15); padding: 5px 13px 5px 11px; border-radius: 999px; margin-bottom: 16px; }
.sobretitulo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5ee39a; box-shadow: 0 0 0 3px rgba(94, 227, 154, .3); }
.portada h1 { font-size: clamp(1.85rem, 4.2vw, 2.8rem); font-weight: 700; letter-spacing: -.025em; max-width: 700px; margin-bottom: 12px; line-height: 1.15; }
.portada > p { color: var(--sobre-azul-tenue); font-size: 1.02rem; max-width: 580px; margin-bottom: 22px; }
.portada .acciones { margin-bottom: 28px; }
.buscador { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr auto; background: var(--superficie); border-radius: 22px; padding: 8px;
            align-items: center; box-shadow: var(--sombra-alta); color: var(--tinta); }
.buscador .campo { margin: 0; padding: 4px 14px; border-left: 1px solid var(--borde); font-size: .72rem; color: var(--tenue); font-weight: 500; }
.buscador .campo:first-child { border-left: 0; }
.buscador .campo input:not([type="checkbox"]):not([type="radio"]), .buscador .campo select { border: 0; padding: 0 0 2px; margin: 0; min-height: 0; box-shadow: none;
            background-color: transparent; font-size: .94rem; color: var(--tinta); border-radius: 0; }
.buscador .campo select { background-position: calc(100% - 7px) 50%, calc(100% - 2px) 50%; padding-right: 20px; }
.buscador .campo input:focus, .buscador .campo select:focus { box-shadow: none; }
.buscador .campo:focus-within { background: var(--superficie-2); border-radius: 14px; }
.buscador .btn { height: 52px; padding: 0 24px; }
@media (max-width: 860px) {
  .buscador { grid-template-columns: 1fr 1fr; gap: 2px; padding: 10px; }
  .buscador .campo { border-left: 0; border-bottom: 1px solid var(--borde); padding: 8px 10px; }
  .buscador .campo:first-child { grid-column: 1 / -1; }
  .buscador .btn { grid-column: 1 / -1; margin-top: 8px; height: 48px; }
}
.resultado-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; margin: 0 0 14px; font-size: .88rem; color: var(--tenue); }
.resultado-cab strong { color: var(--tinta); }
.resultado-cab .titulo-seccion { margin: 0; color: var(--tinta); }

/* Grilla de áreas, como las tarjetas de categorías del kit. */
.areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.area { display: flex; flex-direction: column; gap: 2px; padding: 18px; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra);
        color: var(--tinta); transition: transform .15s, box-shadow .15s; }
.area:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); color: var(--tinta); text-decoration: none; }
.area strong { font-size: .92rem; line-height: 1.3; margin-top: 12px; }
.area-icono { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--t1); color: var(--t1-f); }
.area-icono .icono { width: 23px; height: 23px; }
.tono-1 .area-icono, .area-icono.tono-1 { background: var(--t1); color: var(--t1-f); }
.tono-2 .area-icono, .area-icono.tono-2 { background: var(--t2); color: var(--t2-f); }
.tono-3 .area-icono, .area-icono.tono-3 { background: var(--t3); color: var(--t3-f); }
.tono-4 .area-icono, .area-icono.tono-4 { background: var(--t4); color: var(--t4-f); }
.tono-5 .area-icono, .area-icono.tono-5 { background: var(--t5); color: var(--t5-f); }
.tono-6 .area-icono, .area-icono.tono-6 { background: var(--t6); color: var(--t6-f); }
@media (max-width: 640px) { .areas { grid-template-columns: 1fr 1fr; gap: 10px; } .area { padding: 14px; } }

/* ---------- controles ---------- */
.campo { display: block; margin: 0 0 18px; font-size: .84rem; font-weight: 500; color: var(--tinta-2); }
.campo small, .ayuda { display: block; font-weight: 400; color: var(--tenue); font-size: .8rem; margin-top: 2px; }
.campo input:not([type="checkbox"]):not([type="radio"]), .campo select, .campo textarea {
  display: block; width: 100%; margin-top: 7px; padding: 11px 15px; min-height: 48px; font-weight: 400; font-size: .96rem; color: var(--tinta);
  border: 1.5px solid transparent; border-radius: 14px; background-color: var(--campo); transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.campo input[type="file"] { padding: 10px; cursor: pointer; }
.campo select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--tenue) 50%), linear-gradient(135deg, var(--tenue) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.campo textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--borde-fuerte); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--azul); background-color: var(--superficie); box-shadow: var(--anillo); }
.campo ::placeholder { color: var(--tenue); opacity: .7; }
.error-campo { display: block; color: var(--error); font-weight: 500; font-size: .8rem; margin-top: 5px; }
.req { color: var(--error); font-weight: 400; }
fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
legend { font-size: .84rem; font-weight: 500; color: var(--tinta-2); padding: 0; margin-bottom: 9px; }
.ayuda-grupo { margin: -5px 0 10px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { position: relative; margin: 0; }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border: 1.5px solid transparent; border-radius: 999px;
               font-size: .86rem; cursor: pointer; background: var(--campo); user-select: none; transition: border-color .15s, background .15s, color .15s; }
.opcion span:hover { border-color: var(--borde-fuerte); }
.opcion input:checked + span { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 500; }
.opcion input:checked + span::before { content: "✓"; font-size: .8em; }
.opcion input:focus-visible + span { box-shadow: var(--anillo); }
.opcion input:disabled + span { opacity: .4; cursor: not-allowed; }
.check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; font-size: .9rem; cursor: pointer; color: var(--tinta-2); }
.check input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--azul); flex: none; }
.archivo-actual { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--azul-suave); border-radius: 14px; margin: 7px 0 4px;
                  font-weight: 400; font-size: .9rem; color: var(--tinta); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 20px; border: 1.5px solid transparent;
       border-radius: 999px; font-weight: 500; font-size: .9rem; cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1.2;
       transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn .icono { width: 18px; height: 18px; }
.btn-primario { background: var(--primario); color: var(--primario-texto); box-shadow: 0 6px 16px -6px rgba(53, 99, 233, .6); }
.btn-primario:hover { background: var(--primario-hover); color: var(--primario-texto); }
.btn-secundario { background: var(--azul-suave); color: var(--acento); }
.btn-secundario:hover { background: color-mix(in srgb, var(--azul) 16%, var(--superficie)); color: var(--acento); }
.btn-borde { background: transparent; color: var(--acento); border-color: color-mix(in srgb, var(--azul) 40%, transparent); }
.btn-borde:hover { background: var(--azul-suave); color: var(--acento); }
.btn-claro { background: #fff; color: #3563e9; }
.btn-claro:hover { background: #f0f4ff; color: #2a53cf; }
.btn-transparente { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .4); }
.btn-transparente:hover { background: rgba(255, 255, 255, .24); color: #fff; }
.btn-ok { background: var(--ok); color: #fff; }
.btn-ok:hover { filter: brightness(.94); color: #fff; }
.btn-peligro { background: var(--error-suave); color: var(--error); }
.btn-peligro:hover { background: color-mix(in srgb, var(--error) 18%, var(--superficie)); color: var(--error); }
.btn-texto { background: none; border: 0; color: var(--tinta-2); padding: 6px 10px; min-height: 0; font-weight: 500; }
.btn-texto:hover { background: var(--superficie-2); color: var(--tinta); }
.btn-whatsapp { background: color-mix(in srgb, var(--whatsapp) 12%, var(--superficie)); color: var(--whatsapp); }
.btn-whatsapp:hover { background: color-mix(in srgb, var(--whatsapp) 20%, var(--superficie)); color: var(--whatsapp); }
.btn-ancho { width: 100%; min-height: 50px; font-size: .95rem; }
.btn-chico { min-height: 34px; padding: 6px 14px; font-size: .82rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- avisos y etiquetas ---------- */
.aviso { display: flex; gap: 12px; padding: 13px 16px; border-radius: 16px; margin-bottom: 18px; font-size: .9rem; line-height: 1.5; color: var(--tinta); }
.aviso::before { flex: none; width: 22px; height: 22px; border-radius: 50%; font-size: .74rem; font-weight: 700; display: grid; place-items: center; color: #fff; }
.aviso-ok { background: var(--ok-suave); }
.aviso-ok::before { content: "✓"; background: var(--ok); }
.aviso-info { background: var(--azul-suave); }
.aviso-info::before { content: "i"; background: var(--azul); }
.aviso-alerta { background: var(--alerta-suave); }
.aviso-alerta::before { content: "!"; background: var(--alerta); }
.aviso-error { background: var(--error-suave); }
.aviso-error::before { content: "!"; background: var(--error); }
.aviso > :last-child { margin-bottom: 0; }
/* Estados con ícono redondo de color: tilde verde, cruz roja, reloj ámbar. */
.etiqueta { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 4px; border-radius: 999px; font-size: .76rem; font-weight: 500;
            background: var(--superficie-2); color: var(--tinta-2); white-space: nowrap; line-height: 1.5; vertical-align: middle; }
.etiqueta::before { content: "•"; width: 18px; height: 18px; border-radius: 50%; background: var(--tenue); color: #fff; display: grid; place-items: center; font-size: .66rem; font-weight: 700; }
.e-abierta, .e-aprobada, .e-activo, .e-preseleccionado, .e-ok { background: var(--ok-suave); }
.e-abierta::before, .e-aprobada::before, .e-activo::before, .e-preseleccionado::before, .e-ok::before { content: "✓"; background: var(--ok); }
.e-pendiente, .e-pausada, .e-pausado, .e-nuevo { background: var(--alerta-suave); }
.e-pendiente::before, .e-pausada::before, .e-pausado::before { content: "‖"; background: var(--alerta); }
.e-nuevo::before { content: "★"; background: var(--alerta); }
.e-pendiente::before { content: "…"; }
.e-rechazada, .e-suspendida, .e-suspendido, .e-cerrada, .e-descartado { background: var(--error-suave); }
.e-rechazada::before, .e-suspendida::before, .e-suspendido::before, .e-cerrada::before, .e-descartado::before { content: "✕"; background: var(--error); }
.datos { display: flex; flex-wrap: wrap; gap: 6px; font-size: .8rem; color: var(--tinta-2); margin: 0; padding: 0; list-style: none; }
.datos li { margin: 0; background: var(--superficie-2); padding: 2px 10px; border-radius: 999px; }

/* ---------- listas (ofertas, postulantes, perfiles) ---------- */
.lista-ofertas { display: grid; gap: 12px; }
.lista-ofertas:empty { display: none; }
.oferta { display: block; padding: 18px 22px; color: inherit; background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra);
          transition: transform .15s, box-shadow .15s; position: relative; }
a.oferta:hover { transform: translateY(-1px); box-shadow: var(--sombra-alta); color: inherit; text-decoration: none; }
.oferta.con-icono { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.oferta h2 { font-size: 1rem; font-weight: 600; margin-bottom: 1px; }
.oferta h2 a { color: inherit; }
.oferta .empresa { margin: 0 0 9px; font-size: .88rem; color: var(--tenue); }
.oferta-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.oferta-cab > .chico { white-space: nowrap; }
article.tarjeta .oferta-cab { margin-bottom: 6px; }
article.tarjeta .empresa { color: var(--tinta-2); margin-bottom: 14px; }
.resumen { margin: 10px 0 0; font-size: .9rem; color: var(--tinta-2); }
.mensaje { margin: 12px 0 0; padding: 11px 15px; background: var(--azul-suave); border-radius: 4px 16px 16px 16px; font-size: .9rem; color: var(--tinta-2); }
@media (max-width: 640px) { .oferta { padding: 16px; } .oferta.con-icono { gap: 12px; } .oferta-cab { flex-direction: column; gap: 0; } .oferta-cab > .chico { order: -1; font-size: .76rem; } }

/* ---------- filtros ---------- */
.filtros { padding: 22px; position: sticky; top: 20px; }
.filtros .campo { margin-bottom: 14px; }
details.filtros > summary { list-style: none; cursor: pointer; font-weight: 600; font-size: .95rem; display: flex; justify-content: space-between; align-items: center; }
details.filtros > summary::-webkit-details-marker { display: none; }
details.filtros > summary::after { content: "Mostrar"; font-size: .8rem; font-weight: 500; color: var(--acento); }
details.filtros[open] > summary { margin-bottom: 14px; }
details.filtros[open] > summary::after { content: "Ocultar"; }
@media (min-width: 861px) { details.filtros > summary { pointer-events: none; } details.filtros > summary::after { display: none; } }
@media (max-width: 860px) { .filtros { position: static; padding: 16px 18px; } }
.filtro-estados { margin-bottom: 18px; gap: 6px; }
.filtro-estados .btn-secundario { background: var(--superficie); color: var(--tinta-2); box-shadow: var(--sombra); }
.filtro-admin { padding: 12px; }
.filtro-admin .campo { margin: 0; flex: 1 1 200px; }
.filtro-admin .campo input, .filtro-admin .campo select { margin-top: 0; }
.campo-en-linea { margin: 0; }
.campo-en-linea select { margin-top: 0 !important; min-height: 36px !important; padding: 5px 32px 5px 13px !important; font-size: .84rem !important; border-radius: 999px !important; }

/* ---------- tablas ---------- */
.tarjeta-tabla { padding: 6px 10px; }
.tabla-env { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla th { text-align: left; font-weight: 500; color: var(--tenue); font-size: .76rem; padding: 13px 14px 11px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 14px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: var(--superficie-2); }
.tabla td strong a { color: var(--tinta); }
.tabla .acciones { flex-wrap: nowrap; gap: 4px; }
@media (max-width: 720px) {
  .tabla-resp thead { display: none; }
  .tabla-resp, .tabla-resp tbody, .tabla-resp tr, .tabla-resp td { display: block; width: 100%; }
  .tabla-resp tr { border-bottom: 1px solid var(--borde); padding: 12px 6px; }
  .tabla-resp tbody tr:last-child { border-bottom: 0; }
  .tabla-resp tbody tr:hover td { background: none; }
  .tabla-resp td { border: 0; padding: 3px 0; }
  .tabla-resp td[data-t]::before { content: attr(data-t); display: inline-block; min-width: 96px; color: var(--tenue); font-size: .78rem; }
  .tabla-resp .acciones { flex-wrap: wrap; margin-top: 6px; }
}

/* ---------- números del admin ---------- */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 26px; }
.numero { background: var(--superficie); padding: 18px 20px; border-radius: var(--radio); box-shadow: var(--sombra); color: inherit;
          display: flex; flex-direction: column-reverse; gap: 2px; transition: transform .15s, box-shadow .15s; }
a.numero:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); color: inherit; text-decoration: none; }
.numero strong { font-size: 1.85rem; font-weight: 600; color: var(--acento); line-height: 1.15; font-variant-numeric: tabular-nums; }
.numero span { font-size: .8rem; color: var(--tenue); }

/* ---------- varios ---------- */
.paginas { display: flex; gap: 6px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.paginas a, .paginas span { min-width: 40px; height: 40px; display: grid; place-items: center; padding: 0 10px; border-radius: 999px;
                            font-size: .86rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; background: var(--superficie); box-shadow: var(--sombra); }
.paginas a:hover { color: var(--acento); text-decoration: none; }
.paginas span { background: var(--azul); color: #fff; }
.vacio { text-align: center; padding: 44px 24px; }
.vacio h2, .vacio h1 { font-size: 1.12rem; }
.vacio p { color: var(--tenue); max-width: 460px; margin-left: auto; margin-right: auto; }
.vacio-icono { width: 64px; height: 64px; border-radius: 50%; background: var(--azul-suave); color: var(--acento); display: grid; place-items: center; margin: 0 auto 14px; }
.vacio-icono .icono { width: 28px; height: 28px; }
.elegir { display: flex; flex-direction: column; }
.elegir p { color: var(--tenue); flex: 1; }
.lista-simple { list-style: none; padding: 0; margin: 0; }
.lista-simple li { padding: 11px 0; border-top: 1px solid var(--borde); margin: 0; font-size: .9rem; }
.lista-simple li:first-child { border-top: 0; padding-top: 0; }
.lista-simple li:last-child { padding-bottom: 0; }
.barra-uso { height: 8px; background: var(--campo); border-radius: 999px; overflow: hidden; margin: 8px 0 12px; }
.barra-uso span { display: block; height: 100%; background: var(--azul); border-radius: 999px; }
.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px; margin-bottom: 18px; }
.ficha p { margin: 0; font-size: .92rem; }
.ficha strong { display: block; font-size: .76rem; font-weight: 500; color: var(--tenue); margin-bottom: 2px; }

/* ---------- detalle de oferta ---------- */
.datos.mb { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--borde); }
article.tarjeta { padding: 32px; }
article.tarjeta h1 { font-size: 1.75rem; letter-spacing: -.02em; }
article.tarjeta > h2 { font-size: .78rem; font-weight: 600; color: var(--acento); text-transform: uppercase; letter-spacing: .06em; margin: 26px 0 8px; }
article.tarjeta > .datos.mb + h2 { margin-top: 0; }
@media (max-width: 640px) { article.tarjeta { padding: 22px 20px; } }

/* ---------- copias de seguridad ---------- */
.columnas-invertidas { grid-template-columns: 1fr 320px; }
@media (max-width: 860px) { .columnas-invertidas { grid-template-columns: 1fr; } }
details.tarjeta > summary { cursor: pointer; }
details.tarjeta[open] > summary { margin-bottom: 10px; }
code { font: .84em ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--campo); border-radius: 6px; padding: 1px 6px; }
ol.chico li { margin-bottom: 6px; }
.ancho-0 { width: 0%; }
.ancho-5 { width: 5%; }
.ancho-10 { width: 10%; }
.ancho-15 { width: 15%; }
.ancho-20 { width: 20%; }
.ancho-25 { width: 25%; }
.ancho-30 { width: 30%; }
.ancho-35 { width: 35%; }
.ancho-40 { width: 40%; }
.ancho-45 { width: 45%; }
.ancho-50 { width: 50%; }
.ancho-55 { width: 55%; }
.ancho-60 { width: 60%; }
.ancho-65 { width: 65%; }
.ancho-70 { width: 70%; }
.ancho-75 { width: 75%; }
.ancho-80 { width: 80%; }
.ancho-85 { width: 85%; }
.ancho-90 { width: 90%; }
.ancho-95 { width: 95%; }
.ancho-100 { width: 100%; }

/* ---------- barra inferior en el celular (usuarios con sesión) ---------- */
.tabbar { display: none; }
@media (max-width: 860px) {
  .tabbar { display: flex; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 20; background: var(--superficie); border-radius: 22px;
            box-shadow: var(--sombra-alta); padding: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px) / 2); }
  .tabbar a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px; border-radius: 16px;
              color: var(--tenue); font-size: .66rem; font-weight: 500; }
  .tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar a:hover { text-decoration: none; color: var(--tinta); }
  .tabbar a[aria-current="page"] { color: var(--acento); background: var(--azul-suave); }
  .tabbar .icono { width: 22px; height: 22px; }
  .con-tabbar .pie-in { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}

@media print { .cabeza, .pie, .tabbar, .acciones, form { display: none !important; } body, .hoja { background: #fff; } .tarjeta, .oferta { box-shadow: none; border: 1px solid #ddd; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Logo arriba de las tarjetas de ingreso y registro. */
.logo-tarjeta { width: 64px; height: 64px; border-radius: 20px; background: var(--azul-suave); display: grid; place-items: center; margin: 4px auto 18px; }
.logo-tarjeta img { width: 40px; height: 40px; display: block; }
.angosto.tarjeta { padding: 32px; }
.angosto.tarjeta > h1 { font-size: 1.45rem; }
@media (max-width: 640px) { .angosto.tarjeta { padding: 26px 20px; } }
.saludo > div { flex: 1; min-width: 0; }
.saludo-nombre { overflow-wrap: anywhere; }
@media (max-width: 640px) { .avatar-grande { width: 48px; height: 48px; font-size: .95rem; } .franja { padding-top: 6px; } }

/* ---------- configuración de ofertas ---------- */
.encabezado-chico { margin-bottom: 10px; }
.encabezado-chico h2 { margin-bottom: 2px; }
.tabla-config td { vertical-align: middle; padding-top: 8px; padding-bottom: 8px; }
.campo-tabla { margin: 0; }
.campo-tabla input:not([type="checkbox"]), .campo-tabla select { margin-top: 0 !important; min-height: 40px !important; padding-top: 7px !important; padding-bottom: 7px !important; font-size: .9rem !important; }
.campo-orden input { width: 76px !important; }
.elegir-icono { display: flex; align-items: center; gap: 10px; }
.elegir-icono .area-icono { width: 38px; height: 38px; border-radius: 12px; }
.elegir-icono .area-icono .icono { width: 20px; height: 20px; }
.elegir-icono .campo { flex: 1; min-width: 150px; }
.fila-oculta td { opacity: .55; }
.fila-oculta td:has(.interruptor) { opacity: 1; }
.interruptor { position: relative; display: inline-block; width: 44px; height: 26px; cursor: pointer; vertical-align: middle; }
.interruptor input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.interruptor::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--borde-fuerte); transition: background .15s; }
.interruptor::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s; }
.interruptor:has(input:checked)::before { background: var(--ok); }
.interruptor:has(input:checked)::after { transform: translateX(18px); }
.interruptor:has(input:focus-visible) { box-shadow: var(--anillo); border-radius: 999px; }
.agregar-opcion { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.agregar-opcion .campo { margin: 0; flex: 1 1 220px; }
.agregar-opcion .btn { min-height: 48px; }
@media (max-width: 720px) { .tabla-config td[data-t]::before { min-width: 72px; } .tabla-config td { display: flex !important; align-items: center; gap: 8px; } .tabla-config .campo-tabla { flex: 1; } }
.tabla-config .campo-tabla input[name^="texto"] { min-width: 260px; }
.tabla-config td[data-t="En uso"] { white-space: nowrap; }
@media (max-width: 720px) { .tabla-config .campo-tabla input[name^="texto"] { min-width: 0; } }