* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #f5f5f5;
}

.inicio {
    width: 90%;
    max-width: 700px;
    margin: 120px auto;
    padding: 50px;
    text-align: center;
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.inicio h1 {
    margin-bottom: 15px;
}

.inicio p {
    margin-bottom: 30px;
    color: #666;
}

.btn {
    display: inline-block;
    padding: 12px 25px;
    background: #198754;
    color: white;
    text-decoration: none;
    border-radius: 6px;
}

.btn:hover {
    background: #157347;
}

/* ==========================================
   VARIABLES DE COLOR
========================================== */

:root {
    --azul: #123c69;
    --azul-claro: #1d5d91;
    --rojo: #c62828;
    --rojo-hover: #a91f1f;
    --blanco: #ffffff;
    --gris-fondo: #f4f6f9;
    --gris-borde: #d9dee5;
    --gris-texto: #606975;
}


/* ==========================================
   GENERAL
========================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: var(--gris-fondo);
    color: #222;
}


/* ==========================================
   CONTENEDOR PRINCIPAL
========================================== */

.inicio {
    width: 92%;
    max-width: 1000px;
    margin: 50px auto;
    padding: 35px;
    background: var(--blanco);
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
}


/* ==========================================
   TITULOS
========================================== */

.inicio h1 {
    color: var(--azul);
    margin-bottom: 10px;
}

.inicio h2 {
    color: var(--azul);
    border-left: 5px solid var(--rojo);
    padding-left: 12px;
    margin-top: 30px;
}


/* ==========================================
   TEXTO
========================================== */

.inicio p {
    color: var(--gris-texto);
}


/* ==========================================
   SECCION UNSPSC
========================================== */

.seccion-unspsc {
    margin-top: 30px;
    padding: 25px;
    border: 1px solid var(--gris-borde);
    border-radius: 10px;
    background: #fafbfc;
}


/* ==========================================
   BLOQUES DE SELECT
========================================== */

.seccion-unspsc > div:not([id]) {
    margin-top: 20px;
}

.seccion-unspsc label {
    display: block;
    margin-bottom: 7px;
    font-weight: bold;
    color: var(--azul);
}

.seccion-unspsc select {
    width: calc(100% - 105px);
    padding: 11px 12px;
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    background: white;
    font-size: 14px;
}

.seccion-unspsc select:focus {
    outline: none;
    border-color: var(--azul-claro);
    box-shadow: 0 0 0 2px rgba(29, 93, 145, 0.12);
}


/* ==========================================
   SELECTS BUSCABLES (Tom Select)
   El combo con buscador debe verse igual
   que el select nativo que reemplaza
   ========================================== */

.seccion-unspsc .ts-wrapper {
    width: calc(100% - 105px);
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}

.seccion-unspsc .ts-wrapper .ts-control {
    /* padding 0 en vertical + align-items:center para que el texto
       quede CENTRADO dentro de la caja, igual que en el <select>
       nativo. Antes el input (que es un flex-item y por defecto se
       estira) se pegaba arriba, y por eso el combo se veía más bajo
       que el select "Seleccione un segmento".
       El padding derecho deja el hueco de la flecha (abajo). */
    padding: 0 30px 0 12px;
    align-items: center;
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    background: white;
    font-size: 14px;
    min-height: auto;
    text-align: left;
}

/* La flechita del desplegable.
   OJO: el vendor public/vendor/tom-select/tom-select.css que trae el
   proyecto está recortado (412 líneas) y NO trae la regla base
   .ts-control:after, que es la que pinta el triángulo. Solo está la
   variante .rtl, así que estos combos salían SIN flecha mientras el
   <select> nativo sí la tenía. Se reproduce aquí, al mismo margen que
   el padding, para que el combo se vea igual que el select. */
.seccion-unspsc .ts-wrapper .ts-control:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 13px;
    width: 0;
    height: 0;
    margin-top: -3px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #8a9199;
    pointer-events: none;
    transition: transform .2s ease;
}

.seccion-unspsc .ts-wrapper.focus .ts-control:after,
.seccion-unspsc .ts-wrapper.active .ts-control:after {
    border-top-color: var(--azul-claro);
}

.seccion-unspsc .ts-wrapper.active .ts-control:after {
    transform: rotate(180deg);
}

.seccion-unspsc .ts-wrapper .ts-control input {
    font-size: 14px;
}

/* El placeholder ("Seleccione un segmento")
   en gris, como el texto del select nativo */

.seccion-unspsc .ts-wrapper .ts-control input::placeholder {
    color: #757575;
    opacity: 1;
}

/* Borde azul al enfocar, igual que el select */

.seccion-unspsc .ts-wrapper.focus .ts-control {
    outline: none;
    border-color: var(--azul-claro);
    box-shadow: 0 0 0 2px rgba(29, 93, 145, 0.12);
}

/* Deshabilitado, igual que select:disabled */

.seccion-unspsc .ts-wrapper.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* La lista desplegable: texto a la izquierda
   como el select nativo y por encima de todo */

.seccion-unspsc .ts-dropdown {
    font-size: 14px;
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    z-index: 100;
    text-align: left;
}

.seccion-unspsc .ts-dropdown .option {
    text-align: left;
    padding: 8px 12px;
}

/* Opción resaltada: azul suave tipo select
   nativo (no el bloque azul oscuro) */

.seccion-unspsc .ts-dropdown .active {
    background: #e8f0f7;
    color: var(--azul);
}

/* Códigos UNSPSC ya agregados: se muestran apagados y no se pueden repetir. */
.seccion-unspsc .ts-dropdown .option[data-disabled="1"],
.seccion-unspsc .ts-dropdown .option.disabled {
    color: #9aa6b2;
    background: #f1f3f5;
    cursor: not-allowed;
    opacity: 0.85;
}

.seccion-unspsc .ts-dropdown .option[data-disabled="1"].active,
.seccion-unspsc .ts-dropdown .option.disabled.active {
    color: #9aa6b2;
    background: #f1f3f5;
}

.seccion-unspsc .ts-dropdown .option.option-repetida,
.seccion-unspsc .ts-dropdown .option.option-repetida.active {
    color: #9aa6b2;
    background: #f1f3f5;
    cursor: not-allowed;
    opacity: 0.85;
}


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

.seccion-unspsc button {
    border: none;
    padding: 11px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}


/* Botones de agregar */

#btnAgregarSegmento,
#btnAgregarFamilia,
#btnAgregarClase,
#btnAgregarProducto {
    background: var(--azul);
    color: white;
}

#btnAgregarSegmento:hover,
#btnAgregarFamilia:hover,
#btnAgregarClase:hover,
#btnAgregarProducto:hover {
    background: var(--azul-claro);
}


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

button:disabled,
select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ==========================================
   LISTAS DE ELEMENTOS AGREGADOS
========================================== */

#listaSegmentos,
#listaFamilias,
#listaClases,
#listaProductos {
    margin-top: 10px;

    /* GEOMETRIA (2026-09-30). Este <div> es hermano del <div> sin id que
       contiene label + select + boton "Agregar", y ese lleva padding: 14px
       (.seccion-unspsc > div:not([id])). Aqui NO habia padding, asi que las
       filas se pegaban al borde de la seccion: 28px mas anchas que el bloque
       de arriba y corridas hacia los lados. Con el mismo padding lateral que
       la tarjeta, la fila arranca donde arranca el selector y termina donde
       termina el conjunto selector + boton. */
    padding: 0 14px;
}


    /* ==========================================
    ELEMENTO AGREGADO
    ========================================== */

    .elemento-agregado {
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* GEOMETRIA (2026-09-30). Se quitan "margin: 6px auto 0" y
       "width: 94%": ese 94% centrado era un parche para disimular que el
       contenedor (#listaSegmentos, etc.) no tenia padding lateral. Con el
       padding puesto en el contenedor, la fila ya ocupa el ancho exacto y
       el 94% solo la dejaba mas corta que el bloque de arriba.
       "margin-top: 6px" se conserva (separacion vertical, no lateral).
       El padding derecho es 11px y no 12px porque esta fila tiene borde de
       1px y el bloque de arriba (.seccion-unspsc > div:not([id])) NO lo
       tiene: con 12px el "Eliminar" caia 1px a la izquierda del "Agregar".
       Medido en Chrome: ambos botones terminan en el mismo pixel. */
    margin-top: 6px;

    padding: 7px 11px 7px 12px;

    box-sizing: border-box;

    background: white;
    border: 1px solid var(--gris-borde);
    border-left: 4px solid var(--azul);
    border-radius: 6px;
    }

/* Texto */

.elemento-texto {
    color: #333;
    font-size: 14px;
}


/* ==========================================
   BOTON ELIMINAR
   ========================================== */

.btn-eliminar {
    background: var(--rojo);
    color: white;

    border: none;
    padding: 7px 12px;

    border-radius: 5px;

    cursor: pointer;
}

.btn-eliminar:hover {
    background: var(--rojo-hover);
}


/* ==========================================
   BOTON PRINCIPAL
========================================== */

.btn {
    display: inline-block;

    padding: 12px 25px;

    background: var(--azul);
    color: white;

    text-decoration: none;

    border: none;
    border-radius: 6px;

    cursor: pointer;

    font-weight: bold;
}

.btn:hover {
    background: var(--azul-claro);
}


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

@media (max-width: 700px) {

    .inicio {
        width: 95%;
        padding: 20px;
        margin: 20px auto;
    }

    /* En movil el combo y el boton se apilan, cada uno en su linea */

    .seccion-unspsc select {
        width: 100%;
        margin-bottom: 8px;
    }

    .seccion-unspsc .ts-wrapper {
        width: 100%;
        margin-bottom: 8px;
    }

    .seccion-unspsc button {
        width: 100%;
    }

}

/* ==========================================
   DESCRIPCIÓN DEL PROCESO
   ========================================== */

.seccion-descripcion {
    margin-top: 25px;
    padding: 20px 35px;
    border-top: 1px solid #dfe5ec;
}

.seccion-descripcion h3 {
    color: #143f73;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 15px;
}

.grupo-descripcion {
    display: flex;
    gap: 10px;
    width: 100%;
}

.grupo-descripcion input {
    flex: 1;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #ccd5df;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
}

.grupo-descripcion input:focus {
    border-color: #143f73;
    box-shadow: 0 0 0 2px rgba(20, 63, 115, 0.1);
}

.grupo-descripcion button {
    height: 42px;
    padding: 0 22px;
    border: none;
    border-radius: 6px;
    background: #143f73;
    color: white;
    font-weight: 600;
    cursor: pointer;
}

.grupo-descripcion button:hover {
    background: #0d315b;
}


/* ==========================================
   DESCRIPCIONES AGREGADAS
   ========================================== */

#listaDescripciones {
    margin-top: 12px;
}

