/*
 * Estilos propios para vistas personalizadas del panel /app (Informe
 * Gerencial, dashboard). Filament publica un CSS de Tailwind ya purgado
 * que solo incluye las clases usadas por sus propios componentes, así
 * que las utilidades de color/grid usadas en nuestras vistas (que no
 * forman parte de ese build) viven aquí como CSS plano.
 */

/* Grids responsivos */
.atiende-grid-kpi {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
    .atiende-grid-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .atiende-grid-kpi { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.atiende-grid-estado {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px) {
    .atiende-grid-estado { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.atiende-grid-2col {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 1024px) {
    .atiende-grid-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.atiende-grid-rooms {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
    .atiende-grid-rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .atiende-grid-rooms { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.atiende-grid-findings {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 1024px) {
    .atiende-grid-findings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Fondo de las barras de distribución */
.atiende-bar-track {
    background-color: #f3f4f6;
    border-radius: 0.25rem;
    height: 1rem;
}
.dark .atiende-bar-track {
    background-color: #1f2937;
}

/* Tarjetas de habitaciones */
.atiende-room-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0.5rem;
    padding: 0.75rem;
    background-color: #f9fafb;
}
.dark .atiende-room-card {
    background-color: #1f2937;
}
.atiende-room-card.hot {
    background-color: #fef2f2;
}
.dark .atiende-room-card.hot {
    background-color: rgba(239, 68, 68, 0.1);
}
.atiende-room-count {
    font-size: 1.5rem;
    font-weight: 800;
    color: #3b82f6;
}
.atiende-room-count.hot {
    color: #dc2626;
}

/* Hallazgos clave */
.atiende-finding {
    border-radius: 0.5rem;
    border-left-width: 4px;
    border-left-style: solid;
    padding: 0.75rem;
}
.atiende-finding.alerta {
    border-left-color: #dc2626;
    background-color: #fef2f2;
}
.dark .atiende-finding.alerta {
    background-color: rgba(239, 68, 68, 0.1);
}
.atiende-finding.warn {
    border-left-color: #f97316;
    background-color: #fff7ed;
}
.dark .atiende-finding.warn {
    background-color: rgba(249, 115, 22, 0.1);
}
.atiende-finding.ok {
    border-left-color: #16a34a;
    background-color: #f0fdf4;
}
.dark .atiende-finding.ok {
    background-color: rgba(34, 197, 94, 0.1);
}
.atiende-finding.info {
    border-left-color: #3b82f6;
    background-color: #eff6ff;
}
.dark .atiende-finding.info {
    background-color: rgba(59, 130, 246, 0.1);
}