/* ===================================================================
   ALQUILO.MX — Admin Custom CSS  v5
   Tabla como tarjeta separada del fondo + badges de estatus premium
   =================================================================== */

/* ── Logo en sidebar ── */
#header .logo img,
.unfold-logo img,
.sidebar-logo img {
    max-height: 50px !important;
    width: auto !important;
    margin: 10px 0;
}

.sidebar-nav-container .sidebar-logo {
    padding-top: 15px;
    padding-bottom: 15px;
}

/* ===================================================================
   FONDO DE PÁGINA — Oscurecer el fondo para que la tabla destaque
   =================================================================== */

/* Modo claro: fondo gris ceniza para que la tabla blanca resalte */
#main,
.main,
[role="main"],
#content,
.content-main {
    background-color: #f1f5f9 !important;
    /* slate-100 */
}

/* Modo oscuro: fondo más oscuro */
.dark #main,
.dark .main,
.dark [role="main"],
.dark #content,
.dark .content-main {
    background-color: #0d1117 !important;
}

/* ===================================================================
   TABLA — Aspecto de tarjeta elevada, separada del fondo
   =================================================================== */

/* Contenedor de resultados del changelist */
#result_list,
#changelist-form,
.results,
div[class*="results"],
.unfold-table-container {
    background-color: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}

.dark #result_list,
.dark #changelist-form,
.dark .results,
.dark div[class*="results"],
.dark .unfold-table-container {
    background-color: #1e2533 !important;
    border-color: #2d3748 !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.20) !important;
}

/* La tabla en sí — fondo propio limpio */
#result_list,
table.results,
.unfold-table,
table[class*="table"] {
    background-color: #ffffff !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

.dark #result_list,
.dark table.results,
.dark .unfold-table,
.dark table[class*="table"] {
    background-color: #1e2533 !important;
}

/* Cabecera de la tabla — fondo gris muy suave que contrasta con las filas */
#result_list thead th,
table.results thead th,
.unfold-table thead th,
thead tr th {
    background-color: #f8fafc !important;
    /* slate-50 */
    color: #475569 !important;
    /* slate-600 */
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    white-space: nowrap;
}

.dark #result_list thead th,
.dark table.results thead th,
.dark .unfold-table thead th,
.dark thead tr th {
    background-color: #161d2a !important;
    color: #94a3b8 !important;
    border-bottom-color: #2d3748 !important;
}

/* Filas — alternar sutil para legibilidad */
#result_list tbody tr,
table.results tbody tr,
.unfold-table tbody tr {
    background-color: #ffffff !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#result_list tbody tr:nth-child(even),
table.results tbody tr:nth-child(even),
.unfold-table tbody tr:nth-child(even) {
    background-color: #f1f5f9 !important;
    /* Más contraste que #fafbfc */
}

.dark #result_list tbody tr,
.dark table.results tbody tr,
.dark .unfold-table tbody tr {
    background-color: #1e2533 !important;
}

.dark #result_list tbody tr:nth-child(even),
.dark table.results tbody tr:nth-child(even),
.dark .unfold-table tbody tr:nth-child(even) {
    background-color: #2a3547 !important;
    /* Más contraste en dark mode */
}

/* Celdas — separadores internos sutiles */
#result_list tbody td,
table.results tbody td,
.unfold-table tbody td {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    color: #1e293b !important;
    font-size: 13.5px !important;
    vertical-align: middle !important;
}

.dark #result_list tbody td,
.dark table.results tbody td,
.dark .unfold-table tbody td {
    border-bottom-color: #2a3547 !important;
    color: #cbd5e1 !important;
}

/* Última fila: sin borde inferior */
#result_list tbody tr:last-child td,
table.results tbody tr:last-child td,
.unfold-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* ── HOVER de filas — efecto premium ── */
#result_list tbody tr:hover td,
table.results tbody tr:hover td,
.unfold-table tbody tr:hover td {
    background-color: #eff6ff !important;
    /* blue-50 */
    cursor: pointer;
}

.dark #result_list tbody tr:hover td,
.dark table.results tbody tr:hover td,
.dark .unfold-table tbody tr:hover td {
    background-color: rgba(79, 70, 229, 0.10) !important;
}

/* ===================================================================
   INDICADOR DE ESTATUS — Raya de color a la izquierda de la fila
   =================================================================== */
tr[data-estatus="COT"]>td:first-child {
    border-left: 4px solid #f59e0b !important;
}

tr[data-estatus="RES"]>td:first-child {
    border-left: 4px solid #3b82f6 !important;
}

tr[data-estatus="ENT"]>td:first-child {
    border-left: 4px solid #8b5cf6 !important;
}

tr[data-estatus="FIN"]>td:first-child {
    border-left: 4px solid #10b981 !important;
}

tr[data-estatus="CAN"]>td:first-child {
    border-left: 4px solid #6b7280 !important;
}

/* ── Fila SELECCIONADA — contraste alto ── */
tr.selected td,
.unfold-table tr.selected td {
    background-color: rgba(79, 70, 229, 0.09) !important;
}

tr.selected td:first-child,
.unfold-table tr.selected td:first-child {
    border-left: 4px solid rgb(79, 70, 229) !important;
}

.dark tr.selected td,
.dark .unfold-table tr.selected td {
    background-color: rgba(99, 102, 241, 0.18) !important;
}

.dark tr.selected td:first-child,
.dark .unfold-table tr.selected td:first-child {
    border-left: 4px solid rgb(129, 140, 248) !important;
}

/* ===================================================================
   BADGES DE ESTATUS
   =================================================================== */
.estatus-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 8px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.6;
    white-space: nowrap;
    border: 1.5px solid transparent;
}

/* COT — Amarillo ámbar */
.estatus-COT {
    background-color: rgba(245, 158, 11, .13);
    color: #92400e;
    border-color: #fcd34d;
}

.dark .estatus-COT {
    background-color: rgba(245, 158, 11, .22);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, .5);
}

