/* FirmaPlus · Firmador — sistema visual (lote 1)
   Idea: tinta y papel. Riel oscuro de tinta, hoja clara, y un único azul de tinta de firma
   reservado para lo que se firma o se acciona. */

/* ───────── Tokens ───────── */
:root {
    --papel: #edeff3;
    --hoja: #ffffff;
    --hoja-2: #f6f7f9;
    --tinta: #13172a;
    --tinta-2: #4a5167;
    --tinta-3: #7c8399;
    --linea: #dce0e8;
    --linea-2: #e8ebf0;

    --azul: #2433d9;
    --azul-h: #1b27b3;
    --azul-suave: #e8eafd;
    --sobre-azul: #ffffff;

    --ok: #0b7a5a;
    --ok-suave: #e1f3ec;
    --aviso: #a5500b;
    --aviso-suave: #fbebdc;
    --err: #b9302a;
    --err-suave: #fbe6e4;
    --sobre-err: #ffffff;

    --riel: #10152e;
    --riel-2: #1b2250;
    --riel-tx: #b9bfdc;
    --riel-linea: rgba(255, 255, 255, 0.09);

    --r-s: 8px;
    --r-m: 12px;
    --r-l: 18px;
    --flota:
        0 24px 56px -16px rgba(16, 21, 46, 0.35),
        0 2px 8px rgba(16, 21, 46, 0.1);

    --f:
        "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        sans-serif;
    --mono:
        ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

    /* alias de la versión anterior: las vistas aún sin migrar siguen funcionando */
    --bg: var(--papel);
    --card: var(--hoja);
    --tx: var(--tinta);
    --mut: var(--tinta-2);
    --bd: var(--linea);
    --pri: var(--azul);
    --pri-d: var(--azul-h);
    --warn: var(--aviso);
    --r: var(--r-m);

    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --papel: #0d1017;
        --hoja: #151925;
        --hoja-2: #1a1f2e;
        --tinta: #e8ebf5;
        --tinta-2: #a2a9bf;
        --tinta-3: #6f7792;
        --linea: #262c3d;
        --linea-2: #1f2434;

        --azul: #8393ff;
        --azul-h: #a2aeff;
        --azul-suave: #232a55;
        --sobre-azul: #0d1230;

        --ok: #4fd1a5;
        --ok-suave: #123428;
        --aviso: #f0a560;
        --aviso-suave: #3a2a18;
        --err: #ff8b82;
        --err-suave: #3b1d1b;
        --sobre-err: #2a0b09;

        --riel: #0a0d1c;
        --riel-2: #181e44;
        --flota:
            0 24px 56px -16px rgba(0, 0, 0, 0.7),
            0 0 0 1px rgba(255, 255, 255, 0.06);
    }
}

/* ───────── Base ───────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}
[hidden] {
    display: none !important;
}
html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 1rem;
}
body {
    margin: 0;
    font: 400 1rem/1.55 var(--f);
    background: var(--papel);
    color: var(--tinta);
    -webkit-font-smoothing: antialiased;
}
a {
    color: var(--azul);
    text-underline-offset: 0.18em;
}
a:hover {
    color: var(--azul-h);
}
h1,
h2,
h3 {
    margin: 0;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
h1 {
    font-size: clamp(1.55rem, 1.2rem + 1.2vw, 2rem);
    letter-spacing: -0.03em;
}
h2 {
    font-size: 1.0625rem;
    margin-bottom: 0.75rem;
}
p {
    margin: 0 0 0.75rem;
}
.muted {
    color: var(--tinta-2);
    font-size: 0.875rem;
}
.num {
    font-variant-numeric: tabular-nums;
}
.mono {
    font-family: var(--mono);
    font-size: 0.8125rem;
}
.sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 2px;
}
.ic {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ───────── Estructura: riel + escenario ───────── */
.shell {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    min-height: 100vh;
}
.side {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem 0.875rem;
    background: var(--riel);
    color: var(--riel-tx);
    overflow-y: auto;
}
.mark {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0 0.5rem;
    color: #fff;
    text-decoration: none;
    font-weight: 650;
    font-size: 1.0625rem;
    letter-spacing: -0.02em;
}
.mark:hover {
    color: #fff;
}
.mark svg {
    width: 2rem;
    height: 2rem;
    flex: none;
}
.mark small {
    display: block;
    font-weight: 450;
    font-size: 0.75rem;
    letter-spacing: 0;
    color: var(--riel-tx);
    margin-top: 0.1rem;
}
.side-nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.side-title {
    margin: 0.9rem 0.6rem 0.3rem;
    font-size: 0.8125rem;
    color: #8c93b8;
}
.side-nav a,
.side-group summary {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 2.5rem;
    padding: 0 0.7rem;
    border-radius: var(--r-s);
    color: var(--riel-tx);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}
