/* ============================================================
   KIT PLUS · hoja de estilos compartida por los 22 micro-sitios
   ------------------------------------------------------------
   POR QUE UN ARCHIVO COMPARTIDO
   El plan PLUS tiene que estar en los 22 diseños. Copiar 800
   líneas en 22 archivos significa 22 lugares donde arreglar el
   mismo error. Acá el kit vive una sola vez: cada micro-sitio lo
   carga con dos líneas y hereda todo, incluidas las correcciones
   futuras.

   TODAS las clases empiezan con «plk-» (PLus Kit) para que no
   choquen con ninguno de los 22 diseños, que usan nombres
   cortos como .foto, .card o .hero.

   EL COLOR LO PONE EL DISEÑO
   El kit no elige colores: lee --plk-ac (acento) y --plk-tinta
   del propio micro-sitio, que el JS deduce de sus variables. Si
   no encuentra nada, usa un gris neutro. Así el CV de Terracota
   sale terracota y el de Índigo sale índigo.
   ============================================================ */

:root{
  --plk-ac:#0f6e63;
  --plk-ac-luz:#e6f2f0;
  --plk-tinta:#16232e;
  --plk-tinta2:#45566a;
  --plk-tinta3:#6e7f90;
  --plk-papel:#f6f7f9;
  --plk-linea:#e2e7ee;
  --plk-radio:14px;
}

.plk-oculto{ display:none !important; }

/* ============ 1 · cartel de estado ============ */
.plk-estado{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:8px 18px;
  padding:13px 22px; text-align:center;
  font:600 14.5px/1.4 inherit;
  background:var(--plk-ac); color:#fff;
}
.plk-estado b{ font-weight:800; }
.plk-estado .plk-punto{
  width:9px; height:9px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.28); flex:0 0 auto;
}
.plk-estado .plk-fecha{ font-size:12.5px; opacity:.82; }
.plk-estado a{ color:#fff; text-decoration:underline; font-size:13px; }

/* ============ 2 · barra de acciones ============ */
.plk-acciones{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  padding:26px 22px; background:var(--plk-papel);
  border-top:1px solid var(--plk-linea);
  border-bottom:1px solid var(--plk-linea);
}
.plk-bt{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:12px 20px; border-radius:11px;
  font:700 15px/1 inherit; cursor:pointer; border:1px solid transparent;
  background:var(--plk-ac); color:#fff; text-decoration:none;
  transition:transform .12s ease, filter .16s ease;
}
.plk-bt:hover{ filter:brightness(1.08); }
.plk-bt:active{ transform:translateY(1px); }
.plk-bt.plk-g{
  background:#fff; color:var(--plk-tinta); border-color:var(--plk-linea);
}
.plk-bt.plk-g:hover{ border-color:var(--plk-tinta3); filter:none; }

/* ============ 3 · el currículum ============ */
.plk-cv{
  display:none;
  padding:44px 0 72px; background:#fff; color:var(--plk-tinta);
  font:400 16px/1.65 inherit;
}
body.plk-modo-cv .plk-cv{ display:block; }
/* En modo CV se esconde todo lo que no es el CV, sin borrar nada:
   se vuelve con el botón «Volver a la página». */
body.plk-modo-cv > *:not(.plk-cv):not(.plk-estado):not(#plk-tablero):not(script):not(svg){
  display:none !important;
}
.plk-c{ width:min(100% - 40px, 980px); margin-inline:auto; }

.plk-cab{
  display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start;
  justify-content:space-between; padding-bottom:26px;
  border-bottom:3px solid var(--plk-ac);
}
.plk-cab h1{
  margin:0; font-size:clamp(26px,3.4vw,36px); line-height:1.15;
  letter-spacing:-.03em; font-weight:800;
}
.plk-cab .plk-rol{
  margin:8px 0 0; font-size:17px; font-weight:600; color:var(--plk-ac);
}
.plk-cab .plk-mat{ margin:10px 0 0; font-size:14px; color:var(--plk-tinta3); }
.plk-cab .plk-mat a{ color:var(--plk-ac); }

/* selector de perfiles */
.plk-perfiles{
  display:flex; flex-wrap:wrap; gap:9px; margin-top:26px;
}
.plk-perf{
  min-height:44px; padding:10px 16px; border-radius:999px; cursor:pointer;
  border:1px solid var(--plk-linea); background:#fff;
  font:600 14.5px/1 inherit; color:var(--plk-tinta2);
}
.plk-perf:hover{ border-color:var(--plk-tinta3); color:var(--plk-tinta); }
.plk-perf[aria-pressed="true"]{
  background:var(--plk-tinta); border-color:var(--plk-tinta); color:#fff;
}
.plk-aviso{
  margin:22px 0 0; padding:15px 17px; border-radius:var(--plk-radio);
  background:var(--plk-ac-luz); font-size:14.5px; line-height:1.55;
  color:var(--plk-tinta2);
}

.plk-bloque{ margin-top:36px; }
.plk-bloque > h2{
  margin:0 0 20px; font-size:13px; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--plk-ac);
  padding-bottom:10px; border-bottom:1px solid var(--plk-linea);
}
.plk-bloque p{ margin:0; font-size:16px; line-height:1.7; color:var(--plk-tinta2); max-width:74ch; }

