/*
 * Estilos del panel. Diseño dado por Carlos (29/07/2026) y copiado tal cual,
 * con dos adaptaciones obligadas:
 *
 *   1. LAS FUENTES no se piden a Google: se reutilizan las que el sitio ya
 *      sirve autoalojadas en /fuentes/. Mismo origen, así que no cuestan una
 *      petición extra, y no se manda la IP de nadie a un tercero. (Antes de
 *      esto el panel ni siquiera las cargaba: se veía con las del sistema.)
 *   2. LOS COLORES del diseño se declaran aquí y pisan a los del paquete de
 *      tokens a propósito: papel más claro, tintas y líneas más suaves,
 *      sombras. Afinan la marca sin contradecirla — la zona privada se mira
 *      mucho más rato que una landing y agradece menos contraste.
 */
@import "/panel/tokens.css";

@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600 800; font-display: swap; src: url(/fuentes/bricolage-grotesque.woff2) format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fuentes/public-sans.woff2) format('woff2'); }
@font-face { font-family: 'Spline Sans Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fuentes/spline-sans-mono.woff2) format('woff2'); }

:root {
  --papel: #F7F5EF;
  --papel-alto: #FFFFFF;
  --tinta: #1E2523;
  --tinta-suave: #5A6360;
  --tinta-tenue: #8A928D;
  --verde: #1F4D3A;
  --verde-osc: #16382B;
  --verde-tinte: #EDF3EF;
  --ambar: #E7A63C;
  --ambar-suave: #F9EED6;
  --sello: #B23A2E;
  --linea: #E3E0D6;
  --linea-suave: #EDEBE2;
  --sombra: 0 1px 2px rgba(30, 37, 35, .05), 0 8px 24px -12px rgba(30, 37, 35, .12);
  --sombra-hover: 0 2px 4px rgba(30, 37, 35, .06), 0 14px 34px -12px rgba(30, 37, 35, .18);
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --cuerpo: 'Public Sans', system-ui, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--cuerpo); background: var(--papel); color: var(--tinta); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; border-radius: 6px; }

/* ---------- Barra superior ---------- */
.topbar { position: sticky; top: 0; z-index: 40; background: rgba(247, 245, 239, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
.topbar-in { max-width: 920px; margin: 0 auto; padding: 0 22px; height: 58px; display: flex; align-items: center; gap: 26px; }
.logo { display: flex; gap: 8px; font-family: var(--display); font-weight: 800; font-size: 1.05rem; text-decoration: none; color: var(--tinta); }
.logo .t { color: var(--verde); position: relative; white-space: nowrap; }
.logo .t::after { content: ''; position: absolute; left: -2px; right: -2px; top: 54%; height: 2.5px; background: var(--sello); border-radius: 2px; transform: rotate(-3deg); }
nav { display: flex; gap: 2px; }
nav button { background: none; border: none; padding: 8px 13px; border-radius: 8px; font-size: .88rem; font-weight: 600; color: var(--tinta-suave); position: relative; }
nav button:hover { background: var(--linea-suave); color: var(--tinta); }
nav button.act { color: var(--verde); }
nav button.act::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: -1px; height: 2.5px; background: var(--verde); border-radius: 2px; }
nav button .dot { position: absolute; top: 6px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--ambar); }
.usuario { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--tinta-suave); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--verde); color: var(--papel-alto); display: grid; place-items: center; font-weight: 700; font-size: .78rem; }
@media (max-width: 720px) { .usuario span { display: none; } nav { overflow-x: auto; } }

