/* ========================================================= */
/* TIENDAROPA - PRODUCTOS */
/* ========================================================= */

.productos-page {
    width: 100%;
    animation: dashboardFadeIn .35s ease both;
}


/* ========================================================= */
/* ENCABEZADO */
/* ========================================================= */

.productos-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 28px;
}

.productos-heading .productos-eyebrow {
    margin-bottom: 6px;
}

    .productos-heading h1 {
        margin: 0;
        color: #ffffff;
        font-size: 34px;
        line-height: 1.1;
        font-weight: 800;
        letter-spacing: -1.2px;
    }

    .productos-heading p {
        margin: 8px 0 0;
        color: #7f91a8;
        font-size: 13px;
    }


/* ========================================================= */
/* BOTÓN PRINCIPAL */
/* ========================================================= */

.productos-primary-action {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 20px;
    border: 1px solid rgba(40, 150, 255, .45);
    border-radius: 10px;
    background: linear-gradient(135deg, #087cff, #1668dc);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(0, 112, 255, .19);
    transition: .2s ease;
}

    .productos-primary-action:hover {
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(0, 112, 255, .28);
    }


/* ========================================================= */
/* ESTADÍSTICAS - PRODUCTOS */
/* ========================================================= */

.productos-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 22px;
}


/* ========================================================= */
/* TARJETA KPI */
/* ========================================================= */

.productos-stat-card {
    min-height: 150px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    background: linear-gradient( 145deg, rgba(10, 27, 48, .96), rgba(4, 14, 28, .96) );
    box-shadow: 0 12px 35px rgba(0,0,0,.18), inset 0 0 30px rgba(0,0,0,.10);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}


    .productos-stat-card:hover {
        transform: translateY(-3px);
        border-color: rgba(255,255,255,.13);
        box-shadow: 0 18px 42px rgba(0,0,0,.25), inset 0 0 30px rgba(0,0,0,.12);
    }


/* ========================================================= */
/* ICONO KPI */
/* ========================================================= */

.productos-stat-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 25px;
    position: relative;
    z-index: 2;
}


    .productos-stat-icon i {
        font-size: 25px;
    }


/* ========================================================= */
/* ICONO AZUL - PRODUCTOS */
/* ========================================================= */

.productos-stat-blue .productos-stat-icon {
    color: #20a1ff;
    background: linear-gradient( 145deg, rgba(0,130,255,.18), rgba(0,100,220,.08) );
    border: 1px solid rgba(0,140,255,.16);
    box-shadow: 0 0 25px rgba(0,130,255,.08), inset 0 0 20px rgba(0,130,255,.05);
}


/* ========================================================= */
/* ICONO VERDE - ACTIVOS */
/* ========================================================= */

.productos-stat-green .productos-stat-icon {
    color: #35e2b1;
    background: linear-gradient( 145deg, rgba(0,220,160,.16), rgba(0,180,130,.07) );
    border: 1px solid rgba(0,220,160,.15);
    box-shadow: 0 0 25px rgba(0,220,160,.07), inset 0 0 20px rgba(0,220,160,.04);
}


/* ========================================================= */
/* ICONO VIOLETA - STOCK */
/* ========================================================= */

.productos-stat-purple .productos-stat-icon {
    color: #b477ff;
    background: linear-gradient( 145deg, rgba(140,80,255,.18), rgba(110,60,220,.08) );
    border: 1px solid rgba(150,90,255,.16);
    box-shadow: 0 0 25px rgba(140,80,255,.08), inset 0 0 20px rgba(140,80,255,.05);
}


/* ========================================================= */
/* CONTENIDO KPI */
/* ========================================================= */

.productos-stat-content {
    position: relative;
    z-index: 2;
    min-width: 0;
}


    .productos-stat-content span {
        display: block;
        margin-bottom: 6px;
        color: #91a2b8;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .9px;
        text-transform: uppercase;
    }


    .productos-stat-content strong {
        display: block;
        color: #ffffff;
        font-size: 34px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: -1px;
    }


    .productos-stat-content small {
        display: block;
        margin-top: 9px;
        color: #8799af;
        font-size: 12px;
    }


/* ========================================================= */
/* MINI GRÁFICO KPI */
/* ========================================================= */

.productos-stat-line {
    position: absolute;
    right: 18px;
    bottom: 17px;
    width: 145px;
    height: 55px;
    opacity: .95;
    pointer-events: none;
    z-index: 1;
}


/* ========================================================= */
/* LÍNEA AZUL - PRODUCTOS */
/* ========================================================= */

