/* =====================================================================
   SISTEMA PQR ESTUDIANTIL - SISTEMA DE DISENO
   Tokens, componentes y utilidades. Mobile first.
   ===================================================================== */

/* ------------------------------- RESET ------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-sans);font-size:15px;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:var(--primary);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--primary-700)}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
::selection{background:var(--primary-100);color:var(--primary-800)}

/* ------------------------------ TOKENS ------------------------------ */
/* Los colores, espaciado y curvas viven en theme.css (fuente unica con
   soporte de modo claro y oscuro). Aqui solo quedan los tokens de
   estructura que no cambian con el tema. */
:root{
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:'SFMono-Regular',ui-monospace,Menlo,Consolas,'Liberation Mono',monospace;

  --radius-xs:6px; --radius-sm:8px; --radius:12px; --radius-lg:16px;
  --radius-xl:22px; --radius-full:999px;

  --sidebar-w:264px; --topbar-h:64px; --container:1220px;

  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:.15s var(--ease);
  --t:.25s var(--ease);
}

/* --------------------------- TIPOGRAFIA ----------------------------- */
h1,h2,h3,h4,h5{line-height:1.25;font-weight:650;color:var(--text);letter-spacing:-.015em}
h1{font-size:clamp(1.6rem,3.2vw,2.1rem)}
h2{font-size:clamp(1.3rem,2.4vw,1.6rem)}
h3{font-size:1.15rem}
h4{font-size:1rem}
p{color:var(--text-2)}
small{font-size:.82rem}
strong,b{font-weight:640;color:var(--text)}
code,.mono{font-family:var(--font-mono);font-size:.88em}

.title-xl{font-size:clamp(1.9rem,4.5vw,2.7rem);font-weight:720;letter-spacing:-.03em;line-height:1.15}
.lead{font-size:1.06rem;color:var(--text-2);line-height:1.7}
.eyebrow{font-size:.74rem;font-weight:680;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-600)}
.muted{color:var(--text-3)}
.text-sm{font-size:.875rem}
.text-xs{font-size:.78rem}
.text-center{text-align:center}
.text-right{text-align:right}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.prose p{margin-bottom:.9rem;white-space:pre-line}
.prose p:last-child{margin-bottom:0}