.side-group summary::-webkit-details-marker {
    display: none;
}
.side-nav a:hover,
.side-group summary:hover {
    background: var(--riel-linea);
    color: #fff;
}
.side-nav a[aria-current="page"] {
    background: var(--riel-2);
    color: #fff;
}
.side-nav a[aria-current="page"] .ic {
    color: #aab4ff;
}
.side-nav .count {
    margin-left: auto;
    min-width: 1.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 99px;
    background: #aab4ff;
    color: #10152e;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}
.side-group summary .chev {
    margin-left: auto;
    transition: transform 0.2s;
}
.side-group[open] summary .chev {
    transform: rotate(90deg);
}
.side-group .sub {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0.2rem 0 0.4rem 1.35rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--riel-linea);
}
.side-group .sub a {
    min-height: 2.15rem;
    font-size: 0.875rem;
}
.side-user {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.5rem 0;
    border-top: 1px solid var(--riel-linea);
}
.avatar {
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--riel-2);
    color: #dfe3ff;
    font-weight: 650;
    font-size: 0.9rem;
}
.side-user b {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 8.5rem;
}
.side-user form {
    margin-left: auto;
}
.side-user button {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: var(--r-s);
    background: none;
    color: var(--riel-tx);
    cursor: pointer;
}
.side-user button:hover {
    background: var(--riel-linea);
    color: #fff;
}

.stage {
    min-width: 0;
}
main {
    max-width: 74rem;
    margin: 0 auto;
    padding: 2.25rem clamp(1rem, 4vw, 3rem) 4rem;
}
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.page-head p {
    margin: 0.35rem 0 0;
}

/* barra superior móvil */
.topbar,
.scrim {
    display: none;
}
#nav-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 56rem) {
    .shell {
        display: block;
    }
    .topbar {
        position: sticky;
        top: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.6rem 1rem;
        background: var(--riel);
        color: #fff;
    }
    .topbar .mark {
        padding: 0;
        font-size: 1rem;
    }
    .topbar .mark svg {
        width: 1.75rem;
        height: 1.75rem;
    }
    .topbar .menu-btn {
        margin-left: auto;
        display: grid;
        place-items: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: var(--r-s);
        color: #fff;
        cursor: pointer;
    }
    .topbar .menu-btn:hover {
        background: var(--riel-linea);
    }
    #nav-toggle:focus-visible ~ .topbar .menu-btn {
        outline: 2px solid #aab4ff;
        outline-offset: 2px;
    }
    .side {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 40;
        width: min(19rem, 86vw);
        transform: translateX(-100%);
        visibility: hidden;
        transition:
            transform 0.25s ease,
            visibility 0s linear 0.25s;
        box-shadow: var(--flota);
    }
    #nav-toggle:checked ~ .side {
        transform: none;
        visibility: visible;
        transition: transform 0.25s ease;
    }
    #nav-toggle:checked ~ .scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 30;
        background: rgba(8, 10, 24, 0.55);
    }
    main {
        padding-top: 1.5rem;
    }
}

/* ───────── Superficies ───────── */
.card {
    background: var(--hoja);
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1rem;
}
.grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.stat b {
    display: block;
    font-size: 1.6rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.inline {
    display: inline;
}

/* ───────── Botones ───────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0 1.05rem;
    border-radius: var(--r-s);
    border: 1px solid transparent;
    background: var(--azul);
    color: var(--sobre-azul);
    font: 600 0.9375rem/1 var(--f);
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.15s,
        border-color 0.15s;
}
.btn:hover {
    background: var(--azul-h);
    color: var(--sobre-azul);
}
.btn.sec {
    background: var(--hoja);
    color: var(--tinta);
    border-color: var(--linea);
}
.btn.sec:hover {
    background: var(--hoja-2);
    border-color: var(--tinta-3);
    color: var(--tinta);
}
.btn.danger {
    background: var(--err);
    color: var(--sobre-err);
}
.btn.danger:hover {
    background: var(--err);
    filter: brightness(0.92);
    color: var(--sobre-err);
}
.btn.sm {
    min-height: 2rem;
    padding: 0 0.75rem;
    font-size: 0.8125rem;
}
.btn.lg {
    min-height: 2.9rem;
    font-size: 1rem;
}
.btn.block {
    display: flex;
    width: 100%;
}
.btn.icon {
    width: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
}
.btn.quiet {
    background: none;
    border-color: transparent;
    color: var(--tinta-2);
}
.btn.quiet:hover {
    background: var(--hoja-2);
    color: var(--err);
}
.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ───────── Formularios ───────── */
label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    margin: 0.85rem 0 0.3rem;
}
.field {
    margin-bottom: 1rem;
}
.field label {
    margin-top: 0;
}
.hint {
    margin: 0.35rem 0 0;
    font-size: 0.8125rem;
    color: var(--tinta-2);
}
input:not(
    [type="checkbox"],
    [type="radio"],
    [type="hidden"],
    [type="file"],
    [type="range"]
),
select,
textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-s);
    background: var(--hoja);
    color: var(--tinta);
    font: inherit;
    font-size: 1rem; /* 16px: evita el zoom automático en iOS */
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}
textarea {
    min-height: 6rem;
    resize: vertical;
}
input:hover,
select:hover,
textarea:hover {
    border-color: var(--tinta-3);
}
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 22%, transparent);
}
input[readonly] {
    background: var(--hoja-2);
    color: var(--tinta-2);
}
input[type="file"] {
    width: 100%;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--tinta-2);
}
input[type="file"]::file-selector-button {
    margin-right: 0.8rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-s);
    background: var(--hoja);
    color: var(--tinta);
    font: 600 0.875rem var(--f);
    cursor: pointer;
}
input[type="checkbox"],
input[type="radio"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--azul);
    vertical-align: -0.2em;
}
.check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-weight: 450;
    cursor: pointer;
}
.field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
}
.pw {
    position: relative;
}
.pw input {
    padding-right: 3rem;
}
.pw button {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: var(--r-s);
    background: none;
    color: var(--tinta-2);
    cursor: pointer;
}
.pw button:hover {
    background: var(--hoja-2);
    color: var(--tinta);
}

