/* =====================================================================
   ATER · Design System — tokens y primitivas
   ---------------------------------------------------------------------
   Fuente de verdad visual compartida. Los valores replican el estandar
   definido en servicioclavefiscal-2.0 (Styles/portal-modern.css) para que
   el Visor Catastral y el Portal de Servicios con Clave Fiscal se lean
   como un unico producto.

   Este archivo es PORTABLE: no contiene selectores propios del visor.
   Se carga primero; encima van las hojas especificas de cada pantalla.
   ===================================================================== */

:root {
    /* ---- Marca ------------------------------------------------------ */
    --ater-violeta: #422268;
    --ater-violeta-900: #2d1850;
    --ater-magenta: #9c027c;
    --ater-magenta-700: #7a0261;
    --ater-cyan: #00a9b7;
    --ater-oro: #f3c64a;
    --ater-grad: linear-gradient(135deg, #321b55 0%, #6d1a72 48%, #a50378 100%);

    /* ---- Superficies y texto ---------------------------------------- */
    --ater-bg: #fbfafc;
    --ater-bg-portal: #ebeef6;
    --ater-card: #ffffff;
    --ater-surface-2: #f7f5fa;
    --ater-text: #1f2937;
    --ater-text-strong: #172033;
    --ater-muted: #6b7280;
    --ater-border: #e5e7eb;
    --ater-border-strong: #d5d8de;

    /* ---- Estados ---------------------------------------------------- */
    --ater-ok: #0f766e;
    --ater-ok-bg: #ecfdf5;
    --ater-warn: #b45309;
    --ater-warn-bg: #fffbeb;
    --ater-error: #b91c1c;
    --ater-error-bg: #fef2f2;
    --ater-error-border: #fecaca;

    /* ---- Foco y elevacion ------------------------------------------- */
    --ater-ring: rgba(156, 2, 124, 0.18);
    --ater-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px -12px rgba(16, 24, 40, .25);
    --ater-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 2px 6px -3px rgba(16, 24, 40, .18);
    --ater-shadow-lg: 0 2px 4px rgba(16, 24, 40, .06), 0 24px 48px -20px rgba(16, 24, 40, .35);
    --ater-shadow-btn: 0 8px 18px -10px var(--ater-magenta);

    /* ---- Radios ----------------------------------------------------- */
    --ater-r-sm: 6px;
    --ater-r: 8px;
    --ater-r-md: 10px;
    --ater-r-lg: 14px;
    --ater-r-pill: 999px;

    /* ---- Escala de espaciado (ritmo 4px) ---------------------------- */
    --ater-sp-1: 4px;
    --ater-sp-2: 8px;
    --ater-sp-3: 12px;
    --ater-sp-4: 16px;
    --ater-sp-5: 24px;
    --ater-sp-6: 32px;
    --ater-sp-7: 48px;

    /* ---- Tipografia ------------------------------------------------- */
    --ater-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ater-font-num: "Segoe UI", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Escala fluida: crece con el viewport sin saltos de breakpoint. */
    --ater-fs-xs: .78rem;
    --ater-fs-sm: .86rem;
    --ater-fs-base: 1rem;
    --ater-fs-lg: clamp(1.05rem, .98rem + .35vw, 1.2rem);
    --ater-fs-xl: clamp(1.25rem, 1.1rem + .7vw, 1.55rem);
    --ater-fs-2xl: clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem);
    --ater-fs-3xl: clamp(2rem, 1.5rem + 2.6vw, 3.4rem);

    /* ---- Movimiento ------------------------------------------------- */
    --ater-ease: cubic-bezier(.2, .78, .25, 1);
    --ater-ease-in: cubic-bezier(.55, .06, .68, .19);
    --ater-t-fast: 150ms;
    --ater-t: 220ms;
    --ater-t-slow: 340ms;

    /* ---- Capas ------------------------------------------------------ */
    --ater-z-panel: 900;
    --ater-z-chrome: 1000;
    --ater-z-overlay: 1200;
    --ater-z-modal: 1300;
}

/* =====================================================================
   Fondo institucional del portal: halos de marca + trama de puntos.
   Se aplica con la clase `.ater-canvas` sobre <body>.
   ===================================================================== */