#listaDescripciones .elemento-agregado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    /* GEOMETRIA (2026-10-01): la fila debe ocupar EXACTAMENTE el ancho
       del conjunto campo + gap + boton "Agregar" de arriba, asi que su
       borde derecho tiene que caer en el del "Agregar" (que va pegado al
       borde del contenedor, sin margen). Con "padding: 10px 14px" el
       borde derecho de la fila se pasaba 14px y el "Eliminar" quedaba
       15px por detras del "Agregar" (14px de padding + 1px de borde).
       Por eso el padding derecho pasa a 0: el "Eliminar" queda pegado
       al extremo derecho de la fila, igual que el "Agregar" lo esta
       del contenedor. El padding izquierdo (14px) NO se toca: es el
       respiro del texto frente a la franja roja de 4px, no un desalineo. */
    padding: 10px 0 10px 14px;
    margin-bottom: 8px;
    background: #f5f8fb;
    border: 1px solid #dfe5ec;
    border-left: 4px solid #d62828;
    border-radius: 6px;
}

#listaDescripciones .elemento-texto {
    color: #333;
    font-size: 14px;
    word-break: break-word;
}


#listaDescripciones .btn-eliminar {
    flex-shrink: 0;
    border: none;
    border-radius: 5px;
    padding: 6px 12px;
    background: #d62828;
    color: white;
    font-size: 13px;
    cursor: pointer;
}

#listaDescripciones .btn-eliminar:hover {
    background: #b71c1c;
}

/* ==========================================
   "AGREGAR" Y "ELIMINAR": LA MISMA FORMA
   ==========================================
   2026-09-30, petición del dueño: el botón
   "Agregar" de cada buscador y el "Eliminar" de
   cada fila ya agregada van uno al lado del
   otro y tienen que verse IGUALES (misma
   altura, mismo radio, misma tipografía, misma
   separación del texto).

   - Se iguala la FORMA, no el color: "Agregar"
     azul, "Eliminar" rojo.
   - Antes el "Eliminar" salía chiquito y
     descolgado, y además dentro de
     .seccion-unspsc se pintaba del degradado
     AZUL: la regla .seccion-unspsc button es
     (0,1,1) y le gana a .btn-eliminar (0,1,0).
     Aquí se usa .seccion-unspsc .btn-eliminar
     (0,2,0), que sí le gana y lo devuelve a rojo.
========================================== */

.seccion-unspsc .btn-eliminar,
#listaDescripciones .btn-eliminar,
#btnAgregarDescripcion {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 12px;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 5px 12px rgba(6,43,89,.15);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* El COLOR es lo unico que separa a los dos botones hermanos: por eso
   vive aqui, en su propia regla, y no dentro del bloque de forma de
   arriba. Asi "Agregar" y "Eliminar" comparten literalmente las mismas
   declaraciones (padding, alto, radio, tipografia, sombra) y no pueden
   quedar desalineados por olvidar una propiedad. */
.seccion-unspsc .btn-eliminar,
#listaDescripciones .btn-eliminar {
    background: var(--rojo);
}

#btnAgregarDescripcion {
    background: linear-gradient(135deg, var(--secopio-navy), var(--secopio-blue));
}

#btnAgregarDescripcion:hover {
    background: #0d315b;
}

.seccion-unspsc .btn-eliminar:hover,
#listaDescripciones .btn-eliminar:hover,
#btnAgregarDescripcion:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(6,43,89,.22);
    filter: saturate(1.12);
}

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

.panel-admin {
    width: 92%;
    max-width: 1400px;
    margin: 40px auto;
}

.admin-header {
    background: #111827;
    color: white;
    padding: 30px;
    border-radius: 14px;
    margin-bottom: 25px;
}

.admin-header h1 {
    margin: 0 0 8px;
}

.admin-header p {
    margin: 0;
    color: #d1d5db;
}


/* ==========================================
   RESUMEN
   ========================================== */

.admin-resumen {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;
    margin-bottom: 30px;
}

.tarjeta-resumen {
    background: white;
    padding: 22px;
    border-radius: 12px;
    box-shadow:
        0 4px 15px rgba(0,0,0,.08);

    border-left: 5px solid #2563eb;
}

.tarjeta-resumen span {
    display: block;
    color: #6b7280;
    margin-bottom: 8px;
}

.tarjeta-resumen strong {
    font-size: 30px;
}

.tarjeta-resumen.pendiente {
    border-left-color: #f59e0b;
}

.tarjeta-resumen.activo {
    border-left-color: #16a34a;
}