/* ------------------------------ LAYOUT ------------------------------ */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:1rem}
@media(min-width:768px){.container{padding-inline:1.75rem}}
.stack{display:flex;flex-direction:column}
.row{display:flex;flex-wrap:wrap;align-items:center}
.between{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
@media (max-width:639px){
  .between{gap:.85rem}
}
.gap-1{gap:.35rem}.gap-2{gap:.6rem}.gap-3{gap:1rem}.gap-4{gap:1.5rem}.gap-5{gap:2rem}
.grid{display:grid;gap:1.25rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
/* min(...,100%) evita que la columna imponga un ancho mayor que el
   contenedor: a 320px la rejilla medida desbordaba 26px. */
.grid-cards{grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
.mt-1{margin-top:.35rem}.mt-2{margin-top:.75rem}.mt-3{margin-top:1.25rem}.mt-4{margin-top:2rem}.mt-5{margin-top:3rem}
.mb-1{margin-bottom:.35rem}.mb-2{margin-bottom:.75rem}.mb-3{margin-bottom:1.25rem}.mb-4{margin-bottom:2rem}
.w-full{width:100%}
.flex-1{flex:1}
.hidden{display:none !important}
.nowrap{white-space:nowrap}
.divider{height:1px;background:var(--border);border:0;margin:1.25rem 0}

/* ------------------------------- CARD ------------------------------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.card--flat{box-shadow:none}
.card--hover{transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.card--hover:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--primary-200)}
.card__head{padding:1.1rem 1.35rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:var(--surface-2)}
.card__title{font-size:1rem;font-weight:640;display:flex;align-items:center;gap:.55rem}
.card__body{padding:1.35rem}
.card__body--tight{padding:1rem}
.card__foot{padding:1rem 1.35rem;border-top:1px solid var(--border);background:var(--surface-2)}

/* ----------------------------- BOTONES ------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.62rem 1.15rem;border-radius:var(--radius-sm);
  font-size:.9rem;font-weight:580;line-height:1.2;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn.is-loading{opacity:.62;pointer-events:none}
.btn svg{width:17px;height:17px;flex-shrink:0}

.btn--primary{background:var(--primary-solid);color:var(--on-primary);box-shadow:var(--shadow-xs)}
.btn--primary:hover{background:var(--primary-600);color:var(--on-primary)}
.btn--accent{background:var(--accent);color:#fff}
.btn--accent:hover{background:var(--accent-700);color:#fff}
.btn--ghost{background:var(--surface);color:var(--text-2);border-color:var(--border)}
.btn--ghost:hover{background:var(--surface-3);color:var(--text);border-color:var(--border-strong)}
.btn--soft{background:var(--primary-50);color:var(--primary-700);border-color:var(--primary-100)}
.btn--soft:hover{background:var(--primary-100);color:var(--primary-800)}
.btn--danger{background:var(--danger-solid);color:var(--on-danger)}
.btn--danger:hover{background:#991b1b;color:var(--on-danger)}
.btn--danger-soft{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-bd)}
.btn--danger-soft:hover{background:var(--danger-bd);color:var(--danger)}
.btn--success{background:var(--success-solid);color:var(--on-success)}
.btn--success:hover{background:#065f46;color:var(--on-success)}
.btn--dark{background:var(--text);color:var(--text-invert)}
.btn--dark:hover{background:var(--text-2);color:var(--text-invert)}
.btn--link{padding:.25rem;color:var(--primary);background:none}
.btn--link:hover{text-decoration:underline}

.btn--sm{padding:.42rem .8rem;font-size:.82rem;border-radius:var(--radius-xs)}
.btn--sm svg{width:15px;height:15px}
.btn--lg{padding:.85rem 1.6rem;font-size:1rem;border-radius:var(--radius)}
.btn--xl{padding:1.05rem 1.9rem;font-size:1.06rem;border-radius:var(--radius);font-weight:620}
.btn--block{display:flex;width:100%}
.btn--icon{padding:.5rem;width:36px;height:36px;border-radius:var(--radius-xs)}
.btn-group{display:inline-flex;gap:.45rem;flex-wrap:wrap}

.btn.is-loading{position:relative;color:transparent !important}
.btn.is-loading::after{content:'';position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
.btn--ghost.is-loading::after,.btn--soft.is-loading::after{border-color:rgba(30,64,175,.25);border-top-color:var(--primary)}

/* ------------------------- BOTONES DE ACCION ------------------------ */
.action-buttons{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.action-btn{display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;padding:1.5rem;border-radius:var(--radius-lg);
  border:2px solid var(--border);background:var(--surface);text-align:left;transition:all var(--t);position:relative;overflow:hidden}
.action-btn::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,transparent 55%,var(--sheen))}
.action-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.action-btn__icon{display:inline-grid;place-items:center;width:42px;height:42px;
  border-radius:var(--radius-sm);background:var(--primary-50);color:var(--primary);flex-shrink:0}
.action-btn__icon .icon{width:22px;height:22px}
/* Accion combinada: los dos iconos comparten la misma celda, ligeramente
   desplazados, para que el conjunto ocupe lo mismo que un icono solo. */
.action-btn__icon--pair{position:relative}
.action-btn__icon--pair .icon{position:absolute;width:19px;height:19px}
.action-btn__icon--pair .icon:first-of-type{transform:translate(-5px,-4px)}
.action-btn__icon--pair .icon:last-of-type{transform:translate(5px,4px);opacity:.75}
.action-btn__title{font-size:1.03rem;font-weight:650;color:var(--text)}
.action-btn__desc{font-size:.855rem;color:var(--text-3);line-height:1.5}
.action-btn--sign{border-color:var(--primary-200);
  background:linear-gradient(160deg,var(--primary-50),var(--surface) 65%)}
.action-btn--sign:hover{border-color:var(--primary-500)}
.action-btn--case{border-color:var(--accent-100);
  background:linear-gradient(160deg,var(--accent-50),var(--surface) 65%)}
.action-btn--case:hover{border-color:var(--accent-600)}
.action-btn--both{border-color:var(--violet-border);
  background:linear-gradient(160deg,var(--violet-soft),var(--surface) 65%)}
.action-btn--both:hover{border-color:var(--violet)}
/* La tarjeta anonima se viste en gris a proposito: es una via discreta,
   no la principal, y el color reservado la habria puesto por delante de
   registrar el caso identificandose, que es lo que conviene por omision.
   Los tokens neutros son los unicos que se comportan igual en claro y en
   oscuro sin definir una pareja nueva. */
.action-btn--anon{border-color:var(--border-strong);
  background:linear-gradient(160deg,var(--surface-2),var(--surface) 65%)}
.action-btn--anon:hover{border-color:var(--text-3)}
.action-btn[aria-disabled="true"]{opacity:.55;pointer-events:none;filter:grayscale(.5)}

/* ------------------------------ BADGES ------------------------------ */
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:var(--radius-full);
  font-size:.745rem;font-weight:620;letter-spacing:.01em;line-height:1.4;white-space:nowrap;border:1px solid transparent}
.badge--slate{background:#f1f5f9;color:#475569;border-color:#e2e8f0}
.badge--blue{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.badge--indigo{background:#eef2ff;color:#4338ca;border-color:#c7d2fe}
.badge--violet{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe}
.badge--amber{background:#fffbeb;color:#b45309;border-color:#fde68a}
.badge--emerald{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.badge--rose{background:#fff1f2;color:#be123c;border-color:#fecdd3}
.badge--teal{background:#f0fdfa;color:#0f766e;border-color:#99f6e4}
.badge--dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--lg{padding:.4rem .85rem;font-size:.82rem}

.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;background:var(--surface-3);
  border:1px solid var(--border);border-radius:var(--radius-full);font-size:.8rem;color:var(--text-2)}

/* ---------------------------- FORMULARIOS --------------------------- */
.form-grid{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.form-grid--1{grid-template-columns:1fr}
.field{display:flex;flex-direction:column;gap:.42rem}
.field--full{grid-column:1/-1}
.label{font-size:.855rem;font-weight:580;color:var(--text-2);display:flex;align-items:center;gap:.3rem}
.label .req{color:var(--danger);font-weight:700}
.hint{font-size:.79rem;color:var(--text-3);line-height:1.45}   /* --text-muted daba 4.37:1 */

.input,.select,.textarea{width:100%;padding:.66rem .85rem;background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);font-size:.92rem;color:var(--text);transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast)}
.input::placeholder,.textarea::placeholder{color:var(--text-muted)}
.input:hover,.select:hover,.textarea:hover{border-color:#94a3b8}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-100)}
.input:disabled,.select:disabled,.textarea:disabled{background:var(--surface-3);color:var(--text-muted);cursor:not-allowed}
.textarea{min-height:118px;resize:vertical;line-height:1.6}
.select{appearance:none;padding-right:2.2rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center}
.input--error,.select--error,.textarea--error{border-color:var(--danger);background:var(--danger-bg)}
.input--error:focus{box-shadow:0 0 0 3px #fecaca}
.field-error{font-size:.79rem;color:var(--danger);font-weight:520;display:flex;align-items:center;gap:.3rem}

.checkbox,.radio{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;font-size:.885rem;color:var(--text-2);line-height:1.55}
.checkbox input,.radio input{width:17px;height:17px;margin-top:.15rem;accent-color:var(--primary);cursor:pointer;flex-shrink:0}
.consent-box{padding:1.05rem 1.2rem;background:var(--primary-50);border:1px solid var(--primary-100);border-radius:var(--radius);border-left:4px solid var(--primary)}
.consent-box__text{font-size:.865rem;color:var(--text-2);line-height:1.65;margin-bottom:.85rem;font-style:italic}

.input-group{display:flex;align-items:stretch}
.input-group .input{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.input-group .btn{border-radius:0 var(--radius-sm) var(--radius-sm) 0}

.search-box{position:relative;flex:1;min-width:200px}
.search-box .input{padding-left:2.4rem}
.search-box svg{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-muted);pointer-events:none}

/* ------------------------- FIRMA DIGITAL ---------------------------- */
.signature-wrap{border:2px dashed var(--border-strong);border-radius:var(--radius);background:var(--surface-2);
  padding:.65rem;transition:border-color var(--t),background var(--t)}
.signature-wrap.is-signed{border-style:solid;border-color:var(--success);background:var(--success-bg)}
.signature-wrap.is-error{border-color:var(--danger);background:var(--danger-bg)}
.signature-canvas{width:100%;height:230px;display:block;background:#fff;border-radius:var(--radius-sm);
  touch-action:none;cursor:crosshair;box-shadow:inset 0 0 0 1px var(--border)}
.signature-baseline{position:relative}
.signature-baseline::after{content:'Firme sobre esta linea';position:absolute;left:50%;bottom:38px;transform:translateX(-50%);
  font-size:.75rem;color:var(--text-muted);pointer-events:none;letter-spacing:.04em}
.signature-baseline.has-ink::after{display:none}
.signature-tools{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center;margin-top:.7rem}
.signature-status{font-size:.82rem;font-weight:560;margin-left:auto;display:flex;align-items:center;gap:.35rem}
.signature-status--ok{color:var(--success)}
/* La marca de firma capturada la dibuja el CSS: asi el texto que anuncia
   el lector de pantalla queda limpio y el simbolo sigue al color del
   estado en ambos temas. */
.signature-status--ok::before{
  content:'';width:15px;height:15px;flex-shrink:0;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.signature-status--pending{color:var(--text-muted)}
.signature-preview{max-height:110px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.4rem}

/* ------------------------------ TABLAS ------------------------------ */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg);
  /* Sin min-width:0 la tabla impone su ancho al contenedor flex/grid que
     la aloja y el desbordamiento se traslada al documento entero: medido
     a 320px, la tabla del panel sacaba la pagina a 436px. */
  min-width:0;max-width:100%}
.table{width:100%;font-size:.885rem;min-width:640px}
.table thead th{text-align:left;padding:.75rem 1rem;background:var(--surface-3);color:var(--text-3);
  font-size:.735rem;font-weight:660;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;border-bottom:1px solid var(--border)}
.table thead th a{color:inherit;display:inline-flex;align-items:center;gap:.3rem}
.table thead th a:hover{color:var(--primary)}
.table tbody td{padding:.8rem 1rem;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text-2)}
.table tbody tr{transition:background var(--t-fast)}
.table tbody tr:hover{background:var(--primary-50)}
.table tbody tr:last-child td{border-bottom:0}
.table .num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono);font-size:.84rem}
.table .actions{white-space:nowrap;text-align:right}
.table__code{font-family:var(--font-mono);font-size:.8rem;font-weight:600;color:var(--primary-700)}
.table__primary{font-weight:580;color:var(--text)}
.table--compact tbody td{padding:.55rem .8rem}

/* --------------------------- PAGINACION ----------------------------- */
.pagination{display:flex;gap:.3rem;align-items:center;justify-content:center;flex-wrap:wrap;padding:1rem}
.pagination a,.pagination span{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 .6rem;border:1px solid var(--border);border-radius:var(--radius-xs);font-size:.85rem;color:var(--text-2);background:var(--surface)}
.pagination a:hover{background:var(--primary-50);border-color:var(--primary-200);color:var(--primary-700)}
.pagination .is-active{background:var(--primary-solid);border-color:var(--primary-solid);color:var(--on-primary);font-weight:600}
.pagination .is-disabled{opacity:.4;pointer-events:none}
.pagination__info{font-size:.83rem;color:var(--text-3);margin-right:auto}

/* -------------------------- ESTADISTICAS ---------------------------- */
.stats-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.2rem 1.3rem;
  position:relative;overflow:hidden;transition:transform var(--t),box-shadow var(--t)}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary)}
.stat--accent::before{background:var(--accent)}
.stat--success::before{background:var(--success)}
.stat--warning::before{background:var(--warning)}
.stat--danger::before{background:var(--danger)}
.stat--violet::before{background:#7c3aed}
.stat__label{font-size:.775rem;font-weight:580;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.45rem}
.stat__value{font-size:1.95rem;font-weight:700;color:var(--text);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat__meta{font-size:.79rem;color:var(--text-muted);margin-top:.45rem;display:flex;align-items:center;gap:.3rem}
.stat__icon{position:absolute;right:1rem;top:1rem;opacity:.22;color:var(--primary)}
.stat__icon .icon{width:24px;height:24px}

.metric-row{display:flex;gap:2rem;flex-wrap:wrap}
.metric{display:flex;flex-direction:column;gap:.15rem}
.metric__value{font-size:1.6rem;font-weight:700;color:var(--text);line-height:1.1;font-variant-numeric:tabular-nums}
.metric__label{font-size:.79rem;color:var(--text-3)}

/* ----------------------------- GRAFICOS ----------------------------- */
.chart-box{position:relative;height:290px}
.chart-box--sm{height:230px}
/* El lienzo debe ocupar exactamente el contenedor: sin tamano CSS explicito el
   atributo width/height del canvas alteraria su tamano visual en cada render. */
.chart-box canvas{display:block;width:100%;height:100%}
.chart-legend{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem;font-size:.8rem;color:var(--text-3)}
.chart-legend span{display:inline-flex;align-items:center;gap:.4rem}
.chart-legend i{width:10px;height:10px;border-radius:3px;display:inline-block}

.bar-list{display:flex;flex-direction:column;gap:.9rem}
.bar-item__head{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;margin-bottom:.35rem}
.bar-item__name{color:var(--text-2);font-weight:520;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-item__value{color:var(--text);font-weight:640;font-variant-numeric:tabular-nums}
.bar-track{height:8px;background:var(--surface-3);border-radius:var(--radius-full);overflow:hidden}
.bar-fill{height:100%;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--primary-500),var(--primary));
  transition:width .8s var(--ease);min-width:3px}
.bar-fill--accent{background:linear-gradient(90deg,#2dd4bf,var(--accent))}
.bar-fill--violet{background:linear-gradient(90deg,#a78bfa,#7c3aed)}

.progress{height:10px;background:var(--surface-3);border-radius:var(--radius-full);overflow:hidden}
.progress__fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--primary));border-radius:var(--radius-full);transition:width 1s var(--ease)}

/* ---------------------------- TIMELINE ------------------------------ */
.timeline{position:relative;padding-left:1.85rem}
.timeline::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--border)}
.timeline__item{position:relative;padding-bottom:1.35rem}
.timeline__item:last-child{padding-bottom:0}
.timeline__dot{position:absolute;left:-1.85rem;top:3px;width:16px;height:16px;border-radius:50%;
  background:var(--surface);border:3px solid var(--primary);box-shadow:0 0 0 3px var(--surface)}
.timeline__dot--success{border-color:var(--success)}
.timeline__dot--warning{border-color:var(--warning)}
.timeline__dot--danger{border-color:var(--danger)}
.timeline__dot--muted{border-color:var(--border-strong)}
.timeline__time{font-size:.755rem;color:var(--text-muted);font-variant-numeric:tabular-nums}
.timeline__title{font-size:.9rem;font-weight:580;color:var(--text);margin:.1rem 0}
.timeline__text{font-size:.845rem;color:var(--text-3);line-height:1.55}

/* ------------------------------ ALERTAS ----------------------------- */
.alert{display:flex;gap:.8rem;padding:.95rem 1.15rem;border-radius:var(--radius);border:1px solid;font-size:.885rem;line-height:1.55}
.alert__icon{flex-shrink:0;display:inline-flex;align-items:center;height:1.4em}
.alert__icon .icon{width:18px;height:18px}
.alert__title{font-weight:640;margin-bottom:.2rem}
.alert--info{background:var(--info-bg);border-color:var(--info-bd);color:#1e40af}
.alert--success{background:var(--success-bg);border-color:var(--success-bd);color:#065f46}
.alert--warning{background:var(--warning-bg);border-color:var(--warning-bd);color:#92400e}
.alert--danger{background:var(--danger-bg);border-color:var(--danger-bd);color:#991b1b}

/* ------------------------------ TOASTS ------------------------------ */
.toast-host{position:fixed;top:1rem;right:1rem;z-index:9999;display:flex;flex-direction:column;gap:.65rem;max-width:min(380px,calc(100vw - 2rem))}
.toast{display:flex;align-items:flex-start;gap:.7rem;padding:.9rem 1rem;background:var(--surface);border:1px solid var(--border);
  border-left:4px solid var(--primary);border-radius:var(--radius);box-shadow:var(--shadow-lg);font-size:.875rem;color:var(--text-2);
  animation:toastIn .3s var(--ease);pointer-events:auto}
.toast.is-out{animation:toastOut .25s var(--ease) forwards}
.toast--success{border-left-color:var(--success)}
.toast--error{border-left-color:var(--danger)}
.toast--warning{border-left-color:var(--warning)}
.toast__icon{display:inline-flex;align-items:center;height:1.35em}
.toast__icon .icon{width:17px;height:17px}
.toast__msg{flex:1;line-height:1.5}
.toast__close{color:var(--text-muted);font-size:1.05rem;line-height:1;padding:.1rem}
.toast__close:hover{color:var(--text)}
@keyframes toastIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(28px)}}

/* ------------------------------ MODAL ------------------------------- */
.modal{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:1rem}
.modal.is-open{display:flex}
.modal__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(3px);animation:fadeIn .2s var(--ease)}
.modal__panel{position:relative;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);
  width:100%;max-width:540px;max-height:90vh;display:flex;flex-direction:column;animation:modalIn .28s var(--ease)}
.modal__panel--lg{max-width:820px}
.modal__panel--xl{max-width:1080px}
.modal__head{padding:1.15rem 1.4rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.modal__title{font-size:1.05rem;font-weight:640}
.modal__close{width:32px;height:32px;border-radius:var(--radius-xs);display:grid;place-items:center;color:var(--text-3);font-size:1.2rem}
.modal__close:hover{background:var(--surface-3);color:var(--text)}
.modal__body{padding:1.4rem;overflow-y:auto}
.modal__foot{padding:1.05rem 1.4rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:.6rem;flex-wrap:wrap;background:var(--surface-2)}
@keyframes modalIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
body.modal-open{overflow:hidden}

/* -------------------------- ESTADOS VACIOS -------------------------- */
.empty{text-align:center;padding:3.2rem 1.5rem;color:var(--text-3)}
/* Antes era un emoji dimensionado con font-size; ahora es un SVG dentro de
   un disco, que si responde a los tokens de color del tema. */
.empty__icon{width:58px;height:58px;margin:0 auto .95rem;border-radius:50%;
  display:grid;place-items:center;background:var(--surface-3);color:var(--text-3)}
.empty__title{font-size:1.03rem;font-weight:620;color:var(--text-2);margin-bottom:.4rem}
.empty__text{font-size:.885rem;max-width:420px;margin:0 auto 1.2rem;line-height:1.6}

/* --------------------------- SKELETONS ------------------------------ */
.skeleton{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 37%,var(--surface-3) 63%);
  background-size:400% 100%;animation:shimmer 1.4s infinite linear;border-radius:var(--radius-xs)}
.skeleton--text{height:12px;margin-bottom:.6rem}
.skeleton--title{height:20px;width:55%;margin-bottom:1rem}
.skeleton--card{height:150px;border-radius:var(--radius-lg)}
.skeleton--row{height:44px;margin-bottom:.5rem}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@keyframes spin{to{transform:rotate(360deg)}}

.spinner{width:20px;height:20px;border:2.5px solid var(--primary-100);border-top-color:var(--primary);border-radius:50%;animation:spin .65s linear infinite}
.loading-overlay{position:fixed;inset:0;background:rgba(255,255,255,.72);backdrop-filter:blur(2px);z-index:9500;display:none;place-items:center}
.loading-overlay.is-active{display:grid}

/* ------------------------- ARCHIVOS / DROPZONE ---------------------- */
.dropzone{border:2px dashed var(--border-strong);border-radius:var(--radius);padding:2rem 1.25rem;text-align:center;
  background:var(--surface-2);cursor:pointer;transition:all var(--t)}
.dropzone:hover,.dropzone.is-over{border-color:var(--primary-500);background:var(--primary-50)}
.dropzone__icon{margin-bottom:.6rem;opacity:.6;color:var(--text-3)}
.dropzone__icon .icon{width:30px;height:30px}
.dropzone__text{font-size:.9rem;color:var(--text-2);font-weight:540}
.dropzone__hint{font-size:.79rem;color:var(--text-muted);margin-top:.35rem}

.file-list{display:flex;flex-direction:column;gap:.55rem;margin-top:.9rem}
.file-item{display:flex;align-items:center;gap:.75rem;padding:.65rem .85rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm)}
.file-item__icon{width:34px;height:34px;border-radius:var(--radius-xs);display:grid;place-items:center;background:var(--surface-3);color:var(--text-3);flex-shrink:0}
.file-item__icon .icon{width:17px;height:17px}
.file-item__body{flex:1;min-width:0}
.file-item__name{font-size:.855rem;font-weight:540;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-item__meta{font-size:.755rem;color:var(--text-muted)}
.file-item__remove{color:var(--text-muted);padding:.3rem;display:grid;place-items:center;
  /* 44px de area tactil aunque el icono mida 17: el minimo de Apple HIG
     para no obligar a apuntar con precision. */
  min-width:44px;min-height:44px}
.file-item__remove .icon{width:17px;height:17px}
.file-item__remove:hover{color:var(--danger)}

.evidence-grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(min(165px,100%),1fr))}
.evidence-card{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);transition:all var(--t)}
.evidence-card:hover{box-shadow:var(--shadow);border-color:var(--primary-200)}
.evidence-card__thumb{height:118px;background:var(--surface-3);display:grid;place-items:center;font-size:1.9rem;color:var(--text-muted);overflow:hidden;cursor:pointer}
.evidence-card__thumb img{width:100%;height:100%;object-fit:cover}
.evidence-card__body{padding:.65rem .75rem}
.evidence-card__name{font-size:.79rem;font-weight:560;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evidence-card__meta{font-size:.72rem;color:var(--text-muted);margin-top:.15rem}
.evidence-card__actions{display:flex;gap:.35rem;padding:.5rem .75rem;border-top:1px solid var(--border);background:var(--surface-2)}

/* ------------------------------- TABS ------------------------------- */
.tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--border);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{padding:.7rem 1.05rem;font-size:.885rem;font-weight:560;color:var(--text-3);border-bottom:2px solid transparent;
  white-space:nowrap;transition:all var(--t-fast);display:inline-flex;align-items:center;gap:.4rem}