.ater-canvas {
    /* flow-root evita que el margen del primer hijo se escape y deje una
       franja del fondo del <html> arriba de todo. */
    display: flow-root;
    min-height: 100dvh;
    background-color: var(--ater-bg-portal);
    background-image:
        radial-gradient(65% 55% at 90% -5%, rgba(156, 2, 124, .14), transparent 60%),
        radial-gradient(60% 50% at 3% 2%, rgba(66, 34, 104, .14), transparent 60%),
        radial-gradient(rgba(66, 34, 104, .12) 1.3px, transparent 1.3px);
    background-size: auto, auto, 20px 20px;
    background-attachment: fixed;
}

/* =====================================================================
   Primitivas
   ===================================================================== */

/* ---- Kicker: etiqueta dorada sobre fondo violeta. Marca de la casa. -- */
.ater-kicker {
    color: var(--ater-oro);
    font-size: var(--ater-fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.8px;
}

/* ---- Botones ---------------------------------------------------------
   .ater-btn es el boton primario; los modificadores bajan la jerarquia.
   Alto minimo 44px para cumplir el area tactil en mobile. */
.ater-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ater-sp-2);
    min-height: 44px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--ater-r);
    background: var(--ater-grad);
    color: #fff;
    font-family: var(--ater-font);
    font-size: var(--ater-fs-base);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--ater-shadow-btn);
    transition: transform var(--ater-t-fast) var(--ater-ease),
                filter var(--ater-t) var(--ater-ease),
                box-shadow var(--ater-t) var(--ater-ease);
}