/* ───────── Avisos ───────── */
.alert {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.8rem 1rem;
    border-radius: var(--r-s);
    margin-bottom: 1rem;
    border: 1px solid;
    font-size: 0.9375rem;
}
.alert .ic {
    margin-top: 0.1rem;
}
.alert.ok {
    color: var(--ok);
    background: var(--ok-suave);
    border-color: color-mix(in srgb, var(--ok) 35%, transparent);
}
.alert.err {
    color: var(--err);
    background: var(--err-suave);
    border-color: color-mix(in srgb, var(--err) 35%, transparent);
}
.alert > div {
    color: var(--tinta);
}

/* ───────── Chips y tablas ───────── */
.badge,
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.18rem 0.6rem;
    border-radius: 99px;
    border: 1px solid var(--linea);
    background: var(--hoja-2);
    color: var(--tinta-2);
    font-size: 0.8125rem;
    font-weight: 550;
    white-space: nowrap;
}
.badge.ok,
.chip.ok {
    color: var(--ok);
    background: var(--ok-suave);
    border-color: transparent;
}
.badge.err,
.chip.err {
    color: var(--err);
    background: var(--err-suave);
    border-color: transparent;
}
.chip.azul {
    color: var(--azul);
    background: var(--azul-suave);
    border-color: transparent;
}
.chip.aviso {
    color: var(--aviso);
    background: var(--aviso-suave);
    border-color: transparent;
}
.chip i {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
}
.tbl-wrap {
    overflow-x: auto;
    position: relative; /* contiene el texto oculto «.sr» de las cabeceras: si no, escapa del recorte y agranda toda la página en el celular */
}
table {
    border-collapse: collapse;
    width: 100%;
    min-width: 36rem;
}
th,
td {
    text-align: left;
    padding: 0.65rem 0.7rem;
    border-bottom: 1px solid var(--linea-2);
    vertical-align: middle;
}
th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tinta-2);
    white-space: nowrap;
}
tbody tr:hover {
    background: var(--hoja-2);
}

/* medidor de almacenamiento */
.bar {
    height: 0.4rem;
    background: var(--linea);
    border-radius: 99px;
    overflow: hidden;
}
.bar i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--azul);
}
.bar.hi i {
    background: var(--aviso);
}
.bar.full i {
    background: var(--err);
}

/* ───────── Panel: almacenamiento, subida, lista ───────── */
.meter {
    min-width: 14rem;
}
.meter-top {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
    font-size: 0.8125rem;
    color: var(--tinta-2);
}
.meter-top b {
    color: var(--tinta);
    font-weight: 600;
}

.sheet {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--r-l);
    border: 1.5px solid var(--linea);
    background:
        linear-gradient(var(--hoja), var(--hoja)) padding-box,
        var(--linea) border-box;
    transition:
        border-color 0.15s,
        background-color 0.15s;
}
.sheet.is-over {
    border-color: var(--azul);
    background: var(--azul-suave);
}
.sheet-page {
    position: relative;
    width: 4.2rem;
    aspect-ratio: 3 / 4;
    background: var(--hoja-2);
    border: 1px solid var(--linea);
    border-radius: 4px 14px 4px 4px;
    padding: 0.6rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}
