/* ============================================
   AUTOMUPI GEB — Design Tokens
   Extraídos del diseño Figma "AUTOMATIZACIÓN MUPIS"
   ============================================ */

/* --- Fuente Principal --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
    /* ---- Colores Primarios ---- */
    --color-primary: #033ED4;
    --color-primary-hover: #0232A8;
    --color-primary-light: rgba(3, 62, 212, 0.1);
    --color-white: #FFFFFF;
    /* ---- Colores de Texto ---- */
    --color-text-primary: #5A5A5B;
    --color-text-placeholder: #A9A9AA;
    --color-text-muted: #C3C3C3;
    --color-text-on-primary: #FFFFFF;
    /* ---- Colores de Fondo ---- */
    --color-bg-page: #FFFFFF;
    --color-bg-row-alt: #F2F3F8;
    --color-bg-card: #FFFFFF;
    --color-bg-overlay: rgba(255, 255, 255, 0.6);
    --color-bg-sidebar: #1a1a2e;
    /* ---- Colores de Borde ---- */
    --color-border-input: #A9A9AA;
    --color-border-card: #E9E9E9;
    /* ---- Colores de Estado ---- */
    --color-success: #22C55E;
    --color-danger: #EF4444;
    --color-warning: #F59E0B;
    /* ---- Colores de Sección ---- */
    --color-section-header: #033ED4;
    /* ---- Tipografía ---- */
    --font-family: 'Poppins', sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    /* ---- Espaciado ---- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-13: 50px; /* Padding lateral del contenido */
    /* ---- Dimensiones ---- */
    --header-height: 80px;
    --sidebar-width: 200px;
    --input-height: 40px;
    --row-height: 40px;
    --row-height-lg: 50px;
    --section-header-height: 30px;
    /* ---- Border Radius ---- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 20px;
    --radius-pill: 40px;
    --radius-full: 50%;
    /* ---- Sombras ---- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    /* ---- Transiciones ---- */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
}

/* ============================================
   Estilos Base
   ============================================ */

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

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Utilidades Comunes
   ============================================ */

/* --- Botones --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--input-height);
    padding: 0 var(--space-5);
    border-radius: var(--radius-pill);
    font-family: var(--font-family);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    border: 1px solid transparent;
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border-color: var(--color-primary);
}

    .btn-primary:hover {
        background-color: var(--color-primary-hover);
    }

.btn-secondary {
    background-color: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

    .btn-secondary:hover {
        background-color: var(--color-primary-light);
    }

.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    width: 18px;
    height: 18px;
}

/* --- Inputs --- */
.form-input {
    display: block;
    width: 100%;
    height: var(--input-height);
    padding: 0 var(--space-5);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-pill);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    background-color: var(--color-white);
    transition: border-color var(--transition-fast);
}

    .form-input::placeholder {
        color: var(--color-text-placeholder);
    }

    .form-input:focus {
        outline: none;
        border-color: var(--color-primary);
    }

.form-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    padding: var(--space-1) var(--space-3);
    margin-bottom: var(--space-1);
}

/* --- Tablas --- */
.data-table {
    width: 100%;
    border-collapse: collapse;
}

    .data-table thead th {
        background-color: var(--color-primary);
        color: var(--color-text-on-primary);
        font-weight: var(--font-weight-semibold);
        font-size: var(--font-size-base);
        text-align: center;
        height: var(--row-height);
        padding: 0 var(--space-3);
    }

    .data-table tbody tr:nth-child(even) {
        background-color: var(--color-bg-row-alt);
    }

    .data-table tbody td {
        font-weight: var(--font-weight-medium);
        font-size: var(--font-size-xs);
        color: var(--color-text-primary);
        text-align: center;
        height: var(--row-height);
        padding: 0 var(--space-3);
    }

/* --- Tarjetas --- */
.card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* --- Encabezados de Sección --- */
.section-header {
    background-color: var(--color-section-header);
    color: var(--color-text-on-primary);
    height: var(--section-header-height);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
}

