/*
================================================================================
  ARCHIVO DE ASSETS: CSS y JS
================================================================================
*/

/* assets/css/frontend.css */
/* Estilos generales y responsivos para tablas, formularios y dashboard */
.if-container {
  padding: 1rem;
  max-width: 1200px;
  margin: auto;
}
.if-card {
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 1rem;
  margin-bottom: 1rem;
}
.if-datatable {
  width: 100%;
  margin-top: 1rem;
}
.if-datatable table {
  width: 100%;
  border-collapse: collapse;
}
.if-datatable th, .if-datatable td {
  padding: 0.5rem;
  border: 1px solid #ddd;
  text-align: left;
}
@media (max-width: 768px) {
  .if-datatable table, .if-datatable thead, .if-datatable tbody, .if-datatable th, .if-datatable td, .if-datatable tr {
    display: block;
  }
  .if-datatable thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .if-datatable tr { margin-bottom: 0.625rem; }
  .if-datatable td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }
  .if-datatable td:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    padding-left: 0.5rem;
    font-weight: bold;
    white-space: nowrap;
  }
  /* Asocia cada celda con su encabezado */
  .if-datatable td:nth-of-type(1):before { content: "#"; }
  .if-datatable td:nth-of-type(2):before { content: "Fumigante"; }
  /* Añadir más según columnas */
}