/* Estilos del panel "Administración de usuarios internos".
   Hereda variables/paleta oscura de panel.css (body.panel-hsj). */

.admin-usuarios main { max-width: 1000px; }

.au-tabla-wrap {
    background: var(--hsj-bg-soft, #1a1d23);
    border: 1px solid var(--hsj-border, #2a2e36);
    border-radius: 14px;
    overflow: auto;
}

/* Bootstrap 5.3 pinta cada celda con `.table > :not(caption) > * > *`, que le gana por
   especificidad al `color` puesto sobre la tabla: sin redefinir sus variables, el nick y el
   nombre salen en #212529 (texto oscuro) sobre el fondo oscuro y no se leen. */
.au-tabla {
    --bs-table-color: var(--hsj-text, #e9ecef);
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(255, 255, 255, .06);
    --bs-table-striped-color: var(--hsj-text, #e9ecef);
    --bs-table-active-color: #fff;
    --bs-table-hover-color: #fff;
    --bs-table-hover-bg: rgba(255, 255, 255, .03);
    color: var(--hsj-text, #e9ecef);
    margin: 0;
}
.au-tabla thead th {
    color: #9aa0a6;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .3px;
    border-bottom: 1px solid var(--hsj-border, #2a2e36);
    background: transparent;
    white-space: nowrap;
}
.au-tabla tbody td {
    border-color: rgba(255,255,255,.06);
    background: transparent;
    vertical-align: middle;
}
.au-tabla tbody tr:hover td { background: rgba(255,255,255,.03); }

.au-avatar-cell {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; background: #2a2e36;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff; font-size: .9rem;
}
.au-avatar-cell.ph { background: linear-gradient(135deg,#6c4bd1,#3a2c66); }

.au-nick { font-weight: 600; }
.au-nombre-sub { color: #9aa0a6; font-size: .82rem; }

.au-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.au-chip {
    font-size: .72rem; padding: 2px 8px; border-radius: 999px;
    background: rgba(255,255,255,.07); color: #cfd3d8; white-space: nowrap;
}
.au-chip[data-m="distribuidora"] { background: rgba(243,156,18,.18); color: #f6b545; }
.au-chip[data-m="cerrajeria"]    { background: rgba(142,68,173,.22); color: #c08be0; }
.au-chip[data-m="reparto"]       { background: rgba(22,160,133,.2);  color: #4fd1b5; }
.au-chip[data-m="web"]           { background: rgba(231,76,60,.18);  color: #ef8378; }
.au-chip[data-m="presupuestos"]  { background: rgba(41,128,185,.2);  color: #6bb2e6; }
.au-chip[data-m="admin_usuarios"]{ background: rgba(245,166,35,.22); color: #f5c451; }

/* Modal */
.admin-usuarios .modal-content { background: var(--hsj-bg-soft, #1a1d23); color: var(--hsj-text, #e9ecef); border: 1px solid var(--hsj-border, #2a2e36); }
.admin-usuarios .modal-header, .admin-usuarios .modal-footer { border-color: var(--hsj-border, #2a2e36); }
.admin-usuarios .form-control, .admin-usuarios .form-select {
    background: #12151a; color: #e9ecef; border-color: #2a2e36;
}
.admin-usuarios .form-control:focus, .admin-usuarios .form-select:focus {
    background: #12151a; color: #fff; border-color: #6c4bd1; box-shadow: 0 0 0 .2rem rgba(108,75,209,.25);
}
.admin-usuarios .form-text, .admin-usuarios .text-muted { color: #9aa0a6 !important; }

/* Bootstrap deja el placeholder en gris oscuro (--bs-secondary-color): ilegible acá. */
.admin-usuarios .form-control::placeholder { color: #7c828a; opacity: 1; }

/* Lista desplegable de los selects: sin esto el sistema la dibuja con texto negro. */
.admin-usuarios .form-select option { background: #12151a; color: #e9ecef; }

/* Flecha del select y "X" de cerrar del modal: los SVG de Bootstrap son negros.
   Fijamos también repeat/position/size para no depender de Bootstrap: si solo se
   pisa background-image, un fondo cacheado sin no-repeat dibuja el chevron en mosaico
   (se veían muchas flechitas repetidas). */
.admin-usuarios .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e9ecef' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}
.admin-usuarios .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* El buscador es un input[type=search]: el icono de limpiar también viene negro. */
.admin-usuarios input[type="search"]::-webkit-search-cancel-button { filter: invert(1); }

.au-avatar-wrap { display: inline-block; }
.au-avatar-preview {
    width: 130px; height: 130px; border-radius: 50%;
    object-fit: cover; background: #12151a; border: 2px solid #2a2e36;
}

.au-acceso {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05);
}
.au-acceso:last-child { border-bottom: 0; }
.au-acceso .au-tipo { max-width: 200px; }
.au-acceso .au-tipo[hidden] { display: none; }
.au-acceso--admin .form-check-label { font-weight: 600; }

.au-feedback { font-size: .88rem; min-height: 1.2em; }
.au-feedback.ok  { color: #4fd1b5; }
.au-feedback.err { color: #ef8378; }

.au-btn-icon {
    background: transparent; border: 1px solid #2a2e36; color: #cfd3d8;
    border-radius: 8px; width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
}
.au-btn-icon:hover { background: rgba(255,255,255,.08); color: #fff; }
.au-btn-icon.danger:hover { background: rgba(231,76,60,.15); color: #ef8378; border-color: rgba(231,76,60,.4); }