.productos-stat-blue .productos-stat-line {
    background: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 145 55'%3E%3Cpath d='M2 43 C15 43 18 38 28 38 C39 38 40 29 51 29 C62 29 65 34 75 34 C87 34 88 25 99 25 C111 25 114 17 124 17 C133 17 138 10 143 3' fill='none' stroke='%23168fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 0 5px rgba(22,143,255,.45));
}


/* ========================================================= */
/* LÍNEA VERDE - ACTIVOS */
/* ========================================================= */

.productos-stat-green .productos-stat-line {
    background: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 145 55'%3E%3Cpath d='M2 43 C15 43 18 38 28 38 C39 38 40 29 51 29 C62 29 65 34 75 34 C87 34 88 25 99 25 C111 25 114 17 124 17 C133 17 138 10 143 3' fill='none' stroke='%2300d9a5' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 0 5px rgba(0,217,165,.45));
}


/* ========================================================= */
/* LÍNEA VIOLETA - STOCK TOTAL */
/* ========================================================= */

.productos-stat-purple .productos-stat-line {
    background: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 145 55'%3E%3Cpath d='M2 43 C15 43 18 38 28 38 C39 38 40 29 51 29 C62 29 65 34 75 34 C87 34 88 25 99 25 C111 25 114 17 124 17 C133 17 138 10 143 3' fill='none' stroke='%23a05cff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 0 5px rgba(160,92,255,.45));
}


/* ========================================================= */
/* FILTROS */
/* ========================================================= */

.productos-toolbar-panel {
    margin-bottom: 22px;
}

.productos-toolbar {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr auto;
    align-items: end;
    gap: 20px;
    padding: 23px;
}

.productos-field label {
    display: block;
    margin-bottom: 8px;
    color: #aebdd0;
    font-size: 12px;
    font-weight: 600;
}

.productos-input,
.productos-field select {
    width: 100%;
    height: 44px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 9px;
    background: rgba(255,255,255,.025);
    color: #e8eef6;
    font-size: 13px;
    outline: none;
    transition: .2s ease;
}

.productos-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
}

    .productos-input i {
        color: #71839a;
    }

    .productos-input:focus-within,
    .productos-field select:focus {
        border-color: rgba(0,140,255,.45);
        box-shadow: 0 0 0 3px rgba(0,140,255,.07);
    }

    .productos-input input {
        width: 100%;
        height: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        color: #ffffff;
        font-size: 13px;
    }

        .productos-input input::placeholder {
            color: #60728b;
        }

.productos-field select {
    padding: 0 13px;
}

.productos-field option {
    background: #091827;
    color: #ffffff;
}


/* ========================================================= */
/* BOTONES FILTRO */
/* ========================================================= */

.productos-toolbar-actions {
    display: flex;
    gap: 10px;
}

.productos-filter-button,
.productos-clear-button {
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 17px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: .2s ease;
}

.productos-filter-button {
    border: 1px solid rgba(40,150,255,.45);
    background: linear-gradient(135deg,#087cff,#1668dc);
    color: #ffffff;
}

    .productos-filter-button:hover {
        color: #ffffff;
        transform: translateY(-1px);
    }

.productos-clear-button {
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.035);
    color: #aebdd0;
}

    .productos-clear-button:hover {
        color: #ffffff;
        background: rgba(255,255,255,.07);
    }


/* ========================================================= */
/* TABLA */
/* ========================================================= */

.productos-table-panel {
    overflow: hidden;
}

.productos-table-header {
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 19px 22px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

    .productos-table-header h2 {
        margin: 0;
        color: #ffffff;
        font-size: 19px;
        font-weight: 750;
    }

    .productos-table-header p {
        margin: 6px 0 0;
        color: #71839a;
        font-size: 12px;
    }

.productos-count {
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    background: rgba(255,255,255,.035);
    color: #e3ebf5;
    font-size: 12px;
    font-weight: 600;
}


/* ========================================================= */
/* TABLA - CELDAS */
/* ========================================================= */

.productos-table {
    width: 100%;
}

    .productos-table th {
        height: 47px;
        color: #8294aa !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: .8px;
    }

    .productos-table td {
        height: 78px;
        color: #dce5ef;
        font-size: 12px;
    }

        .productos-table th:first-child,
        .productos-table td:first-child {
            padding-left: 22px;
        }

        .productos-table th:last-child,
        .productos-table td:last-child {
            padding-right: 22px;
        }

    .productos-table tbody tr {
        transition: background .18s ease;
    }

        .productos-table tbody tr:hover {
            background: rgba(255,255,255,.018);
        }


/* ========================================================= */
/* PRODUCTO */
/* ========================================================= */

.productos-product-cell {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 250px;
}

.productos-product-image,
.productos-product-placeholder {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 10px;
}

.productos-product-image {
    display: block;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.10);
    background: #071525;
}