/* --- Badges de Estado --- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.status-badge--on {
    color: var(--color-success);
}

.status-badge--off {
    color: var(--color-danger);
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
}

.status-dot--on {
    background-color: var(--color-success);
}

.status-dot--off {
    background-color: var(--color-danger);
}

/* --- Header de Aplicación --- */
.app-header {
    background-color: var(--color-primary);
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 var(--space-13);
    position: relative;
}

.app-header__logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.app-header__title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-text-on-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xl);
    white-space: nowrap;
}

.app-header__subtitle {
    margin-left: auto;
    color: var(--color-text-on-primary);
    font-weight: var(--font-weight-medium);
    font-style: italic;
    font-size: var(--font-size-xs);
}

/* --- Barra de Filtros --- */
.filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) 0;
    flex-wrap: wrap;
}

.filter-bar__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
}

.filter-bar__group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* --- Enlace Atrás --- */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    cursor: pointer;
}

    .back-link:hover {
        text-decoration: underline;
    }


.boton-login {
    background: #033ED4 !important;
    color: #fff !important;
    width: 15rem !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
}

.tablist {
    width: 30%!important;
}

.sub-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 30px !important;
    color: var(--color-text-primary, #5A5A5B);
    font-size: var(--font-size-sm, 13px);
    font-weight: var(--font-weight-regular, 400);
    text-decoration: none;
    white-space: nowrap;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.menu-principal {
    padding: 9px 18px !important;
    display: flex !important;
    gap: 10px !important;
    text-decoration: none !important;
    color: var(--color-text-primary, #5A5A5B)!important;
}

.k-grid-container > .k-loading-mask {
    display: none !important;
}



.cm {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-family: var(--font-family, 'Poppins', sans-serif);
}

/* ═══════ TOOLBAR ═══════ */
.cm-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 0;
}

.cm-toolbar__left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cm-toolbar__right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cm-toolbar__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary, #5A5A5B);
    white-space: nowrap;
}

