*{box-sizing:border-box} /* Incluye bordes en los cálculos de tamaño */
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial} /* Reset y tipografía */
body{background:#0f172a;color:#e5e7eb;line-height:1.4} /* Fondo oscuro y texto claro */

.topbar{padding:1.25rem 1rem;background:#111827;border-bottom:1px solid #1f2937} /* Barra superior */
.topbar h1{margin:0;font-size:1.25rem} /* Título de barra */
.subtitle{margin:.25rem 0 0;color:#9ca3af} /* Subtítulo más tenue */

.container{max-width:1100px;margin:1rem auto;padding:0 1rem;display:grid;gap:1rem} /* Contenedor central */
.card{background:#111827;border:1px solid #374151;border-radius:14px;padding:1rem;box-shadow:0 0 0 1px rgba(255,255,255,.03) inset} /* Tarjetas */

.grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem} /* Dos columnas en escritorio */
.grid label{color:#cbd5e1;font-size:.9rem} /* Estilo etiquetas */
.grid input,.grid select,.grid textarea{width:100%;padding:.6rem;border:1px solid #374151;border-radius:10px;background:#0b1220;color:#e5e7eb} /* Campos */
.grid textarea{grid-column:1/-1} /* Textarea ocupa todo el ancho */

.actions{display:flex;gap:.5rem;margin-top:.75rem} /* Botonera del formulario */
.btn{border:1px solid #374151;background:#0b1220;color:#e5e7eb;padding:.6rem .9rem;border-radius:10px;cursor:pointer} /* Botón base */
.btn:hover{filter:brightness(1.1)} /* Efecto hover */
.btn.primary{background:#2563eb;border-color:#2563eb} /* Botón principal (azul) */

.row{display:flex;align-items:center} /* Fila flexible */
.row.between{justify-content:space-between} /* Espacio entre extremos */
.row.gap{gap:.5rem} /* Separación entre elementos */
#buscar{min-width:220px} /* Ancho mínimo del buscador */

.tabla-responsive{overflow:auto;border:1px solid #374151;border-radius:10px} /* Contenedor scroll tabla */
table{width:100%;border-collapse:collapse} /* Tabla al 100% sin espacios internos */
th,td{padding:.6rem;border-bottom:1px solid #1f2937;text-align:left;vertical-align:top} /* Celdas */
th{position:sticky;top:0;background:#0b1220;z-index:1} /* Encabezados pegajosos */
.badge{display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.75rem} /* Etiquetas */
.badge.alta{background:#7f1d1d;color:#fca5a5} /* Color prioridad alta */
.badge.media{background:#1e3a8a;color:#bfdbfe} /* Color prioridad media */
.badge.baja{background:#064e3b;color:#a7f3d0} /* Color prioridad baja */
.badge.estado{background:#1f2937;color:#e5e7eb} /* Estado base */
.badge.cerrado{background:#064e3b;color:#a7f3d0} /* Estado cerrado */

.footer{max-width:1100px;margin:1rem auto;padding:0 1rem;color:#9ca3af} /* Pie de página */

@media (max-width:800px){ /* Reglas para pantallas pequeñas */
  .grid{grid-template-columns:1fr} /* Una columna en móvil */
  .row.between{flex-direction:column;align-items:flex-start;gap:.5rem} /* Filtros en columna */
}