.productos-product-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,140,255,.18);
    background: rgba(0,130,255,.09);
    color: #1596ff;
    font-size: 23px;
}

.productos-product-cell strong {
    display: block;
    color: #f1f6fb;
    font-size: 13px;
    font-weight: 700;
}

.productos-product-cell small {
    display: block;
    margin-top: 4px;
    color: #71839a;
    font-size: 11px;
}


/* ========================================================= */
/* CATEGORÍA */
/* ========================================================= */

.productos-category {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #d0dae5;
    font-size: 12px;
}

    .productos-category i {
        color: #a366ff;
        font-size: 13px;
    }


/* ========================================================= */
/* PRECIO */
/* ========================================================= */

.productos-price {
    color: #f4f8fc;
    font-size: 13px;
}


/* ========================================================= */
/* BADGES */
/* ========================================================= */

.productos-number-badge {
    min-width: 31px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.productos-variants-badge {
    background: rgba(120,70,255,.14);
    color: #b693ff;
}

.productos-stock-badge {
    background: rgba(0,210,160,.11);
    color: #25d9aa;
}


/* ========================================================= */
/* ESTADO */
/* ========================================================= */

.status-success {
    background: rgba(0,210,160,.10);
    color: #25d9aa;
}

.productos-status-inactive {
    background: rgba(125,144,166,.12);
    color: #aebdd0;
}

    .productos-status-inactive > span {
        background: #8fa1b7;
    }


/* ========================================================= */
/* ACCIONES */
/* ========================================================= */

.productos-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

    .productos-row-actions form {
        display: flex;
        margin: 0;
    }

.productos-icon-action {
    width: 39px;
    height: 39px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 9px;
    background: rgba(255,255,255,.025);
    color: #8fa1b7;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    transition: .18s ease;
}


/* VER */

.productos-view-action:hover {
    color: #1598ff;
    border-color: rgba(0,140,255,.45);
    background: rgba(0,130,255,.10);
}


/* EDITAR */

.productos-edit-action:hover {
    color: #ffc928;
    border-color: rgba(255,195,0,.45);
    background: rgba(255,190,0,.08);
}


/* DESACTIVAR */

.productos-deactivate-action:hover {
    color: #ff5668;
    border-color: rgba(255,70,90,.45);
    background: rgba(255,70,90,.09);
}


/* ACTIVAR */

.productos-activate-action:hover {
    color: #26ddb0;
    border-color: rgba(0,210,160,.45);
    background: rgba(0,210,160,.09);
}


/* ========================================================= */
/* FOOTER TABLA */
/* ========================================================= */

.productos-table-footer {
    min-height: 67px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    border-top: 1px solid rgba(255,255,255,.07);
    color: #71839a;
    font-size: 12px;
}

.productos-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .productos-pagination button {
        min-width: 45px;
        height: 38px;
        padding: 0 12px;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 8px;
        background: rgba(255,255,255,.025);
        color: #8799af;
        font-size: 12px;
    }

        .productos-pagination button.active {
            border-color: rgba(0,140,255,.45);
            background: #087cff;
            color: #ffffff;
        }

        .productos-pagination button:disabled {
            opacity: .45;
        }


/* ========================================================= */
/* ESTADO VACÍO */
/* ========================================================= */

.productos-empty-state {
    padding: 70px 24px;
    text-align: center;
}

.productos-empty-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    border: 1px solid rgba(0,140,255,.18);
    border-radius: 15px;
    background: rgba(0,130,255,.09);
    color: #1596ff;
    font-size: 27px;
}

.productos-empty-state h3 {
    margin: 0;
    color: #ffffff;
    font-size: 19px;
}

.productos-empty-state p {
    margin: 9px 0 22px;
    color: #71839a;
    font-size: 13px;
}


/* ========================================================= */
/* RESPONSIVE */
/* ========================================================= */

@media (max-width: 1200px) {

    .productos-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .productos-toolbar-actions {
        justify-content: flex-start;
    }
}


@media (max-width: 900px) {

    .productos-stats {
        grid-template-columns: 1fr;
    }

    .productos-heading {
        flex-direction: column;
    }

    .productos-primary-action {
        width: 100%;
    }
}


@media (max-width: 700px) {

    .productos-toolbar {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .productos-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .productos-table {
        min-width: 950px;
    }

    .productos-table-footer {
        min-width: 950px;
    }
}

/* ========================================================= */
/* CORRECCIÓN - CAMPOS DE BÚSQUEDA */
/* ========================================================= */

.productos-field input,
.productos-field select {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.025) !important;
    background-color: rgba(255,255,255,.025) !important;
    color: #e8eef6 !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 13px !important;
}