.tab:hover{color:var(--text-2);background:var(--surface-2)}
.tab.is-active{color:var(--primary);border-bottom-color:var(--primary);font-weight:620}
.tab__count{background:var(--surface-3);padding:.05rem .4rem;border-radius:var(--radius-full);font-size:.72rem;font-weight:620}
.tab.is-active .tab__count{background:var(--primary-100);color:var(--primary-700)}
.tab-panel{display:none;padding-top:1.35rem}
.tab-panel.is-active{display:block;animation:fadeIn .25s var(--ease)}

/* --------------------------- DEFINICIONES --------------------------- */
.dl{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr))}
.dl__item{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.dl__label{font-size:.735rem;font-weight:620;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}
.dl__value{font-size:.92rem;color:var(--text);font-weight:520;word-break:break-word}
.dl--rows{grid-template-columns:1fr}
.dl--rows .dl__item{flex-direction:row;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px dashed var(--border)}
.dl--rows .dl__item:last-child{border-bottom:0}
.dl--rows .dl__label{text-transform:none;font-size:.85rem;letter-spacing:0;font-weight:520;color:var(--text-3)}

/* =====================  LAYOUT ADMINISTRATIVO  ====================== */
.admin{min-height:100vh;display:flex;background:var(--bg)}

.sidebar{width:var(--sidebar-w);background:#0f172a;color:#cbd5e1;display:flex;flex-direction:column;
  position:fixed;inset-block:0;left:0;z-index:200;transition:transform var(--t);overflow-y:auto}
.sidebar__brand{padding:1.15rem 1.25rem;display:flex;align-items:center;gap:.7rem;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;background:#0f172a;z-index:2}
.sidebar__logo{width:36px;height:36px;border-radius:9px;
  background:linear-gradient(135deg,var(--primary-solid),var(--avatar-end));   /* --accent daba 1.86:1 */
  display:grid;place-items:center;font-weight:750;color:#fff;font-size:.9rem;flex-shrink:0}
.sidebar__name{font-size:.94rem;font-weight:650;color:#fff;line-height:1.2}
.sidebar__sub{font-size:.7rem;color:#94a3b8}   /* #64748b daba 3.75:1 sobre #0f172a */
.sidebar__nav{flex:1;padding:1rem .7rem}
.sidebar__group{font-size:.68rem;font-weight:680;text-transform:uppercase;letter-spacing:.09em;color:#94a3b8;padding:.85rem .75rem .4rem}   /* #475569 daba 2.36:1 */
.sidebar__link{display:flex;align-items:center;gap:.7rem;padding:.6rem .75rem;border-radius:var(--radius-sm);
  font-size:.875rem;color:#cbd5e1;transition:all var(--t-fast);margin-bottom:.12rem}
.sidebar__link:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar__link.is-active{background:var(--primary-solid);color:var(--on-primary);font-weight:580;box-shadow:0 2px 8px rgba(30,64,175,.4)}
.sidebar__link svg{width:18px;height:18px;flex-shrink:0;opacity:.85}
.sidebar__badge{margin-left:auto;background:var(--danger-solid);color:var(--on-danger);font-size:.68rem;font-weight:700;padding:.1rem .42rem;border-radius:var(--radius-full)}
.sidebar__foot{padding:.9rem 1rem;border-top:1px solid rgba(255,255,255,.08);font-size:.74rem;color:#8b9bb4}   /* #475569 daba 2.36:1 */

.admin__main{flex:1;margin-left:var(--sidebar-w);min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--topbar-h);background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;
  gap:1rem;padding:0 1.25rem;position:sticky;top:0;z-index:100}
.topbar__toggle{display:none;width:38px;height:38px;border-radius:var(--radius-xs);place-items:center;color:var(--text-2)}
.topbar__toggle:hover{background:var(--surface-3)}
.topbar__search{flex:1;max-width:430px}
.topbar__actions{margin-left:auto;display:flex;align-items:center;gap:.55rem}
.topbar__icon{position:relative;width:38px;height:38px;border-radius:var(--radius-xs);display:grid;place-items:center;color:var(--text-2)}
.topbar__icon:hover{background:var(--surface-3);color:var(--text)}
.topbar__dot{position:absolute;top:7px;right:7px;min-width:16px;height:16px;padding:0 3px;background:var(--danger-solid);color:var(--on-danger);
  border-radius:var(--radius-full);font-size:.63rem;font-weight:700;display:grid;place-items:center;border:2px solid var(--surface)}

.avatar{width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary-solid),var(--avatar-end));color:var(--on-primary);
  display:grid;place-items:center;font-size:.82rem;font-weight:650;flex-shrink:0}
.avatar--lg{width:52px;height:52px;font-size:1.05rem}
.avatar--sm{width:28px;height:28px;font-size:.7rem}

.dropdown{position:relative}
.dropdown__menu{position:absolute;right:0;top:calc(100% + .5rem);min-width:230px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:.4rem;display:none;z-index:150;animation:modalIn .18s var(--ease)}
.dropdown.is-open .dropdown__menu{display:block}
.dropdown__header{padding:.6rem .75rem;border-bottom:1px solid var(--border);margin-bottom:.3rem}
.dropdown__item{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border-radius:var(--radius-xs);
  font-size:.865rem;color:var(--text-2);width:100%;text-align:left}
.dropdown__item:hover{background:var(--surface-3);color:var(--text)}
.dropdown__item--danger{color:var(--danger)}
.dropdown__item--danger:hover{background:var(--danger-bg)}
.dropdown__menu--wide{min-width:330px;max-height:420px;overflow-y:auto}

.page{padding:1.5rem 1.25rem 3rem;flex:1}
@media(min-width:768px){.page{padding:1.9rem 1.9rem 3.5rem}}
.page__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1.15rem;flex-wrap:wrap;margin-bottom:1.6rem}
.page__title{font-size:1.55rem;font-weight:690;letter-spacing:-.02em;display:flex;align-items:center;gap:.65rem}
.page__subtitle{font-size:.9rem;color:var(--text-3);margin-top:.25rem}
.breadcrumb{display:flex;align-items:center;gap:.4rem;font-size:.79rem;color:var(--text-muted);margin-bottom:.5rem;flex-wrap:wrap}
.breadcrumb a{color:var(--text-3)}
.breadcrumb a:hover{color:var(--primary)}

.filters{display:flex;gap:.65rem;flex-wrap:wrap;align-items:flex-end}
.filters .field{min-width:150px;gap:.3rem}
.filters .label{font-size:.755rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:620}
.filters .input,.filters .select{padding:.5rem .7rem;font-size:.855rem}

/* ------------------- BARRA SUPERIOR EN MOVIL -----------------------
   Medido a 320px: el nombre del usuario (142px, sin corte de linea) mas
   los iconos sumaban 248px de acciones y sacaban la pagina a 500px.
   ------------------------------------------------------------------- */
@media(max-width:767px){
  .topbar{padding:0 .75rem;gap:.5rem}
  .topbar__actions{gap:.35rem}
  /* El nombre se sustituye por el avatar, que ya identifica la sesion.
     El nombre completo sigue en el menu desplegable. */
  .topbar__actions .dropdown > button > .text-sm{display:none}
  .topbar__search{min-width:0}
  .topbar__search .input{font-size:16px}   /* evita el zoom automatico de iOS */
  .page{padding:1.1rem .9rem 2.5rem}
}
@media(max-width:479px){
  /* Por debajo de 480px la caja de busqueda no deja sitio util: se accede
     a la busqueda desde el menu lateral. */
  .topbar__search{display:none}
}

@media(max-width:1023px){
  .sidebar{transform:translateX(-100%);box-shadow:var(--shadow-xl)}
  .sidebar.is-open{transform:none}
  .admin__main{margin-left:0}
  .topbar__toggle{display:grid}
  .sidebar-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:150;display:none}
  .sidebar-backdrop.is-visible{display:block}
}

/* =======================  PORTAL PUBLICO  =========================== */
.pubnav{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.pubnav__inner{position:relative}   /* ancla del panel desplegable */
.pubnav__inner{display:flex;align-items:center;gap:1.25rem;height:68px}
.pubnav__brand{display:flex;align-items:center;gap:.7rem;font-weight:650;color:var(--text)}
.pubnav__logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--primary-solid),var(--accent-solid));
  display:grid;place-items:center;color:#fff;font-weight:750;font-size:.88rem}
.pubnav__title{font-size:.95rem;line-height:1.2}
.pubnav__sub{font-size:.72rem;color:var(--text-3);font-weight:400}   /* --text-muted daba 4.47:1 */
.pubnav__links{margin-left:auto;display:flex;align-items:center;gap:.35rem}
.pubnav__link{padding:.5rem .85rem;border-radius:var(--radius-sm);font-size:.885rem;color:var(--text-2);font-weight:520}
.pubnav__link:hover{background:var(--surface-3);color:var(--text)}
.pubnav__link.is-active{color:var(--primary);background:var(--primary-50)}
.pubnav__burger{display:none}

/* -------------------- NAVEGACION EN PANTALLA ESTRECHA ---------------
   Medido en el marco de auditoria: la fila de enlaces ocupa 526px, de
   modo que por debajo de ~860px empujaba el documento y aparecia scroll
   horizontal en 320, 375, 390 y 430px. Debajo de ese ancho los enlaces
   pasan a un panel desplegable.
   -------------------------------------------------------------------- */
@media(max-width:859px){
  .pubnav__sub{display:none}

  .pubnav__burger{
    display:inline-grid;place-items:center;margin-left:auto;
    width:42px;height:42px;flex-shrink:0;
    border:1px solid var(--border);border-radius:var(--radius-sm);
    background:transparent;color:var(--text-2);cursor:pointer;
  }
  .pubnav__burger .icon{width:20px;height:20px}
  .pubnav__burger[aria-expanded="true"]{background:var(--surface-3);color:var(--text)}

  .pubnav__inner{gap:.6rem}

  .pubnav__links{
    position:absolute;left:0;right:0;top:100%;
    margin-left:0;
    display:grid;gap:.15rem;align-items:stretch;
    padding:.6rem max(1rem,4vw) 1rem;
    background:var(--surface);border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-lg);

    /* Cerrado sin sacarlo del arbol de accesibilidad de golpe: se oculta
       con visibility para que el foco no entre mientras esta plegado. */
    visibility:hidden;opacity:0;
    transform:translate3d(0,-8px,0);
    transition:opacity var(--dur-fast) var(--ease-standard),
               transform var(--dur-fast) var(--ease-standard),
               visibility 0s linear var(--dur-fast);
  }
  .pubnav.is-open .pubnav__links{
    visibility:visible;opacity:1;transform:none;
    transition-delay:0s;
  }
  .pubnav__link{padding:.7rem .85rem;font-size:.95rem;min-height:44px;display:flex;align-items:center}
  .pubnav__links .btn{width:100%;justify-content:center;min-height:44px;margin-top:.4rem}
  .pubnav__links .theme-toggle{width:100%;height:44px}
}

/* Sin JavaScript el boton no puede abrir nada: se oculta y los enlaces
   vuelven a la fila, que sigue siendo navegable con desplazamiento
   propio en vez de romper el ancho del documento. */
@media(max-width:859px){
  html:not(.js) .pubnav__burger{display:none}
  html:not(.js) .pubnav__links{
    position:static;visibility:visible;opacity:1;transform:none;
    display:flex;overflow-x:auto;padding:.4rem 0;margin-left:auto;
    background:transparent;border:0;box-shadow:none;
    -webkit-overflow-scrolling:touch;
  }
  html:not(.js) .pubnav__links .btn,
  html:not(.js) .pubnav__links .theme-toggle{width:auto}
}

.hero{background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 55%,#0d9488 130%);color:#fff;padding:3.5rem 0 3.2rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 18% 22%,rgba(255,255,255,.09),transparent 42%),radial-gradient(circle at 82% 78%,rgba(13,148,136,.22),transparent 45%)}
.hero__inner{position:relative}
.hero h1{color:#fff;max-width:760px}
.hero p{color:rgba(255,255,255,.86);max-width:620px;margin-top:.9rem;font-size:1.05rem}
.hero__actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.9rem}
.hero__stats{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));margin-top:2.6rem;
  padding-top:1.9rem;border-top:1px solid rgba(255,255,255,.16)}
