/*
 * Arizar Track — Sistema de Control de Asistencia y Gestión de Personal
 * SPDX-FileCopyrightText: © 2026 Avanzatec LLC
 * SPDX-License-Identifier: LicenseRef-Avanzatec-Proprietary
 *
 * Desarrollado por Avanzatec LLC.
 * © 2026 Avanzatec LLC — Todos los derechos reservados.
 * Términos de uso en el archivo LICENSE.
 */

/* ==========================================
   PÁGINAS LEGALES — /privacidad, /terminos, /soporte y /eliminar-cuenta.
   HTML estático con esta única hoja de estilos (la CSP de nginx no permite estilos ni
   scripts en línea). Misma paleta que la landing, en modo claro. Clases con prefijo pl-.
   Al cambiar este archivo, subir el ?v= con que lo cargan las cuatro páginas: los .css
   sin hash se cachean un día.
   ========================================== */

/* La misma Inter que la landing (licencia OFL, ver /fonts/LICENCIAS.txt). */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('/fonts/inter-v20-latin-var.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --tinta: #0b1a3f;
    --texto: #1f2937;
    --gris: #56627f;
    --linea: #e2e7f1;
    --linea-fuerte: #c3cbe0;
    --papel: #f6f8fd;
    --papel-azul: #eef3ff;
    --borde-azul: #c9d6ff;
    --azul: #2f6bff;
    --boton: #2459e6;
    --boton-hover: #1d47c2;
    --enlace: #1f4fd1;
    --enlace-hover: #1d3fa8;
    --verde-fondo: #ecfdf3;
    --verde-borde: #abefc6;
    --verde-texto: #05603a;
    --rojo: #b42318;
    --rojo-fondo: #fef3f2;
    --rojo-borde: #fecdca;
    --ambar-fondo: #fffaeb;
    --ambar-borde: #fedf89;
    --ambar-texto: #7a2e0e;

    color-scheme: light;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--texto);
    background: #fff;
    overflow-wrap: break-word;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--enlace);
    text-underline-offset: 2px;
}

a:hover {
    color: var(--enlace-hover);
}

:focus-visible {
    outline: 3px solid var(--azul);
    outline-offset: 2px;
    border-radius: 4px;
}

.pl-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Saltar al contenido (visible solo con el teclado) ── */
.pl-saltar {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 10;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--tinta);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.pl-saltar:focus {
    top: 12px;
    color: #fff;
}

/* ── Estructura ── */
.pl-envoltura {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-left: clamp(16px, 4vw, 24px);
    padding-right: clamp(16px, 4vw, 24px);
}

.pl-cabecera {
    background: linear-gradient(180deg, var(--papel-azul) 0%, #fff 100%);
    border-bottom: 1px solid var(--linea);
}

.pl-cabecera-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 20px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.pl-marca {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--tinta);
}

.pl-marca img {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.pl-volver {
    display: inline-block;
    padding: 6px 0;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.pl-volver:hover {
    text-decoration: underline;
}

main {
    display: block;
    padding-top: 36px;
    padding-bottom: 64px;
}

/* ── Títulos y texto ── */
.pl-rotulo {
    margin: 0 0 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--enlace);
}

h1 {
    margin: 0 0 8px;
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--tinta);
}

h2 {
    margin: 44px 0 10px;
    font-size: 1.25rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--tinta);
    scroll-margin-top: 16px;
}

h3 {
    margin: 26px 0 6px;
    font-size: 1.0625rem;
    line-height: 1.35;
    color: var(--tinta);
}

p,
ul,
ol {
    margin: 0 0 14px;
}

ul,
ol {
    padding-left: 1.25rem;
}

li {
    margin: 6px 0;
}

li::marker {
    color: var(--gris);
}

strong {
    color: var(--tinta);
}

code {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--papel);
    border: 1px solid var(--linea);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875em;
}

/* Destino del «Saltar al contenido»: recibe el foco sin mostrar un recuadro. */
main:focus {
    outline: none;
}

.pl-fecha {
    margin: 0 0 20px;
    font-size: 0.9375rem;
    color: var(--gris);
}

.pl-bajada {
    font-size: 1.0625rem;
    color: #374151;
}

h1 + .pl-bajada {
    margin-top: 14px;
}

.pl-chico {
    font-size: 0.9375rem;
    color: var(--gris);
}

/* ── Recuadros ── */
.pl-resumen,
.pl-nota,
.pl-aviso {
    margin: 24px 0;
    padding: 18px 20px;
    border-radius: 14px;
}