.sheet-page::before {
    /* esquina doblada */
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 0.95rem;
    height: 0.95rem;
    background: linear-gradient(225deg, var(--hoja) 50%, var(--linea) 50%);
    border-bottom-left-radius: 4px;
}
.sheet-page span {
    height: 0.22rem;
    border-radius: 2px;
    background: var(--linea);
}
.sheet-page span:nth-child(2) {
    width: 80%;
}
.sheet-page span:nth-child(3) {
    width: 90%;
}
.sheet-page svg {
    margin-top: auto;
    width: 100%;
    height: auto;
    overflow: visible;
}
.sheet-page path {
    fill: none;
    stroke: var(--azul);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sheet h2 {
    margin: 0 0 0.2rem;
    font-size: 1.125rem;
}
.sheet p {
    margin: 0;
}
.sheet-act {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.sheet input[type="file"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    overflow: hidden;
}
.sheet input[type="file"]:focus-visible ~ .sheet-act .pick {
    outline: 2px solid var(--azul);
    outline-offset: 2px;
}
.sheet .state {
    font-size: 0.875rem;
    color: var(--tinta-2);
}
.sheet .state.err {
    color: var(--err);
}
.sheet.busy {
    pointer-events: none;
}
.sheet.busy .sheet-page path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: tinta 1.1s ease-in-out infinite alternate;
}
@keyframes tinta {
    to {
        stroke-dashoffset: 0;
    }
}
@media (max-width: 40rem) {
    .sheet {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .sheet-page {
        display: none;
    }
    .sheet-act {
        flex-wrap: wrap;
    }
}

.block-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0 0 0.75rem;
}
.block-head h2 {
    margin: 0;
}
.block-head .n {
    color: var(--tinta-2);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.todo {
    margin-bottom: 1.75rem;
    padding: 1rem 1.1rem 0.4rem;
    border-radius: var(--r-l);
    background: var(--azul-suave);
}
.todo .doc {
    background: var(--hoja);
    border-color: transparent;
}

.docs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}
.doc {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 9.5rem 7.75rem;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: var(--hoja);
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
    margin-bottom: 0.5rem;
}
.docs .doc {
    margin: 0;
}
.doc:hover {
    border-color: var(--tinta-3);
}
.doc-glyph {
    position: relative;
    width: 2.25rem;
    height: 2.9rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--linea);
    border-radius: 3px 9px 3px 3px;
    background: var(--hoja-2);
    color: var(--tinta-2);
    font-size: 0.6875rem;
    font-weight: 700;
}
.doc-glyph.firmado {
    color: var(--ok);
    background: var(--ok-suave);
    border-color: transparent;
}
.doc-glyph.en_firma {
    color: var(--azul);
    background: var(--azul-suave);
    border-color: transparent;
}
.doc-name {
    display: block;
    color: var(--tinta);
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.doc-name::after {
    /* toda la fila abre el documento */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--r-m);
}
.doc-name:hover {
    color: var(--azul);
}
.doc-meta {
    display: flex;
    gap: 0.35rem 1.1rem;
    flex-wrap: wrap;
    margin-top: 0.1rem;
    font-size: 0.8125rem;
    color: var(--tinta-2);
    font-variant-numeric: tabular-nums;
}
.doc-act {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}
.doc > .chip {
    justify-self: start;
}
.doc-who {
    font-size: 0.8125rem;
    color: var(--tinta-2);
}
@media (max-width: 40rem) {
    .doc {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "g t t"
            "g c a";
        gap: 0.55rem 0.8rem;
        padding: 0.8rem;
        align-items: start;
    }
    .doc-glyph {
        grid-area: g;
        width: 2rem;
        height: 2.6rem;
    }
    .doc > div:nth-child(2) {
        grid-area: t;
    }
    .doc > .chip {
        grid-area: c;
        align-self: center;
    }
    .doc > .doc-act {
        grid-area: a;
    }
    .doc-name {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: anywhere;
    }
    .meter {
        width: 100%;
    }
}

.vacio {
    padding: 2.5rem 1rem;
    text-align: center;
    border: 1.5px dashed var(--linea);
    border-radius: var(--r-m);
    color: var(--tinta-2);
}
.vacio b {
    display: block;
    color: var(--tinta);
    margin-bottom: 0.25rem;
}

/* ───────── Paginación ───────── */
.pager {
    margin-top: 1rem;
}
.pg {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.pg a,
.pg span {
    display: grid;
    place-items: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.6rem;
    border-radius: var(--r-s);
    border: 1px solid var(--linea);
    background: var(--hoja);
    color: var(--tinta);
    font-size: 0.875rem;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.pg a:hover {
    border-color: var(--tinta-3);
}
.pg .on {
    background: var(--azul);
    border-color: var(--azul);
    color: var(--sobre-azul);
    font-weight: 650;
}
.pg .off {
    color: var(--tinta-3);
    background: none;
}

/* ───────── Diálogo ───────── */
dialog.dlg {
    width: min(26rem, calc(100vw - 2rem));
    padding: 0;
    border: 0;
    border-radius: var(--r-l);
    background: var(--hoja);
    color: var(--tinta);
    box-shadow: var(--flota);
}
dialog.dlg::backdrop {
    background: rgba(8, 10, 24, 0.55);
}
dialog.dlg form {
    padding: 1.5rem;
}
dialog.dlg[open] {
    animation: aparece 0.18s ease-out;
}
@keyframes aparece {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
}
dialog.dlg h2 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}
dialog.dlg .doc-title {
    font-weight: 600;
    word-break: break-word;
}
dialog.dlg .actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

/* ───────── Acceso (login, registro, claves, invitación) ───────── */
body.auth {
    background: var(--hoja);
}
.auth-wrap {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    min-height: 100vh;
}
.auth-art {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    background: var(--riel);
    color: var(--riel-tx);
    overflow: hidden;
}
.auth-art .mark {
    padding: 0;
}
.auth-art h1 {
    max-width: 17ch;
    color: #fff;
    font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}
.auth-art ul {
    margin: 1.75rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.9rem;
    max-width: 30rem;
}
.auth-art li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.45;
}
.auth-art li .ic {
    color: #aab4ff;
    margin-top: 0.1rem;
}
.auth-doc {
    align-self: flex-end;
    width: min(15.5rem, 52%);
    height: auto;
    margin: 0 -2rem calc(-1 * clamp(2.5rem, 6vw, 4.5rem)) 0;
    transform: rotate(-4deg);
    transform-origin: bottom right;
    pointer-events: none;
}
.auth-doc rect.p {
    fill: #f4f5fa;
}
.auth-doc rect.l {
    fill: #d3d7ea;
}
.auth-doc path.firma {
    fill: none;
    stroke: #2433d9;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}
.auth-doc line.base {
    stroke: #aab0cc;
    stroke-width: 1.2;
}
@media (prefers-reduced-motion: no-preference) {
    .auth-doc path.firma {
        stroke-dashoffset: 1;
        animation: firma 2.6s 0.5s cubic-bezier(0.55, 0.1, 0.25, 1) forwards;
    }
}
@keyframes firma {
    to {
        stroke-dashoffset: 0;
    }
}
.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 5vw, 3rem) 1.25rem;
}
.auth-card {
    width: 100%;
    max-width: 25rem;
}
.auth-card > h2,
.auth-card h2:first-child {
    font-size: 1.75rem;
    letter-spacing: -0.03em;
    margin-bottom: 0.4rem;
}
.auth-card .lead {
    color: var(--tinta-2);
    margin-bottom: 1.5rem;
}
.auth-card .alt {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--linea-2);
    color: var(--tinta-2);
    font-size: 0.9375rem;
}
.auth-card .btn + .btn,
.auth-card p .btn {
    margin-top: 0.25rem;
}
.auth-wide .auth-card {
    max-width: 44rem;
}

