body{

    background:#f1f5f9;

    color:#0f172a;
}

/*==========================
HEADER
==========================*/

.admin-container{

    width:100%;

    min-height:100vh;
}

.admin-header{

    height:80px;

    background:#0f172a;

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 40px;
}

.logo h2{

    font-size:26px;

    margin-bottom:4px;
}

.logo span{

    color:#94a3b8;

    font-size:14px;
}

.admin-user{

    font-weight:600;
}

/*==========================
TABS
==========================*/

.top-tabs{

    display:flex;

    gap:12px;

    padding:24px 40px;

    background:#ffffff;

    border-bottom:1px solid #e2e8f0;
}

.tab-btn{

    padding:14px 24px;

    border:none;

    background:transparent;

    cursor:pointer;

    border-radius:12px;

    font-size:15px;

    font-weight:600;

    transition:.25s;
}

.tab-btn:hover{

    background:#f1f5f9;
}

.tab-btn.active{

    background:#0f172a;

    color:#ffffff;
}

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

main{

    padding:40px;
}

.tab-content{

    display:none;
}

.tab-content.active{

    display:block;
}

/*==========================
KPIs
==========================*/

.kpi-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin-bottom:35px;
}

.kpi-card{

    background:#ffffff;

    border-radius:18px;

    padding:28px;

    box-shadow:0 10px 30px rgba(15,23,42,.06);
}

.kpi-card h3{

    color:#64748b;

    font-size:15px;

    margin-bottom:12px;
}

.kpi-card span{

    font-size:42px;

    font-weight:700;

    color:#0f172a;
}

/*==========================
PANEL
==========================*/

.panel{

    background:#ffffff;

    border-radius:18px;

    padding:30px;

    box-shadow:0 10px 30px rgba(15,23,42,.06);
}

.panel h2{

    margin-bottom:25px;

    font-size:24px;
}

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

.table{

    width:100%;

    border-collapse:collapse;
}

.table th{

    text-align:left;

    padding:16px;

    background:#f8fafc;

    color:#64748b;

    font-size:14px;
}

.table td{

    padding:18px 16px;

    border-bottom:1px solid #edf2f7;
}

.table tr:hover{

    background:#fafafa;
}

.table select{

    width:100%;

    padding:10px 14px;

    border-radius:10px;

    border:1px solid #cbd5e1;

    outline:none;
}

/*==========================
CARDS
==========================*/

.cards-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;
}

.asesor-card,
.catalog-card{

    background:#ffffff;

    border-radius:18px;

    padding:35px;

    text-align:center;

    box-shadow:0 10px 30px rgba(15,23,42,.06);
}

.asesor-card h3{

    margin-bottom:15px;
}

.asesor-card p{

    color:#64748b;

    margin-bottom:12px;
}

.asesor-card span{

    display:block;

    font-size:42px;

    font-weight:700;

    margin-bottom:25px;
}

.catalog-card{

    cursor:pointer;

    transition:.25s;
}

.catalog-card:hover{

    transform:translateY(-5px);
}

.catalog-card{

    font-size:58px;
}

.catalog-card h3{

    margin-top:20px;
}

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

.btn-modal{

    background:#0f172a;

    color:white;

    border:none;

    padding:14px 22px;

    border-radius:12px;

    cursor:pointer;
}

/*==========================
MODAL
==========================*/

.modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    justify-content:center;

    align-items:center;
}

.modal-content{

    width:500px;

    background:white;

    border-radius:20px;

    padding:35px;

    position:relative;
}

.close-modal{

    position:absolute;

    right:25px;

    top:20px;

    font-size:28px;

    cursor:pointer;
}

.modal ul{

    margin-top:20px;

    padding-left:18px;
}

.modal li{

    margin-bottom:8px;
}
/*==========================
CATÁLOGO ADMINISTRATIVO
==========================*/

.catalog-admin{

    display:flex;

    flex-direction:column;

    gap:24px;
}