.pl-resumen {
    background: var(--papel);
    border: 1px solid var(--linea);
}

.pl-nota {
    background: var(--papel-azul);
    border: 1px solid var(--borde-azul);
}

.pl-aviso {
    background: var(--ambar-fondo);
    border: 1px solid var(--ambar-borde);
    color: var(--ambar-texto);
}

.pl-aviso strong {
    color: inherit;
}

.pl-resumen h2,
.pl-nota h2,
.pl-aviso h2 {
    margin-top: 0;
    font-size: 1.0625rem;
}

.pl-resumen > :last-child,
.pl-nota > :last-child,
.pl-aviso > :last-child {
    margin-bottom: 0;
}

/* ── Índice ── */
.pl-indice {
    margin: 28px 0 8px;
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--borde-azul);
}

.pl-indice h2 {
    margin: 0 0 6px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gris);
}

.pl-indice ol {
    margin: 0;
    padding-left: 1.4rem;
    font-size: 0.9375rem;
}

/* Padding y no margin: en dos columnas, el margen del primer ítem de cada columna se come. */
.pl-indice li {
    margin: 0;
    padding: 3px 0;
    break-inside: avoid;
}

.pl-indice a {
    text-decoration: none;
}

.pl-indice a:hover {
    text-decoration: underline;
}

@media (min-width: 640px) {
    .pl-indice ol {
        columns: 2;
        column-gap: 40px;
    }
}

/* ── Listas con nombre en negrita (proveedores, pasos) ── */
.pl-lista-limpia {
    list-style: none;
    padding-left: 0;
}

.pl-lista-limpia > li {
    padding: 12px 0;
    margin: 0;
    border-bottom: 1px solid var(--linea);
}

.pl-lista-limpia > li:first-child {
    border-top: 1px solid var(--linea);
}

.pl-pasos {
    counter-reset: paso;
    list-style: none;
    padding-left: 0;
}

.pl-pasos > li {
    position: relative;
    margin: 0 0 14px;
    padding-left: 44px;
    min-height: 30px;
}

.pl-pasos > li::before {
    counter-increment: paso;
    content: counter(paso);
    position: absolute;
    left: 0;
    top: -1px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--papel-azul);
    border: 1px solid var(--borde-azul);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--enlace-hover);
}

/* ── Tabla (conservación) ── */
.pl-tabla-envoltura {
    margin: 0 0 16px;
    overflow-x: auto;
    border: 1px solid var(--linea);
    border-radius: 12px;
}

.pl-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.pl-tabla th,
.pl-tabla td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--linea);
}

.pl-tabla thead th {
    background: var(--papel);
    font-weight: 600;
    color: var(--tinta);
}

.pl-tabla tbody th {
    font-weight: 600;
    color: var(--tinta);
    width: 42%;
}

.pl-tabla tr:last-child th,
.pl-tabla tr:last-child td {
    border-bottom: 0;
}

/* ── Tarjetas (soporte) ── */
.pl-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 20px 0 8px;
}

.pl-tarjeta {
    padding: 18px 18px 16px;
    border: 1px solid var(--linea);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 30px -22px rgba(40, 70, 160, 0.45);
}

.pl-tarjeta h3 {
    margin-top: 0;
}

.pl-tarjeta p {
    font-size: 0.9375rem;
}

.pl-tarjeta > :last-child {
    margin-bottom: 0;
}

/* ── Preguntas frecuentes (details/summary, sin JavaScript) ── */
.pl-pregunta {
    margin: 10px 0;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: #fff;
}

.pl-pregunta summary {
    position: relative;
    padding: 14px 48px 14px 16px;
    font-weight: 600;
    color: var(--tinta);
    cursor: pointer;
    list-style: none;
    border-radius: 12px;
}

.pl-pregunta summary::-webkit-details-marker {
    display: none;
}

.pl-pregunta summary::after {
    content: '+';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;
    color: var(--enlace);
}

.pl-pregunta[open] summary::after {
    content: '\2212';
}

.pl-pregunta summary:hover {
    background: var(--papel);
}

.pl-pregunta > div {
    padding: 2px 16px 6px;
}

/* ── Botones ── */
.pl-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--boton);
    color: #fff;
    font: inherit;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.pl-boton:hover {
    background: var(--boton-hover);
    color: #fff;
}

.pl-boton[disabled],
.pl-boton[aria-disabled='true'] {
    opacity: 0.65;
    cursor: progress;
}