main { max-width: 920px; margin: 0 auto; padding: 28px 22px 80px; }
.cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
h1 { font-family: var(--display); font-weight: 800; font-size: 1.55rem; letter-spacing: -.02em; }
.cab .sub { color: var(--tinta-suave); font-size: .92rem; margin-top: 2px; }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; gap: 7px; background: var(--verde); color: var(--papel-alto); text-decoration: none; font-weight: 600; font-size: .88rem; padding: 9px 15px; border-radius: 10px; border: none; transition: background .15s, transform .05s; }
.boton:hover { background: var(--verde-osc); }
.boton:active { transform: translateY(1px); }
.boton.linea { background: var(--papel-alto); color: var(--verde); border: 1.5px solid var(--linea); box-shadow: 0 1px 2px rgba(30, 37, 35, .04); }
.boton.linea:hover { border-color: var(--verde); background: var(--verde-tinte); }
.boton.mini { padding: 6px 11px; font-size: .8rem; border-radius: 8px; }
.boton.fant { background: none; border: none; color: var(--verde); padding: 6px 4px; font-weight: 600; }
.boton.fant:hover { text-decoration: underline; background: none; }
.boton[disabled] { opacity: .55; cursor: default; }
@media (prefers-reduced-motion: reduce) { .boton, .flecha, .tarjeta, .toast { transition: none; } }

/* ---------- Tarjetas ---------- */
.tarjeta { background: var(--papel-alto); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra); margin-bottom: 16px; overflow: hidden; transition: box-shadow .18s; }
.tarjeta:hover { box-shadow: var(--sombra-hover); }