@media (max-width: 56rem) {
    .auth-wrap {
        grid-template-columns: 1fr;
    }
    .auth-art {
        padding: 1.1rem 1.25rem;
    }
    .auth-art h1,
    .auth-art ul,
    .auth-doc {
        display: none;
    }
    .auth-main {
        align-items: flex-start;
    }
}

/* página pública ancha (firma por invitación) */
.pub-top {
    background: var(--riel);
    color: #fff;
}
.pub-top .in {
    max-width: 74rem;
    margin: 0 auto;
    padding: 0.75rem clamp(1rem, 4vw, 3rem);
    display: flex;
    align-items: center;
    gap: 1rem;
}
.pub-top .mark {
    padding: 0;
}
.pub-top .mark svg {
    width: 1.75rem;
    height: 1.75rem;
}
.pub-top .seguro {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8125rem;
    color: var(--riel-tx);
}

/* ───────── Visor PDF y selector (se rediseña en el lote 2) ───────── */
.pdf-bar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}
.pdf-stage {
    overflow: auto;
    max-height: 80vh;
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
    background: color-mix(in srgb, var(--tinta) 14%, var(--papel));
    padding: 0.75rem;
    text-align: center;
}
.pdf-page {
    position: relative;
    display: inline-block;
    background: #fff;
    line-height: 0;
    box-shadow: 0 6px 24px -8px rgba(16, 21, 46, 0.4);
}
.pdf-page canvas {
    display: block;
}
.pdf-overlay {
    position: absolute;
    inset: 0;
    touch-action: none;
}
.pdf-overlay.picking {
    cursor: crosshair;
}
.pdf-slot {
    position: absolute;
    border: 2px solid #2433d9;
    background: rgba(36, 51, 217, 0.14);
    border-radius: 3px;
    font: 650 12px/1.2 var(--f);
    color: #151f8f;
    display: flex;
    align-items: flex-start;
    padding: 2px 5px;
    pointer-events: none;
    overflow: hidden;
}
.pdf-slot.firmado {
    border-color: #0b7a5a;
    background: rgba(11, 122, 90, 0.16);
    color: #06513c;
}
.pdf-slot.cancelado {
    border-color: #98a2b3;
    background: rgba(152, 162, 179, 0.2);
    color: #475467;
}
.pdf-slot.activo {
    border-color: #a5500b;
    background: rgba(165, 80, 11, 0.18);
    color: #6e3207;
}
.signer-row.active {
    outline: 2px solid var(--aviso);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ═════════ Lote 2: documento, visor y firma ═════════ */
.back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: var(--tinta-2);
    text-decoration: none;
}
.back:hover {
    color: var(--azul);
}
.back .ic {
    width: 1rem;
    height: 1rem;
    transform: rotate(180deg);
}
.head-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 1.1rem;
    margin-top: 0.6rem;
    font-size: 0.875rem;
    color: var(--tinta-2);
    font-variant-numeric: tabular-nums;
}
.page-head h1 {
    overflow-wrap: anywhere;
    max-width: 44rem;
}
.head-act {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.head-act form {
    display: inline;
}

.doc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22.5rem;
    gap: 1.5rem;
    align-items: start;
}
.doc-side {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding-right: 2px;
}
.doc-side > .card:last-child {
    margin-bottom: 0;
}
@media (max-width: 70rem) {
    .doc-layout {
        grid-template-columns: 1fr;
    }
    .doc-side {
        position: static;
        max-height: none;
        order: -1;
    }
}

/* visor */
.viewer {
    padding: 0;
    overflow: hidden;
}
.viewer .pdf-bar {
    margin: 0;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--linea);
    justify-content: space-between;
}
.viewer .pdf-bar .grp {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.viewer .pdf-pg {
    min-width: 7rem;
    text-align: center;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--tinta-2);
}
.viewer .pdf-pg b {
    color: var(--tinta);
}
.viewer .pdf-stage {
    border: 0;
    border-radius: 0;
    min-height: 24rem;
    max-height: calc(100vh - 10rem);
}
.viewer [data-msg] {
    font-size: 0.8125rem;
    color: var(--tinta-2);
}
.legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.9rem;
    border-top: 1px solid var(--linea);
    font-size: 0.8125rem;
    color: var(--tinta-2);
}
.legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.legend i {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 3px;
    border: 2px solid;
}
.legend .l-pend {
    border-color: #2433d9;
    background: rgba(36, 51, 217, 0.18);
}
.legend .l-ok {
    border-color: #0b7a5a;
    background: rgba(11, 122, 90, 0.2);
}
.legend .l-no {
    border-color: #98a2b3;
    background: rgba(152, 162, 179, 0.25);
}