.hero__stat-value{font-size:1.9rem;font-weight:720;line-height:1;font-variant-numeric:tabular-nums}
.hero__stat-label{font-size:.8rem;color:rgba(255,255,255,.72);margin-top:.3rem}
.hero .btn--ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff}
.hero .btn--ghost:hover{background:rgba(255,255,255,.2);color:#fff}

.pqr-card{display:flex;flex-direction:column;height:100%}
.pqr-card__top{padding:1.15rem 1.3rem .85rem;border-bottom:1px solid var(--border)}
.pqr-card__code{font-family:var(--font-mono);font-size:.76rem;font-weight:640;color:var(--primary-700);letter-spacing:.02em}
.pqr-card__title{font-size:1.02rem;font-weight:640;line-height:1.4;margin:.45rem 0 .5rem;color:var(--text)}
.pqr-card__desc{font-size:.855rem;color:var(--text-3);line-height:1.6}
.pqr-card__stats{display:flex;gap:1.35rem;padding:.9rem 1.3rem;background:var(--surface-2);flex-wrap:wrap}
.pqr-card__stat{display:flex;flex-direction:column}
.pqr-card__stat b{font-size:1.1rem;font-weight:700;color:var(--text);line-height:1.2;font-variant-numeric:tabular-nums}
.pqr-card__stat span{font-size:.72rem;color:var(--text-muted)}
.pqr-card__foot{padding:.9rem 1.3rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:auto;border-top:1px solid var(--border)}

.pqr-hero{background:var(--surface);border-bottom:1px solid var(--border);padding:2.2rem 0 1.9rem}
.pqr-hero__code{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.82rem;font-weight:650;
  color:var(--primary-700);background:var(--primary-50);padding:.32rem .75rem;border-radius:var(--radius-full);border:1px solid var(--primary-100)}
.pqr-hero__title{font-size:clamp(1.5rem,3.6vw,2.2rem);font-weight:700;letter-spacing:-.025em;margin:.85rem 0 .75rem;line-height:1.25}
.pqr-hero__meta{display:flex;gap:1.35rem;flex-wrap:wrap;font-size:.845rem;color:var(--text-3);margin-top:.85rem}
.pqr-hero__meta span{display:inline-flex;align-items:center;gap:.35rem}

/* auto-fit con minmax reparte en filas de dos en pantalla estrecha, y con
   tres elementos deja la cuarta celda vacia: un hueco que se lee como un
   dato que falta. Con flex, la ultima fila la ocupan los que queden.
   El separador de 1px se hace con el fondo del contenedor y un hueco de
   1px, igual que antes. */
.stats-banner{display:flex;flex-wrap:wrap;gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin:1.6rem 0}
.stats-banner__item{
  background:var(--surface);padding:1.35rem 1.1rem;text-align:center;
  /* Crece para repartirse el sobrante: tres elementos ocupan el ancho
     completo en una fila, y dos mas uno lo ocupan en dos filas sin dejar
     celdas muertas. */
  flex:1 1 150px;min-width:0;
}
.stats-banner__value{font-size:2.1rem;font-weight:730;line-height:1;color:var(--primary);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.stats-banner__label{font-size:.795rem;color:var(--text-3);margin-top:.45rem;font-weight:520}
.stats-banner__item--accent .stats-banner__value{color:var(--accent)}
.stats-banner__item--violet .stats-banner__value{color:var(--violet)}   /* #7c3aed fijo fallaba en oscuro */

.section{margin-bottom:1.6rem}
.section__title{font-size:1.05rem;font-weight:650;margin-bottom:.7rem;display:flex;align-items:center;gap:.55rem;color:var(--text)}
.section__title::before{content:'';width:3px;height:17px;background:var(--primary);border-radius:2px}

.steps{display:flex;flex-direction:column;gap:0}
.step{display:flex;gap:1rem;padding-bottom:1.35rem;position:relative}
.step:not(:last-child)::before{content:'';position:absolute;left:16px;top:36px;bottom:0;width:2px;background:var(--border)}
.step__num{width:34px;height:34px;border-radius:50%;background:var(--primary-50);color:var(--primary-700);
  display:grid;place-items:center;font-weight:680;font-size:.85rem;flex-shrink:0;border:2px solid var(--primary-100);z-index:1}
.step__title{font-weight:620;color:var(--text);margin-bottom:.2rem}
.step__text{font-size:.875rem;color:var(--text-3);line-height:1.6}

.receipt{max-width:760px;margin-inline:auto}
.receipt__head{text-align:center;padding:2.2rem 1.5rem 1.6rem;border-bottom:2px solid var(--primary)}
.receipt__seal{width:64px;height:64px;margin:0 auto 1rem;border-radius:50%;background:var(--success-bg);border:2px solid var(--success);
  display:grid;place-items:center;font-size:1.7rem;color:var(--success)}
.receipt__title{font-size:1.2rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--text)}
.receipt__inst{font-size:.86rem;color:var(--text-3);margin-top:.35rem}
.receipt__sign{margin-top:1.5rem;padding-top:1.2rem;border-top:1px dashed var(--border);text-align:center}
.receipt__sign img{max-height:130px;margin:0 auto;filter:contrast(1.05)}
.receipt__sign-line{width:min(320px,80%);height:1px;background:var(--text);margin:.6rem auto .5rem}
.receipt__code{font-family:var(--font-mono);font-size:1.02rem;font-weight:680;color:var(--primary-700);letter-spacing:.06em}

.closed-banner{background:var(--warning-bg);border:1px solid var(--warning-bd);border-left:4px solid var(--warning);
  padding:1.1rem 1.3rem;border-radius:var(--radius);display:flex;gap:.9rem;align-items:flex-start}
.closed-banner__title{font-weight:680;color:#92400e;font-size:1rem;letter-spacing:.03em;text-transform:uppercase}
.closed-banner__text{font-size:.885rem;color:#a16207;margin-top:.25rem;line-height:1.55}

.footer{background:#0f172a;color:#94a3b8;padding:2.6rem 0 1.6rem;margin-top:4rem}
.footer__grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.footer h4{color:#fff;font-size:.9rem;margin-bottom:.75rem}
.footer p,.footer li{font-size:.845rem;line-height:1.75;color:#94a3b8}
.footer a{color:#cbd5e1}
.footer a:hover{color:#fff}
.footer__bottom{margin-top:2rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.09);font-size:.79rem;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

.auth{min-height:100vh;display:grid;place-items:center;padding:1.5rem;
  background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 100%);position:relative}
.auth::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 25% 20%,rgba(13,148,136,.24),transparent 45%),radial-gradient(circle at 78% 82%,rgba(59,130,246,.22),transparent 45%)}
.auth__card{position:relative;width:100%;max-width:420px;background:var(--surface);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);padding:2.4rem 2rem;animation:modalIn .4s var(--ease)}
.auth__logo{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--primary-solid),var(--accent-solid));
  display:grid;place-items:center;color:#fff;font-weight:760;font-size:1.15rem;margin:0 auto 1.1rem}
.auth__title{text-align:center;font-size:1.3rem;font-weight:680}
.auth__sub{text-align:center;font-size:.875rem;color:var(--text-3);margin:.4rem 0 1.8rem}
.auth__foot{text-align:center;margin-top:1.5rem;font-size:.83rem;color:var(--text-3)}

/* --------------------------- UTILIDADES ----------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fade-in{animation:fadeInUp .4s var(--ease)}
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sticky-top{position:sticky;top:calc(var(--topbar-h) + 1rem)}

@media print{
  .sidebar,.topbar,.pubnav,.footer,.no-print,.btn,.toast-host{display:none !important}
  .admin__main{margin-left:0}
  body{background:#fff}
  .card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
  .page{padding:0}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* =====================================================================
   PORTADA INSTITUCIONAL - PRESENTACION Y MOVIMIENTO
   ---------------------------------------------------------------------
   Criterio: el movimiento debe leerse como acabado, no como decoracion.
   Recorridos cortos (12-28px), duraciones de 400-700ms, curvas suaves y
   solo propiedades compuestas por la GPU (transform y opacity).

   Degradacion: los estados ocultos se aplican SOLO bajo html.js, de modo
   que sin JavaScript la pagina se ve completa en lugar de quedar en blanco.
   ===================================================================== */

:root{
  --ease-out-soft:cubic-bezier(.16,.84,.44,1);
  --ease-out-back:cubic-bezier(.22,1.12,.36,1);
}

/* ------------------------ REVELADO AL DESPLAZAR --------------------- */
html.js [data-reveal]{opacity:0;transform:translateY(22px)}
html.js [data-reveal="left"]{transform:translateX(-24px)}
html.js [data-reveal="right"]{transform:translateX(24px)}
html.js [data-reveal="scale"]{transform:translateY(16px) scale(.97)}
html.js [data-reveal="fade"]{transform:none}

html.js [data-reveal].is-visible{
  opacity:1;transform:none;
  transition:opacity .52s var(--ease-out-soft),transform .52s var(--ease-out-soft);
  transition-delay:var(--reveal-delay,0ms);
}

/* ================================ PORTADA =========================== */
.hero--home{
  position:relative;
  padding:5.5rem 0 4.5rem;
  background:
    radial-gradient(120% 90% at 12% 8%,  #1e3a8a 0%, transparent 55%),
    radial-gradient(110% 85% at 88% 92%, #0f766e 0%, transparent 52%),
    linear-gradient(155deg,#0b1220 0%,#111f3d 48%,#0d1b2e 100%);
  color:#fff;overflow:hidden;isolation:isolate;
}

/* Trama institucional discreta: da textura sin competir con el texto. */
.hero--home::before{
  content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(90% 70% at 50% 30%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 30%,#000 25%,transparent 78%);
}

/* Halos que respiran muy lentamente: sugieren actividad sin distraer. */
.hero--home::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  inset:-30%;
  background:
    radial-gradient(38% 38% at 22% 26%,rgba(56,189,248,.20),transparent 62%),
    radial-gradient(34% 34% at 78% 68%,rgba(45,212,191,.17),transparent 60%);
  animation:heroDrift 26s var(--ease) infinite alternate;
}
@keyframes heroDrift{
  from{transform:translate3d(-1.5%,-1%,0) scale(1)}
  to  {transform:translate3d(1.5%,1.5%,0) scale(1.06)}
}

/* Desvanecido del borde inferior.
   Va como elemento propio y no como capa del fondo porque los halos
   (::after, z-index:-1) se pintan DESPUES del fondo del elemento dentro
   de su contexto de apilado: un degradado en el fondo quedaria debajo de
   ellos y el corte del halo seguiria viendose como una linea recta.
   Colocado antes que .hero__inner en el marcado, queda por encima de los
   halos y por debajo del texto. */
.hero__fade{
  position:absolute;left:0;right:0;bottom:0;z-index:0;
  height:var(--hero-fade,140px);
  pointer-events:none;
  /* Apaga el halo verde antes de que el overflow lo corte: ese corte a
     media luz era la "barra" que partia la seccion.
     El color de destino depende del tema (--hero-fade-to): en oscuro es el
     fondo de la pagina y la union desaparece; en claro es el propio tono
     del hero, porque fundir hacia el fondo claro seria un degradado a
     blanco de 140px. */
  background:linear-gradient(to bottom,transparent,var(--hero-fade-to));
}

.hero__inner{position:relative;z-index:1;max-width:820px}

.hero__badge{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.42rem .95rem;border-radius:var(--radius-full);
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  font-size:.79rem;font-weight:580;letter-spacing:.03em;color:#e0f2fe;
}
.hero__badge i{
  width:7px;height:7px;border-radius:50%;background:#34d399;display:inline-block;
  box-shadow:0 0 0 0 rgba(52,211,153,.65);animation:pulseDot 2.4s ease-out infinite;
}
@keyframes pulseDot{
  0%  {box-shadow:0 0 0 0 rgba(52,211,153,.55)}
  70% {box-shadow:0 0 0 9px rgba(52,211,153,0)}
  100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}
}

.hero__title{
  font-size:clamp(2.1rem,5.2vw,3.5rem);
  font-weight:720;line-height:1.1;letter-spacing:-.022em;
  color:#fff;margin:1.35rem 0 0;
}
.hero__title em{
  font-style:normal;position:relative;white-space:nowrap;
  background:linear-gradient(100deg,#7dd3fc 0%,#5eead4 55%,#a7f3d0 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Subrayado que se traza tras la entrada del titulo. */
.hero__title em::after{
  content:'';position:absolute;left:0;right:0;bottom:-.12em;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#38bdf8,#2dd4bf);
  transform:scaleX(0);transform-origin:left;
}
html.js .hero__title.is-visible em::after{
  transform:scaleX(1);
  transition:transform .85s var(--ease-out-soft) .55s;
}

.hero__lead{
  color:rgba(255,255,255,.82);font-size:clamp(1rem,1.6vw,1.12rem);
  line-height:1.72;max-width:60ch;margin-top:1.15rem;
}

.hero__actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2.1rem}

.btn--onlight{
  background:#fff;color:var(--ink-on-white);border-color:#fff;
  box-shadow:0 10px 26px rgba(2,10,30,.34);
}
.btn--onlight:hover{background:#f1f5f9;color:#172554;transform:translateY(-2px)}

.btn--outline{
  background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.32);
  backdrop-filter:blur(6px);
}
.btn--outline:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.55);transform:translateY(-2px)}

/* Sellos de confianza bajo las acciones. */
.hero__trust{
  display:flex;gap:.75rem 1.75rem;flex-wrap:wrap;margin-top:2.2rem;
  padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14);
  max-width:640px;
}
.hero__trust span{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.82rem;color:rgba(255,255,255,.72);
}
.hero__trust b{color:#a7f3d0;font-weight:600}

/* --------------------------- CIFRAS DESTACADAS ---------------------- */
.figures{
  position:relative;z-index:3;margin-top:-3.2rem;
}
.figures__grid{
  display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(min(178px,100%),1fr));
  background:var(--border);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);
}
.figure{
  background:var(--surface);padding:1.6rem 1.3rem;text-align:center;
  transition:background var(--t);
}
.figure:hover{background:var(--primary-50)}
.figure__value{
  font-size:clamp(1.9rem,3.4vw,2.5rem);font-weight:740;line-height:1;
  color:var(--primary);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.figure--accent .figure__value{color:var(--accent-700)}
.figure--violet .figure__value{color:var(--violet)}
.figure__label{
  font-size:.79rem;color:var(--text-3);margin-top:.55rem;font-weight:520;
  letter-spacing:.01em;
}

/* ------------------------- ENCABEZADO DE SECCION -------------------- */
.section-head{margin-bottom:1.9rem;max-width:640px}
.section-head__eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.74rem;font-weight:680;letter-spacing:.1em;text-transform:uppercase;
  color:var(--primary-600);
}
.section-head__eyebrow::before{
  content:'';width:22px;height:2px;background:var(--primary);border-radius:2px;
}
.section-head h2{font-size:clamp(1.45rem,2.8vw,1.95rem);letter-spacing:-.025em;margin-top:.7rem}
.section-head p{margin-top:.6rem;font-size:.975rem;line-height:1.7}

/* --------------------------- PASOS DEL PROCESO ---------------------- */
.journey{
  display:grid;gap:1.15rem;
  grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr));
  counter-reset:journey;
}
.journey__item{
  position:relative;padding:1.7rem 1.5rem 1.5rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.journey__item::before{
  counter-increment:journey;content:counter(journey,decimal-leading-zero);
  position:absolute;top:.7rem;right:1.1rem;
  font-size:2.9rem;font-weight:760;line-height:1;letter-spacing:-.04em;
  color:var(--primary);opacity:.09;
}
.journey__item::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--primary),var(--accent));
  transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease-out-soft);
}
.journey__item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary-200)}
.journey__item:hover::after{transform:scaleY(1)}
.journey__icon{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  font-size:1.25rem;background:var(--primary-50);border:1px solid var(--primary-100);
  transition:transform var(--t),background var(--t);
}
.journey__item:hover .journey__icon{transform:scale(1.06) rotate(-4deg);background:var(--primary-100)}
.journey__title{font-size:1.03rem;font-weight:650;margin:.95rem 0 .45rem}
.journey__text{font-size:.885rem;color:var(--text-3);line-height:1.65}