/* INPUT */

.productos-field input {
    padding: 0 13px !important;
}

    .productos-field input::placeholder {
        color: #60728b !important;
        opacity: 1 !important;
    }

/* SELECT */

.productos-field select {
    padding: 0 13px !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
}

    .productos-field select option {
        background: #091827 !important;
        color: #ffffff !important;
    }

/* CONTENEDOR DEL BUSCADOR */

.productos-input {
    width: 100% !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 13px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.025) !important;
    background-color: rgba(255,255,255,.025) !important;
    color: #71839a !important;
}

    /* INPUT DENTRO DEL CONTENEDOR */

    .productos-input input {
        flex: 1 !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        border: 0 !important;
        outline: none !important;
        background: transparent !important;
        background-color: transparent !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

        .productos-input input:focus {
            border: 0 !important;
            outline: none !important;
            box-shadow: none !important;
        }

    /* ICONO */

    .productos-input i {
        flex: 0 0 auto;
        color: #71839a;
        font-size: 14px;
    }

    /* FOCUS */

    .productos-input:focus-within,
    .productos-field select:focus {
        border-color: rgba(0,140,255,.45) !important;
        box-shadow: 0 0 0 3px rgba(0,140,255,.07) !important;
    }

/* Campos y tablas de Productos dentro del tema claro compartido. */
body[data-theme="light"] .productos-heading h1,
body[data-theme="light"] .productos-table-header h2,
body[data-theme="light"] .productos-table strong { color: var(--admin-text) !important; }
body[data-theme="light"] .productos-heading p,
body[data-theme="light"] .productos-table-header p,
body[data-theme="light"] .productos-table td,
body[data-theme="light"] .productos-table th { color: var(--admin-text-muted) !important; }
body[data-theme="light"] .productos-toolbar,
body[data-theme="light"] .productos-table-panel,
body[data-theme="light"] .productos-stat-card { background: linear-gradient(145deg, var(--admin-surface), var(--admin-surface-elevated)) !important; border-color: var(--admin-border) !important; }
body[data-theme="light"] .productos-field input,
body[data-theme="light"] .productos-field select,
body[data-theme="light"] .productos-input { color: var(--admin-input-text) !important; background: var(--admin-input-bg) !important; border-color: var(--admin-border) !important; color-scheme: light; }
body[data-theme="light"] .productos-input input { color: var(--admin-input-text) !important; }
body[data-theme="light"] .productos-field input::placeholder,
body[data-theme="light"] .productos-input input::placeholder { color: #71849a !important; }
body[data-theme="light"] .productos-field select option { color: var(--admin-text) !important; background: var(--admin-option-bg) !important; }

/* ========================================================= */
/* RESPONSIVE - GRÁFICOS KPI */
/* ========================================================= */

.productos-stat-line {
    width: clamp(70px, 25%, 145px);
    height: auto;
    aspect-ratio: 145 / 55;
    right: 18px;
    bottom: 17px;
    z-index: 1;
}


/* El contenido siempre queda por encima de la línea */
.productos-stat-content {
    position: relative;
    z-index: 3;
    padding-right: clamp(65px, 18%, 95px);
}


/* ========================================================= */
/* TABLET */
/* ========================================================= */

@media (max-width: 1200px) {

    .productos-stat-line {
        width: clamp(65px, 24%, 110px);
        right: 15px;
        bottom: 15px;
    }

    .productos-stat-content {
        padding-right: 70px;
    }
}


/* ========================================================= */
/* PANTALLAS PEQUEÑAS */
/* ========================================================= */

@media (max-width: 900px) {

    .productos-stat-card {
        min-height: 145px;
    }

    .productos-stat-line {
        width: 85px;
        right: 14px;
        bottom: 14px;
        opacity: .75;
    }

    .productos-stat-content {
        padding-right: 60px;
    }
}


/* ========================================================= */
/* CELULAR */
/* ========================================================= */

@media (max-width: 600px) {

    .productos-stat-card {
        min-height: 135px;
        padding: 20px;
    }

    .productos-stat-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        font-size: 21px;
    }

        .productos-stat-icon i {
            font-size: 21px;
        }

    .productos-stat-content {
        padding-right: 45px;
    }

        .productos-stat-content strong {
            font-size: 30px;
        }

    .productos-stat-line {
        width: 65px;
        right: 12px;
        bottom: 12px;
        opacity: .65;
    }
}