/* formulario de firma */
.sign-card {
    border-color: color-mix(in srgb, var(--azul) 45%, var(--linea));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 10%, transparent);
}
.sign-card h2 {
    margin-bottom: 0.25rem;
}
.sign-card form {
    margin-top: 1rem;
}
/* Selector de archivo: el <input> real queda invisible. Debe ganarle a «.field input {width:100%}»: si no, mide todo el ancho
   de la pantalla y fuerza el scroll horizontal de la página. */
.filepick-in,
.field input.filepick-in,
input[type="file"].filepick-in {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: -1px;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    pointer-events: none;
}
.filepick {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.9rem;
    margin: 0;
    padding: 0.5rem 0.85rem;
    border: 1.5px dashed var(--tinta-3);
    border-radius: var(--r-s);
    background: var(--hoja-2);
    color: var(--tinta-2);
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
}
.filepick:hover {
    border-color: var(--azul);
    color: var(--azul);
}
.filepick span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.filepick.tiene {
    border-style: solid;
    border-color: var(--ok);
    background: var(--ok-suave);
    color: var(--ok);
}
.filepick-in:focus-visible + .filepick {
    outline: 2px solid var(--azul);
    outline-offset: 2px;
}
.privado {
    display: flex;
    gap: 0.55rem;
    margin: 0 0 1rem;
    font-size: 0.8125rem;
    color: var(--tinta-2);
}
.privado .ic {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.1rem;
    color: var(--ok);
}

/* firmantes */
.progreso {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 1rem;
}
.progreso .bar {
    flex: 1;
}
.progreso b {
    font-variant-numeric: tabular-nums;
    font-size: 0.875rem;
}
.signers {
    list-style: none;
    margin: 0;
    padding: 0;
}
.signer {
    position: relative;
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    gap: 0.7rem;
    padding-bottom: 1.1rem;
}
.signer:last-child {
    padding-bottom: 0;
}
.signer::before {
    content: "";
    position: absolute;
    left: 0.82rem;
    top: 1.75rem;
    bottom: 0;
    width: 2px;
    background: var(--linea);
}
.signer:last-child::before {
    display: none;
}
.signer .n {
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid var(--linea);
    background: var(--hoja);
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--tinta-2);
    position: relative;
    z-index: 1;
}
.signer.firmado .n {
    background: var(--ok);
    border-color: var(--ok);
    color: var(--sobre-azul);
}
.signer.firmado::before {
    background: var(--ok);
}
.signer.cancelado .n,
.signer.vencido .n {
    border-color: var(--err);
    color: var(--err);
}
.signer .nom {
    font-weight: 600;
    overflow-wrap: anywhere;
    line-height: 1.3;
}
.signer .sub {
    font-size: 0.8125rem;
    color: var(--tinta-2);
    overflow-wrap: anywhere;
}
.signer .chips {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}
.signer .acc {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.signer .acc form {
    display: inline;
}

/* verificación */
.sig {
    padding: 1rem 0;
    border-top: 1px solid var(--linea-2);
}
.sig:first-of-type {
    border-top: 0;
    padding-top: 0.25rem;
}
.sig > header {
    margin-bottom: 0.75rem;
}
.sig > header b {
    display: block;
}
.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.9rem 1.25rem;
    margin: 0;
}
.facts dt {
    font-size: 0.8125rem;
    color: var(--tinta-2);
    margin-bottom: 0.25rem;
}
.facts dd {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--tinta-2);
}
.facts dd .chip {
    margin-bottom: 0.2rem;
    white-space: normal;
}
.cadena {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--linea-2);
    font-size: 0.875rem;
    color: var(--tinta-2);
}

/* revisiones */
.revs {
    list-style: none;
    margin: 0;
    padding: 0;
}
.revs li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.6rem 0;
    border-top: 1px solid var(--linea-2);
}
.revs li:first-child {
    border-top: 0;
}
.revs .r {
    font-weight: 650;
    min-width: 1.75rem;
}
.revs .sha {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--tinta-2);
}
.revs .sha button {
    border: 0;
    background: none;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
    color: var(--azul);
    font: 600 0.75rem var(--f);
    cursor: pointer;
}
.revs .sha button:hover {
    background: var(--azul-suave);
}
.revs small {
    display: block;
    color: var(--tinta-2);
    font-size: 0.8125rem;
}

/* firma por invitación */
.inv-head {
    margin-bottom: 1.5rem;
}
.inv-head p {
    margin: 0.4rem 0 0;
    max-width: 46rem;
}
.inv-msg {
    margin-top: 0.75rem;
    padding: 0.7rem 0.9rem;
    border-left: 3px solid var(--azul);
    background: var(--azul-suave);
    border-radius: 0 var(--r-s) var(--r-s) 0;
    font-size: 0.9375rem;
    max-width: 46rem;
}