.cm-toolbar__hint {
    font-size: 11px;
    color: var(--color-text-muted, #A9A9AA) !important;
}

.cm-toolbar__back {
    font-size: 12px !important;
    color: var(--color-primary, #033ED4) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

    .cm-toolbar__back:hover {
        text-decoration: underline !important;
    }

/* Inputs */
.cm-input {
    height: 32px !important;
    border: 1px solid var(--color-border-input, #A9A9AA) !important;
    border-radius: 20px !important;
    padding: 0 6px !important;
    font-size: 11px !important;
    font-family: inherit !important;
    outline: none !important;
    transition: border-color .15s !important;
}

    .cm-input:focus {
        border-color: var(--color-primary, #033ED4) !important;
    }

.cm-input--select {
    min-width: 180px!important;
    appearance: auto!important;
}

.cm-input--date {
    width: 130px!important;
}

/* Buttons */
.cm-btn {
    height: 32px !important;
    border: 1px solid var(--color-primary, #033ED4) !important;
    border-radius: 20px !important;
    padding: 0 20px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background .15s !important;
}

.cm-btn--filled {
    background-color: transparent  ;
    color: var(--color-primary, #033ED4) !important;
}

    .cm-btn--filled:hover {
        background: var(--color-primary-hover, #0232A8)!important;
        color: #fff!important;
    }

.cm-btn--stats {
    background: var(--color-primary, #033ED4)!important;
    color: #fff!important;
}

    .cm-btn--stats:hover {
        background: var(--color-primary-hover, #0232A8)!important;
    }

/* ═══════ KPI STRIP ═══════ */
.cm-kpi-strip {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-radius: 16px;
    padding: 20px 24px;
    justify-content: space-around;
    flex-wrap: wrap;
}

.cm-kpi-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    padding: 0 12px;
}

.cm-kpi-card__circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.cm-kpi-card__circle--green {
    border-color: #22C55E;
    background: #22C55E;
}

.cm-kpi-card__circle--red {
    border-color: #EF4444;
    background: #EF4444;
}

.cm-kpi-card__badge-text {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.cm-kpi-card__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.cm-kpi-card__title {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    white-space: nowrap;
}

.cm-kpi-card__number {
    font-size: 1.7rem;
    font-weight: 700;
    color: #033ED4;
}

/* ═══════ DATA GRID ═══════ */
.cm-grid {
    border-radius: 8px;
    overflow: hidden;
    overflow-x: auto;
    border: 1px solid var(--color-border-card, #E9E9E9);
}

.cm-grid__table {
    width: 100%;
    border-collapse: collapse;
}

.cm-grid__th {
    background: var(--color-primary, #033ED4);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 10px 10px;
    text-align: left;
    white-space: nowrap;
}

.cm-grid__th--center {
    text-align: center;
}

.cm-grid__row {
    border-bottom: 1px solid var(--color-bg-row-alt, #F2F3F8);
}

    .cm-grid__row:hover {
        background: rgba(3, 62, 212, 0.02);
    }

.cm-grid__td {
    font-size: 12px;
    padding: 9px 10px;
    color: var(--color-text-primary, #5A5A5B);
}

.cm-grid__td--center {
    text-align: center;
}

.cm-grid__td--green {
    color: #22C55E;
    font-weight: 600;
}

.cm-grid__td--red {
    color: #EF4444;
    font-weight: 600;
}

.cm-grid__detail-btn {
    background: none;
    border: 1px solid var(--color-border-card, #E9E9E9);
    border-radius: 6px;
    padding: 4px 6px;
    cursor: pointer;
    color: var(--color-primary, #033ED4);
    display: inline-flex;
    align-items: center;
    transition: background .15s;
}

    .cm-grid__detail-btn:hover {
        background: var(--color-primary-light, rgba(3, 62, 212, 0.06));
    }

/* ═══════ RESPONSIVE ═══════ */

/* Tablet landscape */
@media (max-width: 1200px) {
    .cm-toolbar__left {
        gap: 6px;
    }

    .cm-input--select {
        min-width: 150px;
    }

    .cm-input--date {
        width: 120px!important;
    }

    .cm-kpi-card__number {
        font-size: 32px;
        color: #033ED4!important;
    }

    .cm-kpi-card__circle {
        width: 46px;
        height: 46px;
    }
}

/* Tablet portrait */
@media (max-width: 992px) {
    .cm-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .cm-toolbar__right {
        width: 100%;
        justify-content: flex-end;
    }

    .cm-kpi-strip {
        padding: 16px;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .cm-kpi-card {
        min-width: 130px;
        padding: 8px;
    }

    .cm-grid {
        overflow-x: auto;
    }

    .cm-grid__table {
        min-width: 700px;
    }
}

/* Mobile landscape */
@media (max-width: 768px) {
    .cm {
        gap: 14px;
    }

    .cm-toolbar__left {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
    }

        .cm-toolbar__left .cm-input--select {
            width: 100%;
            min-width: unset;
        }

        .cm-toolbar__left .cm-input--date {
            width: 100%!important;
        }

    .cm-toolbar__right {
        width: 100%;
        justify-content: space-between;
    }

    .cm-kpi-strip {
        border-radius: 12px;
        padding: 14px 10px;
        gap: 10px;
    }

    .cm-kpi-card {
        min-width: 45%;
        flex: 1 1 45%;
        padding: 8px 4px;
    }

    .cm-kpi-card__circle {
        width: 42px;
        height: 42px;
    }

        .cm-kpi-card__circle svg {
            width: 24px;
            height: 24px;
        }

    .cm-kpi-card__number {
        font-size: 32px;
        color: #033ED4;
    }

    .cm-kpi-card__title {
        font-size: 9px;
        white-space: normal;
        text-align: center;
    }

    .cm-grid__table {
        min-width: 600px;
    }

    .cm-btn {
        padding: 0 14px;
        font-size: 11px;
    }
}

/* Mobile portrait */
@media (max-width: 480px) {
    .cm-kpi-strip {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        padding: 16px;
    }

    .cm-kpi-card {
        min-width: unset;
        width: 100%;
        flex-direction: row;
        gap: 12px;
        padding: 6px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

        .cm-kpi-card:last-child {
            border-bottom: none;
        }

    .cm-kpi-card__info {
        align-items: flex-start;
    }

    .cm-kpi-card__circle {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .cm-kpi-card__number {
        font-size: 32px;
        color: #033ED4;
    }

    .cm-kpi-card__title {
        font-size: 10px;
    }

    .cm-grid__table {
        min-width: 500px;
    }

    .cm-grid__th,
    .cm-grid__td {
        padding: 8px 6px;
        font-size: 11px;
    }
}


.panel-opcion-control-mupis {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(10vh, 1fr)) !important;
    gap: 4vh !important;
}

.k-card {
    height: 12rem !important;
    background-color: #F2F3F8 !important;
}

.card-body-menu {
    display: table!important;
}


/* KPI pair responsive */
.kpi-pair {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0.5rem 0;
}

/* Cada elemento KPI */
.kpi-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    justify-content: center;
}

/* Burbuja blanca con icono */
.kpi-bubble {
    background: #fff;
    border-radius: 50px;
    width: calc(5.5rem);
    height: calc(5.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* Icono dentro de la burbuja */
.kpi-icon {
    max-height: 3rem;
    max-width: 3rem;
    height: auto;
    width: auto;
    display: block;
}

/* Metadatos (título + valor) */
.kpi-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.kpi-title {
    color: #5A5A5B;
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
}

.kpi-value {
    font-size: 1rem;
    font-weight: 700;
    margin-top: 0.25rem;
}

/* Colores para on/off */
.kpi-value--on {
    color: #10AC55;
}

.kpi-value--off {
    color: #E30004;
}

/* Breakpoints: 2 columnas en pantallas >= 576px, ajustar ancho */
@media (min-width: 576px) {
    .kpi-item {
        width: calc(50% - 0.5rem);
        max-width: none;
        justify-content: flex-start;
    }

    .kpi-meta {
        align-items: flex-start;
    }
}

/* Alineación compacta en pantallas muy pequeñas */
@media (max-width: 375px) {
    .kpi-bubble {
        width: 4.5rem;
        height: 4.5rem;
    }

    .kpi-icon {
        max-height: 2.2rem;
    }

    .kpi-title {
        font-size: 0.78rem;
    }

    .kpi-value {
        font-size: 0.95rem;
    }
}

/* Ajustes para pantallas grandes */
@media (min-width: 992px) {
    .kpi-item {
        width: auto;
        margin: 0 0.5rem;
    }

    .kpi-bubble {
        width: 6.2rem;
        height: 6.2rem;
    }

    .kpi-icon {
        max-height: 3.4rem;
    }

    .kpi-title {
        font-size: 0.95rem;
    }

    .kpi-value {
        font-size: 1.15rem;
    }
}

/* ═══════ Tarjeta ON/OFF responsiva ═══════ */
.tarjeta-onoff {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    background: #EDF1F7;
    border-radius: 16px;
    padding: 24px 20px 28px;
    width: 100%;
    box-sizing: border-box;
}

.tarjeta-onoff__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.tarjeta-onoff__circle {
    aspect-ratio: 1;
    width: 100%;
    max-width: 100px;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.tarjeta-onoff__icon {
    width: 50%;
    height: 50%;
}

.tarjeta-onoff__label {
    font-size: 13px;
    font-weight: 600;
    color: #3D3D3D;
    text-align: center;
    white-space: nowrap;
}

.tarjeta-onoff__value {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.tarjeta-onoff__value--green {
    color: #22C55E;
}

.tarjeta-onoff__value--red {
    color: #EF4444;
}

/* Tablet */
@media (max-width: 768px) {
    .tarjeta-onoff {
        gap: 16px;
        padding: 20px 14px 24px;
    }

    .tarjeta-onoff__circle {
        max-width: 80px;
    }

    .tarjeta-onoff__label {
        font-size: 12px;
    }

    .tarjeta-onoff__value {
        font-size: 16px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .tarjeta-onoff {
        gap: 10px;
        padding: 16px 10px 20px;
        border-radius: 12px;
    }

    .tarjeta-onoff__circle {
        max-width: 64px;
    }

    .tarjeta-onoff__label {
        font-size: 11px;
    }

    .tarjeta-onoff__value {
        font-size: 14px;
    }
}

/* Very small */
@media (max-width: 320px) {
    .tarjeta-onoff {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .tarjeta-onoff__circle {
        max-width: 80px;
    }
}


.k-table-td {
    font-weight: 500 !important;
}

.btn-crear {
    display: inline-flex;
    align-items: center;
    padding: 10px 25px;
    border-radius: 50px;
    background-color: transparent;
    border: 1.5px solid #3f51b5;
    color: #3f51b5;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.icon {
    margin-right: 8px;
    font-size: 20px;
    font-weight: bold;
}

.btn-crear:hover {
    background-color: #3f51b5;
    color: white;
}



.dcm {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 16px 20px;
}

/* Header */
.dcm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.dcm-header__left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dcm-header__center {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dcm-header__right {
    display: flex;
    align-items: center;
}

.dcm-filter-label {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.dcm-input--date {
    width: 140px;
}

.dcm-btn--buscar {
    background-color: #fff;
    border: 2px solid #1a237e;
    color: #1a237e;
    font-weight: 700;
    padding: 6px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

    .dcm-btn--buscar:hover {
        background-color: #e8eaf6;
    }

/* Status Badge */
.dcm-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid;
}

.dcm-status-badge--on {
    border-color: #4caf50;
    color: #333;
    background-color: #f1f8e9;
}

.dcm-status-badge--off {
    border-color: #f44336;
    color: #333;
    background-color: #ffebee;
}

.dcm-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.dcm-status-dot--on {
    background-color: #4caf50;
}

.dcm-status-dot--off {
    background-color: #f44336;
}

/* Back link */
::deep .back-link {
    color: #1a237e;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

    ::deep .back-link:hover {
        text-decoration: underline;
    }

/* KPI Row */
.dcm-kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.dcm-kpi-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #e8eaf6;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.dcm-kpi-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: #e8eaf6;
}

    .dcm-kpi-icon img {
        width: 32px;
        height: 32px;
        object-fit: contain;
    }

.dcm-kpi-icon--onoff {
    display: flex;
    gap: 4px;
    width: auto;
    min-width: 80px;
    border-radius: 8px;
    background: transparent;
}

.dcm-onoff-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    color: #fff;
}

.dcm-onoff-badge--on {
    background-color: #4caf50;
    border: 3px solid #a5d6a7;
}

.dcm-onoff-badge--off {
    background-color: #f44336;
    border: 3px solid #ef9a9a;
}

.dcm-kpi-content {
    display: flex;
    flex-direction: column;
}

.dcm-kpi-content--dual {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.dcm-kpi-sub {
    display: flex;
    flex-direction: column;
}

.dcm-kpi-label {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

.dcm-kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: #1a237e;
}

.dcm-kpi-value--green {
    color: #4caf50;
}

.dcm-kpi-value--red {
    color: #f44336;
}

/* Table */
.dcm-table-container {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e8eaf6;
}

.dcm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .dcm-table thead {
        background-color: #1a237e;
        color: #fff;
    }

        .dcm-table thead th {
            padding: 12px 16px;
            text-align: center;
            font-weight: 600;
            font-size: 12px;
            white-space: nowrap;
        }

    .dcm-table tbody tr {
        border-bottom: 1px solid #f0f0f0;
    }

        .dcm-table tbody tr:hover {
            background-color: #f5f7ff;
        }

    .dcm-table tbody td {
        padding: 10px 16px;
        text-align: center;
        vertical-align: middle;
        color: #333;
    }

.dcm-td--green {
    color: #4caf50;
    font-weight: 600;
}

.dcm-td--red {
    color: #f44336;
    font-weight: 600;
}

.dcm-btn-detalle {
    background: none;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    color: #1a237e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .dcm-btn-detalle:hover {
        background-color: #e8eaf6;
        border-color: #1a237e;
    }

/* Responsive */
@media (max-width: 1200px) {
    .dcm-kpi-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .dcm-kpi-row {
        grid-template-columns: 1fr;
    }

    .dcm-header {
        flex-direction: column;
        align-items: flex-start;
    }
}


.button-detalle-campania {
    background-color: #033ED4!important;
    color: #fff !important;
    font-size: 1.2em !important;
    border-radius: 2rem !important;
    min-width: 15%!important;
}

.btn-editar-campania {
    min-width: 15%!important;
    border-radius: 2rem!important;
    border-color: #033ED4!important;
    color: #033ED4!important;
}
.validacion-campo {
    border-color: red !important;
    color: red !important;
}