/* RES — Azul */
.estatus-RES {
    background-color: rgba(59, 130, 246, .12);
    color: #1e40af;
    border-color: #93c5fd;
}

.dark .estatus-RES {
    background-color: rgba(59, 130, 246, .22);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, .5);
}

/* ENT — Violeta */
.estatus-ENT {
    background-color: rgba(139, 92, 246, .12);
    color: #5b21b6;
    border-color: #c4b5fd;
}

.dark .estatus-ENT {
    background-color: rgba(139, 92, 246, .22);
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, .5);
}

/* FIN — Verde */
.estatus-FIN {
    background-color: rgba(16, 185, 129, .12);
    color: #065f46;
    border-color: #6ee7b7;
}

.dark .estatus-FIN {
    background-color: rgba(16, 185, 129, .22);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, .5);
}

/* CAN — Gris */
.estatus-CAN {
    background-color: rgba(107, 114, 128, .10);
    color: #374151;
    border-color: #d1d5db;
}

.dark .estatus-CAN {
    background-color: rgba(107, 114, 128, .20);
    color: #9ca3af;
    border-color: rgba(107, 114, 128, .4);
}

/* ===================================================================
   CHECKBOXES
   =================================================================== */
input[type="checkbox"]:checked {
    background-color: rgb(79, 70, 229) !important;
    border-color: rgb(67, 56, 202) !important;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.35) !important;
}

/* ===================================================================
   INPUTS ENFOCADOS
   =================================================================== */
input:focus,
select:focus,
textarea:focus {
    border-color: rgb(79, 70, 229) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.18) !important;
    outline: none !important;
}

/* ===================================================================
   BOTONES PRIMARIOS
   =================================================================== */
.unfold-button-primary {
    background-color: rgb(79, 70, 229) !important;
    color: white !important;
}