/* ═════════ Lote 3: solicitar firmas y aceptar invitación ═════════ */
.pick-hint {
    position: sticky;
    top: 0.75rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    padding: 0.7rem 1rem;
    border-radius: var(--r-m);
    background: var(--azul);
    color: var(--sobre-azul);
    font-weight: 550;
    box-shadow: var(--flota);
}
.doc-side.form-side {
    position: static;
    max-height: none;
    overflow: visible;
}
.doc-layout.picker > .stick {
    position: sticky;
    top: 1rem;
}
@media (max-width: 70rem) {
    .doc-layout.picker > .stick {
        position: static;
    }
}
.srow-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}
.signer-row {
    padding: 0.9rem 1rem 1rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
    background: var(--hoja);
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}
.signer-row.active {
    outline: 0;
    border-color: var(--aviso);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--aviso) 22%, transparent);
}
.srow-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.srow-head .n {
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--azul);
    color: var(--sobre-azul);
    font-size: 0.75rem;
    font-weight: 700;
}
.srow-head strong {
    font-weight: 650;
    white-space: nowrap;
}
.srow-head .chip {
    margin-left: auto;
}
.signer-row label {
    margin-top: 0;
}
.signer-row [data-pos] {
    margin-top: 0.7rem;
}
.opts {
    display: grid;
    gap: 0.9rem;
}
.opts .check {
    align-items: flex-start;
}
.opts .check span {
    display: block;
}
.opts .check small {
    display: block;
    color: var(--tinta-2);
    font-size: 0.8125rem;
}
.submit-bar {
    margin-top: 1rem;
}
.submit-bar .muted {
    margin: 0 0 0.6rem;
    text-align: center;
}

/* recuadros editables del selector */
.pdf-overlay .pdf-slot[data-row] {
    pointer-events: auto;
    cursor: move;
    touch-action: none;
}
.pdf-overlay.picking .pdf-slot {
    cursor: crosshair;
}
.pdf-h {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 14px;
    height: 14px;
    background: currentColor;
    border-radius: 3px 0 3px 0;
    cursor: nwse-resize;
}
.pdf-overlay.picking .pdf-h {
    display: none;
}

/* aceptar invitación */
.estado {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--azul-suave);
    color: var(--azul);
}
.estado.ok {
    background: var(--ok-suave);
    color: var(--ok);
}
.estado.err {
    background: var(--err-suave);
    color: var(--err);
}
.estado .ic {
    width: 1.5rem;
    height: 1.5rem;
}
.inv-doc {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0 0 1.25rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
    background: var(--hoja-2);
}
.inv-doc b {
    display: block;
    overflow-wrap: anywhere;
}
.auth-card .acciones {
    display: grid;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

/* ═════════ Lote 4: verificar, certificados, configuración y avisos ═════════ */
.tabs {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding: 0.25rem;
    width: fit-content;
    max-width: 100%;
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
    background: var(--hoja);
}
.tabs a {
    padding: 0.5rem 0.95rem;
    border-radius: 9px;
    color: var(--tinta-2);
    font-size: 0.9375rem;
    font-weight: 550;
    text-decoration: none;
}
.tabs a:hover {
    background: var(--hoja-2);
    color: var(--tinta);
}
.tabs a[aria-current="page"] {
    background: var(--azul-suave);
    color: var(--azul);
}
.narrow {
    max-width: 46rem;
}
.priv {
    display: flex;
    gap: 0.6rem;
    margin: 1rem 0 0;
    font-size: 0.8125rem;
    color: var(--tinta-2);
}
.priv .ic {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.1rem;
    flex: none;
}
.alcance {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.alcance li {
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-s);
    background: var(--hoja);
    font-size: 0.875rem;
    font-weight: 550;
}
.alcance small {
    display: block;
    margin-top: 0.1rem;
    font-weight: 400;
    color: var(--tinta-2);
}

/* resultado de certificado */
.verdict {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1.25rem 1.4rem;
    margin-bottom: 1rem;
    border-radius: var(--r-l);
    border: 1px solid transparent;
}
.verdict.ok {
    background: var(--ok-suave);
    color: var(--ok);
}
.verdict.aviso {
    background: var(--aviso-suave);
    color: var(--aviso);
}
.verdict.err {
    background: var(--err-suave);
    color: var(--err);
}
.verdict .ic {
    width: 2.25rem;
    height: 2.25rem;
}
.verdict h2 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--tinta);
}
.verdict p {
    margin: 0.15rem 0 0;
    color: var(--tinta-2);
    font-size: 0.9375rem;
}
.kv-group {
    margin-bottom: 1rem;
}
.kv-group h3 {
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
}
.kv {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    border-top: 1px solid var(--linea-2);
}
.kv dt,
.kv dd {
    margin: 0;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--linea-2);
}
.kv dt {
    color: var(--tinta-2);
    font-size: 0.875rem;
}
.kv dd {
    overflow-wrap: anywhere;
}
.kv dd small {
    display: block;
    color: var(--tinta-2);
}
.kv dd .copy {
    margin-left: 0.4rem;
    border: 0;
    background: none;
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    color: var(--azul);
    font: 600 0.75rem var(--f);
    cursor: pointer;
}
.kv dd .copy:hover {
    background: var(--azul-suave);
}
@media (max-width: 40rem) {
    .kv {
        grid-template-columns: 1fr;
    }
    .kv dt {
        border-bottom: 0;
        padding-bottom: 0;
    }
}