.ater-btn:hover { transform: translateY(-1px); filter: brightness(1.07); color: #fff; text-decoration: none; }
.ater-btn:active { transform: translateY(0); }

.ater-btn--ghost {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: none;
}
.ater-btn--ghost:hover { background: rgba(255, 255, 255, .26); filter: none; }

.ater-btn--quiet {
    background: #fff;
    color: var(--ater-magenta);
    border: 1px solid var(--ater-border);
    box-shadow: var(--ater-shadow-sm);
}
.ater-btn--quiet:hover { color: var(--ater-magenta-700); border-color: var(--ater-magenta); filter: none; }

.ater-btn--danger {
    background: #fff;
    color: var(--ater-error);
    border: 1px solid var(--ater-error-border);
    box-shadow: none;
}
.ater-btn--danger:hover { background: var(--ater-error-bg); color: var(--ater-error); filter: none; }

.ater-btn[disabled],
.ater-btn.is-disabled {
    background: #d4d8e0;
    color: #8b919c;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

/* ---- Campos ---------------------------------------------------------- */
.ater-field { display: block; margin-bottom: var(--ater-sp-4); }

.ater-label {
    display: flex;
    align-items: center;
    gap: var(--ater-sp-2);
    margin-bottom: var(--ater-sp-2);
    color: var(--ater-text);
    font-size: var(--ater-fs-sm);
    font-weight: 600;
    letter-spacing: .3px;
}
.ater-label svg { width: 16px; height: 16px; color: var(--ater-magenta); flex-shrink: 0; }
/* Los iconos de FontAwesome cumplen el mismo rol que los svg en el label. */
.ater-label i { color: var(--ater-magenta); flex-shrink: 0; }

/* El asterisco de campo obligatorio nunca es la unica senal: el label tambien
   lo dice en el texto accesible. Se oculta a lectores con aria-hidden. */
.ater-req { color: var(--ater-error); font-weight: 700; }

.ater-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1.5px solid var(--ater-border);
    border-radius: var(--ater-r);
    background: #fff;
    color: var(--ater-text);
    /* 16px evita el auto-zoom de iOS al enfocar */
    font-family: var(--ater-font);
    font-size: 1rem;
    transition: border-color var(--ater-t) var(--ater-ease),
                box-shadow var(--ater-t) var(--ater-ease);
}
.ater-input::placeholder { color: #9aa1ad; }
.ater-input:focus {
    outline: none;
    border-color: var(--ater-magenta);
    box-shadow: 0 0 0 3px var(--ater-ring);
}

.ater-help { margin-top: 6px; color: var(--ater-muted); font-size: var(--ater-fs-xs); }

/* ---- Campo de archivo ------------------------------------------------
   El input file nativo trae un boton gris del sistema que no acompana al
   resto de los controles. Se le da el mismo alto, borde y foco que a
   .ater-input, y el boton interno pasa a ser un boton secundario. La
   altura se arma con line-height porque Firefox ignora flex en este input. */
.ater-input--file {
    padding: 7px 10px;
    line-height: 28px;
    cursor: pointer;
}

.ater-input--file::file-selector-button {
    margin-right: var(--ater-sp-3);
    padding: 5px 14px;
    border: 1px solid var(--ater-border);
    border-radius: var(--ater-r-sm);
    background: var(--ater-surface-2);
    color: var(--ater-magenta);
    font-family: var(--ater-font);
    font-size: var(--ater-fs-sm);
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    transition: background var(--ater-t) var(--ater-ease),
                border-color var(--ater-t) var(--ater-ease);
}
.ater-input--file:hover::file-selector-button {
    background: #fff;
    border-color: var(--ater-magenta);
}

/* Chrome/Safari anteriores al soporte de ::file-selector-button. Va en una
   regla aparte: un selector desconocido invalida todo el bloque. */
.ater-input--file::-webkit-file-upload-button {
    margin-right: var(--ater-sp-3);
    padding: 5px 14px;
    border: 1px solid var(--ater-border);
    border-radius: var(--ater-r-sm);
    background: var(--ater-surface-2);
    color: var(--ater-magenta);
    font-family: var(--ater-font);
    font-size: var(--ater-fs-sm);
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

/* ---- Tarjeta --------------------------------------------------------- */
.ater-card {
    background: var(--ater-card);
    border: 1px solid var(--ater-border);
    border-radius: var(--ater-r-lg);
    box-shadow: var(--ater-shadow);
}

/* ---- Avisos ----------------------------------------------------------
   El color nunca es la unica senal: cada aviso lleva icono y texto. */
.ater-note {
    display: flex;
    gap: var(--ater-sp-3);
    padding: var(--ater-sp-3) var(--ater-sp-4);
    border-radius: var(--ater-r);
    border-left: 4px solid var(--ater-magenta);
    background: rgba(156, 2, 124, .05);
    color: var(--ater-text);
    font-size: var(--ater-fs-sm);
    line-height: 1.55;
}
.ater-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--ater-magenta); }
.ater-note i { flex-shrink: 0; margin-top: 3px; font-size: 1.05em; color: var(--ater-magenta); }
.ater-note p { margin: 0; }
.ater-note p + p { margin-top: var(--ater-sp-2); }

.ater-note--warn { border-left-color: var(--ater-warn); background: var(--ater-warn-bg); color: #7c3f06; }
.ater-note--warn svg { color: var(--ater-warn); }

.ater-note--error { border-left-color: var(--ater-error); background: var(--ater-error-bg); color: #8f1616; }
.ater-note--error svg { color: var(--ater-error); }

/* ---- Chip / badge ---------------------------------------------------- */
.ater-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--ater-r-pill);
    background: var(--ater-grad);
    color: #fff;
    font-size: var(--ater-fs-xs);
    font-weight: 700;
    letter-spacing: .5px;
    box-shadow: var(--ater-shadow-btn);
}
.ater-chip--quiet {
    background: var(--ater-surface-2);
    color: var(--ater-magenta);
    border: 1px solid var(--ater-border);
    box-shadow: none;
}

/* ---- Scrollbar de marca ---------------------------------------------- */
.ater-scroll { scrollbar-width: thin; scrollbar-color: var(--ater-magenta) transparent; }
.ater-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.ater-scroll::-webkit-scrollbar-track { background: transparent; }
.ater-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--ater-magenta) 0%, var(--ater-magenta-700) 100%);
    border-radius: var(--ater-r-pill);
}
.ater-scroll::-webkit-scrollbar-thumb:hover { background: var(--ater-magenta-700); }

/* ---- Utilidad: solo para lectores de pantalla ------------------------ */
.ater-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;
}

/* =====================================================================
   Base de accesibilidad
   ===================================================================== */

/* Foco visible y consistente en todo lo interactivo. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--ater-magenta);
    outline-offset: 2px;
    border-radius: var(--ater-r-sm);
}

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