/* ============================================================
   ÁREA DE COLABORADORES — Hoja de estilos autónoma.
   No depende de assets/css del sitio: los tokens de marca están
   copiados aquí a propósito para que la carpeta sea portable.
   ============================================================ */

:root {
    --primario: #0F5D89;
    --primario-fuerte: #0A4364;
    --primario-tenue: #E4EFF6;
    --acento: #F7931E;
    --acento-tenue: #FDF0DE;
    --acento-texto: #A8500B;
    --oscuro: #0A2536;
    --fondo: #F6F9FB;
    --superficie: #FFFFFF;
    --tinta: #1A2A36;
    --tinta-suave: #536775;
    --borde: rgba(15, 93, 137, .16);
    --borde-fuerte: rgba(15, 93, 137, .30);
    --verde: #1F7A5A;
    --verde-tenue: #E6F4EE;
    --rojo: #B23A2E;
    --rojo-tenue: #FCEEED;
    --radio: 12px;
    --radio-lg: 18px;
    --sombra: 0 1px 2px rgba(10,37,54,.04), 0 14px 34px -24px rgba(10,37,54,.35);
    --fuente: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.col-body {
    margin: 0;
    font-family: var(--fuente);
    font-size: 16px;
    line-height: 1.55;
    color: var(--tinta);
    background: var(--fondo);
}

a { color: var(--primario); }

.salto {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--oscuro);
    color: #fff;
    padding: .6rem 1rem;
    z-index: 50;
}
.salto:focus { left: .5rem; top: .5rem; }