/* ------------------------------- CIERRE ----------------------------- */
.closing{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);
  padding:3.2rem 2.2rem;text-align:center;color:#fff;
  background:linear-gradient(135deg,#0f172a 0%,#1e3a8a 58%,#0f766e 125%);
}
.closing::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 90% at 50% 0%,rgba(255,255,255,.13),transparent 62%);
}
.closing__inner{position:relative;max-width:620px;margin-inline:auto}
.closing h2{color:#fff;font-size:clamp(1.4rem,2.9vw,2rem);letter-spacing:-.025em}
.closing p{color:rgba(255,255,255,.82);margin-top:.85rem;line-height:1.7}
.closing .btn-group{justify-content:center;margin-top:1.9rem}

/* ---------------------------- CHIPS DE CATEGORIA -------------------- */
.chip--link{transition:transform var(--t-fast),background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.chip--link:hover{
  transform:translateY(-2px);background:var(--primary-50);
  border-color:var(--primary-200);color:var(--primary-700);
}

/* --------------------------- TARJETA DE PQR ------------------------- */
.pqr-card{position:relative}
.pqr-card::after{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  transform:scaleX(0);transform-origin:left;
  transition:transform .42s var(--ease-out-soft);
}
.card--hover:hover.pqr-card::after{transform:scaleX(1)}
.pqr-card__title{transition:color var(--t-fast)}
.card--hover:hover .pqr-card__title{color:var(--primary-700)}

/* La barra de progreso se dibuja cuando la tarjeta entra en pantalla. */
html.js .progress__fill[data-progress]{width:0}

/* ------------------------ AJUSTES RESPONSIVOS ----------------------- */
@media(max-width:767px){
  .hero--home{padding:3.8rem 0 3.4rem}
  .figures{margin-top:-2.2rem}
  .hero__trust{gap:.9rem 1.2rem}
}

/* --------------------- PREFERENCIA DE MOVIMIENTO REDUCIDO ----------- */
/* Quien pide menos movimiento recibe la pagina completa y estatica. */
@media(prefers-reduced-motion:reduce){
  html.js [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
  html.js .hero__title em::after{transform:scaleX(1) !important;transition:none !important}
  .hero--home::after,.hero__badge i{animation:none !important}
  .journey__item:hover,.card--hover:hover,.btn--onlight:hover,.btn--outline:hover{transform:none !important}
}

/* =====================================================================
   DOCUMENTOS LEGALES Y AVISO DE INDEPENDENCIA INSTITUCIONAL
   ===================================================================== */

/* --------------------- AVISO DE INDEPENDENCIA ----------------------- */
/* Barra permanente: lo primero que debe quedar claro es que el sitio no
   es oficial. Se puede cerrar, pero se recuerda en cada sesion nueva. */
.notice-bar{
  /* Fondo solido y texto claro: este aviso es el mensaje mas importante
     del sitio y debe superar el contraste AA con holgura (aprox. 10:1). */
  background:#7c2d12;
  color:#fff7ed;font-size:.86rem;line-height:1.55;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.notice-bar__inner{
  display:flex;align-items:center;gap:.85rem;
  padding:.62rem 0;
}
.notice-bar__icon{flex-shrink:0;width:18px;height:18px;color:#fbbf24}
.notice-bar__text{
  flex:1;min-width:0;
  /* Explicito a proposito: la regla base p{color:var(--text-2)} es una
     declaracion directa y vence a cualquier color heredado del padre.
     Dejarlo en herencia pintaba el aviso en gris pizarra sobre marron
     (contraste 1.24:1, ilegible). Con este valor: 8.8:1 (AAA). */
  color:#fff7ed;
}
.notice-bar__text b{color:#fff;font-weight:680}
.notice-bar a{color:#fcd34d;font-weight:560;text-decoration:underline;text-underline-offset:3px}
.notice-bar a:hover{color:#fff}
.notice-bar__close{
  flex-shrink:0;width:28px;height:28px;border-radius:var(--radius-xs);
  display:grid;place-items:center;color:#fde68a;
  transition:background var(--t-fast),color var(--t-fast);
}
.notice-bar__close:hover{background:rgba(255,255,255,.14);color:#fff}
.notice-bar[hidden]{display:none}

/* --------------------------- PAGINA LEGAL --------------------------- */
.legal{display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr) 260px;align-items:start}
@media(max-width:1023px){.legal{grid-template-columns:1fr}}

.legal__header{
  padding:2.4rem 0 1.9rem;border-bottom:1px solid var(--border);margin-bottom:2.2rem;
}
.legal__eyebrow{
  font-size:.74rem;font-weight:680;letter-spacing:.1em;text-transform:uppercase;
  color:var(--primary-600);
}
.legal__title{font-size:clamp(1.6rem,3.2vw,2.2rem);letter-spacing:-.025em;margin-top:.6rem}
.legal__summary{
  font-size:1.02rem;line-height:1.7;color:var(--text-2);margin-top:.9rem;max-width:68ch;
}
.legal__meta{
  display:flex;gap:1.35rem;flex-wrap:wrap;margin-top:1.3rem;
  font-size:.79rem;color:var(--text-muted);
}
.legal__meta span{display:inline-flex;align-items:center;gap:.35rem}

/* Cuerpo del documento: medida de lectura controlada y jerarquia clara. */
.legal__body{max-width:74ch;font-size:.985rem;line-height:1.78;color:var(--text-2)}
.legal__body h2{
  font-size:1.14rem;font-weight:650;color:var(--text);
  margin:2.3rem 0 .85rem;padding-top:1.4rem;border-top:1px solid var(--border);
  letter-spacing:-.012em;
}
.legal__body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal__body p{margin-bottom:1.05rem}
.legal__body ul,.legal__body ol{margin:0 0 1.2rem 1.35rem}
.legal__body li{margin-bottom:.55rem;padding-left:.3rem}
.legal__body ul li{list-style:disc}
.legal__body ol li{list-style:decimal}
.legal__body strong{color:var(--text);font-weight:620}
.legal__body a{text-decoration:underline;text-underline-offset:2px}
.legal__body code{
  background:var(--surface-3);padding:.12rem .38rem;border-radius:4px;
  font-size:.86em;color:var(--primary-700);
}
.legal-lead{
  font-size:1.02rem;color:var(--text-3);font-style:italic;
  padding-left:1rem;border-left:3px solid var(--border-strong);
}

/* Bloques de advertencia dentro del texto legal. */
.legal-callout{
  padding:1rem 1.2rem;margin:1.5rem 0;border-radius:var(--radius);
  background:var(--surface-3);border-left:4px solid var(--text-muted);
  font-size:.94rem;line-height:1.7;
}
.legal-callout--danger{background:var(--danger-bg);border-left-color:var(--danger);color:var(--on-danger-bg)}
.legal-callout--warning{background:var(--warning-bg);border-left-color:var(--warning);color:var(--on-warning-bg)}
.legal-callout--success{background:var(--success-bg);border-left-color:var(--success);color:var(--on-success-bg)}

.legal-table{
  width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.885rem;
  border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;
}
.legal-table th{
  background:var(--surface-3);text-align:left;padding:.7rem .85rem;
  font-size:.755rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-3);font-weight:660;border-bottom:1px solid var(--border);
}
.legal-table td{padding:.7rem .85rem;border-bottom:1px solid var(--border);vertical-align:top}
.legal-table tr:last-child td{border-bottom:0}
.legal-table tbody tr:nth-child(even){background:var(--surface-2)}

/* Indice lateral pegajoso. */
.legal__aside{position:sticky;top:calc(var(--topbar-h) + 1.5rem)}
.legal__nav{display:flex;flex-direction:column;gap:.15rem}
.legal__nav a{
  padding:.6rem .8rem;border-radius:var(--radius-sm);font-size:.875rem;
  color:var(--text-2);border-left:2px solid transparent;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.legal__nav a:hover{background:var(--surface-3);color:var(--text)}
.legal__nav a.is-active{
  background:var(--primary-50);color:var(--primary-700);
  border-left-color:var(--primary);font-weight:580;
}

/* Tarjetas del indice legal. */
.legal-card{
  display:block;padding:1.4rem 1.5rem;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.legal-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--primary-200)}
.legal-card__title{font-size:1.02rem;font-weight:640;color:var(--text);margin-bottom:.45rem}
.legal-card__text{font-size:.885rem;color:var(--text-3);line-height:1.65}
.legal-card__meta{font-size:.74rem;color:var(--text-muted);margin-top:.85rem}

@media print{
  .legal{grid-template-columns:1fr}
  .legal__aside,.notice-bar{display:none}
  .legal__body{max-width:none}
}

/* ------------------------- MARCA E IDENTIDAD ------------------------ */
.brandmark{width:38px;height:38px;flex-shrink:0;border-radius:11px}
.pubnav__brand:hover .brandmark{transform:scale(1.04)}
.brandmark{transition:transform var(--t)}

/* --------------------- DESLINDE EN EL PIE --------------------------- */
.footer__disclaimer{
  padding:1.1rem 1.35rem;margin-bottom:2.2rem;
  background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.22);
  border-left:3px solid #f59e0b;border-radius:var(--radius);
  font-size:.845rem;line-height:1.7;color:#cbd5e1;
}
.footer__disclaimer strong{color:#fde68a;display:block;margin-bottom:.3rem}

/* Enlace para saltar al contenido, visible solo con el teclado. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:10000;
  padding:.75rem 1.2rem;background:var(--primary-solid);color:var(--on-primary);
  border-radius:0 0 var(--radius-sm) 0;font-weight:600;font-size:.9rem;
}
.skip-link:focus{left:0;color:var(--on-primary)}

/* ------------------------ ICONOGRAFIA VECTORIAL --------------------- */
/* Familia unica de trazo 1.7px. Los iconos heredan el color del texto,
   de modo que responden a los tokens de tema sin reglas adicionales. */
.icon{display:inline-block;vertical-align:-.18em;flex-shrink:0}
.hero__trust .icon{color:#5eead4}
.journey__icon .icon{color:var(--primary)}
.alert__icon .icon{vertical-align:-.15em}
.btn .icon{width:17px;height:17px}


/* ================== INSIGNIAS Y ALERTAS EN MODO OSCURO ==============
   En claro son pares literales (fondo palido + texto oscuro) y su
   contraste es correcto. Sobre un fondo oscuro, sin embargo, quedan como
   placas blancas que deslumbran: en oscuro se invierte la relacion
   —fondo tenue, texto claro— manteniendo el mismo codigo de color.
   ==================================================================== */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .badge--slate  {background:#1e293b;color:#cbd5e1;border-color:#334155}
  :root:not([data-theme="light"]) .badge--blue   {background:#152a4d;color:#93c5fd;border-color:#1e3a6b}
  :root:not([data-theme="light"]) .badge--indigo {background:#1e1b4b;color:#a5b4fc;border-color:#312e81}
  :root:not([data-theme="light"]) .badge--violet {background:#2e1065;color:#c4b5fd;border-color:#4c1d95}
  :root:not([data-theme="light"]) .badge--amber  {background:#2c1f08;color:#fcd34d;border-color:#78350f}
  :root:not([data-theme="light"]) .badge--emerald{background:#0c2a20;color:#6ee7b7;border-color:#14532d}
  :root:not([data-theme="light"]) .badge--rose   {background:#2c1214;color:#fda4af;border-color:#7f1d1d}
  :root:not([data-theme="light"]) .badge--teal   {background:#0c2a28;color:#5eead4;border-color:#115e59}
  :root:not([data-theme="light"]) .alert--info   {color:#bfdbfe}
  :root:not([data-theme="light"]) .alert--success{color:#a7f3d0}
  :root:not([data-theme="light"]) .alert--warning{color:#fde68a}
  :root:not([data-theme="light"]) .alert--danger {color:#fecaca}
}
:root[data-theme="dark"] .badge--slate  {background:#1e293b;color:#cbd5e1;border-color:#334155}
:root[data-theme="dark"] .badge--blue   {background:#152a4d;color:#93c5fd;border-color:#1e3a6b}
:root[data-theme="dark"] .badge--indigo {background:#1e1b4b;color:#a5b4fc;border-color:#312e81}
:root[data-theme="dark"] .badge--violet {background:#2e1065;color:#c4b5fd;border-color:#4c1d95}
:root[data-theme="dark"] .badge--amber  {background:#2c1f08;color:#fcd34d;border-color:#78350f}
:root[data-theme="dark"] .badge--emerald{background:#0c2a20;color:#6ee7b7;border-color:#14532d}
:root[data-theme="dark"] .badge--rose   {background:#2c1214;color:#fda4af;border-color:#7f1d1d}
:root[data-theme="dark"] .badge--teal   {background:#0c2a28;color:#5eead4;border-color:#115e59}
:root[data-theme="dark"] .alert--info   {color:#bfdbfe}
:root[data-theme="dark"] .alert--success{color:#a7f3d0}
:root[data-theme="dark"] .alert--warning{color:#fde68a}
:root[data-theme="dark"] .alert--danger {color:#fecaca}

/* Iconos dentro de titulos y celdas: alineacion optica con la linea base
   del texto que acompanan. */
.card__title .icon,.section__title .icon,h1 .icon,h2 .icon,h3 .icon,h4 .icon{
  vertical-align:-.16em;color:var(--primary);
}
.btn .icon{vertical-align:-.16em}
.pqr-hero__code .icon{vertical-align:-.16em}

/* El enlace "Ver todos" acompana al titulo de la seccion. En pantalla
   ancha va a su derecha; al envolverse cae debajo y quedaba pegado a la
   rejilla de tarjetas.
   
   El margen NO se acota con una consulta de medios: el ancho al que se
   envuelve depende de lo que midan el titulo y el propio enlace —medido
   aqui, hasta los 859px— y ese numero cambia con cada texto. Puesto
   siempre, en pantalla ancha lo absorbe la altura del titulo, que es
   mucho mayor, y no se nota. */
.ver-todos{margin-top:.35rem;margin-bottom:1rem}

/* Chip de filtro seleccionado.
   Existe como clase y no como estilo en linea porque en las vistas se
   escribia "background:var(--primary);color:#fff": --primary es el tono
   para TEXTO sobre el fondo del tema y en oscuro se aclara, asi que el
   blanco encima daba 2.54:1. Los tokens *-solid mantienen el contraste. */
.chip.is-on{
  background:var(--primary-solid);
  border-color:var(--primary-solid);
  color:var(--on-primary);
}
.chip.is-on strong{color:inherit}

/* =====================================================================
   REJILLA DE CONTENIDO Y BARRA LATERAL
   ---------------------------------------------------------------------
   Estas disposiciones estaban escritas como estilo en linea en cada
   vista: "grid-template-columns:minmax(0,2fr) minmax(280px,1fr)".

   Un estilo en linea gana a cualquier regla de la hoja, asi que ninguna
   consulta de medios podia deshacerlo. En un telefono de 390px la
   columna lateral se quedaba con sus 280px minimos y al contenido le
   sobraban unos 90: el texto salia a una palabra por linea.

   Como clase, la disposicion es de UNA columna por defecto y solo se
   parte cuando hay sitio de sobra.
   ===================================================================== */
.grid-split{
  display:grid;
  gap:1.5rem;
  align-items:start;
  grid-template-columns:minmax(0,1fr);
}

/* 900px = ~400 de contenido + ~280 de lateral + separacion y margenes.
   Por debajo, partir en dos deja el contenido sin ancho util. */
@media (min-width:900px){
  .grid-split{grid-template-columns:minmax(0,2fr) minmax(280px,1fr)}
  .grid-split--wide{grid-template-columns:minmax(0,3fr) minmax(260px,1fr)}
  .grid-split--setup{grid-template-columns:minmax(0,1fr) minmax(320px,420px)}
  /* La barra lateral va primera en el marcado; en pantalla ancha se
     coloca a la izquierda igual, pero se declara aparte para no depender
     del orden del documento. */
  .grid-split--aside-first{grid-template-columns:minmax(280px,1fr) minmax(0,2fr)}
}

/* Rejilla de los codigos de recuperacion. min() para que la columna nunca
   imponga un ancho mayor que el contenedor. */
.grid-codigos{grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr));gap:.6rem}

/* Tarjeta destacada de las acciones de un PQR.
   El degradado iba escrito en linea y terminaba en #fff fijo: en tema
   oscuro dejaba la tarjeta blanca con el texto claro encima. Como clase,
   termina en la superficie del tema. */
.card--destacada{
  border-color:var(--primary-200);
  background:linear-gradient(120deg,var(--primary-50),var(--surface) 60%);
}

/* Enlace que actua como boton pero todavia no procede. */
.btn.is-disabled{
  opacity:.5;pointer-events:none;
}

/* ------------------- OPCIONES DEL CARTEL IMPRIMIBLE ----------------- */
.cartel-bloque{display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:space-between;align-items:flex-start}
.cartel-bloque > div{flex:1 1 320px;min-width:0}

.cartel-opciones{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;
  padding:.9rem 1.1rem;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);
}
.cartel-opciones__rotulo{
  font-size:.72rem;font-weight:640;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-3);width:100%;
}
.cartel-opciones .checkbox{font-size:.85rem;align-items:center}
.cartel-opciones .btn{margin-left:auto}

@media (max-width:639px){
  /* En pantalla estrecha el boton pasa a linea propia y ocupa el ancho:
     un boton de descarga a media linea es facil de fallar con el pulgar. */
  .cartel-opciones{flex-direction:column;align-items:stretch}
  .cartel-opciones .btn{margin-left:0;width:100%;justify-content:center;margin-top:.4rem}
}