:root {
    --bg: #0e0f11;
    --panel: #141417;
    --panel-2: #1b1d22;
    --text: #eaeaea;
    --muted: #a6b0bd;
    --primary: #000; /* negro sólido para botones inline */
    --danger: #DC3545; /* focus */
}

html, body {
    background: var(--bg);
    color: var(--text);
}

a {
    color: #ff6b6b;
}

.wrap {
    max-width: 1100px;
    margin: 10px auto 30px;
    background: var(--panel);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 6px 16px 10px rgba(0,0,0,.25);
}

    .wrap h1 {
        color: #fff;
        border-bottom: 2px solid #2a2f39;
        padding-bottom: 10px;
        margin: 0 auto;
    }

.card {
    background: var(--panel);
    color: var(--text);
    border: 1px solid #22262e;
}

    .card .card-header {
        background: #000;
        color: #fff;
        border-bottom: 1px solid #22262e;
    }

.form-control, .form-select, .form-check-input {
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid #2a2f39;
}

    .form-control::placeholder {
        color: #6c7685;
    }

    .form-control:focus, .form-select:focus {
        background: var(--panel-2);
        color: var(--text);
        border-color: var(--danger);
        box-shadow: none;
    }

/* Tables */
.table {
    color: var(--text);
}

    .table thead th {
        background: #000;
        color: #fff;
        border-color: #2a2f39;
    }

    .table tbody td {
        border-color: #2a2f39;
    }

/* DataTables UI in dark + Spanish inputs */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: var(--text);
}

    .dataTables_wrapper .dataTables_length select,
    .dataTables_wrapper .dataTables_filter input {
        background: var(--panel-2) !important;
        color: var(--text) !important;
        border: 1px solid #2a2f39 !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        color: var(--text) !important;
        border: 1px solid #2a2f39 !important;
        background: var(--panel-2) !important;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: #000 !important;
            color: #fff !important;
            border-color: #333 !important;
        }

/* Inline action buttons exactly like PHP: black solid and separated */
.btn-acciones {
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

    .btn-acciones:hover {
        background: #1a1a1a !important;
    }

    .btn-acciones:focus {
        background: #DC3545 !important;
        border-color: #DC3545 !important;
    }

/* Generic buttons & focus */
.btn {
    border-radius: .5rem;
}

.btn:focus, .btn:focus-visible, .btn:active:focus {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.35) !important;
    color: #fff !important;
}

/* Botones totalmente cuadrados en todo el sitio */
.btn,
.btn-sm,
.btn-lg,
.btn-group .btn,
.btn-acciones,
.btn-form,
.page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 0 !important;
}

/* Quitar redondeo especial de la paginación (primero/último) */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Quitar borde/halo azul en la paginación */
.pagination .page-link:focus,
.pagination .page-link:focus-visible,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Tu activo se mantiene en rojo */
.pagination .page-item.active .page-link {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

/* === View Toggle (Galería / Detalle) – quitar focus ring === */
.view-toggle .btn:focus,
.view-toggle .btn:focus-visible,
.view-toggle .btn:active:focus,
.view-toggle .btn.active:focus,
.view-toggle .btn.active:focus-visible,
.view-toggle .btn.active:active:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* === Focus ring reset global para Admin === */
.wrap .btn:focus,
.wrap .btn:focus-visible,
.wrap .btn:active:focus,
.dataTables_wrapper .paginate_button:focus,
.pagination .page-link:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Por si se usan nuestras clases personalizadas en Admin */
.wrap .btn-agregar:focus,
.wrap .btn-edicion:focus,
.wrap .btn-acciones:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* === Ancho unificado de contenedores de páginas === */
:root {
    --page-max: 1440px;
    --page-gutter-x: 12px;
}

/* Productos usa .container-wide; los admins usan .wrap.
   Ambos quedan iguales en ancho y centrados */
.container-wide,
.wrap {
    max-width: var(--page-max) !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--page-gutter-x) !important;
    padding-right: var(--page-gutter-x) !important;
}

/* === DataTables: Mostrar y Buscar en blanco/negro === */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: #000 !important; /* texto de las etiquetas */
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background: #fff !important; /* fondo blanco */
    color: #000 !important; /* texto negro */
    border: 1px solid #ced4da !important; /* borde claro */
    border-radius: 0 !important; /* esquinas cuadradas */
    box-shadow: none !important; /* sin glow */
}

/* Placeholders más legibles */
.dataTables_wrapper .dataTables_filter input::placeholder {
    color: #6c757d !important;
}

/* En foco: sin sombra y con borde rojo como el resto del tema */
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: black !important;
}

/* Admin (dentro de .wrap): inputs con borde NEGRO al enfoque */
.wrap .form-control:focus,
.wrap .form-select:focus,
.wrap textarea.form-control:focus,
.wrap input.form-control:focus,
.wrap .form-control[type="file"]:focus {
    border-color: #000 !important;
    box-shadow: none !important;
}

/* === Formularios de Admin: borde negro al foco, sin focus ring ni doble borde === */
.wrap .form-control,
.wrap .form-select {
    border: 1px solid #ced4da !important; /* base gris, como siempre */
}

/* Quita ring/outline y usa SOLO el mismo borde, en negro, al enfocar */
.wrap .form-control:focus,
.wrap .form-select:focus,
.wrap textarea.form-control:focus,
.wrap input.form-control:focus,
.wrap .form-control[type="file"]:focus,
.wrap .form-control:focus-visible,
.wrap .form-select:focus-visible {
    /* desactiva cualquier anejo de Bootstrap/navegador */
    outline: none !important;
    box-shadow: none !important;
    /* fuerza borde negro en focus */
    border-color: #000 !important;
    /* anula variables de BS 5 para el glow del foco */
    --bs-focus-ring-color: transparent;
    --bs-form-control-focus-border-color: #000;
    --bs-form-control-focus-box-shadow: transparent;
    --bs-form-select-focus-border-color: #000;
    --bs-form-select-focus-box-shadow: transparent;
}