.catalog-header p,
.catalog-module-header p,
.catalog-list-header p,
.catalog-list-panel > p{

    margin-top:8px;

    color:#64748b;
}

.catalog-types,
.admin-category-tabs{

    display:flex;

    flex-wrap:wrap;

    gap:12px;
}

.catalog-type,
.admin-category-btn{

    border:1px solid #cbd5e1;

    background:#ffffff;

    color:#334155;

    padding:12px 18px;

    border-radius:12px;

    cursor:pointer;

    font-weight:700;
}

.catalog-type.active,
.admin-category-btn.active{

    border-color:#0f172a;

    background:#0f172a;

    color:#ffffff;
}

.catalog-module{

    display:flex;

    flex-direction:column;

    gap:22px;
}

.catalog-list-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:22px;
}

.admin-primary-btn,
.small-btn{

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-weight:700;
}

.admin-primary-btn{

    padding:12px 18px;

    background:#0f172a;

    color:#ffffff;
}

.small-btn{

    padding:9px 12px;

    background:#e2e8f0;

    color:#0f172a;
}

.small-btn.success{

    background:#166534;

    color:#ffffff;
}

.small-btn.warning{

    background:#b45309;

    color:#ffffff;
}

.small-btn.danger{

    background:#b91c1c;

    color:#ffffff;
}

.small-btn:disabled,
.admin-primary-btn:disabled{

    cursor:not-allowed;

    opacity:.6;
}

.admin-search{

    width:100%;

    margin-bottom:20px;

    padding:13px 15px;

    border:1px solid #cbd5e1;

    border-radius:12px;

    outline:none;
}

.admin-search:focus{

    border-color:#0f172a;
}

.catalog-table-wrapper{

    width:100%;

    overflow-x:auto;
}

.catalog-row-actions{

    display:flex;

    flex-wrap:wrap;

    gap:8px;
}

.admin-thumb{

    width:76px;

    height:56px;

    overflow:hidden;

    border-radius:10px;

    background:#e2e8f0;
}

.admin-thumb-image{

    width:100%;

    height:100%;

    object-fit:cover;
}

.admin-thumb-placeholder{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:8px;

    color:#64748b;

    font-size:11px;

    text-align:center;
}

.status{

    display:inline-flex;

    align-items:center;

    padding:7px 10px;

    border-radius:999px;

    font-size:12px;

    font-weight:800;
}

.status.active{

    background:#dcfce7;

    color:#166534;
}

.status.inactive{

    background:#e2e8f0;

    color:#475569;
}

.status.completed{

    background:#dbeafe;

    color:#1d4ed8;
}

.catalog-state-message{

    margin-top:18px;

    color:#64748b;
}

.catalog-state-message.error{

    color:#b91c1c;
}

/*==========================
MODAL DEL CATÁLOGO
==========================*/

.modal{

    z-index:1000;

    padding:20px;
}

.catalog-modal{

    width:min(900px,100%);

    max-height:calc(100vh - 40px);

    padding:0;

    overflow:hidden;
}

.modal-header,
.modal-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:24px 28px;
}

.modal-header{

    border-bottom:1px solid #e2e8f0;
}

.modal-header p{

    margin-top:6px;

    color:#64748b;
}

.modal-close{

    border:none;

    background:transparent;

    font-size:30px;

    cursor:pointer;
}

.modal-body{

    max-height:calc(100vh - 230px);

    padding:26px 28px;

    overflow-y:auto;
}

.modal-footer{

    justify-content:flex-end;

    border-top:1px solid #e2e8f0;
}

.catalog-modal-message{

    margin:18px 28px 0;

    padding:12px 14px;

    border-radius:10px;

    font-weight:600;
}

.catalog-modal-message.error{

    background:#fee2e2;

    color:#991b1b;
}

.catalog-modal-message.success{

    background:#dcfce7;

    color:#166534;
}

.dynamic-form{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:20px;
}