/* items de antecedentes */
.plk-items{ display:grid; gap:20px; }
.plk-item{
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:20px;
  padding-bottom:20px; border-bottom:1px dashed var(--plk-linea);
}
.plk-item:last-child{ border-bottom:0; padding-bottom:0; }
.plk-item .plk-cuando{
  font:600 14px/1.5 inherit; color:var(--plk-tinta3);
}
.plk-item h3{ margin:0; font-size:17px; font-weight:700; letter-spacing:-.015em; }
.plk-item .plk-donde{ margin:5px 0 0; font-size:15px; color:var(--plk-ac); font-weight:600; }
.plk-item .plk-det{ margin:9px 0 0; font-size:15px; line-height:1.6; color:var(--plk-tinta2); }

/* tabla de horas */
.plk-horas{ width:100%; border-collapse:collapse; font-size:15px; }
.plk-horas th, .plk-horas td{
  text-align:left; padding:12px 10px; border-bottom:1px solid var(--plk-linea);
}
.plk-horas thead th{
  font:800 12px/1.3 inherit; letter-spacing:.07em; text-transform:uppercase;
  color:var(--plk-tinta3);
}
.plk-horas td:last-child, .plk-horas th:last-child{ text-align:right; white-space:nowrap; }
.plk-horas tfoot td{
  font-weight:800; color:var(--plk-tinta); border-bottom:0;
  border-top:2px solid var(--plk-ac); font-size:16px;
}

/* datos en dos columnas */
.plk-datos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0 28px; }
.plk-datos > div{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px;
  padding:12px 0; border-bottom:1px solid var(--plk-linea);
  font-size:15px;
}
.plk-datos dt{ color:var(--plk-tinta3); font-weight:600; }
.plk-datos dd{ margin:0; font-weight:600; }

.plk-pie{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--plk-linea);
  font-size:13.5px; color:var(--plk-tinta3); line-height:1.6;
}

/* ============ 4 · QR ============ */
.plk-qr{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:20px; border:1px solid var(--plk-linea); border-radius:var(--plk-radio);
  background:var(--plk-papel);
}
.plk-qr canvas, .plk-qr img{ width:116px; height:116px; display:block; background:#fff; }
.plk-qr .plk-qr-t{ flex:1 1 220px; font-size:14.5px; line-height:1.6; color:var(--plk-tinta2); }

/* ============ 5 · tablero de edición ============ */
#plk-tablero{
  position:fixed; inset:0; z-index:99999; overflow:auto;
  background:#101722; color:#e8edf4; padding:32px 0;
  font:400 15px/1.6 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
#plk-tablero h2{ margin:0 0 10px; font-size:23px; font-weight:800; color:#fff; }
#plk-tablero .plk-ayuda{ margin:0 0 26px; font-size:14.5px; color:#9fb0c4; max-width:78ch; }
#plk-tablero h3{
  margin:30px 0 14px; padding-top:22px; border-top:1px solid #27364a;
  font-size:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:#7ee0cd;
}
#plk-tablero label{ display:block; margin-bottom:16px; font-size:13.5px; font-weight:700; color:#c4d2e2; }
#plk-tablero input, #plk-tablero select, #plk-tablero textarea{
  display:block; width:100%; margin-top:7px; padding:11px 13px;
  font:400 15px/1.5 inherit; color:#fff;
  background:#1b2635; border:1px solid #2e3e54; border-radius:10px;
}
#plk-tablero textarea{ min-height:96px; resize:vertical; }
#plk-tablero input:focus, #plk-tablero select:focus, #plk-tablero textarea:focus{
  outline:2px solid #16b39c; outline-offset:1px; border-color:transparent;
}
#plk-tablero .plk-pista{ display:block; margin-top:6px; font-size:12.5px; font-weight:500; color:#8496ab; }
#plk-tablero .plk-fila{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#plk-tablero .plk-bts{
  position:sticky; bottom:0; margin-top:30px; padding:18px 0;
  background:linear-gradient(180deg, rgba(16,23,34,0) 0%, #101722 40%);
  display:flex; flex-wrap:wrap; gap:12px;
}
#plk-tablero .plk-bt{ background:#16b39c; color:#06231f; }
#plk-tablero .plk-bt.plk-g{ background:#1b2635; color:#e8edf4; border-color:#2e3e54; }

/* ============ 6 · teléfono ============ */
@media (max-width:760px){
  .plk-c{ width:min(100% - 32px, 980px); }
  .plk-item{ grid-template-columns:1fr; gap:6px; }
  .plk-item .plk-cuando{ order:-1; }
  .plk-acciones{ padding:22px 18px; }
  .plk-acciones .plk-bt{ width:100%; }
  #plk-tablero .plk-fila{ grid-template-columns:1fr; }
  .plk-estado{ font-size:13.5px; padding:12px 16px; }
}

/* ============ 7 · impresión: el CV en PDF ============ */
@media print{
  @page{ margin:14mm 13mm; }
  body.plk-modo-cv .plk-estado,
  body.plk-modo-cv .plk-acciones,
  body.plk-modo-cv .plk-perfiles,
  body.plk-modo-cv .plk-aviso,
  body.plk-modo-cv .plk-qr,
  body.plk-modo-cv #plk-tablero,
  body.plk-modo-cv .plk-no-print{ display:none !important; }
  body.plk-modo-cv{ background:#fff !important; }
  .plk-cv{ padding:0; }
  .plk-c{ width:100%; }
  .plk-bloque{ margin-top:22px; break-inside:avoid; }
  .plk-item{ break-inside:avoid; }
  .plk-cab{ border-bottom-width:2px; }
  .plk-horas thead{ display:table-header-group; }
}