/* ============================================================================
   ATOMS - INDUCOP
   Elementos indivisibles del sistema
   Versión: 1.0
   ============================================================================ */

/* =============================================================================
   AT-CONSTELLATION-PATTERN (S195): marca de agua de la red constelacion del Login,
   REBRAND-SAFE. La FORMA vive en constellation_mesh_mask.svg (monocromo); el COLOR lo
   pone var(--brand-cyan) via background-color + mask -> sigue piel/rebrand. Contrasta
   con el asset horneado del SOL (fijaba el cian crudo y NO rebrandaba). Overlay decorativo:
   se compone DENTRO de un contenedor position:relative (ej. heroe publico) sin tocar su
   fondo (barrido) ni su contenido; el consumidor sube su contenido con z-index. Misma
   tecnica que los watermark --wm-* (mask-image) ya usados en el catalogo.
   ============================================================================= */
.at-constellation-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.18;
    /* screen: la malla SIEMPRE aclara el fondo (visible sobre navy Y cyan del barrido,
       sin parpadeo). Sigue pintada por el token -> rebrand-safe (S195 QA). */
    mix-blend-mode: screen;
    /* Tinte legible (S195, aprobado Antigravity Opcion B): blanco+cyan -> la red se lee
       sobre navy Y cyan del barrido, conservando un tinte de marca. Sigue rebrand-safe
       (var(--brand-cyan) en el mix). Nunca hex horneado. */
    background-color: color-mix(in srgb, white 70%, var(--brand-cyan));
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: cover;
            mask-size: cover;
}

/* Mascaras por superficie (S195): un solo motivo (la constelacion-onda del Login),
   recortado por superficie. La FORMA la da el asset monocromo de brand_variants; el
   color/blend los pone la base -> rebrand-safe. Un-motivo-N-superficies = el hilo visual. */
.at-constellation-pattern--wave {
    -webkit-mask-image: url('../../images/branding/inducop/constellation/masks/wave_hero.svg');
            mask-image: url('../../images/branding/inducop/constellation/masks/wave_hero.svg');
}
.at-constellation-pattern--banner {
    -webkit-mask-image: url('../../images/branding/inducop/constellation/masks/banner.svg');
            mask-image: url('../../images/branding/inducop/constellation/masks/banner.svg');
    -webkit-mask-position: right center;
            mask-position: right center;
}
.at-constellation-pattern--sidebar {
    -webkit-mask-image: url('../../images/branding/inducop/constellation/masks/sidebar_vertical.svg');
            mask-image: url('../../images/branding/inducop/constellation/masks/sidebar_vertical.svg');
}
.at-constellation-pattern--corner {
    -webkit-mask-image: url('../../images/branding/inducop/constellation/masks/card_corner.svg');
            mask-image: url('../../images/branding/inducop/constellation/masks/card_corner.svg');
    -webkit-mask-position: top right;
            mask-position: top right;
    -webkit-mask-size: 45% auto;
            mask-size: 45% auto;
}
/* Tono para superficies CLARAS (cards/light): malla navy sutil, blend normal. El tinte
   base (screen + white+cyan) es para fondos OSCUROS; sobre blanco se lava. */
.at-constellation-pattern--on-light {
    background-color: var(--brand-navy);
    mix-blend-mode: normal;
    opacity: 0.07;
}

/* =============================================================================
   AT-BADGE: Badges/Etiquetas
   ============================================================================= */

.at-badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-primary); /* S183 opcion A: badges de etiqueta con la fuente de la UI; numericos (counter/days) conservan mono */
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.at-badge-counter {
    background: var(--brand-cyan);
    color: white;
    font-family: var(--font-mono); /* numerico: los conteos alinean */
}

/* U3.1 (S176): --status-* legacy (no conmuta) -> --*-icon (conmuta). Solido preservado. */
.at-badge-success {
    background: var(--success-icon);
    color: white;
}

.at-badge-warning {
    background: var(--warning-icon);
    color: white;
}

.at-badge-danger {
    background: var(--danger-icon);
    color: white;
}

.at-badge-info {
    background: var(--info-icon);
    color: white;
}

.at-badge-neutral {
    background: var(--bg-subtle);
    color: var(--text-secondary);
}

/* Badge urgente (outline) */
.at-badge-urgent {
    background: transparent;
    border: 1.5px solid var(--warning-icon);
    color: var(--warning-icon);
    font-weight: var(--font-bold);
}

/* Badge días con niveles de urgencia */
.at-badge-days {
    border-radius: var(--radius-full);
    padding: 4px 12px;
    font-family: var(--font-mono); /* numerico: dias */
}

.at-badge-days.critical {
    background: var(--danger-icon);
    color: white;
}

.at-badge-days.high {
    background: var(--warning-icon);
    color: white;
}

.at-badge-days.medium {
    background: #fbbf24; /* U3.1: sin token de estado "medium"; solido -> dark-OK */
    color: #000;
}

.at-badge-days.low {
    background: var(--gray-500);
    color: white;
}

/* =============================================================================
   AT-SWITCH: Switch/Toggle para checkboxes
   ============================================================================= */

/* Contenedor del switch */
.mo-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

/* Ocultar checkbox nativo */
.mo-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
}

/* El slider */
.mo-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-default); /* U3.1: era #cbd5e1 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 24px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* El círculo del slider */
.mo-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Estado checked */
.mo-switch input:checked + .mo-switch-slider {
    background-color: var(--brand-cyan);
}

.mo-switch input:checked + .mo-switch-slider:before {
    transform: translateX(24px);
}

/* Estado focus */
.mo-switch input:focus + .mo-switch-slider {
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
}

/* Estado hover */
.mo-switch:hover .mo-switch-slider {
    background-color: var(--text-muted);
}

.mo-switch input:checked:hover + .mo-switch-slider {
    background-color: var(--brand-cyan-dark);
}

/* Estado disabled */
.mo-switch input:disabled + .mo-switch-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Dark mode */
[data-theme="dark"] .mo-switch-slider {
    background-color: #475569;
}

[data-theme="dark"] .mo-switch input:checked + .mo-switch-slider {
    background-color: var(--brand-cyan);
}

/* =============================================================================
   AT-BUTTON: Botones
   ============================================================================= */

.at-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
}

.at-btn-primary {
    background: var(--brand-cyan);
    color: white;
}

.at-btn-primary:hover {
    background: var(--brand-cyan-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.at-btn-danger {
    background: var(--danger-icon);
    color: white;
}

.at-btn-danger:hover {
    background: var(--status-danger);
    transform: translateY(-1px);
}

.at-btn-outline {
    background: transparent;
    border: 2px solid var(--brand-cyan);
    color: var(--brand-cyan);
}

.at-btn-outline:hover {
    background: var(--brand-cyan);
    color: white;
}

/* Botón de filtro (pills) */
.at-btn-filter {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.at-btn-filter:hover {
    background: var(--bg-subtle);
    border-color: var(--brand-cyan);
}

.at-btn-filter.active {
    background: var(--brand-cyan);
    color: white;
    border-color: var(--brand-cyan);
}

.at-btn-filter .at-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
}

.at-btn-filter.active .at-badge {
    background: rgba(255, 255, 255, 0.3);
}

/* Botón de acción de widget (header de widgets) */
.at-btn-widget-action {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 1;
    transition: all var(--transition-base);
}

.at-btn-widget-action:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.at-btn-widget-action.refreshing {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* =============================================================================
   AT-INDICATOR: Indicadores
   ============================================================================= */

.at-indicator-online {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--success-icon);
    display: inline-block;
}

.at-indicator-offline {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--text-muted);
    display: inline-block;
}