.gradient-sunset {
    /* fallback for old browsers */
    background: #fa709a;
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, rgba(250,112,154,1), rgba(254,225,64,1));
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, rgba(250,112,154,1), rgba(254,225,64,1))
  }

  .gradient-morpheus-den {
    /* fallback for old browsers */
    background: #1412be;
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, rgb(8, 82, 82, 1), rgba(51,8,103,1));
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, rgba(8,82,82,1), rgba(51,8,103,1));

    /* Font white */
    color: white;
  }

  .bg-gradient-warning {
    /* fallback for old browsers */
    background: rgb(253, 253, 200);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, rgb(253, 253, 235), rgb(255, 240, 180));
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, rgb(253, 253, 220), rgb(255, 240, 180));

  }

  .bg-gradient-success {
    /* fallback for old browsers */
    background: rgb(200, 253, 200);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, rgb(200, 230, 200), rgb(180, 255, 180));
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, rgb(200, 230, 200), rgb(180, 255, 180));

  }

  .bg-gradient-danger {
    /* fallback for old browsers */
    background: rgb(253, 200, 200);
  
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, rgb(253, 200, 200), rgb(255, 180, 180));
  
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, rgb(253, 200, 200), rgb(255, 180, 180));

  }

  .bg-gradient-domingo>td {
    background: rgb(255, 240, 240);
    background: -webkit-linear-gradient(to right, rgb(255, 240, 240), rgb(255, 240, 240));
    background: linear-gradient(to right, rgb(255, 240, 240), rgb(255, 240, 240));
}

.bg-gradient-sabado>td {
    background: rgb(240, 255, 240);
    background: -webkit-linear-gradient(to right, rgb(240, 255, 240), rgb(240, 255, 240));
    background: linear-gradient(to right, rgb(240, 255, 240), rgb(240, 255, 240));
}

.bg-gradient-feriado>td {
    background: rgb(255, 255, 230);
    background: -webkit-linear-gradient(to right, rgb(255, 255, 230), rgb(255, 255, 230));
    background: linear-gradient(to right, rgb(255, 255, 230), rgb(255, 255, 230));
}

/* Switch verde */
.switch-success:checked {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
}

/* Switch rojo */
.switch-danger:checked {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
}




/* Modo normal (el que ya tienes) */
#miTabla {
    background: #000;
    color: #fff;
}

/* Modo alternativo (más parecido a la imagen) */
#miTabla.modo-alternativo {
    border-collapse: collapse;
    font-size: 14px;
}

#miTabla.modo-alternativo td,
#miTabla.modo-alternativo th {
    border: 1px solid #000;
    padding: 4px 8px;
    text-align: center;
}

#miTabla.modo-alternativo thead th {
    background-color: #f0f0f0;
    font-weight: bold;
}

/* Puedes ajustar colores, espaciado, etc. según la imagen */

/* Transforma las filas de la tabla en tarjetas estilo grid */
.dt-card-view table.dataTable tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    padding: 1rem 0;
}

.dt-card-view table.dataTable thead,
.dt-card-view table.dataTable tfoot {
    display: none; /* Oculta cabecera y pie en vista tarjeta */
}

.dt-card-view table.dataTable tbody tr {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e3e6f0;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
}

.dt-card-view table.dataTable tbody td {
    display: flex;
    justify-content: space-between;
    border: none;
    padding: 0.35rem 0;
}






/* --- ESTILO PLANO/CLEAN (Identico a la imagen) --- */
table.dataTable.dt-flat-view {
    border-collapse: collapse !important;
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 13px;
    color: #333333;
}

/* Encabezados limpios en mayúsculas y gris claro */
table.dataTable.dt-flat-view thead th {
    border-bottom: 1px solid #e2e8f0 !important;
    color: #8c98a4;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 10px;
    background-color: transparent !important;
}

/* Filas con bordes inferiores muy sutiles */
table.dataTable.dt-flat-view tbody td {
    border-top: none !important;
    border-bottom: 1px solid #f0f2f5 !important;
    padding: 12px 10px;
    vertical-align: middle;
}

/* Sin bordes verticales ni sombras */
table.dataTable.dt-flat-view, 
table.dataTable.dt-flat-view th, 
table.dataTable.dt-flat-view td {
    border-left: none !important;
    border-right: none !important;
}

/* Estilo para los Badges de Estado (como el "Validada" verde) */
.badge-status-validada {
    background-color: #e6f4ea;
    color: #1e7e34;
    border-radius: 12px;
    padding: 4px 10px;
    font-weight: 600;
    font-size: 11px;
    display: inline-block;
}

/* Botón expandible (flechita desplegable de la izquierda) */
table.dataTable.dt-flat-view td.dtr-control:before {
    background-color: transparent !important;
    color: #a0aec0 !important;
    border: 1px solid #cbd5e0 !important;
    box-shadow: none !important;
    border-radius: 4px !important;
}