/* --- Barra superior ------------------------------------------------------ */
.col-topbar {
    background: var(--oscuro);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 20;
}
.col-topbar-in {
    max-width: 1160px;
    margin: 0 auto;
    padding: .7rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.col-marca {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #fff;
    line-height: 1.2;
}
.col-marca-nombre { font-weight: 700; font-size: .95rem; letter-spacing: .02em; }
.col-marca-area { font-size: .76rem; color: rgba(255,255,255,.66); }

.col-nav { display: flex; gap: .35rem; margin-right: auto; flex-wrap: wrap; }
.col-nav a {
    color: rgba(255,255,255,.78);
    text-decoration: none;
    font-size: .9rem;
    padding: .45rem .8rem;
    border-radius: 999px;
    transition: background .15s, color .15s;
}
.col-nav a:hover { background: rgba(255,255,255,.10); color: #fff; }
.col-nav a.activo { background: var(--acento); color: #2A1600; font-weight: 600; }

.col-cuenta { display: flex; align-items: center; gap: .75rem; }
.col-usuario {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: #fff;
    line-height: 1.2;
    text-align: right;
}
.col-usuario-nombre { font-size: .85rem; }
.col-usuario-rol { font-size: .7rem; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .06em; }
.col-salir {
    color: rgba(255,255,255,.8);
    text-decoration: none;
    font-size: .85rem;
    border: 1px solid rgba(255,255,255,.28);
    padding: .35rem .75rem;
    border-radius: 999px;
}
.col-salir:hover { background: rgba(255,255,255,.12); color: #fff; }

/* --- Estructura ---------------------------------------------------------- */
.col-main {
    max-width: 1160px;
    margin: 0 auto;
    padding: 1.75rem 1.25rem 3rem;
}
.col-pie {
    max-width: 1160px;
    margin: 0 auto;
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .78rem;
    color: var(--tinta-suave);
    border-top: 1px solid var(--borde);
}

.col-cabecera { margin-bottom: 1.5rem; }
.col-cabecera h1 { font-size: 1.5rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
.col-cabecera p { margin: 0; color: var(--tinta-suave); font-size: .92rem; }

.bloque {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra);
    padding: 1.4rem;
    margin-bottom: 1.5rem;
}
.bloque > h2 {
    font-size: 1.02rem;
    margin: 0 0 1rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--borde);
}
.bloque-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid var(--borde);
}
.bloque-cab h2 { font-size: 1.02rem; margin: 0; }

.rejilla { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
    .rejilla-2 { grid-template-columns: 1.15fr .85fr; align-items: start; }
}

/* --- Formularios --------------------------------------------------------- */
.campos { display: grid; gap: 1rem; }
@media (min-width: 620px) { .campos-2 { grid-template-columns: 1fr 1fr; } }

.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo label { font-size: .82rem; font-weight: 600; color: var(--tinta-suave); }
.campo .pista { font-size: .76rem; color: var(--tinta-suave); font-weight: 400; }

input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=date], input[type=number], input[type=search], select, textarea {
    font: inherit;
    font-size: .95rem;
    color: var(--tinta);
    background: #fff;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    padding: .62rem .8rem;
    width: 100%;
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primario);
    box-shadow: 0 0 0 3px var(--primario-tenue);
}
textarea { min-height: 90px; resize: vertical; }
input[disabled], select[disabled] { background: #F2F5F7; color: var(--tinta-suave); }

.check {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .86rem;
    color: var(--tinta-suave);
    line-height: 1.45;
}
.check input { margin-top: .22rem; width: auto; flex: 0 0 auto; }

.acciones { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1.25rem; }

.btn {
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: .6rem 1.3rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: background .15s, border-color .15s, color .15s;
}
.btn-primario { background: var(--primario); color: #fff; }
.btn-primario:hover { background: var(--primario-fuerte); }
.btn-secundario { background: #fff; color: var(--primario); border-color: var(--borde-fuerte); }
.btn-secundario:hover { background: var(--primario-tenue); }
.btn-peligro { background: #fff; color: var(--rojo); border-color: rgba(178,58,46,.4); }
.btn-peligro:hover { background: var(--rojo-tenue); }
.btn-bloque { width: 100%; justify-content: center; }

.btn-mini {
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    background: #fff;
    color: var(--primario);
    border: 1px solid var(--borde-fuerte);
    border-radius: 999px;
    padding: .28rem .7rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.btn-mini:hover { background: var(--primario-tenue); }
.btn-mini-peligro { color: var(--rojo); border-color: rgba(178,58,46,.35); }
.btn-mini-peligro:hover { background: var(--rojo-tenue); }

/* --- Avisos -------------------------------------------------------------- */
.aviso {
    border-radius: var(--radio);
    padding: .8rem 1rem;
    font-size: .9rem;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
}
.aviso-exito { background: var(--verde-tenue); color: #14563F; border-color: rgba(31,122,90,.25); }
.aviso-error { background: var(--rojo-tenue); color: #8C2C22; border-color: rgba(178,58,46,.25); }
.aviso-info  { background: var(--primario-tenue); color: var(--primario-fuerte); border-color: rgba(15,93,137,.2); }

.nota {
    background: var(--acento-tenue);
    border: 1px solid rgba(247,147,30,.35);
    border-radius: var(--radio);
    padding: .8rem 1rem;
    font-size: .85rem;
    color: #6B3A05;
}
.credencial {
    font-family: 'Consolas', 'SFMono-Regular', Menlo, monospace;
    background: #fff;
    border: 1px dashed var(--borde-fuerte);
    border-radius: 8px;
    padding: .15rem .45rem;
    font-size: .9rem;
}

/* --- Tablas -------------------------------------------------------------- */
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla th, .tabla td {
    text-align: left;
    padding: .7rem .6rem;
    border-bottom: 1px solid var(--borde);
    vertical-align: middle;
}
.tabla th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tinta-suave);
    white-space: nowrap;
}
.tabla tbody tr:hover { background: #FAFCFD; }
.tabla td.acciones-fila { white-space: nowrap; display: flex; gap: .3rem; flex-wrap: wrap; }
.tabla .ref { font-family: 'Consolas', monospace; font-size: .82rem; color: var(--tinta-suave); }
.vacio { text-align: center; color: var(--tinta-suave); padding: 2.5rem 1rem; font-size: .92rem; }

/* --- Píldoras de estado -------------------------------------------------- */
.pill {
    display: inline-block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    padding: .22rem .65rem;
    border-radius: 999px;
    white-space: nowrap;
}
.pill-nuevo    { background: var(--acento-tenue); color: var(--acento-texto); }
.pill-ok       { background: var(--verde-tenue);  color: #14563F; }
.pill-invalido { background: #EEF1F3;             color: #5B6B77; }
.pill-rol      { background: var(--primario-tenue); color: var(--primario-fuerte); }
.pill-off      { background: var(--rojo-tenue);   color: #8C2C22; }

/* --- Línea de hitos ------------------------------------------------------ */
.hitos { list-style: none; margin: 0; padding: 0; }
.hito {
    position: relative;
    padding: 0 0 1.4rem 2rem;
    border-left: 2px solid var(--borde);
    margin-left: .5rem;
}
.hito:last-child { padding-bottom: 0; border-left-color: transparent; }
.hito::before {
    content: '';
    position: absolute;
    left: -9px;
    top: .18rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--borde-fuerte);
}
.hito-hecho { border-left-color: var(--verde); }
.hito-hecho::before { background: var(--verde); border-color: var(--verde); }
.hito-titulo { font-weight: 600; font-size: .93rem; }
.hito-hecho .hito-titulo { color: #14563F; }
.hito-pendiente .hito-titulo { color: var(--tinta-suave); font-weight: 500; }
.hito-detalle { font-size: .84rem; color: var(--tinta-suave); }

/* --- Fichas / datos ------------------------------------------------------ */
.datos { display: grid; gap: .9rem; margin: 0; }
@media (min-width: 620px) { .datos-2 { grid-template-columns: 1fr 1fr; } }
.dato dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-suave); margin: 0 0 .15rem; }
.dato dd { margin: 0; font-size: .95rem; font-weight: 500; }

.resumen { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 1.5rem; }
.tarjeta-num {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: .9rem 1rem;
}
.tarjeta-num strong { display: block; font-size: 1.6rem; line-height: 1.1; }
.tarjeta-num span { font-size: .78rem; color: var(--tinta-suave); }

.filtros { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.filtros .campo { min-width: 170px; }

/* --- Acceso (login) ------------------------------------------------------ */
.col-body-centro {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    background:
        radial-gradient(1100px 500px at 50% -8%, rgba(15,93,137,.16), transparent 62%),
        var(--fondo);
}
.col-centro { width: 100%; max-width: 430px; }
.tarjeta-acceso {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra);
    padding: 2rem 1.75rem;
}
.acceso-marca {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--primario);
    font-weight: 700;
    margin-bottom: .4rem;
}
.tarjeta-acceso h1 { font-size: 1.3rem; margin: 0 0 .35rem; }
.acceso-sub { color: var(--tinta-suave); font-size: .88rem; margin: 0 0 1.5rem; }
.acceso-volver {
    display: block;
    text-align: center;
    margin-top: 1.25rem;
    font-size: .85rem;
    color: var(--tinta-suave);
    text-decoration: none;
}
.acceso-volver:hover { color: var(--primario); }
.acceso-volver a { color: inherit; text-decoration: none; }
.acceso-volver a:hover { color: var(--primario); text-decoration: underline; }
.acceso-pie {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--borde);
    font-size: .8rem;
    color: var(--tinta-suave);
    text-align: center;
}

@media (max-width: 680px) {
    .col-topbar-in { gap: .75rem; }
    .col-nav { order: 3; width: 100%; }
    .col-cuenta { margin-left: auto; }
    .col-main { padding: 1.25rem 1rem 2.5rem; }
    .bloque { padding: 1.1rem; }
}

/* ============================================================
   Cuadro de mandos: gráficos en SVG generado en PHP
   Sin librerías externas — la CSP del módulo no admite scripts
   de terceros y un <svg> en línea no necesita nonce.
   ============================================================ */
.tenue { color: var(--tinta-suave); font-size: .86rem; }
@media (min-width: 900px) {
    .rejilla-mitad { grid-template-columns: 1fr 1fr; align-items: start; }
    .rejilla-tercios { grid-template-columns: 1fr 1fr 1fr; align-items: start; }
}

.gr { width: 100%; height: auto; display: block; overflow: visible; }
.gr-barra { fill: var(--primario); }
.gr-barra-2 { fill: var(--acento); }
.gr-eje { stroke: var(--borde); stroke-width: 1; }
.gr-etq { font-size: 10px; fill: var(--tinta-suave); font-family: var(--fuente); }
.gr-valor { font-size: 10px; fill: var(--tinta-suave); font-weight: 600; font-family: var(--fuente); }
.gr-linea { fill: none; stroke: var(--acento); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.gr-area { fill: var(--primario); opacity: .1; }
.gr-punto { fill: var(--acento); }
.gr-leyenda { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .78rem; color: var(--tinta-suave); margin-top: .7rem; }
.gr-leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.gr-leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* --- Barras horizontales (rankings) --- */
.barras { display: flex; flex-direction: column; gap: .55rem; }
.barra-fila { display: grid; grid-template-columns: minmax(84px, 34%) 1fr auto; gap: .6rem; align-items: center; font-size: .84rem; }
.barra-etq { color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-pista { display: block; background: #EDF1F4; border-radius: 999px; height: 9px; overflow: hidden; }
.barra-valor { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primario), #2C86B8); }
.barra-fila.acento .barra-valor { background: linear-gradient(90deg, var(--acento-texto), var(--acento)); }
.barra-num { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .82rem; min-width: 2.6rem; text-align: right; }

/* --- Embudo de conversión --- */
.embudo { display: flex; flex-direction: column; gap: .4rem; }
.embudo-paso { display: flex; align-items: center; gap: .7rem; }
.embudo-caja {
    flex: 1; background: linear-gradient(90deg, var(--primario), #2C86B8); color: #fff;
    border-radius: 8px; padding: .5rem .8rem; font-size: .85rem; font-weight: 600;
    display: flex; justify-content: space-between; align-items: center; min-width: 0;
}
.embudo-paso:nth-child(2) .embudo-caja { background: linear-gradient(90deg, #1A6C9B, #3B93C2); }
.embudo-paso:nth-child(3) .embudo-caja { background: linear-gradient(90deg, #17739F, #4A9DC8); }
.embudo-paso:nth-child(4) .embudo-caja { background: linear-gradient(90deg, #C57B14, #E9992B); }
.embudo-paso:nth-child(5) .embudo-caja { background: linear-gradient(90deg, var(--acento-texto), var(--acento)); color: var(--oscuro); }
.embudo-paso:nth-child(6) .embudo-caja { background: linear-gradient(90deg, #14503B, var(--verde)); }
.embudo-caja span { opacity: .9; font-weight: 500; font-size: .78rem; }
.embudo-pct { font-size: .78rem; color: var(--tinta-suave); width: 3.2rem; text-align: right; font-variant-numeric: tabular-nums; }

/* --- Listas compactas (últimas operaciones, alertas) --- */
.lista-compacta { list-style: none; margin: 0; padding: 0; }
.lista-compacta li { display: flex; gap: .7rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--borde); font-size: .86rem; }
.lista-compacta li:last-child { border-bottom: 0; }
.lista-compacta .crece { flex: 1; min-width: 0; }
.lista-compacta .crece strong { display: block; font-weight: 600; }
.lista-compacta .crece span { color: var(--tinta-suave); font-size: .8rem; }
.lista-compacta time { color: var(--tinta-suave); font-size: .78rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- Alertas del cuadro (leads parados, gente sin actividad) --- */
.alerta { border-left: 3px solid var(--acento); padding-left: .8rem; }
.alerta-roja { border-left-color: var(--rojo); }
.alerta-verde { border-left-color: var(--verde); }

/* --- Tarjetas KPI: nota bajo la cifra --- */
.tarjeta-num em { display: block; font-style: normal; font-size: .74rem; color: var(--tinta-suave); margin-top: .2rem; }
.tarjeta-num.destacada { border-color: var(--borde-fuerte); background: var(--primario-tenue); }

/* ============================================================
   Solicitudes de alta y accesos públicos
   (altas de oficina y colaborador, recuperación de contraseña)
   ============================================================ */

/* Pista fuera de un .campo (tarjetas de solicitud, notas de formulario) */
.pista { font-size: .76rem; color: var(--tinta-suave); font-weight: 400; }

/* Aviso de solicitudes sin resolver en la barra superior */
.col-nav a.con-pendientes { box-shadow: inset 0 0 0 1px var(--acento); color: #fff; }
.col-nav a.con-pendientes.activo { box-shadow: none; }

/* --- Pantalla de acceso: recuperación y altas ---------------------------- */
.acceso-olvido { margin: .9rem 0 0; text-align: center; font-size: .84rem; }
.acceso-olvido a { color: var(--primario); text-decoration: none; }
.acceso-olvido a:hover { text-decoration: underline; }

.acceso-altas {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--borde);
    text-align: center;
}
.acceso-altas-titulo { margin: 0 0 .7rem; font-size: .84rem; color: var(--tinta-suave); }
.acceso-altas-btns { display: grid; gap: .5rem; }
@media (min-width: 420px) { .acceso-altas-btns { grid-template-columns: 1fr 1fr; } }
.acceso-altas-btns .btn { justify-content: center; }
.acceso-altas-pista { margin: .7rem 0 0; font-size: .76rem; color: var(--tinta-suave); }

/* Las altas piden más datos que el login: la tarjeta necesita más ancho */
.col-centro:has(.tarjeta-alta) { max-width: 560px; }

/* --- Bandeja de solicitudes ---------------------------------------------- */
.solicitud {
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1.1rem;
    margin-bottom: 1rem;
}
.solicitud:last-child { margin-bottom: 0; }
.solicitud-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .8rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}
.solicitud-cab strong { margin: 0 .4rem; }
.solicitud-cab .ref { font-family: 'Consolas', monospace; font-size: .82rem; color: var(--tinta-suave); }
.solicitud .nota { margin-top: .9rem; }
.solicitud-acciones {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--borde);
}
.solicitud-acciones .filtros { gap: .5rem; }
.solicitud-acciones .campo { min-width: 190px; }

/* --- Confirmación en el propio botón (sin window.confirm) ---------------- */
/* El navegador puede dejar de mostrar diálogos nativos y entonces el botón se
   queda muerto; la confirmación se pide aquí, en la página. */
.btn-armado {
    background: var(--rojo) !important;
    color: #fff !important;
    border-color: var(--rojo) !important;
}
.confirmar-aviso {
    margin: .5rem 0 0;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--rojo);
    max-width: 34ch;
}
.confirmar-aviso:empty { display: none; }