/* configuración */
.opt {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin: 0 0 0.5rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
    background: var(--hoja);
    font-weight: 450;
    cursor: pointer;
}
.opt:hover {
    border-color: var(--tinta-3);
}
.opt:has(input:checked) {
    border-color: var(--azul);
    background: var(--azul-suave);
}
.opt input {
    margin-top: 0.2rem;
}
.opt b {
    display: block;
    font-weight: 600;
}
.opt small {
    display: block;
    color: var(--tinta-2);
    font-size: 0.8125rem;
}
.when-propio {
    display: none;
    margin-top: 0.9rem;
    padding: 1rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
    background: var(--hoja-2);
}
form:has(input[name="tsa_mode"][value="propio"]:checked) .when-propio {
    display: block;
}
@supports not selector(:has(*)) {
    .when-propio {
        display: block;
    }
}
.cols2 {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.lista {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
}
.lista li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--linea-2);
}
.lista li:first-child {
    border-top: 0;
}
.lista .t {
    flex: 1;
    min-width: 0;
}
.lista .t b {
    display: block;
}
.lista .t small {
    display: block;
    color: var(--tinta-2);
    overflow-wrap: anywhere;
}
.lista form {
    margin: 0;
}
.divisor {
    margin: 1.25rem 0;
    border: 0;
    border-top: 1px solid var(--linea-2);
}

/* avisos */
.avisos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}
.aviso-item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.9rem;
    align-items: start;
    padding: 0.95rem 1.1rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
    background: var(--hoja);
}
.aviso-item.nuevo {
    border-color: color-mix(in srgb, var(--azul) 40%, var(--linea));
    background: color-mix(in srgb, var(--azul-suave) 55%, var(--hoja));
}
.aviso-item .punto {
    width: 0.6rem;
    height: 0.6rem;
    margin-top: 0.45rem;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--linea);
}
.aviso-item.nuevo .punto {
    background: var(--azul);
    border-color: var(--azul);
}
.aviso-item h3 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.aviso-item p {
    margin: 0.2rem 0 0;
}
.aviso-item time {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8125rem;
    color: var(--tinta-2);
}
.aviso-item form {
    margin: 0;
}
@media (max-width: 40rem) {
    .aviso-item {
        grid-template-columns: auto 1fr;
    }
    .aviso-item form {
        grid-column: 2;
    }
    .verdict {
        grid-template-columns: 1fr;
    }
}

/* ═════════ Lote 5: administración ═════════ */
.toolbar {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.7rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
    background: var(--hoja);
}
.toolbar input,
.toolbar select {
    width: auto;
    min-height: 2.5rem;
    flex: 0 1 14rem;
}
.toolbar input[type="text"],
.toolbar input[type="search"] {
    flex: 1 1 14rem;
}
.kpis {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.kpi {
    padding: 1rem 1.15rem;
    border: 1px solid var(--linea);
    border-radius: var(--r-m);
    background: var(--hoja);
}
.kpi b {
    display: block;
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -0.03em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.kpi span {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    color: var(--tinta-2);
}
.kpi.aviso b {
    color: var(--aviso);
}
.kpi.err b {
    color: var(--err);
}
.cell-main {
    font-weight: 600;
}
.cell-main small {
    display: block;
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--tinta-2);
    overflow-wrap: anywhere;
}
.fila-acc {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.fila-acc form {
    margin: 0;
}
td .mono {
    overflow-wrap: anywhere;
}
.plan-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.9rem;
}
.plan-head h2 {
    margin: 0;
}
.card.nuevo {
    border-style: dashed;
    background: transparent;
}
.secreto {
    margin-bottom: 1rem;
    padding: 1.25rem 1.4rem;
    border: 2px solid var(--aviso);
    border-radius: var(--r-l);
    background: var(--hoja);
}
.secreto h2 {
    margin-bottom: 0.25rem;
}
.cred {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem 0.9rem;
    align-items: center;
    margin-top: 0.9rem;
}
.cred dt {
    font-size: 0.8125rem;
    color: var(--tinta-2);
}
.cred code {
    display: block;
    padding: 0.55rem 0.7rem;
    border-radius: var(--r-s);
    background: var(--hoja-2);
    border: 1px solid var(--linea);
    font: 0.8125rem/1.4 var(--mono);
    overflow-wrap: anywhere;
}
code {
    font-family: var(--mono);
    font-size: 0.85em;
    padding: 0.1em 0.35em;
    border-radius: 5px;
    background: var(--hoja-2);
}
@media (max-width: 40rem) {
    .cred {
        grid-template-columns: 1fr;
    }
}
.form-cols {
    display: grid;
    gap: 0.9rem 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    margin-bottom: 0.9rem;
}
.form-cols .field {
    margin: 0;
}
.rel h3 {
    margin: 1.1rem 0 0.4rem;
    font-size: 0.9375rem;
}
.rel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.rel li {
    padding: 0.45rem 0;
    border-top: 1px solid var(--linea-2);
    font-size: 0.9375rem;
}
.rel li:first-child {
    border-top: 0;
}