.form-field{

    display:flex;

    flex-direction:column;

    gap:8px;
}

.form-field-wide{

    grid-column:1 / -1;
}

.form-field label{

    font-weight:700;

    color:#334155;
}

.form-field input,
.form-field select,
.form-field textarea{

    width:100%;

    padding:12px 14px;

    border:1px solid #cbd5e1;

    border-radius:10px;

    outline:none;

    font:inherit;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{

    border-color:#0f172a;
}

.required{

    color:#b91c1c;
}

.form-help{

    color:#64748b;
}

.catalog-existing-gallery{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:12px;

    margin-bottom:10px;
}

.catalog-existing-image{

    overflow:hidden;

    border:1px solid #e2e8f0;

    border-radius:12px;

    background:#f8fafc;
}

.catalog-existing-image img{

    display:block;

    width:100%;

    height:120px;

    object-fit:cover;
}

.catalog-existing-image-remove{

    width:100%;

    border:none;

    padding:9px;

    background:#fee2e2;

    color:#991b1b;

    cursor:pointer;

    font-weight:700;
}

.view-row{

    display:grid;

    grid-template-columns:180px 1fr;

    gap:18px;

    padding:12px 0;

    border-bottom:1px solid #e2e8f0;
}



/*==========================
CONTEXTO DEL PRODUCTO EN LEADS
==========================*/

.admin-table-wrapper{

    width:100%;

    overflow-x:auto;
}

.admin-product-context{

    display:flex;

    min-width:180px;

    flex-direction:column;

    align-items:flex-start;

    gap:4px;
}

.admin-product-title{

    color:#0f172a;

    font-size:14px;

    line-height:1.35;
}

.admin-product-reference,
.admin-product-empty{

    color:#64748b;

    font-size:12px;

    line-height:1.35;
}

.admin-product-link{

    color:#1d4ed8;

    font-size:12px;

    font-weight:700;

    text-decoration:none;
}

.admin-product-link:hover,
.admin-product-link:focus-visible{

    text-decoration:underline;
}

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

@media (max-width:900px){

    main{

        padding:24px;
    }

    .kpi-grid{

        grid-template-columns:repeat(2,1fr);
    }

    .dynamic-form{

        grid-template-columns:1fr;
    }

    .form-field-wide{

        grid-column:auto;
    }

    .catalog-existing-gallery{

        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:600px){

    .admin-header,
    .top-tabs{

        padding-left:18px;

        padding-right:18px;
    }

    main{

        padding:18px;
    }

    .kpi-grid{

        grid-template-columns:1fr;
    }

    .catalog-list-header,
    .modal-header{

        align-items:flex-start;

        flex-direction:column;
    }

    .catalog-existing-gallery{

        grid-template-columns:1fr;
    }
}


/*==========================
ACCESO DE CLIENTES
==========================*/

.admin-access-status{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:5px;
}

.access-badge{

    display:inline-flex;

    align-items:center;

    min-height:26px;

    padding:5px 10px;

    border-radius:999px;

    font-size:12px;

    font-weight:800;
}

.access-none{

    background:#e2e8f0;

    color:#475569;
}

.access-active{

    background:#dcfce7;

    color:#166534;
}

.access-inactive{

    background:#fee2e2;

    color:#991b1b;
}

.admin-access-email{

    color:#475569;

    overflow-wrap:anywhere;
}

.admin-access-warning{

    color:#b45309;

    font-weight:700;
}

.admin-access-detail{

    display:flex;

    flex-direction:column;

    gap:8px;
}

.form-help{

    margin-top:-4px;

    color:#64748b;

    font-size:13px;

    line-height:1.5;
}


/* =========================================
   CONSIGNACIONES
========================================= */

.consignments-admin {
    display: grid;
    gap: 22px;
}

.consignments-admin-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border: 1px solid #dfe7ec;
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            rgba(8, 34, 51, 0.98),
            rgba(15, 83, 75, 0.96)
        );
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(8, 34, 51, 0.12);
}

