/* CoreHuman · panel administrativo
   Rediseño (2026): sidebar en tinta magenta profunda, fondo y texto con un tinte cálido de marca
   en vez de gris-azulado genérico, títulos y cuerpo en Inter (el primer diseño usaba Newsreader en
   títulos; el rediseño del riel lo cambió, ver --font-titulo). Marca COREDUCACIÓN: magenta
   #9E1F63 → naranja #F15A29 — sin tocar, es la identidad de la institución. */

:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  --fondo: #F8F5F7;
  --superficie: #FFFFFF;
  --sidebar: #1A1220;
  --texto: #241A2C;
  --tenue: #6E6277;
  --borde: #E7E0E6;
  --hover: #F1EBF0;
  --magenta: #9E1F63;
  --naranja: #F15A29;
  --acento-tx: #9E1F63;
  --grad: linear-gradient(118deg, #9E1F63, #F15A29);
  --ok: #1FA971;
  --warn: #E0A100;
  --error: #E5484D;
  --ok-bg: #E6F6EF;
  --warn-bg: #FBF3D9;
  --err-bg: #FCE9EA;
  --info-bg: #F1EBF0;
  --ok-tx: #0F7A50;
  --warn-tx: #8A6500;
  --err-tx: #B3282D;
  --font-cuerpo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sb-w: 256px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #16111A; --superficie: #1E1723; --sidebar: #100B14;
    --texto: #EEE6EC; --tenue: #AA9DAE; --borde: #322A38; --hover: #271F2C;
    --acento-tx: #E86CAB;
    --ok-bg: #123226; --warn-bg: #3A2F0E; --err-bg: #3B1719; --info-bg: #271F2C;
    --ok-tx: #4FD6A0; --warn-tx: #F2C94C; --err-tx: #FF8A8F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #16111A;
  --superficie: #1E1723;
  --sidebar: #100B14;
  --texto: #EEE6EC;
  --tenue: #AA9DAE;
  --borde: #322A38;
  --hover: #271F2C;
  --acento-tx: #E86CAB;
  --ok-bg: #123226;
  --warn-bg: #3A2F0E;
  --err-bg: #3B1719;
  --info-bg: #271F2C;
  --ok-tx: #4FD6A0;
  --warn-tx: #F2C94C;
  --err-tx: #FF8A8F;
  color-scheme: dark;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3);
  --sb-riel: #241A2A;
}

*, *::before, *::after { box-sizing: inherit; }
[hidden] { display: none !important; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 14px/1.5 var(--font-cuerpo); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--font-titulo); }
:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: var(--radio); background: var(--superficie); color: var(--acento-tx); font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.saltar:focus { top: 12px; }
::selection { background: var(--magenta); color: #fff; }
* { scrollbar-color: var(--magenta) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--tenue) 45%, transparent); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--magenta); background-clip: padding-box; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sub { color: var(--tenue); font-size: 12px; line-height: 1.4; }
.ic { flex: none; display: block; }
.nw { white-space: nowrap; }
.num { text-align: right; }