.pl-boton-secundario {
    background: #fff;
    border-color: var(--linea-fuerte);
    color: var(--enlace-hover);
}

.pl-boton-secundario:hover {
    background: var(--papel-azul);
    color: var(--enlace-hover);
}

.pl-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0;
}

/* ── Formulario (eliminar cuenta) ── */
.pl-formulario {
    margin: 20px 0 0;
    padding: 22px 20px;
    border: 1px solid var(--linea);
    border-radius: 16px;
    background: var(--papel);
}

.pl-campo {
    margin: 0 0 18px;
}

.pl-campo label,
.pl-etiqueta {
    display: block;
    margin: 0 0 6px;
    font-weight: 600;
    color: var(--tinta);
}

.pl-opcional {
    font-weight: 400;
    color: var(--gris);
}

.pl-campo input,
.pl-campo textarea {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--linea-fuerte);
    border-radius: 10px;
    background: #fff;
    color: var(--texto);
    /* 16 px como mínimo: en iPhone, un campo más chico hace zoom al tocarlo. */
    font: inherit;
    font-size: 1rem;
}

.pl-campo textarea {
    min-height: 110px;
    resize: vertical;
}

.pl-campo input:focus,
.pl-campo textarea:focus {
    border-color: var(--azul);
    outline: 3px solid rgba(47, 107, 255, 0.3);
    outline-offset: 0;
}

.pl-campo [aria-invalid='true'] {
    border-color: var(--rojo);
    background: var(--rojo-fondo);
}

.pl-ayuda {
    margin: 6px 0 0;
    font-size: 0.875rem;
    color: var(--gris);
}

.pl-error-campo {
    margin: 6px 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rojo);
}

.pl-error-campo[hidden] {
    display: none;
}

.pl-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 16px;
}

@media (min-width: 600px) {
    .pl-fila {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.pl-campo .pl-casilla {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-weight: 400;
}

.pl-campo .pl-casilla input {
    flex: none;
    width: 20px;
    height: 20px;
    min-height: 0;
    margin: 3px 0 0;
    padding: 0;
    accent-color: var(--boton);
}

.pl-casilla span {
    font-weight: 400;
    color: var(--texto);
}

/* Campo trampa para robots: fuera de la vista, pero no con display:none (muchos robots lo
   saltean). Las personas no lo ven ni llegan con el teclado. */
.pl-trampa {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.pl-contador {
    margin: 6px 0 0;
    font-size: 0.8125rem;
    text-align: right;
    color: var(--gris);
}

.pl-mensaje {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 12px;
    font-weight: 500;
}

.pl-mensaje:empty {
    display: none;
}

.pl-mensaje-error {
    background: var(--rojo-fondo);
    border: 1px solid var(--rojo-borde);
    color: #912018;
}

.pl-mensaje-error a {
    color: inherit;
}

.pl-confirmacion {
    margin: 20px 0 0;
    padding: 22px 20px;
    border: 1px solid var(--verde-borde);
    border-radius: 16px;
    background: var(--verde-fondo);
    color: var(--verde-texto);
}

.pl-confirmacion h3 {
    margin-top: 0;
    color: var(--verde-texto);
}

.pl-confirmacion strong {
    color: inherit;
}

.pl-confirmacion > :last-child {
    margin-bottom: 0;
}

.pl-referencia {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--verde-borde);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pl-sin-js {
    margin: 0 0 18px;
}

/* ── Pie ── */
.pl-pie {
    padding: 28px 0 36px;
    border-top: 1px solid var(--linea);
    background: var(--papel);
    font-size: 0.875rem;
    color: var(--gris);
}

.pl-pie ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.pl-pie li {
    margin: 0;
}

.pl-pie a {
    display: inline-block;
    padding: 4px 0;
    color: #34406a;
    font-weight: 500;
}

.pl-pie a:hover {
    color: var(--enlace-hover);
}

.pl-pie a[aria-current='page'] {
    color: var(--tinta);
    font-weight: 700;
    text-decoration: none;
}

.pl-pie p {
    margin: 0 0 4px;
}

/* ── Impresión: solo el texto ── */
@media print {
    .pl-saltar,
    .pl-volver,
    .pl-indice,
    .pl-pie nav,
    .pl-formulario {
        display: none;
    }

    .pl-cabecera,
    .pl-pie {
        background: none;
    }

    a {
        color: inherit;
    }
}