.consignments-admin-header h2 {
    margin: 8px 0 8px;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1;
    letter-spacing: -0.04em;
}

.consignments-admin-header p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.6;
}

.admin-eyebrow {
    color: #6fe2a6;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.consignment-primary-button,
.consignment-secondary-button,
.consignment-view-button {
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 800;
    transition:
        transform 0.18s ease,
        opacity 0.18s ease,
        background 0.18s ease;
}

.consignment-primary-button {
    min-height: 44px;
    padding: 11px 17px;
    color: #ffffff;
    background: #0f9860;
}

.consignment-secondary-button,
.consignment-view-button {
    min-height: 40px;
    padding: 9px 14px;
    color: #0b2233;
    background: #eaf3f1;
}

.consignments-admin-header .consignment-secondary-button {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.26);
}

.consignment-primary-button:hover,
.consignment-secondary-button:hover,
.consignment-view-button:hover {
    transform: translateY(-1px);
}

.consignment-primary-button:disabled,
.consignment-secondary-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.consignment-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.consignment-stats article {
    padding: 20px;
    border: 1px solid #dfe7ec;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(8, 34, 51, 0.06);
}

.consignment-stats span {
    display: block;
    color: #607487;
    font-size: 13px;
    font-weight: 700;
}

.consignment-stats strong {
    display: block;
    margin-top: 8px;
    color: #0b2233;
    font-size: 32px;
    line-height: 1;
}

.consignment-filters {
    display: grid;
    grid-template-columns: 190px 190px minmax(260px, 1fr);
    gap: 14px;
    padding: 20px;
    border: 1px solid #dfe7ec;
    border-radius: 18px;
    background: #ffffff;
}

.consignment-filters label,
.consignment-convert-grid label,
#consignmentStatusForm label {
    display: grid;
    gap: 7px;
    color: #0b2233;
    font-size: 12px;
    font-weight: 800;
}

.consignment-filters input,
.consignment-filters select,
.consignment-convert-grid input,
.consignment-convert-grid select,
#consignmentStatusForm select,
#consignmentStatusForm textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cfdbe3;
    border-radius: 11px;
    background: #f7fafb;
    color: #0b2233;
}

#consignmentStatusForm textarea {
    min-height: 110px;
    resize: vertical;
}

.consignments-message {
    min-height: 20px;
    margin: 0;
    color: #607487;
    font-size: 13px;
    font-weight: 700;
}

.consignments-message[data-state="error"] {
    color: #b42318;
}

.consignments-message[data-state="success"] {
    color: #087a4b;
}

.consignments-table td small {
    display: block;
    margin-top: 4px;
    color: #778b9b;
}

.consignment-status {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    color: #40566a;
    background: #edf2f5;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.consignment-status[data-status="pending"] {
    color: #8a5600;
    background: #fff1cc;
}

.consignment-status[data-status="contacted"] {
    color: #175cd3;
    background: #e7f0ff;
}

.consignment-status[data-status="needs_correction"] {
    color: #93370d;
    background: #ffead5;
}

.consignment-status[data-status="approved"] {
    color: #087a4b;
    background: #dff7eb;
}

.consignment-status[data-status="rejected"] {
    color: #b42318;
    background: #fee4e2;
}

.consignment-status[data-status="converted"] {
    color: #5d3ab8;
    background: #eee8ff;
}

.consignment-admin-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(5, 20, 31, 0.72);
    backdrop-filter: blur(7px);
}

.consignment-admin-modal.hidden {
    display: none;
}

body.consignment-modal-open {
    overflow: hidden;
}

.consignment-admin-dialog {
    position: relative;
    width: min(1180px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 32px;
    border-radius: 24px;
    background: #f4f7f9;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
}

.consignment-modal-close {
    position: sticky;
    top: 0;
    z-index: 3;
    float: right;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: -8px -8px 0 12px;
    border: 1px solid #d7e1e7;
    border-radius: 50%;
    color: #0b2233;
    background: #ffffff;
    cursor: pointer;
    font-size: 26px;
}

.consignment-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-right: 48px;
}