/* ---------- Barra lateral ---------- */
.sb { position: fixed; top: 0; bottom: 0; left: 0; width: var(--sb-w); background:
    radial-gradient(140% 90% at -10% -20%, rgba(158,31,99,.55), transparent 55%),
    radial-gradient(120% 80% at 110% -10%, rgba(241,90,41,.28), transparent 50%),
    var(--sidebar);
  color: #E9DFE7; display: flex; flex-direction: column;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 12px calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 30; transition: width .18s ease, transform .2s ease; }
.brand { display: flex; align-items: center; gap: 12px; }
.logo { width: 36px; height: 36px; border-radius: 9px; background: #fff; display: grid; place-items: center; padding: 4px; flex: none; box-shadow: 0 4px 14px -4px rgba(158,31,99,.65); }
.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-t { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-t b { font-size: 15px; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.brand-t small { font-size: 11px; color: #C9A8BB; }
.brand-logo { display: block; width: 100%; max-width: 200px; height: auto; }
.brand-icono { display: none; }
.nav { flex: 1; overflow-y: auto; overflow-x: hidden; }
.nav a { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; color: #D6C9D3; text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; }
.nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--grad);
  display: none;
}
.lb { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* módulos del plan que todavía no existen: visibles pero sin enlace */
.nav .pronto { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; color: #A99AA6; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: default; user-select: none; }
.nav .pronto .dot { margin-left: auto; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); }
.sb-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 4px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.dev { font-size: 11px; color: #A08D9D; padding-left: 8px; }
.collapse { background: transparent; border: 0; color: #D6C9D3; border-radius: 8px; width: 36px; height: 36px; display: grid; place-items: center; }
.collapse:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.collapse .ic { transition: transform .18s; }
.main { margin-left: var(--sb-w); min-width: 0; transition: margin .18s ease; }
.scrim { position: fixed; inset: 0; background: rgba(10, 6, 12, .5); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 25; }
@media (min-width: 901px) {
  .sb-c .sb { width: var(--sb-wc); }
  .sb-c .main { margin-left: var(--sb-wc); }
  .sb-c .brand-t, .sb-c .lb, .sb-c .dev, .sb-c .brand-logo { display: none; }
  .sb-c .brand-icono { display: grid; }
  .sb-c .brand { justify-content: center; padding-left: 0; padding-right: 0; }
  .sb-c .ng { font-size: 0; height: 1px; padding: 0; margin: 12px 10px; background: rgba(255, 255, 255, .1); }
  .sb-c .nav a { justify-content: center; padding: 10px 0; }
  .sb-c .nav .pronto { justify-content: center; padding: 10px 0; opacity: .6; }
  .sb-c .nav .pronto .dot { display: none; }
  .sb-c .sb-foot { justify-content: center; }
  .sb-c .collapse .ic { transform: rotate(180deg); }
}

/* insignia del menú */
.nb { flex: none; margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--naranja); color: #1E1420; font: 600 11px/20px var(--font-mono); text-align: center; }
@media (min-width: 901px) { .sb-c .nb { position: absolute; top: 5px; right: 9px; min-width: 0; width: 9px; height: 9px; padding: 0; font-size: 0; } }

/* ---------- Encabezado y contenido ---------- */
.top { position: sticky; z-index: 10; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--borde); }
.top-t { min-width: 0; flex: 1; }
.top h1 { line-height: 1.3; letter-spacing: -.005em; }
.top p { margin: 2px 0 0; color: var(--tenue); font-size: 13px; max-width: 72ch; }
.iconbtn { background: var(--superficie); border: 1px solid var(--borde); display: grid; place-items: center; flex: none; }
.iconbtn:hover { background: var(--hover); }
.iconbtn.hamb { display: none; }
.salir { margin: 0; }
.top .iconbtn { text-decoration: none; }
.avatar { display: flex; align-items: center; gap: 10px; padding-left: 4px; padding-right: 6px; border-radius: 999px; text-decoration: none; color: inherit; transition: background .15s ease; }
.avatar:hover, .avatar:focus-visible { background: var(--superficie-2, rgba(158,31,99,.08)); }
.avatar i { width: 34px; height: 34px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; color: #fff; font: 600 12px var(--font-cuerpo); font-style: normal; flex: none; }
.avatar img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; display: block; }
.avatar span { line-height: 1.2; font-size: 13px; }
.avatar small { display: block; color: var(--tenue); font-size: 11px; }
#main:focus { outline: none; }

/* ---------- Componentes ---------- */
.card { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.pad { padding: 20px; }
.pad h2 { font-size: 16px; font-weight: 600; margin-bottom: 14px; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.dos-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.ul { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 8px; }
.kpis {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
    overflow: hidden; box-shadow: 0 1px 3px rgba(20, 10, 20, .04);
}
.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { display: block; text-decoration: none; position: relative; padding: 18px 20px; transition: background-color .15s ease; }
.kpi:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 22%; bottom: 22%; width: 1px; background: var(--borde); }
.kpis > .kpi:first-child::after { background: rgba(255, 255, 255, .12); }
.kpis > .kpi:first-child .l { color: #C9A8BB; }
.kpis > .kpi:first-child .v, .kpis > .kpi:first-child .v-b { color: #fff; }
.kpis > .kpi:first-child .h { color: #9C8A97; }

a.kpi:hover { background-color: var(--hover); }
.kpis > a.kpi:first-child:hover {
  background-color: #3A1335;
  background: radial-gradient(120% 140% at 0% 0%, rgba(241, 90, 41, .5), transparent 55%), linear-gradient(140deg, #5A1A4E, #3A1335 70%);
}
.kpi .l { color: var(--tenue); font-size: 13px; }
.kpi .v { font-size: 30px; line-height: 1.15; margin: 6px 0 4px; }
.kpi .h { color: var(--tenue); font-size: 12px; overflow-wrap: anywhere; }

.tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 14px 16px; border-bottom: 1px solid var(--borde); }
.in { border: 1px solid var(--borde); background: var(--superficie); min-width: 0; }
.in[type="search"] { min-width: 260px; width: 100%; }
.in-file { height: auto; padding: 8px 10px; width: 100%; }
.fld { display: grid; gap: 4px; font-size: 12px; color: var(--tenue); }
.grow { flex: 1; }
.campo { display: grid; gap: 6px; font-size: 13px; font-weight: 500; margin-bottom: 14px; }
.campo .in { width: 100%; font-weight: 400; }
.campo .sub { font-weight: 400; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 0; }
.fc {
  text-decoration: none;
  border: 1px solid var(--borde);
  background: var(--superficie);
  border-radius: 99px;
  font-size: 13px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 7px 14px;
}
.fc:hover { background: var(--hover); }
.fc .mono { font-size: 12px; opacity: .75; }

.tw { overflow-x: auto; border-radius: 0 0 var(--radio) var(--radio); }
table { width: 100%; border-collapse: collapse; min-width: 900px; }
.t-previa { min-width: 820px; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--tenue); padding: 10px 12px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
td { padding: 12px 10px; border-top: 1px solid var(--borde); vertical-align: middle; }
tbody tr:first-child td { border-top: 0; }
tbody tr:hover { background: var(--hover); }
.sortb { text-decoration: none; display: inline-flex; gap: 4px; align-items: center; font-weight: 600; }
.sortb:hover { color: var(--texto); }
.nm { font-weight: 500; min-width: 140px; }
td.mono { font-size: 13px; }
.num-c { white-space: nowrap; font-size: 12px; }
.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--borde); color: var(--tenue); font-size: 12px; }
.paginador { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: center; padding: 12px 16px 16px; }
.chip {
  display: inline-block;
  border: 1px solid var(--borde);
  padding: 2px 8px;
  font-size: 12px;
  white-space: nowrap;
  background: var(--fondo);
  border-radius: 8px;
}

.b { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.b-ok { background: var(--ok-bg); color: var(--ok-tx); }
.b-warn { background: var(--warn-bg); color: var(--warn-tx); }
.b-err { background: var(--err-bg); color: var(--err-tx); }
.b-info { background: var(--info-bg); color: var(--tenue); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  border-radius: var(--radio-sm);
  min-height: 40px;
  padding: 6px 14px;
}
.btn:hover { background: var(--hover); }
.btn-p { color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 10px 20px -14px rgba(158, 31, 99, .8); }
.btn-g { background: transparent; border-color: transparent; color: var(--tenue); }
.btn-block { width: 100%; min-height: 40px; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.note { display: flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--borde); border-left: 3px solid var(--naranja); border-radius: 8px; background: var(--superficie); font-size: 13px; }
.note .ic { color: var(--naranja); margin-top: 2px; }
.empty { padding: 40px 16px; text-align: center; color: var(--tenue); }
.empty b { display: block; color: var(--texto); margin-bottom: 4px; }
.vacio { padding: 32px 24px; text-align: center; display: grid; gap: 8px; justify-items: center; }
.vacio b { font-size: 16px; }
.vacio p { margin: 0; color: var(--tenue); max-width: 60ch; }
.vacio .btn { margin-top: 8px; }

.flash { padding: 12px 14px; margin-bottom: 16px; font-size: 13px; border: 1px solid transparent; border-radius: var(--radio-sm); }
.flash-ok { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--ok); }
.flash-info { background: var(--info-bg); color: var(--texto); border-color: var(--borde); }
.flash-err { background: var(--err-bg); color: var(--err-tx); border-color: var(--error); }

.acciones { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
.fila-error td { background: var(--err-bg); }
.td-res { min-width: 300px; white-space: normal; }
.msg { font-size: 12px; margin-top: 4px; white-space: normal; }
.msg-err { color: var(--err-tx); }
.msg-warn { color: var(--warn-tx); }

/* ---------- Alertas ---------- */
.tl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tl > div { padding: 14px 18px; border-top: 3px solid var(--borde); font-size: 13px; }
.tl > .tl-1 { border-top-color: var(--warn); }
.tl > .tl-2 { border-top-color: var(--error); }
.tl > .tl-3 { border-top-color: var(--tenue); }
.tl b { display: block; margin-bottom: 2px; }
.tl span { color: var(--tenue); }
.chips-b { padding-bottom: 14px; border-bottom: 1px solid var(--borde); }
.al { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(260px, 1.2fr) 290px; gap: 18px; align-items: center; padding: 16px 18px; border-top: 1px solid var(--borde); }
.chips-b + .al { border-top: 0; }
.al-meta { margin-top: 6px; }
.al-jefe { margin-top: 4px; }
.al-jefe a { color: var(--acento-tx); }
.txt-warn { color: var(--warn-tx); }
.al-a { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.al-b { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.al-b form { margin: 0; }
.gl { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; align-items: baseline; }
.rail { display: block; width: 100%; height: 8px; border-radius: 99px; overflow: hidden; }
.rail-bg { fill: var(--info-bg); }
.rail-tick { stroke: var(--tenue); stroke-width: 2; opacity: .55; }
.f-ok { fill: var(--ok); } .f-warn { fill: var(--warn); } .f-err { fill: var(--error); } .f-info { fill: var(--tenue); }
.rail-l { display: grid; grid-template-columns: 25% 25% 1fr; font: 11px var(--font-mono); color: var(--tenue); margin: 2px 0 4px; }
.rail-l span:nth-child(-n+2) { text-align: right; padding-right: 3px; }
.note-info { border-left-color: var(--acento-tx); }
.note-info .ic { color: var(--acento-tx); }
.note-err { border-left-color: var(--error); }
.note-err .ic { color: var(--error); }
.acciones-l { justify-content: flex-start; }
.letter { border: 1px solid var(--borde); border-radius: 8px; padding: 16px 18px; background: var(--fondo); font-size: 13px; line-height: 1.65; }
.letter p { margin: 0 0 12px; }
.const { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; }
.const dt { color: var(--tenue); }
.const dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .const { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .const dd { margin-bottom: 10px; }
}
.ck { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; font-size: 13px; }
.ck input { width: 18px; height: 18px; accent-color: var(--magenta); margin: 1px 0 0; }
.form-estrecho { max-width: 520px; }
.acuse { width: min(640px, 100%); }
.pad p.sub { margin: 0 0 14px; }
.pad form + p.sub { margin: 12px 0 0; }

/* ---------- Trabajadores ---------- */
.ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }

/* ---------- Ficha de trabajador (perfil) ---------- */
.perfil { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
.perfil-lateral { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; position: sticky; top: calc(14px + env(safe-area-inset-top, 0px)); }
.perfil-hero { position: relative; background: var(--grad); color: #fff; padding: 20px 18px; text-align: center; }
.perfil-estado { position: absolute; top: 12px; right: 12px; background: rgba(255, 255, 255, .22); color: #fff; }
.perfil-av {
    display: grid; place-items: center; margin: 6px auto 12px; width: 68px; height: 68px; border-radius: 50%;
    background: rgba(255, 255, 255, .18); border: 2px solid rgba(255, 255, 255, .5); font-size: 22px; font-weight: 600; color: #fff;
}
.perfil-hero h1 { font-size: 17px; line-height: 1.3; color: #fff; }
.perfil-hero p { margin: 4px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .85); }
.perfil-datos { padding: 16px 18px; display: grid; gap: 10px; border-bottom: 1px solid var(--borde); }
.perfil-datos dt { font-size: 11px; color: var(--tenue); }
.perfil-datos dd { margin: 1px 0 0; font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.perfil-acciones { padding: 14px; display: grid; gap: 8px; }

.foto-editor { position: relative; display: inline-block; margin: 6px auto 4px; }
.foto-editor .perfil-av { margin: 0; }
.foto-editor .perfil-av-img { display: block; width: 68px; height: 68px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .5); }
.foto-btn {
    position: absolute; right: -4px; bottom: -4px; width: 28px; height: 28px; border-radius: 50%;
    background: #fff; color: var(--magenta); border: none; display: grid; place-items: center;
    cursor: pointer; box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
}
.foto-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.foto-quitar { display: block; margin: 2px auto 10px; font-size: 11px; color: rgba(255, 255, 255, .85); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0; }
.foto-quitar:hover { color: #fff; }

.t-trab { min-width: 860px; }

/* ---------- Tarjetas de listado (Trabajadores, Vinculaciones, ...) ---------- */
.tarj-orden { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; }
.ordb { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; color: var(--tenue); font-size: 12.5px; font-weight: 500; padding: 4px 9px; border-radius: 99px; }
.ordb:hover { background: var(--hover); color: var(--texto); }
.ordb.activo { background: var(--info-bg); color: var(--acento-tx); font-weight: 600; }
.tarj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tarj-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  height: 100%;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tarj-card .av {
  flex: none;
  width: 52px;
  height: 52px;
  background: var(--grad);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .01em;
  border-radius: 50%;
  box-shadow: 0 8px 16px -10px rgba(158, 31, 99, .8);
}
.tarj-card .av.inactivo { background: var(--tenue); box-shadow: none; }
.tarj-card .info { min-width: 0; display: grid; gap: 3px; width: 100%; }
.tarj-card .nombre { font-weight: 600; font-size: 14.5px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarj-card .meta { font-size: 12px; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarj-card .fila-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.tarj-card .prog { margin: 2px 0; }
.tarj-card .prog .sub { font-size: 11.5px; }
.tarj-card .rail { display: block; width: 100%; height: 6px; border-radius: 99px; overflow: hidden; margin-top: 2px; }

.t-hist { min-width: 700px; }
.enlace-fila { text-decoration: none; }
.enlace-fila:hover { color: var(--acento-tx); text-decoration: underline; }
.pad-b { padding-bottom: 8px; }
.pad-b h2 { margin-bottom: 0; }
.frm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.frm .full { grid-column: 1 / -1; }
.frm .in { width: 100%; }

/* ---------- Usuarios y accesos ---------- */
.t-usr { min-width: 860px; }
.t-acc { min-width: 720px; }
.t-acc .in { min-width: 190px; }
.acc-grupo th { background: var(--fondo); color: var(--texto); font-size: 13px; padding: 8px 12px; border-top: 1px solid var(--borde); }
.acc-guardar { padding: 14px 16px; border-top: 1px solid var(--borde); }
.seg-acc { margin: 14px 0 8px; }
.form-medio { max-width: 720px; }
.reglas { margin: 0 0 16px; }
.cred { border-color: var(--warn); border-left-width: 3px; }
.cred-fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.cred-clave { font-size: 20px; letter-spacing: .04em; padding: 10px 14px; background: var(--fondo); border: 1px dashed var(--borde); border-radius: 8px; user-select: all; }
.menu-prev { display: grid; gap: 12px; margin-top: 12px; }
.chip-pronto { opacity: .55; }

/* ---------- Expediente ---------- */
.t-doc { min-width: 900px; }
.t-chk { min-width: 820px; }
.t-ant { min-width: 1000px; }
.t-ant th, .t-ant td { padding-left: 8px; padding-right: 8px; }
.t-ant td:first-child, .t-ant th:first-child { min-width: 190px; padding-left: 16px; }
.t-venc { min-width: 900px; }
.kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi .v-b { margin: 8px 0 6px; }
.tools-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; flex: 1; margin: 0; }
.form-en-linea { margin: 0; }
.nota-linea { padding: 8px 16px 12px; border-bottom: 1px solid var(--borde); }
.fila-nota { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%; }
.fila-nota form { margin: 0; }
.chips-2 { padding-top: 8px; }
.ck-h { margin: 0 0 4px; align-items: center; }
.acc-det { position: relative; }
.acc-det > summary { list-style: none; cursor: pointer; }
.acc-det > summary::-webkit-details-marker { display: none; }
.acc-det[open] > summary { background: var(--hover); }
.mini-form { display: grid; gap: 10px; margin-top: 8px; padding: 12px; min-width: 260px; max-width: 320px; background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; }
.mini-form .in { width: 100%; }
.mini-form .in-file { padding: 6px 8px; }
.ant-c .b { font-size: 11px; }

/* ---------- Ingreso y páginas de error ---------- */
body.auth { min-height: 100%; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--fondo); position: relative; }
.login::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 4px; background: var(--grad); }
.login-card { width: min(400px, 100%); background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 28px; display: grid; gap: 14px; }
.login-card h1 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.login-card form { display: grid; }
.brand-login { padding: 0 0 6px; }
.brand-login .brand-t b { color: var(--texto); }
.brand-login .brand-t small { color: var(--tenue); }

.error-card { text-align: center; justify-items: center; }
.error-card .codigo { font-size: 44px; font-weight: 500; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.error-card p { margin: 0; color: var(--tenue); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .perfil { grid-template-columns: minmax(0, 1fr); }
  .perfil-lateral { position: static; }
  .al { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dos-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .sb { transform: translateX(-100%); }
  .sb-open .sb { transform: none; }
  .sb-open .scrim { opacity: 1; pointer-events: auto; }
  .main { margin-left: 0; }
  .iconbtn.hamb { display: grid; }
  .avatar span { display: none; }
}
/* Fase 5 · Vinculaciones */
.kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.t-mini { min-width: 640px; }
.t-mini th, .t-mini td { font-size: 13px; }
.t-vinc { min-width: 880px; }
.t-docs { min-width: 700px; }

/* Tablas que en celular se ven como tarjetas (patrón reutilizable).
   Uso: <table class="t-cards"> y en cada <td> un data-label con el nombre de su columna. La celda sin
   data-label es el título de la tarjeta; la celda con class="t-accion" ocupa todo el ancho y sus botones
   llegan a 44px (tamaño cómodo para el dedo). Por encima de 600px no cambia nada: sigue siendo tabla. */
@media (max-width: 600px) {
  table.t-cards { min-width: 0; }
  table.t-cards thead { display: none; }
  table.t-cards, table.t-cards tbody, table.t-cards tr, table.t-cards td { display: block; }
  table.t-cards tr { border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--superficie); padding: 10px 14px; margin-bottom: 10px; }
  table.t-cards tbody tr:hover { background: var(--superficie); }
  table.t-cards td { border-top: 0; padding: 5px 0; overflow-wrap: anywhere; }
  table.t-cards td[data-label]::before { content: attr(data-label); display: block; font: 600 11px var(--font-cuerpo); color: var(--tenue); margin-bottom: 2px; }
  table.t-cards td:not([data-label]):not(.t-accion) { font-weight: 600; }
  table.t-cards td .sub { font-weight: 400; }
  table.t-cards td.t-accion .btn, table.t-cards td.t-accion summary.btn { box-sizing: border-box; width: 100%; min-height: 44px; }
  table.t-cards td.t-accion .mini-form { min-width: 0; max-width: none; }
  table.t-cards td.t-accion .btn-g { border-color: var(--borde); }
  table.t-cards .nm { min-width: 0; }
}
.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--borde); }
.tab { text-decoration: none; color: var(--tenue); font-size: 13px; font-weight: 500; padding: 10px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--texto); }
.tab[aria-current="page"] { color: var(--texto); border-bottom-color: var(--magenta); }
.fila-form { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0 4px; }
.fila-form form { margin: 0; display: flex; gap: 10px; align-items: center; }
.cred-url { display: block; word-break: break-all; }
.al-decision { margin-top: 8px; }
.in-corto { max-width: 110px; }
.in-mono { font-family: var(--font-mono); font-size: 13px; line-height: 1.5; }
.contrato-texto { max-width: 100%; line-height: 1.7; padding: 16px; background: var(--fondo); border-radius: 10px; border: 1px solid var(--borde); }
.contrato-texto p { margin: 0 0 12px; }
.contrato-texto table.datos-contrato { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 13px; background: var(--superficie); }
.contrato-texto table.datos-contrato th, .contrato-texto table.datos-contrato td { border: 1px solid var(--borde); padding: 7px 10px; text-align: left; vertical-align: top; }
.contrato-texto table.datos-contrato th { background: var(--info-bg); color: var(--acento-tx); font-family: var(--font-titulo); font-weight: 600; letter-spacing: .01em; text-align: center; }
.contrato-texto table.datos-contrato td:first-child { width: 38%; font-weight: 600; color: var(--tenue); background: var(--fondo); }
.contrato-texto table.firma-contrato, .hoja table.firma-contrato { width: 100%; border-collapse: collapse; margin: 18px 0 10px; table-layout: fixed; }
.contrato-texto table.firma-contrato th, .contrato-texto table.firma-contrato td,
.hoja table.firma-contrato th, .hoja table.firma-contrato td { border: 1px solid var(--borde); padding: 10px 12px; text-align: left; vertical-align: top; width: 50%; }
.contrato-texto table.firma-contrato th, .hoja table.firma-contrato th { background: var(--info-bg); color: var(--acento-tx); font-family: var(--font-titulo); font-weight: 600; letter-spacing: .02em; text-align: center; }
.contrato-texto table.firma-contrato td, .hoja table.firma-contrato td { font-size: 13px; line-height: 1.6; }
.hoja table.firma-contrato { font-family: var(--font-cuerpo); font-size: 12.5px; }
.btn-guardar-hoja { margin-top: 14px; }
.hoja table.firma-contrato th { background: #F1EBF0; color: #9E1F63; }
.hoja table.firma-contrato td { border-color: #ccc; }

/* Editor de contrato estilo "hoja" (ver.php de elaborar-contratos): la hoja imita una página de Word
   para que Talento Humano vea el contrato como lo verá el pasante, en vez de HTML en bruto. */
.editor-barra { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; background: var(--fondo); border: 1px solid var(--borde); border-bottom: none; border-radius: var(--radio) var(--radio) 0 0; position: sticky; top: calc(env(safe-area-inset-top, 0px)); z-index: 2; }
.editor-barra button { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--texto); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.editor-barra button:hover { background: var(--hover); }
.editor-barra button.activo { background: var(--info-bg); color: var(--acento-tx); border-color: var(--borde); }
.editor-barra .sep { width: 1px; background: var(--borde); margin: 4px 4px; }
.hoja-wrap { background: var(--fondo); border: 1px solid var(--borde); border-top: none; border-radius: 0 0 var(--radio) var(--radio); padding: 24px; max-height: 70vh; overflow: auto; }
.hoja { max-width: 760px; margin: 0 auto; background: #FFFFFF; color: #1a1a1a; box-shadow: 0 1px 3px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.04); border-radius: 2px; padding: 56px 64px; font-family: var(--font-titulo); font-size: 14.5px; line-height: 1.75; min-height: 500px; }
.hoja:focus { outline: none; box-shadow: 0 1px 3px rgba(0,0,0,.15), 0 0 0 2px var(--naranja); }
.hoja p { margin: 0 0 14px; }
.hoja table.datos-contrato { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-family: var(--font-cuerpo); font-size: 12.5px; }
.hoja table.datos-contrato th, .hoja table.datos-contrato td { border: 1px solid #ccc; padding: 6px 9px; text-align: left; vertical-align: top; }
.hoja table.datos-contrato th { background: #F1EBF0; color: #9E1F63; font-weight: 600; text-align: center; }
.hoja table.datos-contrato td:first-child { width: 38%; font-weight: 600; background: #FAF8F9; }
.hoja-solo-lectura { cursor: default; }
@media (max-width: 760px) { .hoja { padding: 28px 22px; } .hoja-wrap { padding: 10px; } }

/* Fase 8 · Reporte SST */
.sst-chart { width: 100%; height: auto; max-width: 760px; }
.sst-grid { stroke: var(--borde); stroke-width: 1; }
.sst-axis { font-size: 10px; fill: var(--tenue); font-family: var(--font-cuerpo); }
.sst-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.sst-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tenue); }
.sst-legend-item i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sst-vacio { margin: 4px 0 0; padding: 14px 16px; border: 1px dashed var(--borde); border-radius: var(--radio); color: var(--tenue); font-size: 13px; background: var(--fondo); }
.sst-c0 { background: #9E1F63; } .sst-c1 { background: #2563EB; } .sst-c2 { background: #F59E0B; }
.sst-c3 { background: #16A34A; } .sst-c4 { background: #DC2626; } .sst-c5 { background: #7C3AED; }
.t-sst { min-width: 980px; }
.t-sst th, .t-sst td { font-size: 12px; }
.sst-year-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.pre-json { white-space: pre-wrap; word-break: break-word; font-size: 12px; padding: 12px; background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; max-height: 320px; overflow: auto; }
.fila-titulo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.fila-titulo h2 { margin: 0; }
.prog { display: grid; gap: 4px; }

/* Portal del candidato */
body.pub-body { background: var(--fondo); min-height: 100%; }
.pub-top { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--borde); background: var(--superficie); }
.pub-top .brand-t b { color: var(--texto); }
.pub-top .brand-t small { color: var(--tenue); }
.pub { max-width: 720px; margin: 0 auto; padding: 20px 16px 60px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.pub-foot { max-width: 720px; margin: 0 auto; padding: 0 16px 40px; color: var(--tenue); font-size: 12px; }
.pub-head h1 { margin: 0 0 6px; }
.pub-acceso, .pub-msg { max-width: 460px; margin: 40px auto 0; text-align: left; }
.pub-msg { text-align: center; }
.pasos { overflow-x: auto; }
.pasos ol { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; min-width: max-content; }
.pasos a { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--tenue); padding: 8px 12px; border-radius: 8px; font-size: 13px; white-space: nowrap; }
.pasos li[aria-current="step"] a { background: var(--superficie); color: var(--texto); font-weight: 600; box-shadow: 0 0 0 1px var(--borde); }
.pn { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 99px; background: var(--fondo); border: 1px solid var(--borde); font-size: 11px; font-weight: 600; }
.pn-ok { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--ok); }
.pasos-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.frm-solo { margin-bottom: 18px; }

@media (max-width: 560px) {
  .kpis-5 { grid-template-columns: minmax(0, 1fr); }
  .frm { grid-template-columns: minmax(0, 1fr); }
  .tl { grid-template-columns: minmax(0, 1fr); }
  .kpis, .kpis-3 { grid-template-columns: minmax(0, 1fr); }
  .in[type="search"] { min-width: 0; }
  .top p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Afinado visual (oct 2026) ----------
   Profundidad suave en tarjetas, campos y archivos con el mismo lenguaje, estados vacíos con
   ícono, tablas más legibles y un encabezado/KPIs que no se desarman en el celular. */
:root { --sombra: 0 1px 2px rgba(36, 26, 44, .04), 0 2px 8px -2px rgba(36, 26, 44, .06); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sombra: 0 1px 2px rgba(0, 0, 0, .3); } }

.card, .kpis, .tarj-card, .perfil-lateral { box-shadow: var(--sombra); }
.top { -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }

/* Campos: borde de marca al enfocar, en vez de solo el contorno del navegador */
.in { transition: border-color .15s ease, box-shadow .15s ease; }
.in:hover:not(:disabled) { border-color: color-mix(in srgb, var(--tenue) 45%, var(--borde)); }
.in:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 18%, transparent); }
.in:disabled { background: var(--fondo); color: var(--tenue); cursor: not-allowed; }
textarea.in { height: auto; line-height: 1.5; padding: 10px 12px; }
input[type="file"].in, .in-file { padding: 5px; cursor: pointer; }
input[type="file"]::file-selector-button {
  margin-right: 10px; border: 1px solid var(--borde); border-radius: 6px; background: var(--hover); color: var(--texto);
  padding: 5px 12px; font: 500 13px var(--font-cuerpo); cursor: pointer; transition: background .15s ease;
}
input[type="file"]::file-selector-button:hover { background: var(--info-bg); color: var(--acento-tx); }

/* Botones: respuesta al clic y transición coherente */
.btn, .iconbtn, .fc { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease; }
.btn:active:not(:disabled), .iconbtn:active { transform: translateY(1px); }
.btn-g:hover { background: var(--hover); color: var(--texto); }

/* Tablas: cabecera en tono de fondo */
thead th { background: color-mix(in srgb, var(--fondo) 60%, var(--superficie)); }
td .sub { margin-top: 1px; }
.miss { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

/* Estados vacíos con ícono de bandeja */
.empty::before, .vacio::before {
  content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 12px;
  background: var(--info-bg) center / 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E1F63' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
}
.vacio::before { margin-bottom: 4px; }

/* Parámetros mensuales del reporte SST: rejilla de meses en vez de una tabla larga */
.sst-params { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 0 20px 16px; }
.sst-mes { border: 1px solid var(--borde); padding: 10px 12px; background: var(--fondo); display: grid; gap: 6px; border-radius: var(--radio-sm); }
.sst-mes b { font-size: 13px; }
.sst-mes label { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 6px; font-size: 11px; color: var(--tenue); }
.sst-mes .in { height: 32px; width: 100%; }
.sst-guardar { padding: 0 20px 20px; }

@media (max-width: 900px) {
  .top { gap: 8px; }
  .top h1 { font-size: 18px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}
@media (max-width: 560px) {
  .top .top-key { display: none; }
  .top .iconbtn { width: 34px; height: 34px; }
  .kpis, .kpis-3, .kpis-4, .kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis > .kpi:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .kpi { padding: 14px 16px; }
  .kpi .v { font-size: 24px; }
  .kpi::after { display: none; }
  .kpis > .kpi { border-top: 1px solid var(--borde); margin-top: -1px; }
}

/* ---------- Ingreso (rediseño 3: panel con esferas y borde curvo) ----------
   Fondo a página completa con el degradado de marca; tarjeta partida en dos: a la izquierda el
   saludo sobre magenta → naranja con esferas decorativas, a la derecha el formulario sobre blanco,
   cuyo borde entra curvo en el panel de color. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.login3 { min-height: 100vh; min-height: 100dvh; display: flex; background: var(--superficie); }
.login3-card {
  position: relative; flex: 1; min-height: 100vh; min-height: 100dvh; display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); overflow: hidden; overflow: clip; background: var(--superficie);
}
.login3-marca { position: relative; min-width: 0; overflow: hidden; color: #fff; padding: 64px clamp(40px, 7vw, 120px); display: flex; align-items: center;
  background:
    radial-gradient(60% 50% at 10% 5%, rgba(255, 255, 255, .12), transparent 60%),
    linear-gradient(150deg, #B0246F 0%, #9E1F63 40%, #D9453B 85%, #F15A29 100%); }
.login3-marca-in {
  position: relative;
  z-index: 1;
  max-width: 440px;
  min-width: 0;
  display: grid;
  gap: 12px;
  margin-bottom: 12vh;
  animation: login3-entra .6s .08s cubic-bezier(.2, .7, .2, 1) both;
}
.login3-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13px; letter-spacing: .08em; margin-bottom: 22px; }
.login3-logo-full { margin: 0 0 26px; }
.login3-logo-full img { width: min(260px, 70%); height: auto; }
.login3-logo-full .logo-oscuro { display: none; }
:root[data-theme="dark"] .login3-logo-full .logo-claro { display: none; }
:root[data-theme="dark"] .login3-logo-full .logo-oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .login3-logo-full .logo-claro { display: none; }
  :root:not([data-theme="light"]) .login3-logo-full .logo-oscuro { display: block; }
}
.login3-logo .logo { width: 44px; height: 44px; border-radius: 50%; padding: 5px; box-shadow: 0 6px 18px -6px rgba(40, 6, 26, .55); }
.login3-marca h1 { font: 800 clamp(44px, 5vw, 68px)/1.02 var(--font-cuerpo); letter-spacing: .02em; margin: 0; }
.login3-lema { margin: 0; font-weight: 700; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .92); }
.login3-marca p:last-child { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .84); }

/* esferas: luz arriba a la izquierda y sombra propia para que se lean como volumen */
.esfera { position: absolute; border-radius: 50%; pointer-events: none; }
.esfera-a { width: min(46vw, 520px); aspect-ratio: 1; height: auto; left: -14%; bottom: -24%;
  background: radial-gradient(circle at 35% 30%, #D2487F, #9E1F63 55%, #6E1546 100%);
  box-shadow: 0 30px 70px -10px rgba(40, 6, 26, .45); }
.esfera-b {
  width: min(20vw, 260px);
  aspect-ratio: 1;
  height: auto;
  left: 52%;
  bottom: 7%;
  background: radial-gradient(circle at 32% 28%, #FF9A6E, #F15A29 45%, #B0246F 100%);
  box-shadow: 0 30px 50px -14px rgba(40, 6, 26, .55), inset -12px -16px 36px rgba(110, 21, 70, .35);
  animation: login3-flota 7s ease-in-out infinite;
}
.esfera-c {
  width: min(16vw, 220px);
  aspect-ratio: 1;
  height: auto;
  right: -5%;
  bottom: -8%;
  background: radial-gradient(circle at 30% 28%, #FF9A6E, #F15A29 50%, #C8384A 100%);
  opacity: .95;
  box-shadow: 0 18px 40px -12px rgba(158, 31, 99, .45);
  animation: login3-flota 9s 1s ease-in-out infinite reverse;
}

.login3-forma { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px clamp(32px, 5vw, 80px); background: var(--superficie); }
/* borde curvo: una elipse del color del formulario que invade el panel de color */
.login3-forma::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: -120px; width: 240px; border-radius: 50%; background: var(--superficie); }
.login3-tema { position: absolute; z-index: 2; top: 24px; right: 24px; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); font: 600 13px var(--font-cuerpo); cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease; }
.login3-tema:hover { background: var(--hover); border-color: var(--magenta); }
.login3-tema > .ic { color: var(--acento-tx); }
.login3-forma-in { position: relative; z-index: 1; width: 100%; max-width: 420px; min-width: 0; display: grid; gap: 4px;
  animation: login3-entra .5s cubic-bezier(.2, .7, .2, 1) both; }
.login3-forma-in h2 { font-size: clamp(34px, 3vw, 42px); font: 700 34px/1.15 var(--font-cuerpo); letter-spacing: .01em; margin: 0; color: var(--texto); }
.login3-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; margin: 2px 2px 0; }
.login3-fila a { color: var(--acento-tx); font-weight: 600; text-decoration: none; }
.login3-fila a:hover { text-decoration: underline; }
.login3-check { display: inline-flex; align-items: center; gap: 8px; color: var(--tenue); cursor: pointer; }
.login3-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--magenta); }
.login3-pie { margin: 26px 0 0; text-align: center; font-size: 13px; color: var(--tenue); }
.login3-pie strong { color: var(--acento-tx); font-weight: 600; }
/* la esfera del medio vive en la tarjeta para cruzar el borde curvo, como en la referencia */
.login3-card > .esfera-b { z-index: 2; left: calc(53.5% - min(20vw, 260px) * .62); bottom: 6%; }
.login3-forma .esfera-c { z-index: 1; }
@keyframes login3-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes login3-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .login3-forma-in, .login3-marca-in, .esfera-b, .esfera-c { animation: none; } }
.login3-forma-in > .sub { margin: 0 0 22px; font-size: 14px; }
.login3-forma-in, .login3-forma-in form { grid-template-columns: minmax(0, 1fr); }
.login3-forma-in form { display: grid; gap: 14px; margin-top: 4px; }

.login3-campo { position: relative; display: flex; align-items: center; height: 52px; border-radius: 12px; background: var(--hover);
  border: 1px solid transparent; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.login3-campo > .ic { position: absolute; left: 16px; color: var(--acento-tx); }
.login3-campo input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0 14px 0 48px; font-size: 14.5px; outline: none; }
.login3-campo input::placeholder { color: var(--tenue); }
.login3-campo:focus-within { background: var(--superficie); border-color: var(--magenta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--magenta) 16%, transparent); }
.login3-ver { flex: none; margin-right: 8px; border: 0; background: transparent; color: var(--acento-tx); font: 700 11px var(--font-cuerpo); letter-spacing: .08em; text-transform: uppercase; padding: 8px; border-radius: 6px; }
.login3-ver:hover { background: var(--info-bg); }

.login3-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border-radius: 12px; border: 0;
  background: var(--grad); color: #fff; font: 600 15px var(--font-cuerpo); text-decoration: none; margin-top: 8px;
  box-shadow: 0 12px 24px -12px rgba(158, 31, 99, .7); transition: filter .15s ease, box-shadow .15s ease, transform .05s ease; }
.login3-btn:hover { filter: brightness(1.06); box-shadow: 0 14px 28px -12px rgba(158, 31, 99, .8); }
.login3-btn:active { transform: translateY(1px); }
.login3-btn-2 { background: var(--superficie); color: var(--texto); border: 1.5px solid var(--magenta); box-shadow: none; margin-top: 0; }
.login3-btn-2:hover { background: var(--info-bg); box-shadow: none; filter: none; }
.login3-div { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; color: var(--tenue); font-size: 12px; }
.login3-div::before, .login3-div::after { content: ""; flex: 1; height: 1px; background: var(--borde); }
.login3-nota { margin-top: 16px; text-align: center; }

@media (min-width: 821px) and (max-height: 760px) {
  .esfera-c { width: 130px; right: -50px; bottom: -50px; }
  .login3-card > .esfera-b { width: min(15vw, 190px); left: calc(53.5% - min(15vw, 190px) * .7); bottom: 5%; }
}
@media (max-width: 820px) {
  .login3-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .login3-marca { padding: 40px 28px 72px; }
  .login3-marca-in { margin-bottom: 0; max-width: 250px; }
  .login3-marca h1 { font-size: 36px; }
  .login3-logo { margin-bottom: 8px; }
  .esfera-a { width: 200px; left: auto; right: -70px; bottom: auto; top: -70px; }
  .esfera-b { width: 76px; left: auto; right: 22px; bottom: 50px; }
  .login3-forma { padding: 28px 24px 40px; justify-content: flex-start; align-items: stretch; }
  .login3-card > .esfera-b { left: auto; right: 22px; bottom: auto; top: 250px; }
  .login3-tema { position: fixed; top: 14px; right: 14px; height: 34px; padding: 0 12px; box-shadow: 0 6px 16px -8px rgba(40, 6, 26, .5); }
  .login3-forma::before { top: -40px; bottom: auto; left: -15%; right: -15%; width: auto; height: 80px; }
  .esfera-c { width: 84px; right: -42px; bottom: -42px; }
}

/* ---------- Barra lateral flotante (rediseño) ----------
   Expandida: panel oscuro redondeado separado del borde. Contraída: riel de íconos; el ítem activo
   es un círculo que sobresale del riel con una muesca del color del fondo. Para que la muesca no
   la recorte el scroll del menú, en modo contraído el color del riel lo pinta .sb::before y la .sb
   deja una franja transparente a la derecha. */
:root { --sb-gap: 14px; --sb-wc: 76px; --sb-franja: 26px; }
.sb .logo { width: 44px; height: 44px; border-radius: 50%; padding: 5px; }
.brand { padding: 4px 6px 20px; }
.ng { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8F7C8C; padding: 16px 12px 6px; }
.nav { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .14) transparent; }
.nav a, .nav .pronto { padding: 10px 12px; border-radius: 14px; gap: 14px; margin: 1px 0; }
.nav a { transition: background-color .15s ease, color .15s ease; }
.nav a[aria-current="page"] { background: var(--grad); color: #fff; box-shadow: 0 10px 22px -12px rgba(241, 90, 41, .75); }
.nav a[aria-current="page"] .nb { background: #fff; color: var(--magenta); }
.sb-foot { border-top-color: rgba(255, 255, 255, .08); }

@media (min-width: 901px) {
  .sb { top: var(--sb-gap); bottom: var(--sb-gap); left: var(--sb-gap); border-radius: 28px; padding: 18px 12px; }
  .main { margin-left: calc(var(--sb-gap) + var(--sb-w) + var(--sb-gap)); }

  .sb-c .sb { width: calc(var(--sb-wc) + var(--sb-franja)); padding: 18px 0; background: transparent; box-shadow: none; }
  .sb-c .sb::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: var(--sb-wc); border-radius: 38px;
    background:
      radial-gradient(140% 60% at -10% -10%, rgba(158, 31, 99, .55), transparent 55%),
      var(--sidebar);
    box-shadow: 0 24px 50px -24px rgba(26, 18, 32, .6); }
  .sb-c .main { margin-left: calc(var(--sb-gap) + var(--sb-wc) + var(--sb-franja)); }
  .sb-c .brand, .sb-c .sb-foot { width: var(--sb-wc); }
  .sb-c .sb-foot { border-top: 0; padding: 10px 0 0; }
  .sb-c .nav { scrollbar-width: none; padding-bottom: 6px; }
  .sb-c .nav::-webkit-scrollbar { display: none; }
  .sb-c .ng { width: 30px; margin: 12px 0 12px calc((var(--sb-wc) - 30px) / 2); }
  .sb-c .nav a, .sb-c .nav .pronto { width: 46px; height: 46px; padding: 0; margin: 5px 0 5px calc((var(--sb-wc) - 46px) / 2); border-radius: 50%; }
  .sb-c .nav a[aria-current="page"] { margin: 14px 0 14px calc(var(--sb-wc) - 46px / 2 - 8px); background: var(--grad); overflow: visible; }
  /* muesca: anillo del color de la página alrededor del círculo activo */
  .sb-c .nav a[aria-current="page"]::before { display: block; content: ""; position: absolute; z-index: -1; inset: -8px; left: -8px; top: -8px;
    width: auto; border-radius: 50%; background: var(--fondo); }
  .sb-c .nav a[aria-current="page"] > .ic { position: relative; }
}

@media (max-width: 900px) {
  .sb { border-radius: 0 26px 26px 0; }
}
/* en modo noche el riel casi se funde con el fondo: borde sutil y un tono más claro */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sb-riel: #241A2A; } }
.sb { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 24px 50px -24px rgba(26, 18, 32, .6); background-color: var(--sb-riel, var(--sidebar)); }
@media (min-width: 901px) {
  .sb-c .sb { background-color: transparent; box-shadow: none; }
  .sb-c .sb::before { background-color: var(--sb-riel, var(--sidebar)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 50px -24px rgba(26, 18, 32, .6); }
}

/* ---------- Contenido al estilo del riel (rediseño) ----------
   Mismo lenguaje que el sidebar y el ingreso: esquinas amplias, piezas separadas que flotan sobre
   el fondo, encabezado como barra redondeada alineada con el riel, títulos en Inter. */
:root { --radio: 18px; --radio-sm: 12px; --font-titulo: var(--font-cuerpo); }
h1, h2, h3 { font-weight: 700; letter-spacing: -.015em; }
/* subtítulos dentro de tarjetas y formularios: por debajo del h2 de la tarjeta (16px/700) */
h3 { font-size: 14px; font-weight: 600; }

/* encabezado: barra flotante que arranca a la misma altura que el riel */
.top { top: calc(env(safe-area-inset-top, 0px) + var(--sb-gap)); margin: var(--sb-gap) var(--sb-gap) 0 0; padding: 12px 14px 12px 22px;
  border: 1px solid var(--borde); border-radius: 22px; background: color-mix(in srgb, var(--superficie) 86%, transparent); box-shadow: var(--sombra); }
.top h1 { font-size: 21px; font-weight: 700; }
.iconbtn { border-radius: 50%; width: 38px; height: 38px; }
.avatar { padding: 3px 12px 3px 3px; border: 1px solid var(--borde); background: var(--superficie); }
.wrap { max-width: 1680px; padding: 20px var(--sb-gap) 56px 0; }

/* indicadores: fichas separadas; la primera con el degradado oscuro de marca */
.kpis, .kpis-3, .kpis-4, .kpis-5 { gap: 14px; background: none; border: 0; box-shadow: none; overflow: visible; border-radius: 0; }
.kpis > .kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 18px 20px; margin: 0;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.kpis > .kpi::after { display: none; }
.kpis > .kpi:first-child { border-color: transparent; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, rgba(241, 90, 41, .38), transparent 55%), linear-gradient(140deg, #4A1440, #2B0E28 70%); }
.kpis > a.kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--magenta) 40%, var(--borde)); box-shadow: 0 14px 28px -18px rgba(158, 31, 99, .45); }
.kpi .v { font-family: var(--font-cuerpo); font-weight: 700; letter-spacing: -.03em; }

/* filtros, campos y botones con las mismas esquinas */
.fc[aria-current="true"] { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -12px rgba(241, 90, 41, .8); }
.fc[aria-current="true"] .mono { opacity: .9; }
.in { height: 40px; border-radius: var(--radio-sm); padding: 0 12px; }
.btn-p:hover { background: var(--grad); filter: brightness(1.06); border-color: transparent; box-shadow: 0 12px 24px -14px rgba(158, 31, 99, .9); }
.card > .tools:first-child, .card > .chips:first-child { border-top-left-radius: var(--radio); border-top-right-radius: var(--radio); }
.paginador .btn { min-width: 40px; border-radius: 999px; padding: 0 14px; }

/* tarjetas de listado: avatar redondo, todas a la misma altura por fila y elevación al pasar */
.tarj-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--magenta) 45%, var(--borde)); box-shadow: 0 16px 30px -20px rgba(158, 31, 99, .5); }

@media (max-width: 900px) {
  .top { margin: 10px 10px 0; top: calc(env(safe-area-inset-top, 0px) + 10px); padding: 10px 12px; border-radius: 18px; }
  .wrap { padding: 16px 10px 48px; }
  .top h1 { font-size: 18px; }
}
@media (max-width: 560px) {
  .kpis, .kpis-3, .kpis-4, .kpis-5 { gap: 10px; }
  .kpis > .kpi { border-top: 1px solid var(--borde); margin-top: 0; padding: 14px 16px; }
  .kpis > .kpi:first-child { border-color: transparent; }
  .avatar { border: 0; padding: 0; background: none; }
}
@media (prefers-reduced-motion: reduce) { .kpis > a.kpi:hover, .tarj-card:hover { transform: none; } }
/* rejilla de tarjetas dentro de una .card: margen interior para que no toque los bordes */
.card > .tarj-orden { margin: 0; padding: 14px 16px 4px; }
.card > .tarj-grid { padding: 12px 16px 16px; }

/* ---------- Menú con grupos plegables ----------
   Solo el grupo de la página actual viene abierto; el encabezado de uno cerrado muestra la suma
   de sus pendientes. En el riel contraído no hay encabezados: se ven todos los íconos. */
.grupo { margin-bottom: 2px; }
.nav .ng { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--font-cuerpo); border-radius: 10px; padding: 11px 12px; margin: 0; transition: color .15s ease, background-color .15s ease; }
.nav .ng:hover { color: #E9DFE7; background: rgba(255, 255, 255, .05); }
.nav .ng > .ng-t { flex: 1; }
.nav .ng .ic { flex: none; transition: transform .18s ease; transform: rotate(-90deg); opacity: .7; }
.grupo.abierto > .ng .ic { transform: none; }
.grupo.actual > .ng { color: #F3E7EF; }
.ng-nb { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: rgba(241, 90, 41, .22); color: #FFB59A;
  font: 600 10.5px/18px var(--font-mono); letter-spacing: 0; text-align: center; }
.grupo.abierto .ng-nb { display: none; }
.grupo:not(.abierto) > .grupo-items { display: none; }
.grupo.abierto > .grupo-items { padding-bottom: 6px; }
@media (min-width: 901px) {
  .sb-c .grupo > .grupo-items { display: block; padding-bottom: 0; }
  .sb-c .nav .ng { pointer-events: none; padding: 0; margin: 12px 0 12px calc((var(--sb-wc) - 30px) / 2); width: 30px; height: 1px; border-radius: 0; background: rgba(255, 255, 255, .1); }
  .sb-c .nav .ng > * { display: none; }
  .sb-c .grupo:first-child > .ng { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nav .ng .ic { transition: none; } }

/* ---------- Riel contraído: un ícono por grupo ----------
   Se ven los íconos del grupo actual; cada uno de los demás grupos es un solo ícono que abre un
   panel flotante con sus opciones (posición fija, para que no lo recorte el scroll del menú). */
.nav .ng .ng-ic { display: none; }
@media (min-width: 901px) {
  .sb-c .grupo:not(.actual) > .grupo-items { display: none; }
  .sb-c .grupo:not(.actual) > .ng { pointer-events: auto; position: relative; display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
    margin: 5px 0 5px calc((var(--sb-wc) - 46px) / 2); border-radius: 50%; background: none; color: #D6C9D3; }
  .sb-c .grupo:not(.actual) > .ng:hover, .sb-c .grupo.flyout > .ng { background: rgba(255, 255, 255, .1); color: #fff; }
  .sb-c .grupo:not(.actual) > .ng > * { display: none; }
  .sb-c .grupo:not(.actual) > .ng > .ng-ic { display: block; }
  .sb-c .grupo:not(.actual) > .ng > .ng-ic .ic { transform: none; opacity: 1; }
  .sb-c .grupo:not(.actual) > .ng > .ng-nb { display: block; position: absolute; top: 6px; right: 7px; min-width: 0; width: 9px; height: 9px; padding: 0; font-size: 0; background: var(--naranja); }
  /* el grupo actual queda entre dos líneas finas */
  .sb-c .grupo.actual + .grupo:not(.actual) { margin-top: 0; }
  .sb-c .grupo.actual > .grupo-items::after { content: ""; display: block; width: 30px; height: 1px; margin: 12px 0 12px calc((var(--sb-wc) - 30px) / 2); background: rgba(255, 255, 255, .1); }
  .sb-c .grupo.actual:last-child > .grupo-items::after { display: none; }

  /* panel flotante con nombres */
  .sb-c .grupo.flyout > .grupo-items { display: block; position: fixed; z-index: 40; left: calc(var(--sb-gap) + var(--sb-wc) + 12px); min-width: 230px; padding: 8px;
    border-radius: 18px; background: var(--sb-riel, var(--sidebar)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 50px -16px rgba(26, 18, 32, .6);
    animation: fly-entra .14s ease-out both; }
  .sb-c .grupo.flyout > .grupo-items::before { content: attr(data-titulo); display: block; padding: 6px 12px 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8F7C8C; }
  .sb-c .grupo.flyout .nav a, .sb-c .grupo.flyout a, .sb-c .grupo.flyout .pronto { width: auto; height: auto; margin: 1px 0; padding: 10px 12px; border-radius: 12px; justify-content: flex-start; }
  .sb-c .grupo.flyout .lb { display: inline; }
  .sb-c .grupo.flyout .nb { position: static; width: auto; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11px; }
}
@keyframes fly-entra { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sb-c .grupo.flyout > .grupo-items { animation: none; } }

/* ---------- Certificados laborales: expedir (certificados/nuevo.php) y ficha (ver.php) ----------
   Pasos a la izquierda y la hoja tamaño carta a la derecha; en pantallas angostas, una debajo de otra.
   La hoja es papel: blanca y con texto oscuro también en modo oscuro (igual que la hoja de contratos). */
.cert-editor { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 18px; align-items: start; }
.cert-pasos { display: grid; gap: 18px; }
.cert-hoja { min-width: 0; }
.paso-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.pad .paso-h h2 { display: flex; align-items: center; gap: 10px; margin: 0; }
.paso-h .btn-g { min-height: 32px; padding: 4px 10px; margin-right: -10px; }
.pad p.paso-nota { margin: 10px 0 0; }

.hoja-wrap-libre { max-height: none; }
.hoja-wrap-sola { border-top: 1px solid var(--borde); border-radius: var(--radio); }
/* Hoja membrete oficial, igual que el PDF (PdfConMarca): carta de 215,9 mm de ancho con márgenes de 25 mm a los lados,
   33 arriba y 28 abajo. --mm es un milímetro de esa hoja (el área de texto mide 165,9 mm), así el membrete escala con ella. */
.hoja-carta { max-width: 816px; min-height: auto; aspect-ratio: 8.5 / 11; padding: 15.28% 11.58% 12.97%; display: flex; flex-direction: column; position: relative; overflow: hidden; container-type: inline-size; --mm: calc(100cqw / 165.9); }
/* Membrete con el mismo logo del PDF (public/upload/logos/Logo-pdf.webp): ~37 % del ancho útil, como los 62 mm del PDF. */
.hoja-membrete, .hoja-pie { position: absolute; left: calc(25 * var(--mm)); right: calc(25 * var(--mm)); display: flex; justify-content: space-between; color: #4A4A4A; font-family: Helvetica, Arial, sans-serif; font-weight: 700; pointer-events: none; }
.hoja-membrete { top: calc(6 * var(--mm)); align-items: flex-start; }
.hoja-membrete p { margin: 0; }
.membrete-personeria { margin-top: calc(2 * var(--mm)) !important; font-size: calc(2.65 * var(--mm)); line-height: 1.27; text-align: center; }
.membrete-marca { width: calc(56 * var(--mm)); }
.membrete-marca img { display: block; width: 100%; height: auto; }
.membrete-marca p { margin: calc(1 * var(--mm)) 0 0 32% !important; font-size: calc(2.05 * var(--mm)); line-height: 1.22; text-align: center; }
.hoja-pie { bottom: calc(6 * var(--mm)); padding-top: calc(2.5 * var(--mm)); border-top: 1px solid #E3C9D7; font-size: calc(2.55 * var(--mm)); }
.hoja-pie ul { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(2 * var(--mm)); align-content: start; }
.hoja-pie li { display: flex; align-items: center; gap: calc(1.8 * var(--mm)); white-space: nowrap; }
.hoja-pie img { width: calc(5 * var(--mm)); height: auto; flex: none; }
.hoja .hoja-consecutivo { margin: 0 0 18px; text-align: right; font: 700 13px var(--font-mono); }
.hoja-consecutivo span { font: 400 11px var(--font-cuerpo); color: #6E6277; }
.hoja-texto { border-radius: 2px; }
.hoja-carta .hoja-texto p { text-align: justify; hyphens: manual; } /* como el PDF */
.hoja-texto[contenteditable="true"] { outline: 1px dashed transparent; outline-offset: 6px; transition: outline-color .15s ease; }
.hoja-texto[contenteditable="true"]:hover { outline-color: #D9CCD5; }
.hoja-texto[contenteditable="true"]:focus { outline: 2px solid var(--naranja); }
.hoja-firmas { margin-top: 10px; padding-top: 6px; border-top: 1px dashed #D9CCD5; }
.hoja-anulada::after { content: "ANULADO"; position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(-35deg); pointer-events: none;
  font: 800 clamp(44px, 9vw, 110px)/1 var(--font-cuerpo); letter-spacing: .08em; color: color-mix(in srgb, var(--error) 20%, transparent); }

.sub.pad-nota { margin: 0; padding: 12px 16px 0; }
/* Firma electrónica: constancia bajo el texto de la hoja (como el recuadro del PDF) y página pública de firma */
.hoja .hoja-sello { margin: 14px 0 0; padding: 8px 10px; border: 1px solid var(--magenta); border-radius: 4px; background: #F8F5F7; color: #3C3C3C; font: 400 11.5px/1.5 var(--font-cuerpo); }
.pad .note + p.sub { margin-top: 12px; }
.in-codigo { font: 600 22px var(--font-mono); letter-spacing: .3em; text-align: center; }
.pub-reenvio { margin-top: 10px; text-align: center; }
/* Recuadro para dibujar la firma: blanco como el papel (también en modo oscuro), con una línea guía */
.firma-pad { position: relative; height: 180px; border: 1px dashed var(--borde); border-radius: var(--radio-sm); background: #FFFFFF; }
.firma-pad canvas { position: relative; z-index: 1; display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.firma-pad-guia { position: absolute; left: 8%; right: 8%; bottom: 38px; border-bottom: 1px solid #D9CCD5; pointer-events: none; }
.firma-pad-acciones { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.firma-pad-acciones .btn-g { margin-left: auto; }
.firma-pad-error { margin: 0; color: var(--err-tx); font-size: 13px; font-weight: 500; }
.firma-guardada { display: grid; place-items: center; min-height: 120px; padding: 12px; border: 1px solid var(--borde); border-radius: var(--radio-sm); background: #FFFFFF; }
.firma-guardada img { display: block; max-width: 100%; max-height: 110px; height: auto; }
.firma-olvidar { margin-top: 6px; text-align: center; }
.hoja-rubrica { display: block; max-width: 220px; max-height: 80px; width: auto; height: auto; margin: 0 0 -14px; position: relative; } /* se monta un poco sobre la línea, como una firma a mano */

.btn-peligro { color: var(--err-tx); border-color: color-mix(in srgb, var(--error) 45%, var(--borde)); }
.btn-peligro:hover { background: var(--err-bg); }

@media (max-width: 1100px) {
  .cert-editor { grid-template-columns: minmax(0, 1fr); }
  /* una debajo de otra: si hay un bloqueo, el aviso va arriba para que no quede escondido tras los pasos */
  .cert-hoja:has(> .note-err) { order: -1; }
}
@media (max-width: 560px) {
  .hoja-carta { aspect-ratio: auto; padding: 26px 20px; font-size: 13.5px; }
  /* en la ficha la hoja ya está dentro de una tarjeta: sin el marco gris gana ancho de lectura */
  .hoja-wrap-sola { padding: 0; border: 0; background: none; }
  /* sin proporción de carta: encabezado y pie vuelven al flujo (arriba y abajo del texto) con un tamaño legible */
  .hoja-carta { --mm: 2.6px; }
  .hoja-carta .hoja-texto p { text-align: left; } /* justificado en un renglón tan corto deja huecos grandes */
  .hoja-membrete, .hoja-pie { position: static; }
  .hoja-membrete { margin-bottom: 20px; gap: 10px; }
  .hoja-pie { margin-top: auto; padding-top: 10px; flex-wrap: wrap; gap: 6px 14px; justify-content: flex-start; }
  .hoja-pie li { white-space: normal; }
}