/* ---------- Empleador desplegable ---------- */
.emp-cab { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; user-select: none; }
.emp-cab .quien { flex: 1; min-width: 0; }
.emp-cab .quien b { font-size: .98rem; }
.emp-cab .quien .meta { font-family: var(--mono); font-size: .74rem; color: var(--tinta-tenue); margin-top: 1px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; white-space: nowrap; }
.c-ok { background: var(--verde-tinte); color: var(--verde); }
.c-warn { background: var(--ambar-suave); color: #8A5A12; }
.c-neutro { background: var(--linea-suave); color: var(--tinta-suave); }
.flecha { color: var(--tinta-tenue); transition: transform .2s; font-size: .8rem; }
.emp[open] .flecha { transform: rotate(180deg); }
.emp-cuerpo { padding: 4px 20px 20px; border-top: 1px solid var(--linea-suave); }
details.emp > summary { list-style: none; }
details.emp > summary::-webkit-details-marker { display: none; }

/* ---------- Formularios ---------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
.campo label { display: block; font-size: .75rem; font-weight: 600; color: var(--tinta-suave); margin-bottom: 5px; }
.campo input, .campo select { width: 100%; font-family: var(--mono); font-size: .9rem; padding: 9px 11px; border: 1.5px solid var(--linea); border-radius: 9px; background: var(--papel-alto); color: var(--tinta); transition: border-color .12s; }
.campo input:hover, .campo select:hover { border-color: #CFCABC; }
.campo input:focus, .campo select:focus { border-color: var(--verde); outline: none; box-shadow: 0 0 0 3px var(--verde-tinte); }
.campo input[readonly] { background: var(--papel); color: var(--tinta-suave); }
.campo input[aria-invalid="true"] { border-color: var(--sello); }
.campo .ayuda { font-size: .73rem; color: var(--tinta-tenue); margin-top: 4px; }
.campo .error { font-size: .73rem; color: var(--sello); margin-top: 4px; }
.acciones { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; align-items: center; }

/* ---------- Contrato ---------- */
.con-cab { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.avatar-t { width: 40px; height: 40px; border-radius: 12px; background: var(--verde-tinte); color: var(--verde); display: grid; place-items: center; font-weight: 700; font-size: .9rem; flex: none; }
.con-cab .quien { flex: 1; min-width: 0; }
.con-cab .quien b { font-size: 1rem; }
.con-cab .quien .meta { font-size: .8rem; color: var(--tinta-suave); margin-top: 1px; }
.con-cuerpo { border-top: 1px solid var(--linea-suave); padding: 14px 20px 18px; }
.bloque-tit { font-family: var(--mono); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-tenue); margin: 14px 0 8px; }
.bloque-tit:first-child { margin-top: 0; }
.doc-fila { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin: 0 -10px; border-radius: 9px; font-size: .88rem; }
.doc-fila:hover { background: var(--papel); }
.doc-fila .ico { width: 26px; height: 26px; border-radius: 7px; background: var(--linea-suave); display: grid; place-items: center; font-family: var(--mono); font-size: .6rem; color: var(--tinta-suave); flex: none; }
.doc-fila .n { flex: 1; min-width: 0; font-weight: 500; }
.doc-fila .f { font-family: var(--mono); font-size: .72rem; color: var(--tinta-tenue); }
.doc-fila .boton { opacity: .85; }
.acc-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.acc { display: inline-flex; align-items: center; gap: 7px; background: var(--papel-alto); border: 1.5px solid var(--linea); border-radius: 10px; padding: 8px 13px; font-size: .84rem; font-weight: 600; color: var(--tinta); transition: all .12s; }
.acc:hover { border-color: var(--verde); background: var(--verde-tinte); color: var(--verde); }
.acc .pvp { font-family: var(--mono); font-size: .72rem; color: var(--tinta-tenue); font-weight: 500; }
.acc.inc .pvp { color: var(--verde); }
.acc.peligro:hover { border-color: var(--sello); background: #FBF0EE; color: var(--sello); }
.pend-strip { display: flex; align-items: center; gap: 10px; background: var(--ambar-suave); border-radius: 10px; padding: 10px 14px; font-size: .85rem; margin-bottom: 4px; }
.pend-strip b { font-weight: 600; }
.pend-strip .boton { margin-left: auto; }
.timeline-mini { display: flex; align-items: center; gap: 0; font-size: .78rem; color: var(--tinta-suave); flex-wrap: wrap; }
.tl-paso { display: flex; align-items: center; gap: 6px; }
.tl-paso .pt { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.tl-paso.pend .pt { background: var(--papel); border: 2px solid var(--linea); }
.tl-sep { width: 26px; height: 1.5px; background: var(--linea); margin: 0 8px; }

/* ---------- El sello: el estado en que no hay nada que hacer ---------- */
.sello-caja { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 20px; text-align: center; }
.sello { font-family: var(--display); font-weight: 800; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase; color: var(--verde); border: 3px solid var(--verde); border-radius: 8px; padding: 7px 15px; transform: rotate(-6deg); opacity: .9; }
.sello-caja p { color: var(--tinta-suave); font-size: .88rem; max-width: 44ch; }

/* ---------- Ventana y aviso flotante ---------- */
dialog { border: none; border-radius: 16px; padding: 0; max-width: 540px; width: 92vw; background: var(--papel-alto); box-shadow: var(--sombra-hover); }
dialog::backdrop { background: rgba(30, 37, 35, .45); }
.dlg-cab { padding: 20px 24px 0; }
.dlg-cab h2 { font-family: var(--display); font-weight: 800; font-size: 1.15rem; }
.pasos { display: flex; gap: 6px; margin: 14px 0 0; }
.pasos span { flex: 1; height: 4px; border-radius: 4px; background: var(--linea); }
.pasos span.act { background: var(--verde); }
.dlg-cuerpo { padding: 16px 24px 20px; }
.dlg-pie { display: flex; justify-content: space-between; padding: 0 24px 22px; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(6px); background: var(--tinta); color: var(--papel-alto); font-size: .85rem; padding: 10px 18px; border-radius: 100px; opacity: 0; transition: .25s; pointer-events: none; z-index: 99; }
.toast.on { opacity: 1; transform: translateX(-50%); }

/* ---------- Entrar, sin sesión ---------- */
.entrar { max-width: 26rem; margin: 0 auto; padding: 5rem 22px; }
.entrar h1 { margin-bottom: .5rem; }
.separador-o { margin: 1.25rem 0 .75rem; }
.oferta-huella { border: 1px solid var(--linea); background: var(--papel-alto); border-radius: 12px; padding: 16px 20px; margin-bottom: 20px; }
.oferta-huella p { margin: 0 0 .25rem; font-size: .92rem; }
.aviso { border-left: 3px solid var(--ambar); background: var(--ambar-suave); padding: .75rem 1rem; border-radius: 8px; margin: 1rem 0; font-size: .88rem; }
.aviso--ok { border-left-color: var(--verde); background: var(--verde-tinte); }
.aviso--error { border-left-color: var(--sello); background: #FBF0EE; }
.apagado { color: var(--tinta-suave); }