.consignment-modal-header h2 {
    margin: 7px 0 7px;
    color: #0b2233;
    font-size: clamp(30px, 4vw, 42px);
    letter-spacing: -0.04em;
}

.consignment-modal-header p {
    margin: 0;
    color: #607487;
}

.consignment-modal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.85fr);
    gap: 20px;
    margin-top: 24px;
}

.consignment-modal-layout > div,
.consignment-modal-layout aside {
    display: grid;
    align-content: start;
    gap: 20px;
}

.consignment-modal-section {
    padding: 22px;
    border: 1px solid #dfe7ec;
    border-radius: 18px;
    background: #ffffff;
}

.consignment-modal-section h3 {
    margin: 0 0 16px;
    color: #0b2233;
    font-size: 20px;
}

.consignment-image-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.consignment-image-gallery a {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    background: #e7eef2;
}

.consignment-image-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.consignment-detail-grid,
.consignment-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.consignment-detail-grid div,
.consignment-contact-grid div {
    min-width: 0;
    padding: 13px;
    border-radius: 12px;
    background: #f4f7f9;
}

.consignment-detail-grid dt,
.consignment-contact-grid dt {
    margin-bottom: 5px;
    color: #6b7f90;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.consignment-detail-grid dd,
.consignment-contact-grid dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: #0b2233;
    font-weight: 750;
}

.consignment-description {
    margin-top: 16px;
}

.consignment-description strong {
    color: #0b2233;
}

.consignment-description p {
    margin: 8px 0 0;
    color: #607487;
    line-height: 1.6;
    white-space: pre-wrap;
}

.consignment-documents {
    display: grid;
    gap: 10px;
}

.consignment-documents a,
.converted-product-link {
    display: grid;
    gap: 4px;
    padding: 13px 15px;
    border: 1px solid #d8e3e9;
    border-radius: 12px;
    color: #0b2233;
    background: #f7fafb;
    text-decoration: none;
}

.consignment-documents a:hover,
.converted-product-link:hover {
    border-color: #31b878;
}

.consignment-documents small {
    color: #607487;
}

.consignment-empty {
    margin: 0;
    color: #718596;
}

#consignmentStatusForm {
    display: grid;
    gap: 14px;
}

.consignment-convert-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.conversion-panel {
    margin-top: 20px;
    border-color: rgba(15, 152, 96, 0.34);
}

.conversion-panel > p {
    color: #607487;
    line-height: 1.55;
}

.consignment-danger-zone {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.consignment-danger-zone button {
    min-height: 42px;
    padding: 10px 15px;
    border: 1px solid #f4b9b5;
    border-radius: 11px;
    color: #b42318;
    background: #fff2f1;
    cursor: pointer;
    font-weight: 800;
}

.consignment-modal-loading {
    padding: 60px 20px;
    text-align: center;
    color: #607487;
    font-weight: 700;
}

@media (max-width: 1000px) {
    .consignment-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .consignment-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .consignment-search-field {
        grid-column: 1 / -1;
    }

    .consignment-modal-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .consignments-admin-header {
        display: grid;
    }

    .consignment-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .consignment-filters {
        grid-template-columns: 1fr;
    }

    .consignment-search-field {
        grid-column: auto;
    }

    .consignment-admin-modal {
        align-items: end;
        padding: 0;
    }

    .consignment-admin-dialog {
        width: 100%;
        max-height: 94vh;
        padding: 24px 16px;
        border-radius: 24px 24px 0 0;
    }

    .consignment-modal-header,
    .consignment-detail-grid,
    .consignment-contact-grid,
    .consignment-convert-grid {
        grid-template-columns: 1fr;
    }

    .consignment-modal-header {
        display: grid;
    }

    .consignment-image-gallery {
        grid-template-columns: 1fr;
    }
}