.tarjeta-resumen.bloqueado {
    border-left-color: #dc2626;
}
.admin-shell .tarjeta-resumen {
    position: relative;
    min-height: 112px;
    padding: 20px 22px;
    overflow: hidden;
    border: 1px solid #dcecf3;
    border-left: 5px solid #2563eb;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(6,43,89,.07);
}
.admin-shell .tarjeta-resumen::after {
    content: "";
    position: absolute;
    right: -20px;
    bottom: -34px;
    width: 164px;
    height: 164px;
    border: 14px solid rgba(7,135,201,.08);
    border-radius: 50%;
}
.admin-shell .tarjeta-resumen::before {
    content: none;
}
.admin-shell .resumen-icono { position: absolute; top: 15px; right: 18px; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; color: #087fba; background: #e5f5fc; border-radius: 50%; }
.admin-shell .resumen-icono svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.admin-shell .tarjeta-resumen.activo .resumen-icono { color: #0aa66b; background: #e2f8ef; }
.admin-shell .tarjeta-resumen.bloqueado .resumen-icono { color: #e8324f; background: #fde8ed; }
.admin-shell .tarjeta-resumen span { color: #6680a6; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.admin-shell .tarjeta-resumen strong { position: relative; z-index: 1; color: var(--secopio-navy); font-size: 32px; }
.admin-shell .admin-clientes .tabla-contenedor { border: 1px solid #dcecf3; border-radius: 12px; }
.admin-shell .admin-clientes table { border-collapse: separate; border-spacing: 0; overflow: hidden; }
.admin-shell .admin-clientes thead th { background: var(--secopio-navy); color: #fff; border-bottom: 0; }
.admin-shell .admin-clientes tbody tr:nth-child(even) { background: #f7fbfd; }
.admin-shell .admin-clientes tbody tr:hover { background: #eaf7fc; }
.admin-shell .admin-clientes tbody td { border-bottom: 1px solid #e2eef4; vertical-align: middle; }
.admin-shell .admin-clientes tbody tr:last-child td { border-bottom: 0; }
.admin-shell .btn-ver { min-width: 70px; text-align: center; box-shadow: 0 4px 9px rgba(7,127,201,.18); }
.admin-table-toolbar { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.admin-search { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 210px; height: 43px; padding: 0 14px; border: 1px solid #cfe3ee; border-radius: 9px; color: #48739a; }
.admin-search input { width: 100%; border: 0; outline: 0; color: var(--secopio-navy); background: transparent; font: inherit; }
.admin-status-filters { display: flex; gap: 8px; }
.admin-status-filters button { height: 43px; padding: 0 14px; border: 1px solid #d5e7f0; border-radius: 9px; color: var(--secopio-navy); background: #fff; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.admin-status-filters button.activo { color: #fff; border-color: var(--secopio-blue); background: var(--secopio-blue); }
.admin-shell .admin-footer { justify-content: center; width: 100%; }
.admin-shell .admin-footer form { margin: 0 auto; }
.punto { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #16a66b; }
.punto.amarillo { background: #f3b51b; } .punto.rojo { background: #e8324f; }
.admin-shell .admin-header {
    min-height: 150px;
    display: flex;
    align-items: center;
    padding: 30px clamp(26px, 4vw, 48px);
    background: linear-gradient(115deg, #063665, #087fba 68%, #28b879);
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(6,43,89,.16);
}
.admin-shell .admin-header h1 { margin: 0 0 8px; color: #fff; font-size: clamp(26px, 3vw, 36px); }
.admin-shell .admin-header p { color: rgba(255,255,255,.82); font-size: 15px; }
.admin-shell a:focus-visible,
.admin-shell button:focus-visible,
.admin-shell select:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: 3px;
}
.admin-detail-shell .admin-workspace { position: relative; }
.admin-detail-shell { grid-template-columns: minmax(0, 1fr); }
.admin-detail-shell > .admin-sidebar { display: none; }
.admin-detail-shell .admin-workspace > .admin-header { display: none; }
.admin-detail-shell .detalle-nav {
    position: absolute;
    top: 116px;
    left: 26px;
    width: 290px;
    display: grid;
    align-content: start;
    gap: 8px;
    margin: 0;
    padding: 24px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.94);
}
.admin-detail-shell .detalle-nav::before {
    content: "Detalle del cliente";
    display: block;
    padding: 0 14px 18px;
    color: var(--secopio-navy);
    font-size: 21px;
    font-weight: 700;
}
.admin-detail-shell .detalle-nav a {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 0 15px;
    border: 1px solid #d9eaf4;
    background: #fff;
}
.admin-detail-shell .detalle-nav a.activo,
.admin-detail-shell .detalle-nav a:hover { background: linear-gradient(100deg, #0879c9, #09bda9); }
.admin-detail-shell .admin-workspace > .detalle-cliente,
.admin-detail-shell .admin-workspace > .detalle-usuarios,
.admin-detail-shell .admin-workspace > .detalle-filtros,
.admin-detail-shell .admin-workspace > .admin-footer {
    margin-left: 342px;
}
@media (max-width: 850px) {
    .admin-detail-shell { grid-template-columns: 1fr; }
    .admin-detail-shell .detalle-nav { position: static; width: auto; margin: 18px 26px 0; display: flex; overflow-x: auto; }
    .admin-detail-shell .detalle-nav::before { display: none; }
    .admin-detail-shell .admin-workspace > .detalle-cliente,
    .admin-detail-shell .admin-workspace > .detalle-usuarios,
    .admin-detail-shell .admin-workspace > .detalle-filtros,
    .admin-detail-shell .admin-workspace > .admin-footer { margin-left: 26px; }
}
@media (max-width: 900px) {
    .admin-shell .admin-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) { .admin-table-toolbar { flex-wrap: wrap; } .admin-search { flex-basis: 100%; } }
@media (max-width: 560px) { .admin-status-filters { width: 100%; overflow-x: auto; } }
@media (max-width: 560px) {
    .admin-shell .admin-resumen { grid-template-columns: 1fr; gap: 12px; }
}


/* ==========================================
   CLIENTES
   ========================================== */

.admin-clientes {
    background: white;
    padding: 25px;
    border-radius: 14px;

    box-shadow:
        0 4px 15px rgba(0,0,0,.08);
}

.clientes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.clientes-header h2 {
    margin: 0;
}

.clientes-header button,
.admin-footer button,
.btn-ver {
    border: none;
    border-radius: 7px;
    padding: 9px 15px;
    cursor: pointer;
    font-weight: 600;
}


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

.tabla-contenedor { 
    width: 100%;
    overflow-x: auto;
}

.admin-clientes table {
    width: 100%;
    border-collapse: collapse;
}

.admin-clientes th {
    background: #111827;
    color: white;
    padding: 13px;
    text-align: left;
}

.admin-clientes td {
    padding: 13px;
    border-bottom: 1px solid #e5e7eb;
}

.admin-clientes tr:hover {
    background: #f9fafb;
}


/* ==========================================
   ESTADOS
   ========================================== */

.estado {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
}

.estado-pendiente {
    background: #fef3c7;
    color: #92400e;
}

.estado-activo {
    background: #dcfce7;
    color: #166534;
}

.estado-vencido {
    background: #ffedd5;
    color: #9a3412;
}

.estado-bloqueado {
    background: #fee2e2;
    color: #991b1b;
}


/* ==========================================
   BOTÓN VER
   ========================================== */

.btn-ver {
    background: #2563eb;
    color: white;
}

.btn-ver:hover {
    background: #1d4ed8;
}


/* ==========================================
   PANEL DE EMPRESA — SUPER ADMIN
   (botón dar/quitar, en el detalle del
   cliente)
   ========================================== */

.dato-rol {
    grid-column: 1 / -1;
}

.acciones-rol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.acciones-rol button {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    border-radius: 10px;
    transition: transform .18s, box-shadow .18s;
}

.acciones-rol button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 13px rgba(6,43,89,.18);
}


/* ==========================================
   MENSAJES
   ========================================== */

.mensaje-admin {
    margin-bottom: 15px;
    color: #6b7280;
}


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

.admin-footer {
    margin-top: 25px;
}

.admin-footer button {
    background: #374151;
    color: white;
}


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

@media (max-width: 900px) {

    .admin-resumen {
        grid-template-columns:
            repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .admin-resumen {
        grid-template-columns: 1fr;
    }

    .panel-admin {
        width: 95%;
        margin: 20px auto;
    }

}


/* ==========================================
   DETALLE DEL CLIENTE
   ========================================== */

.detalle-cliente {
    margin-bottom: 25px;
}

/* Mismo estilo de título que las secciones de
   filtros: mayúsculas con rayita de color.
   Solo en el detalle: el listado usa otra cosa. */
.detalle-cliente .clientes-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--secopio-navy);

    font-size: 15px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.detalle-cliente .clientes-header h2::before {
    content: "";

    width: 4px;
    height: 20px;

    background: var(--secopio-blue);

    border-radius: 4px;
}


/* ==========================================
   DATOS DEL CLIENTE
   ========================================== */

.datos-cliente {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(255px, 1fr));

    gap: 14px;
}

.dato-cliente {
    background: white;

    border: 1px solid #e2e8f0;

    border-left: 3px solid var(--secopio-teal);

    padding: 13px 16px;

    border-radius: 11px;

    box-shadow: 0 1px 3px rgba(6,43,89,.05);

    transition:
        box-shadow .18s,
        transform .18s,
        border-color .18s;
}

.dato-cliente:hover {
    transform: translateY(-2px);

    border-color: #cfe3ee;

    border-left-color: var(--secopio-blue);

    box-shadow: 0 6px 14px rgba(6,43,89,.10);
}

/* Etiqueta: pequeña, mayúscula y discreta */
.dato-cliente span {
    display: block;

    color: #8296ab;

    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;

    margin-bottom: 6px;
}

/* Valor: lo que de verdad se lee */
.dato-cliente strong {
    display: block;

    color: var(--secopio-ink);

    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;

    /* los correos largos no deben desbordar */
    overflow-wrap: anywhere;
}

/* Empresa y correo: los dos datos que
   identifican al cliente, con más peso */
.dato-identidad {
    grid-column: span 2;

    background: var(--secopio-soft);

    border-color: #d5e9f3;

    border-left-color: var(--secopio-navy);
}

.dato-identidad strong {
    color: var(--secopio-navy);
    font-size: 16px;
    font-weight: 700;
}

/* Las insignias de estado viven dentro del
   <strong>: no deben heredar el formato
   de bloque de las etiquetas */
.dato-cliente strong .estado {
    text-transform: none;
    letter-spacing: 0;
    font-size: 12.5px;
}

/* Estado en rojo cuando ya venció */
.estado-vencido {
    background: #fee2e2;
    color: #991b1b;
}


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

.detalle-filtros {
    background: white;

    padding: 25px;

    border-radius: 14px;

    margin-bottom: 25px;

    border: 1px solid #e2e8f0;

    box-shadow:
        0 4px 15px rgba(6,43,89,.06);
}

.detalle-filtros h2 {
    margin-top: 0;

    display: flex;
    align-items: center;
    gap: 10px;

    color: var(--secopio-navy);

    font-size: 15px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

//* Barra de color a la izquierda del título */
.detalle-filtros h2::before {
    content: "";

    width: 4px;
    height: 20px;

    background: var(--secopio-blue);

    border-radius: 4px;
}

/* Título ausente: sin barra ni espacio */
.detalle-filtros h2:empty {
    display: none;
}


/* ==========================================
   GRID
   ========================================== */

.grid-filtros {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    align-items: start;

    gap: 16px;
}


/* ==========================================
   TARJETAS
   ========================================== */

.tarjeta-filtro {
    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    overflow: hidden;
}

.tarjeta-filtro h3 {
    background: var(--secopio-soft);

    color: var(--secopio-navy);

    margin: 0;

    padding: 11px 15px;

    border-bottom: 1px solid #dbeafe;

    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}


/* ==========================================
   ELEMENTOS
   ========================================== */

.lista-detalle {
    padding: 6px;
}

/* Cada filtro es una fila limpia con separador,
   no una caja dentro de otra caja */
.elemento-detalle {
    display: flex;
    align-items: baseline;
    gap: 10px;

    padding: 8px 10px;

    border-radius: 8px;
}

.elemento-detalle:hover {
    background: #eef7fb;
}

.elemento-detalle + .elemento-detalle {
    border-top: 1px solid #e8eef5;
}

.elemento-detalle:last-child {
    margin-bottom: 0;
}

/* El código se alinea en columna y no se
   pega con el nombre */
.elemento-detalle strong {
    flex: 0 0 82px;

    color: var(--secopio-blue);

    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

.elemento-detalle span {
    flex: 1 1 auto;

    color: var(--secopio-ink);

    font-size: 13.5px;
    line-height: 1.45;
}


/* ==========================================
   DESCRIPCIONES
   ========================================== */

.lista-descripciones-detalle {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(240px, 1fr));

    gap: 10px;
}

.descripcion-detalle {
    background: var(--secopio-soft);

    color: var(--secopio-ink);

    border-left: 3px solid var(--secopio-teal);

    padding: 10px 14px;

    border-radius: 8px;

    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
}


/* ==========================================
   SIN ELEMENTOS
   ========================================== */

.sin-elementos {
    color: #94a3b8;

    padding: 12px 10px;

    margin: 0;

    font-size: 13px;
    font-style: italic;
}


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

@media (max-width: 900px) {

    .datos-cliente {
        grid-template-columns:
            repeat(2, 1fr);
    }

}

@media (max-width: 700px) {

    /* con una sola columna, "span 2"
       desbordaría la rejilla */
    .dato-identidad {
        grid-column: auto;
    }

}

@media (max-width: 600px) {

    .datos-cliente,
    .grid-filtros {
        grid-template-columns: 1fr;
    }

}

/* ==========================================
   ACCIONES DE CUENTA
   ========================================== */

/* Los botones de Activar/Bloquear son el
   PRIMER hijo del grid de datos, así que sin
   esto se meterían en la primera celda y
   descuadrarían los 8 campos. Ocupan una
   fila propia encima. */
.acciones-cuenta {
    grid-column: 1 / -1;

    margin: 0 0 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Texto informativo en vez de botones
   (ej. el admin de empresa viendo su propia
   cuenta, que no puede bloquear) */
.nota-acciones {
    margin: 0;

    color: #64748b;

    font-size: 14px;

    font-style: italic;
}

/* ==========================================
   OCULTAR
   La clase .oculto la usa el JS para
   mostrar un solo boton a la vez (ej. "Dar
   panel de empresa" / "Deshabilitar panel de
   empresa") y para esconder el bloque de rol
   segun quien este mirando. Debe existir en
   ESTE css: antes solo estaba definida en
   configurar-filtros.css y panel-secopio.css,
   y el admin cargaba estilos.css, asi que los
   classList.add("oculto") no ocultaban nada y
   los dos botones salian siempre juntos.
   ========================================== */

.oculto {
    display: none !important;
}

.btn-activar,
.btn-bloquear {
    border: none;
    border-radius: 8px;

    padding: 11px 18px;

    color: white;

    font-weight: 600;

    cursor: pointer;
}

.btn-activar {
    background: #16a34a;
}

.btn-activar:hover {
    background: #15803d;
}

.btn-bloquear {
    background: #dc2626;
}

.btn-bloquear:hover {
    background: #b91c1c;
}


/* ==========================================
   REGISTRO EXITOSO / CUENTA EN VALIDACIÓN
   ========================================== */

.icono-reloj {
    width: 90px;
    height: 90px;

    margin: 0 auto 25px auto;

    border: 6px solid var(--azul);
    border-radius: 50%;

    position: relative;
}

/* Manecilla larga */

.icono-reloj::before {
    content: "";

    position: absolute;
    top: 14px;
    left: 50%;

    width: 5px;
    height: 28px;

    background: var(--azul);
    border-radius: 3px;

    transform: translateX(-50%);
    transform-origin: bottom center;
}

/* Manecilla corta */

.icono-reloj::after {
    content: "";

    position: absolute;
    top: 39px;
    left: 50%;

    width: 5px;
    height: 20px;

    background: var(--rojo);
    border-radius: 3px;

    transform-origin: top center;
    transform: rotate(130deg);
}


.mensaje-validacion {
    max-width: 480px;
    margin: 0 auto 30px auto;

    padding: 18px 22px;

    background: #f0f5fa;

    border: 1px solid var(--gris-borde);
    border-left: 5px solid var(--azul);
    border-radius: 8px;

    color: var(--gris-texto);
    line-height: 1.6;
}

.mensaje-validacion strong {
    color: var(--azul);
}


/* ==========================================
   SECCIÓN DE FILTROS (DESPLEGABLE)
   Se muestra cuando empresa, correo y
   password están llenos
   ========================================== */

.seccion-filtros {
    overflow: hidden;

    max-height: 7000px;
    opacity: 1;

    transition:
        max-height 0.7s ease,
        opacity 0.5s ease,
        transform 0.5s ease;

    transform: translateY(0);
}

.seccion-filtros.oculto {
    max-height: 0;
    opacity: 0;

    transform: translateY(-15px);

    pointer-events: none;
}


/* Inputs principales del registro */

#formRegistro > input {
    width: 100%;
    height: 45px;

    padding: 0 14px;
    margin-bottom: 12px;

    border: 1px solid var(--gris-borde);
    border-radius: 6px;

    font-size: 14px;

    outline: none;
}

#formRegistro > input:focus {
    border-color: var(--azul-claro);
    box-shadow: 0 0 0 2px rgba(29, 93, 145, 0.12);
}

#formRegistro button[type="submit"] {
    width: 100%;
    height: 45px;

    border: none;
    border-radius: 6px;

    background: var(--azul);
    color: white;

    font-size: 15px;
    font-weight: bold;

    cursor: pointer;
}

#formRegistro button[type="submit"]:hover {
    background: var(--azul-claro);
}


/* Mensaje guía mientras faltan datos */

.mensaje-completa-datos {
    margin-top: 18px;

    color: var(--gris-texto);
    font-size: 14px;

    transition: opacity 0.4s ease;
}

.mensaje-completa-datos.oculto {
    opacity: 0;
}

/* ==========================================
   FILTRO POR PRECIO BASE
   ========================================== */

.seccion-precio {
    margin-top: 25px;
    padding: 20px 25px;
    border: 1px solid var(--gris-borde);
    border-radius: 10px;
    background: #fafbfc;
    text-align: left;
}

.seccion-precio h3 {
    color: var(--azul);
    font-size: 16px;
    margin: 0 0 12px 0;
}

.switch-sin-filtro {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--gris-texto);
    cursor: pointer;
    margin-bottom: 14px;
}

.switch-sin-filtro input {
    width: 17px;
    height: 17px;
    cursor: pointer;
}

.grupo-precio {
    display: flex;
    gap: 15px;
}

.grupo-precio > div {
    flex: 1;
}

.grupo-precio label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: bold;
    color: var(--azul);
}

.grupo-precio input {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    font-size: 14px;
    outline: none;
}

.grupo-precio input:focus {
    border-color: var(--azul-claro);
    box-shadow: 0 0 0 2px rgba(29, 93, 145, 0.12);
}

.grupo-precio input:disabled {
    background: #eef1f5;
    cursor: not-allowed;
}


/* ==========================================
   LISTAS CON CHECKBOXES
   (departamento / modalidad / justificación)
   ========================================== */

.filtros-adicionales {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 25px;
    text-align: left;
}

.filtro-check {
    border: 1px solid var(--gris-borde);
    border-radius: 10px;
    background: #fafbfc;
    padding: 15px;
}

.filtro-check h3 {
    color: var(--azul);
    font-size: 15px;
    margin: 0 0 10px 0;
}

.buscador-check {
    width: 100%;
    height: 36px;
    padding: 0 10px;
    margin-bottom: 8px;
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    font-size: 13px;
    outline: none;
}

.buscador-check:focus {
    border-color: var(--azul-claro);
}

.lista-check {
    max-height: 220px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    padding: 6px;
}

.item-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 4px;
    font-size: 13px;
    color: #333;
    line-height: 1.35;
    cursor: pointer;
    border-radius: 4px;
}

.item-check:hover {
    background: #f0f5fa;
}

.item-check input {
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}

.pie-check {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.contador-check {
    font-size: 12px;
    color: var(--gris-texto);
}

.btn-todos-check {
    background: none;
    border: none;
    padding: 0;
    color: var(--azul-claro);
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}

.btn-todos-check:hover {
    text-decoration: underline;
}


/* ==========================================
   RESPONSIVE FILTROS ADICIONALES
   ========================================== */

@media (max-width: 800px) {

    .filtros-adicionales {
        grid-template-columns: 1fr;
    }

    .grupo-precio {
        flex-direction: column;
    }

}

/* Identidad visual SECOPIO: estilos visuales únicamente. */
:root {
    --secopio-navy: #062b59;
    --secopio-blue: #0787c9;
    --secopio-teal: #10a8b6;
    --secopio-green: #57b947;
    --secopio-ink: #18324d;
    --secopio-soft: #eef7fb;
}

body {
    background: radial-gradient(circle at 10% 0%, rgba(16,168,182,.12), transparent 30rem), linear-gradient(135deg, #f5fbfd 0%, #eef4f9 100%);
    color: var(--secopio-ink);
}

.inicio { margin: 54px auto; border: 1px solid rgba(7,135,201,.12); border-radius: 24px; box-shadow: 0 22px 60px rgba(6,43,89,.12); }
.marca-principal { margin: -8px auto 18px; text-align: center; }
.marca-principal img { display: block; width: min(100%, 410px); height: auto; margin: 0 auto; }
.inicio > h1 { color: var(--secopio-navy); letter-spacing: .04em; }
.inicio input, .inicio select, .inicio textarea { border: 1px solid #c9dce8; border-radius: 10px; transition: border-color .2s, box-shadow .2s; }
.inicio input:focus, .inicio select:focus, .inicio textarea:focus { border-color: var(--secopio-blue); box-shadow: 0 0 0 4px rgba(7,135,201,.12); }
.btn, button[type="submit"] { background: linear-gradient(135deg, var(--secopio-navy), var(--secopio-blue)); border-radius: 10px; }
.btn:hover, button[type="submit"]:hover { background: linear-gradient(135deg, #041e42, var(--secopio-teal)); }
.admin-header { background: linear-gradient(120deg, var(--secopio-navy), #087fb9 72%, var(--secopio-green)); border-radius: 22px; box-shadow: 0 18px 38px rgba(6,43,89,.18); }
.logo-header { width: 210px; max-width: 55vw; height: auto; display: block; margin-bottom: 18px; }
.admin-header h1 { letter-spacing: .02em; }
.admin-clientes, .tarjeta-resumen, .detalle-filtros { border-radius: 18px; border: 1px solid rgba(7,135,201,.10); }
.admin-clientes th { background: var(--secopio-navy); }
.admin-clientes tr:hover { background: var(--secopio-soft); }
.clientes-header button, .admin-footer button, .btn-ver { background: var(--secopio-blue); color: white; border-radius: 10px; }
.clientes-header button:hover, .admin-footer button:hover, .btn-ver:hover { background: var(--secopio-teal); }

/* Rediseño visual completo: componentes modernos sin cambios funcionales. */
html { scroll-behavior: smooth; }
body { font-family: "Segoe UI", Inter, Arial, sans-serif; min-height: 100vh; }

.inicio {
    overflow: hidden;
    max-width: 980px;
    padding: 48px clamp(22px, 5vw, 64px) 58px;
}
.inicio h1 { font-size: clamp(26px, 4vw, 36px); margin-top: 12px; }
.inicio > p { font-size: 15px; line-height: 1.7; }
.inicio form > input, .inicio form > textarea {
    display: block;
    width: 100%;
    height: 50px;
    margin: 13px 0;
    padding: 0 17px;
    background: #fbfdfe;
    color: var(--secopio-ink);
    font-size: 15px;
}
.inicio form > input::placeholder, .inicio input::placeholder { color: #8ca0af; }
.inicio form button[type="submit"] { min-width: 190px; min-height: 50px; margin-top: 18px; }

.seccion-filtros { animation: aparecer .45s ease both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.seccion-unspsc, .seccion-precio, .filtros-adicionales, .seccion-descripcion {
    border: 1px solid #dceaf1;
    border-radius: 18px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 8px 25px rgba(6,43,89,.045);
}
.seccion-unspsc { padding: 28px; }
.seccion-unspsc h2, .seccion-precio h3, .filtro-check h3, .seccion-descripcion h3 {
    letter-spacing: .01em;
}
.seccion-unspsc h2 { border-left: 0; padding: 0 0 14px; border-bottom: 2px solid #e4f1f6; }
.seccion-unspsc > div:not([id]) { padding: 14px; border-radius: 12px; background: #f8fcfd; }
.seccion-unspsc .ts-wrapper .ts-control, .seccion-unspsc select { height: 48px; border-radius: 10px; background: #fff; }

.lista-seleccionados-mejorada {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #d7eaf2;
    border-radius: 14px;
    background: #fbfeff;
}
.lista-seleccionados-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--secopio-navy);
}
.lista-seleccionados-cabecera > div { display:flex; align-items:center; gap:8px; }
.lista-seleccionados-contador {
    min-width: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    color: #075985;
    background: #e0f2fe;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}
.lista-seleccionados-toggle {
    padding: 6px 0;
    border: 0;
    color: #087fba;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}
.lista-seleccionados-toggle:hover { color: var(--secopio-navy); text-decoration: underline; }
.lista-seleccionados-herramientas {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    padding: 0 11px;
    border: 1px solid #d7eaf2;
    border-radius: 9px;
    color: #7290a4;
    background: #fff;
}
.lista-seleccionados-herramientas input {
    width: 100%;
    min-height: 38px;
    border: 0;
    outline: 0;
    color: var(--secopio-navy);
    background: transparent;
    font: inherit;
}
.lista-seleccionados-items {
    display: grid;
    gap: 8px;
    max-height: 270px;
    overflow: hidden;
    transition: max-height .25s ease;
}
.lista-seleccionados-items.lista-seleccionados-oculta { max-height:0; opacity:0; margin:0; pointer-events:none; }
.lista-seleccionados-items.lista-seleccionados-expandida { max-height: 1800px; overflow-y: auto; }
.lista-seleccionados-items .elemento-agregado { margin: 0; }
.lista-seleccionados-items .elemento-agregado.oculto-por-busqueda { display:none !important; }

/* ==========================================
   GEOMETRIA DEL BLOQUE SELECT + "AGREGAR"
   ==========================================
   2026-09-30. El selector y el boton estaban
   unidos con "width: calc(100% - 105px)", o sea
   el ancho del boton estaba RESTADO A MANO y era
   mayor que el boton real (~83px): quedaban ~20px
   muertos a la derecha, asi que el borde derecho de
   "Agregar" no era el borde del bloque y el
   "Eliminar" de la fila de abajo no se podia alinear
   con el sin inventar margenes.

   Con flex el selector toma exactamente el espacio
   que deja el boton: sin numeros magicos y sin
   depender del tamano de la fuente.

   - "gap: 8px" es el aire que antes dejaba el espacio
     en blanco entre </select> y <button>.
   - El "margin-right: 12px" del boton es el MISMO
     padding lateral de .elemento-agregado
     (padding: 7px 12px): asi el borde derecho de
     "Agregar" y el de "Eliminar" caen en la misma
     vertical, a 12px del borde derecho de su bloque.
   - "> div:not([id])" solo alcanza a los 4 bloques de
     buscador (Segmento/Familia/Clase/Producto). Los
     "Eliminar" son hijos de .elemento-agregado, asi
     que esta regla no los toca.
========================================== */

.seccion-unspsc > div:not([id]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* El titulo ("Segmento", "Familia"...) ocupa su propia
   linea, igual que antes con display: block */
.seccion-unspsc > div:not([id]) > label {
    flex: 0 0 100%;
}

/* El selector (nativo, o el .ts-wrapper de Tom Select)
   es el que se estira */
.seccion-unspsc > div:not([id]) > select,
.seccion-unspsc > div:not([id]) > .ts-wrapper {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

/* El boton no se estira y queda a 12px del borde, igual
   que el "Eliminar" */
.seccion-unspsc > div:not([id]) > button {
    flex: 0 0 auto;
    margin-right: 12px;
}

/* En movil los selectors y el boton se apilan (el
   @media de mas abajo los pone al 100%), asi que el
   margen del boton ya no debe empujar nada */
@media (max-width: 700px) {
    .seccion-unspsc > div:not([id]) {
        gap: 0;
    }

    .seccion-unspsc > div:not([id]) > button {
        margin-right: 0;
    }
}
.seccion-unspsc button, .grupo-descripcion button, .btn-todos-check {
    min-height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--secopio-navy), var(--secopio-blue));
    color: #fff;
    box-shadow: 0 5px 12px rgba(6,43,89,.15);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.seccion-unspsc button:hover, .grupo-descripcion button:hover, .btn-todos-check:hover,
.btn:hover, button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(6,43,89,.22); filter: saturate(1.12); }
.elemento-agregado { border: 1px solid #dceaf1; border-left: 4px solid var(--secopio-teal); border-radius: 10px; box-shadow: 0 3px 10px rgba(6,43,89,.05); }
.seccion-precio, .filtros-adicionales, .seccion-descripcion { margin-top: 24px; padding: 26px; }
.filtro-check { border: 1px solid #dceaf1; border-radius: 14px; background: #fff; box-shadow: 0 5px 16px rgba(6,43,89,.05); }
.filtro-check h3 { padding: 17px 18px; margin: 0; background: linear-gradient(135deg,#f5fbfd,#fff); border-bottom: 1px solid #e5f0f4; border-radius: 14px 14px 0 0; }
.buscador-check { margin: 15px; width: calc(100% - 30px); border-radius: 9px; padding: 11px 13px; border: 1px solid #c9dce8; }
.lista-check { padding: 0 15px; }
.pie-check { padding: 13px 15px; border-top: 1px solid #e7f0f4; }
.btn-todos-check { min-height: 36px; padding: 7px 12px; font-size: 12px; }
.grupo-descripcion input { border-radius: 10px; height: 44px; }

/* El selector UNSPSC y "Agregar" permanecen siempre en la misma fila.
   El texto largo se recorta dentro del selector; el botón no baja ni cambia
   de posición. */
.seccion-unspsc > div:not([id]) {
    flex-wrap: wrap;
    min-width: 0;
}
.seccion-unspsc > div:not([id]) > .ts-wrapper,
.seccion-unspsc > div:not([id]) > select {
    flex: 1 1 0;
    min-width: 0;
}
.seccion-unspsc > div:not([id]) > button {
    flex: 0 0 auto;
    white-space: nowrap;
}
.seccion-unspsc > div:not([id]) > .ts-wrapper .ts-control {
    min-width: 0;
    overflow: hidden;
}
.seccion-unspsc > div:not([id]) > .ts-wrapper .item,
.seccion-unspsc > div:not([id]) > select {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* GEOMETRIA "Descripcion del proceso" (2026-09-30).
   - input: 42px -> 44px. El boton "Agregar" de al lado ya mide 44px
     (min-height: 44px de la regla .grupo-descripcion button de mas
     abajo), asi que el campo se veia 2px mas bajo que el boton. Aqui
     solo se actualiza el alto, que es lo que el bloque tardio ya
     actualizo para el resto (radio, sombra, color).
   - padding-right: 15px en el .grupo-descripcion de mas arriba: la
     fila de #listaDescripciones tiene padding-right: 14px + borde de
     1px, o sea su borde derecho de contenido queda 15px antes del
     borde de la seccion. Sin esto el boton "Eliminar" quedaba 15px a
     la izquierda del "Agregar" (medido en Chrome). Con esto los dos
     terminan en el mismo pixel y el campo conserva el gap: 10px. */

.panel-admin { position: relative; max-width: 1420px; padding-top: 10px; }
.admin-header { position: relative; padding: 34px clamp(24px, 4vw, 46px); overflow: hidden; }
.admin-header::after { content:""; position:absolute; width:280px; height:280px; border:35px solid rgba(255,255,255,.08); border-radius:50%; right:-80px; top:-130px; }
.admin-header h1 { font-size: clamp(25px, 4vw, 38px); position: relative; z-index:1; }
.admin-resumen { gap: 18px; }
.tarjeta-resumen { position:relative; overflow:hidden; padding:24px; transition: transform .2s, box-shadow .2s; }
.tarjeta-resumen:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(6,43,89,.13); }
.tarjeta-resumen::after { content:""; position:absolute; width:70px; height:70px; border-radius:50%; right:-20px; bottom:-25px; background:rgba(7,135,201,.08); }
.admin-clientes { padding: 28px; box-shadow: 0 12px 32px rgba(6,43,89,.08); }
.clientes-header { padding-bottom: 18px; border-bottom: 1px solid #e4eef3; }
.clientes-header h2, .detalle-filtros h2 { color: var(--secopio-navy); }
.admin-clientes table { font-size: 14px; }
.admin-clientes th { padding: 16px 14px; letter-spacing: .03em; font-size: 12px; text-transform: uppercase; }
.admin-clientes td { padding: 16px 14px; }
.admin-clientes tr:last-child td { border-bottom: 0; }
.admin-footer { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:24px; }
.admin-footer button { min-height: 44px; padding: 11px 18px; transition: transform .18s, box-shadow .18s; }
.admin-footer button:hover { transform: translateY(-2px); box-shadow: 0 7px 15px rgba(6,43,89,.18); }
.admin-footer .btn-editar-filtros {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 18px;
    border: none;
    border-radius: 8px;
    color: #fff;
    background: #16a34a;
    font-weight: 600;
    text-decoration: none;
    transition: transform .18s, box-shadow .18s, background .18s;
}
.admin-footer .btn-editar-filtros:hover {
    color: #fff;
    background: #15803d;
    transform: translateY(-2px);
    box-shadow: 0 7px 15px rgba(6,43,89,.18);
}
.oportunidades-panel { padding: 30px; }
.oportunidades-lista { display: grid; gap: 16px; margin-top: 24px; }
.oportunidades-empresa-selector { display:flex; align-items:end; gap:14px; margin-top:22px; padding:16px 18px; border:1px solid #d8eaf2; border-radius:12px; background:#f7fbfd; }
.oportunidades-empresa-selector label { display:flex; flex-direction:column; gap:7px; flex:1; color:#6680a6; font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.oportunidades-empresa-selector select { width:100%; min-height:42px; padding:0 12px; border:1px solid #cfe3ee; border-radius:9px; color:var(--secopio-navy); background:#fff; font:inherit; }
.oportunidad-card { padding: 20px; border: 1px solid #d5e7f0; border-left: 5px solid #087fba; border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgba(6,43,89,.06); }
.oportunidades-filtros { display:flex; gap:10px; margin-top:24px; }
.oportunidades-filtro { padding:10px 18px; border:1px solid #cfe3ee; border-radius:999px; color:#35627f; background:#fff; font:inherit; font-weight:700; cursor:pointer; }
.oportunidades-filtro.activo { color:#fff; border-color:#087fba; background:#087fba; }
.oportunidad-card[hidden] { display:none; }
.oportunidad-estado-secops { display:inline-block; margin:0 0 14px; padding:6px 10px; border-radius:999px; color:#7c4a03; background:#fff3cd; font-size:12px; font-weight:800; }
.oportunidad-acciones { display:flex; flex-direction:column; align-items:flex-end; gap:8px; margin:0 0 4px; }
.oportunidad-acciones form { margin:0; }
.oportunidad-acciones button { padding:9px 14px; border:0; border-radius:8px; color:#fff; font:inherit; font-size:12px; font-weight:800; cursor:pointer; box-shadow:0 3px 8px rgba(6,43,89,.14); }
.oportunidad-acciones .btn-guardar-vistos { background:#16a34a; }
.oportunidad-acciones .btn-guardar-vistos:hover { background:#12813a; }
.oportunidad-acciones .btn-guardar-pendientes { color:#5f4300; background:#f2c94c; }
.oportunidad-acciones .btn-guardar-pendientes:hover { background:#d9a900; }
.oportunidad-card.oportunidad-vista { border-left-color: #16a34a; background: #f0fdf4; }
.oportunidad-card > div { display:flex; justify-content:space-between; gap:12px; color:#718096; }
.oportunidad-card h2 { margin: 10px 0 8px; color: var(--secopio-navy); font-size: 18px; }
.oportunidad-card p { margin: 0 0 16px; color: #52677c; }
.oportunidad-estado { display:inline-block; padding:5px 10px; border-radius:20px; color:#075985; background:#e0f2fe; font-size:12px; font-weight:700; }
.oportunidad-vista .oportunidad-estado, .oportunidad-estado.visto { color:#166534; background:#dcfce7; }
.oportunidad-contenido { max-width: 1120px; width: calc(100% - 56px); margin: 34px auto; }
.oportunidad-volver { display:inline-flex; align-items:center; gap:8px; margin-bottom:18px; padding:10px 16px; border:1px solid #cfe3ee; border-radius:9px; color:var(--secopio-navy); background:#fff; font-weight:700; text-decoration:none; }
.oportunidad-volver:hover { color:#fff; border-color:var(--secopio-blue); background:var(--secopio-blue); }
.oportunidad-ficha { padding:28px 34px; border:1px solid #d8eaf2; border-radius:18px; background:#fff; box-shadow:0 12px 28px rgba(6,43,89,.08); }
.oportunidad-ficha-cabecera { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.oportunidad-fuente { color:#5c7891; font-size:12px; font-weight:800; letter-spacing:.08em; }
.oportunidad-ficha h1 { max-width:900px; margin:16px 0 24px; color:var(--secopio-navy); font-size:clamp(24px,2.35vw,34px); font-weight:750; line-height:1.2; }
.oportunidad-metadatos { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; padding:17px 0; border-top:1px solid #e4eef3; border-bottom:1px solid #e4eef3; }
.oportunidad-metadatos div { display:flex; flex-direction:column; gap:7px; }
.oportunidad-metadatos span, .oportunidad-descripcion > span { color:#7890a5; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.oportunidad-metadatos strong { color:#18324d; font-size:14px; line-height:1.4; }
.oportunidad-descripcion { margin:21px 0; }
.oportunidad-descripcion p { margin:8px 0 0; color:#52677c; font-size:14px; line-height:1.65; white-space:pre-line; }
.oportunidad-boton { display:inline-flex; align-items:center; padding:10px 16px; border-radius:8px; color:#fff; background:#0787c9; font-size:14px; font-weight:700; text-decoration:none; }
.oportunidad-boton:hover { color:#fff; background:#062b59; }
@media (max-width:900px) { .oportunidad-metadatos { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .oportunidad-contenido { width:calc(100% - 30px); margin:20px auto; } .oportunidad-ficha { padding:22px 18px; } .oportunidad-metadatos { grid-template-columns:1fr; } }
.mensaje-admin { border-radius: 10px; }

@media (max-width: 700px) {
    .inicio { margin: 20px auto; padding: 34px 16px 40px; }
    .seccion-unspsc, .seccion-precio, .filtros-adicionales, .seccion-descripcion { padding: 17px; }
    .grupo-descripcion { flex-direction: column; }

    /* Al apilarse, el input llevaba "flex: 1" (pensado para la fila), que
       en columna se convierte en flex-basis: 0 y lo aplasta a 18px de
       alto (bug anterior a esta tanda, medido en Chrome). Con "flex: none"
       vuelve a medir sus 44px, los mismos del boton "Agregar". */
    .grupo-descripcion input { flex: none; }
    .admin-clientes { padding: 15px; }
    .admin-header { padding: 27px 22px; }
    .logo-header { width: 175px; }
    .formulario-usuario { padding: 17px 15px; }
}


/* ==========================================
   USUARIOS DE LA EMPRESA
   (detalle del cliente) — el origen no
   tiene esta sección: es la gestión de los
   usuarios que comparten la empresa. Reusa
   la identidad del panel (navy, azul, soft)
   y mantiene el texto legible: fondo de
   color -> texto blanco.
   ========================================== */

/* Contador "2/5" a la derecha del título */
.contador-usuarios {
    display: inline-block;
    background: var(--secopio-soft);
    color: var(--secopio-blue);
    border: 1px solid #cfe6f2;
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* Acciones de cada fila de la tabla */
.acciones-usuario {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.acciones-usuario form {
    margin: 0;
    display: flex;
}

.acciones-usuario button {
    border: none;
    border-radius: 10px;
    padding: 8px 14px;
    min-height: 38px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .18s, box-shadow .18s, background .18s;
}

.acciones-usuario button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 13px rgba(6,43,89,.18);
}

/* Dar / quitar panel de empresa (solo super admin) */
.acciones-usuario .btn-panel { background: #2563eb; }
.acciones-usuario .btn-panel:hover { background: #1d4ed8; }

/* Texto informativo (tu cuenta / administrativo) */
.acciones-usuario .sin-elementos {
    color: #64748b;
    font-size: 13px;
    font-style: italic;
}

/* Formulario de alta de usuario */
.formulario-usuario {
    margin-top: 22px;
    padding: 20px 22px;
    background: var(--secopio-soft);
    border-left: 4px solid var(--secopio-blue);
    border-radius: 12px;
}

.formulario-usuario h3 {
    margin: 0 0 4px;
    color: var(--secopio-navy);
    font-size: 16px;
}

.formulario-usuario .ayuda {
    margin: 0 0 16px;
    color: #6b7280;
    font-size: 13px;
}

.formulario-usuario .campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    align-items: end;
    max-width: 900px;
}

.formulario-usuario label {
    display: block;
    margin-bottom: 6px;
    color: var(--secopio-ink);
    font-size: 13px;
    font-weight: 700;
}

.formulario-usuario input,
.formulario-usuario select {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #c9dce8;
    border-radius: 10px;
    background: #fff;
    color: var(--secopio-ink);
    font-size: 14px;
}

.formulario-usuario input:focus,
.formulario-usuario select:focus {
    border-color: var(--secopio-blue);
    box-shadow: 0 0 0 4px rgba(7,135,201,.12);
}

.formulario-usuario button {
    min-height: 44px;
    padding: 11px 20px;
    border: none;
    border-radius: 10px;
    background: var(--secopio-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .18s, box-shadow .18s, background .18s;
}

.formulario-usuario button:hover {
    background: #066fa5;
    transform: translateY(-2px);
    box-shadow: 0 7px 15px rgba(6,43,89,.18);
}

/* Aviso de límite de usuarios (aviso = azul suave, no error) */
.aviso-usuarios {
    margin: 20px 0 0;
    padding: 13px 16px;
    background: #eff6ff;
    color: #1e3a8a;
    border-left: 4px solid #2563eb;
    border-radius: 10px;
    font-size: 14px;
}

/* Select de vigencia junto a Activar/Bloquear */
.acciones-cuenta form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

.acciones-cuenta select {
    padding: 11px 13px;
    border: 1px solid #c9dce8;
    border-radius: 10px;
    background: #fff;
    color: var(--secopio-ink);
    font-size: 14px;
}

/* ==================================
     PAGINAS DE ERROR (403, 404, 419, 500)
     Antes se veia la pantalla cruda de Laravel/Spatie en ingles.
     ================================== */

.pagina-error {
    max-width: 560px;
    margin: 60px auto;
    padding: 40px 35px;
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: 12px;
    text-align: center;
}

.pagina-error .error-codigo {
    margin: 0 0 6px;
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    color: var(--azul);
    letter-spacing: -1px;
}

.pagina-error h1 {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 700;
    color: var(--azul);
}

.pagina-error .error-texto {
    margin: 0 0 26px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--gris-texto);
}

.pagina-error .error-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.pagina-error .error-acciones a,
.pagina-error .error-acciones button {
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--azul);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.pagina-error .error-acciones .btn-activar {
    background: var(--azul);
    color: var(--blanco);
}

.pagina-error .error-acciones .btn-activar:hover {
    background: var(--azul-claro);
    border-color: var(--azul-claro);
}

.pagina-error .error-acciones .btn-secundario {
    background: var(--blanco);
    color: var(--azul);
}

.pagina-error .error-acciones .btn-secundario:hover {
    background: var(--gris-fondo);
}

@media (max-width: 560px) {
    .pagina-error {
        margin: 24px 16px;
        padding: 32px 22px;
    }
}
/* ==================================
     AVISOS DE REDIRECCION (flash)
     partials/flash.blade.php, incluido en layouts/secopio
     ================================== */

.mensaje-flash {
    max-width: 1100px;
    margin: 18px auto;
    padding: 13px 18px;
    font-size: 15px;
    border-radius: 8px;
    border: 1px solid var(--gris-borde);
    background: var(--blanco);
    color: var(--gris-texto);
}

.mensaje-flash-ok {
    border-left: 5px solid var(--azul);
    color: var(--azul);
}

.mensaje-flash-error {
    border-left: 5px solid var(--rojo);
    color: var(--rojo);
}

/* Cargador SECOPIO para navegaciones, envíos y redirecciones. */
.secopio-cargador {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(238, 247, 251, .78);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, visibility 0s linear .35s;
}

.secopio-cargador.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.secopio-cargador-tarjeta {
    display: flex;
    width: min(360px, 92vw);
    align-items: center;
    gap: 6px;
    padding: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
    flex-direction: column;
}

.secopio-cargador-emblema {
    position: relative;
    display: grid;
    width: min(620px, 96vw);
    height: min(490px, 74vw);
    place-items: center;
    background: transparent;
    isolation: isolate;
}

.secopio-cargador-aro {
    display: none;
}

.secopio-cargador-video {
    position: relative;
    z-index: 1;
    display: block;
    pointer-events: none;
    width: min(620px, 96vw);
    height: min(490px, 74vw);
    object-fit: contain;
    object-position: center;
    background: transparent;
}

.secopio-cargador-titulo {
    color: var(--secopio-navy);
    font-size: 18px;
    letter-spacing: .12em;
}

.secopio-cargador-texto {
    color: #6680a6;
    font-size: 13px;
}

.secopio-cargador-actividad {
    display: flex;
    gap: 5px;
    margin-top: 7px;
}

.secopio-cargador-actividad i {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secopio-teal);
    animation: secopio-cargador-pulso 1s ease-in-out infinite;
}

.secopio-cargador-actividad i:nth-child(2) { animation-delay: .15s; background: var(--secopio-blue); }
.secopio-cargador-actividad i:nth-child(3) { animation-delay: .3s; background: var(--secopio-green); }

@keyframes secopio-cargador-girar { to { transform: rotate(360deg); } }
@keyframes secopio-cargador-pulso { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-3px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .secopio-cargador, .secopio-cargador-aro, .secopio-cargador-actividad i { animation: none; transition: none; }
}

@media (max-width: 560px) {
    .mensaje-flash {
        margin: 12px 16px;
    }
}

/* ==========================================
   BOTÓN "VOLVER"
   (2026-09-30, pedido del dueño)
   Salidas de las pantallas profundas: el
   detalle del cliente y la configuración de
   filtros. Antes solo existía el botón del
   pie de página, que en el detalle del
   cliente había que recorrer con scroll
   entero para verlo. Ahora va arriba.

   Son dos contextos distintos a propósito:
     - .volver-header: va sobre el fondo con
       degradado navy del encabezado del
       panel, así que es blanco translúcido.
     - .cfg-volver: va sobre fondo claro
       (está en configurar-filtros.css).

   Ambos discretos: no compiten con la
   acción principal de la página.
   ========================================== */

.volver-header {
    position: absolute;
    top: 22px;
    right: clamp(24px, 4vw, 46px);
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 9px 17px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;

    transition: background .18s, border-color .18s, transform .18s;
}

.volver-header:hover,
.volver-header:focus-visible {
    background: rgba(255, 255, 255, .24);
    border-color: rgba(255, 255, 255, .75);
    transform: translateY(-1px);
}

.volver-header:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .55);
    outline-offset: 2px;
}

/* En pantallas angostas el encabezado se estrecha y el botón se cruzaba con
   el logo, así que pasa a ocupar su propia línea arriba del contenido. */
@media (max-width: 700px) {
    .volver-header {
        position: static;
        margin-bottom: 16px;
        display: inline-flex;
    }
}
/* Panel administrativo: estructura visual del nuevo diseño */
.admin-shell {
    display: grid;
    grid-template-columns: 292px minmax(0, 1fr);
    min-height: 100vh;
    padding: 0;
    max-width: none;
    margin: 0;
    background: #eef8fc;
}
.admin-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 38px 20px 28px;
    color: #fff;
    background: linear-gradient(160deg, #063665 0%, #075d9a 62%, #078ac4 100%);
}
.admin-brand { display: block; padding: 0 18px 48px; }
.admin-brand img { display: block; width: 205px; max-width: 100%; height: auto; }
.admin-nav { display: grid; gap: 12px; }
.admin-nav a {
    display: flex;
    align-items: center;
    gap: 17px;
    min-height: 62px;
    padding: 0 22px;
    color: #fff;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s, transform .18s;
}
.admin-nav a:hover, .admin-nav a.activo { background: linear-gradient(100deg, #0879c9, #09bda9); transform: translateX(2px); }
.admin-nav a span { width: 25px; text-align: center; font-size: 25px; }
.admin-nav .nav-icono { display: grid; place-items: center; }
.admin-nav .nav-icono svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.admin-sidebar-footer { margin-top: auto; padding: 22px 20px 0; border-top: 1px solid rgba(255,255,255,.35); color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.7; }
.admin-workspace { min-width: 0; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 86px; padding: 16px clamp(24px, 4vw, 48px); background: rgba(255,255,255,.88); border-bottom: 1px solid #dcecf3; }
.admin-topbar-title, .admin-user { display: flex; align-items: center; gap: 14px; color: var(--secopio-navy); }
.admin-topbar-title strong, .admin-user strong { display: block; font-size: 18px; }
.admin-topbar-title small, .admin-user small { display: block; margin-top: 3px; color: #6a83a9; font-size: 13px; }
.admin-menu-icon { font-size: 27px; line-height: 1; }
.admin-menu-icon { cursor: pointer; user-select: none; transition: transform .25s ease, color .2s ease; }
.admin-menu-icon:hover { color: var(--secopio-blue); transform: scale(1.08); }
.admin-shell { transition: grid-template-columns .35s ease; }
.admin-sidebar { overflow: hidden; transition: transform .35s ease, opacity .25s ease, padding .35s ease; }
.admin-shell.sidebar-colapsada { grid-template-columns: 0 minmax(0, 1fr); }
.admin-shell.sidebar-colapsada .admin-sidebar { min-width: 0; padding-left: 0; padding-right: 0; opacity: 0; transform: translateX(-24px); pointer-events: none; }
.admin-shell.sidebar-colapsada .admin-workspace { width: 100%; }
.admin-shell.sidebar-colapsada .admin-menu-icon { transform: rotate(180deg); }
.admin-avatar { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 50%; color: #fff; background: var(--secopio-navy); font-weight: 700; }
.admin-user > span:last-child { font-size: 22px; }
.admin-workspace > .admin-header, .admin-workspace > .admin-resumen, .admin-workspace > .admin-clientes, .admin-workspace > .admin-footer { margin-left: clamp(26px, 3vw, 42px); margin-right: clamp(26px, 3vw, 42px); }
.admin-workspace > .admin-header { margin-top: 28px; }
.admin-workspace > .admin-resumen { margin-top: 22px; }
.admin-workspace > .admin-clientes { margin-top: 22px; }
.admin-workspace > .admin-footer { margin-bottom: 28px; }
@media (max-width: 850px) {
    .admin-shell { grid-template-columns: 82px minmax(0, 1fr); }
    .admin-sidebar { padding: 25px 10px; }
    .admin-brand { padding: 0 7px 38px; }
    .admin-brand img { width: 62px; object-fit: cover; object-position: left; }
    .admin-nav a { justify-content: center; padding: 0; font-size: 0; }
    .admin-nav a span { font-size: 24px; }
    .admin-sidebar-footer { padding: 20px 4px 0; text-align: center; font-size: 10px; }
    .admin-sidebar-footer small { display: none; }
}
@media (max-width: 560px) {
    .admin-topbar { align-items: flex-start; padding: 14px 18px; }
    .admin-user div, .admin-user > span:last-child { display: none; }
    .admin-topbar-title strong { font-size: 15px; }
    .admin-topbar-title small { font-size: 11px; }
    .admin-workspace > .admin-header, .admin-workspace > .admin-resumen, .admin-workspace > .admin-clientes, .admin-workspace > .admin-footer { margin-left: 14px; margin-right: 14px; }
}

.admin-detail-shell > .detalle-usuarios,
.admin-detail-shell > .detalle-filtros,
.admin-detail-shell > .detalle-usuarios + section { margin-top: 22px; }
.admin-detail-shell .detalle-cliente .clientes-header,
.admin-detail-shell .detalle-usuarios .clientes-header,
.admin-detail-shell .detalle-filtros .clientes-header { align-items: center; }
.admin-detail-shell .dato-cliente { background: #fff; border-color: #d9eaf4; box-shadow: 0 5px 18px rgba(6,43,89,.04); }
.admin-detail-shell .dato-cliente:hover { border-color: #8ed2ed; box-shadow: 0 8px 22px rgba(6,43,89,.08); }
.admin-detail-shell .detalle-cliente,
.admin-detail-shell .detalle-usuarios,
.admin-detail-shell .detalle-filtros { background: rgba(255,255,255,.94); }
@media (max-width: 560px) {
    .admin-detail-shell .detalle-cliente,
    .admin-detail-shell .detalle-usuarios,
    .admin-detail-shell .detalle-filtros { padding: 16px; }
}
.admin-shell > .admin-workspace > .admin-header .logo-header { display: none; }
.detalle-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 22px clamp(26px, 3vw, 42px) 0;
    padding: 8px;
    background: rgba(255,255,255,.92);
    border: 1px solid #d9eaf4;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(6,43,89,.05);
    position: sticky;
    top: 0;
    z-index: 5;
}
.detalle-nav a {
    padding: 10px 15px;
    color: var(--secopio-navy);
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.detalle-nav a:hover, .detalle-nav a.activo { color: #fff; background: var(--secopio-blue); }
.admin-detail-shell [id] { scroll-margin-top: 105px; }
@media (max-width: 560px) {
    .detalle-nav { margin-left: 14px; margin-right: 14px; overflow-x: auto; flex-wrap: nowrap; }
    .detalle-nav a { white-space: nowrap; }
}
.admin-shell {
    width: 100%;
    overflow-x: hidden;
}
.admin-shell .tabla-contenedor {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.admin-shell .tabla-contenedor table {
    min-width: 760px;
}
.admin-detail-shell .datos-cliente {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.admin-detail-shell .dato-cliente {
    min-height: 112px;
    padding: 18px 17px;
    border-left-width: 4px;
    border-radius: 13px;
}
.admin-detail-shell .dato-cliente > span:first-child {
    margin-bottom: 10px;
}
.admin-detail-shell .detalle-cliente .acciones-cuenta {
    grid-column: 1 / -1;
    order: -1;
    min-height: 0;
    padding: 0 0 4px;
    border: 0;
    box-shadow: none;
}
.admin-detail-shell .detalle-cliente .acciones-cuenta form {
    display: flex;
    align-items: center;
    gap: 10px;
}
.admin-detail-shell .detalle-cliente .clientes-header {
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid #dcecf3;
}
.admin-detail-shell .detalle-cliente .clientes-header h2 {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--secopio-navy);
    font-size: 25px;
    letter-spacing: 0;
    text-transform: none;
}
.admin-detail-shell .detalle-cliente .clientes-header h2::before {
    content: "⌂";
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: var(--secopio-blue);
    background: #e5f5fc;
    border-radius: 14px;
    font-size: 29px;
}
.admin-detail-shell .detalle-usuarios,
.admin-detail-shell .detalle-filtros {
    border: 1px solid #dcecf3;
    box-shadow: 0 10px 26px rgba(6,43,89,.07);
}
.admin-detail-shell .detalle-usuarios .clientes-header h2,
.admin-detail-shell .detalle-filtros > h2 {
    color: var(--secopio-navy);
}
.admin-detail-shell .contador-usuarios {
    padding: 8px 14px;
    color: var(--secopio-blue);
    background: #e9f6fc;
    border: 1px solid #bfe3f2;
    border-radius: 999px;
    font-weight: 700;
}
.admin-detail-shell .detalle-usuarios .tabla-contenedor {
    margin-top: 4px;
}
.admin-detail-shell .detalle-filtros {
    padding: 28px;
}
.admin-detail-shell .detalle-filtros > h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 17px;
    margin-bottom: 22px;
    border-bottom: 1px solid #dcecf3;
    font-size: 20px;
    letter-spacing: 0;
    text-transform: none;
}
.admin-detail-shell .detalle-filtros > h2::before {
    content: "";
    width: 6px;
    height: 28px;
    background: linear-gradient(#087fba, #09bda9);
    border-radius: 6px;
}
.admin-detail-shell .detalle-filtros .tarjeta-filtro,
.admin-detail-shell .detalle-filtros .grupo-filtro {
    border-color: #d9eaf4;
    border-radius: 12px;
}
@media (max-width: 560px) {
    .admin-shell .tabla-contenedor table { min-width: 700px; }
    .admin-shell .admin-header h1 { font-size: 25px; }
    .admin-shell .admin-header p { max-width: 30ch; }
}
@media (max-width: 1050px) {
    .admin-detail-shell .datos-cliente { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Correccion final del layout exclusivo del detalle */
.admin-detail-shell {
    grid-template-columns: minmax(0, 1fr);
}
.admin-detail-shell > .admin-sidebar {
    display: none;
}
.admin-detail-shell .admin-workspace {
    width: 100%;
    min-width: 0;
}
.admin-detail-shell .detalle-nav {
    top: 150px;
    padding: 24px 14px;
    border: 3px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(160deg, #087fba, #09bda9) border-box;
}
.admin-detail-shell .detalle-nav a,
.admin-detail-shell .detalle-nav a.activo,
.admin-detail-shell .detalle-nav a:hover {
    color: var(--secopio-navy);
    background: #fff;
    border-color: #d9eaf4;
}
.admin-detail-shell .detalle-nav a.activo {
    border-left: 4px solid #087fba;
    box-shadow: inset 0 0 0 1px #bfe3f2;
}
.admin-detail-shell .detalle-nav a:hover {
    border-color: #09bda9;
    background: #f1fbfc;
}
.admin-detail-shell .detalle-nav {
    border: 0;
    background: linear-gradient(160deg, #063665 0%, #087fba 68%, #28b879 100%);
    box-shadow: 0 14px 28px rgba(6,43,89,.18);
}
.admin-detail-shell .detalle-nav::before {
    color: #fff;
}
.admin-detail-shell .detalle-nav a,
.admin-detail-shell .detalle-nav a.activo,
.admin-detail-shell .detalle-nav a:hover {
    color: var(--secopio-navy);
    background: rgba(255,255,255,.96);
    border-color: rgba(255,255,255,.7);
}
.admin-detail-shell .detalle-nav a.activo {
    border-left-color: #09bda9;
    box-shadow: inset 0 0 0 2px rgba(9,189,169,.35);
}
.admin-detail-shell .detalle-nav {
    width: 320px;
    padding: 24px 14px;
    border: 1px solid #d9eaf4;
    background: #fff;
    box-shadow: 0 12px 26px rgba(6,43,89,.10);
}
.admin-detail-shell .detalle-nav::before {
    color: var(--secopio-navy);
}
.admin-detail-shell .detalle-nav a,
.admin-detail-shell .detalle-nav a:hover {
    color: var(--secopio-navy);
    background: #fff;
    border-color: #d9eaf4;
    box-shadow: none;
}
.admin-detail-shell .detalle-nav a.activo {
    color: #fff;
    background: linear-gradient(100deg, #087fba, #09bda9);
    border-color: transparent;
    box-shadow: 0 6px 14px rgba(7,127,201,.18);
}
@media (max-width: 850px) {
    .admin-detail-shell .detalle-nav { width: auto; }
}
.admin-detail-logo {
    display: block;
    width: 154px;
    height: auto;
    object-fit: contain;
}
.admin-detail-shell .admin-topbar {
    min-height: 122px;
    padding: 20px clamp(24px, 4vw, 48px);
    color: #fff;
    background: linear-gradient(115deg, #063665, #087fba 68%, #28b879);
    border-bottom: 0;
    box-shadow: 0 12px 28px rgba(6,43,89,.15);
}
.admin-detail-shell .admin-topbar-title { color: #fff; }
.admin-detail-shell .admin-topbar-title strong,
.admin-detail-shell .admin-user strong { color: #fff; }
.admin-detail-shell .admin-topbar-title small,
.admin-detail-shell .admin-user small { color: rgba(255,255,255,.82); }
.admin-detail-shell .admin-menu-icon { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.55); }
.admin-detail-shell .admin-avatar { background: #063665; border: 2px solid #43d9bf; }
.admin-detail-shell .admin-user > span:last-child { color: #fff; }
@media (max-width: 700px) {
    .admin-detail-logo { width: 122px; }
}
@media (max-width: 850px) {
    .admin-detail-shell .detalle-nav { top: auto; }
}