/*
  Archivo: frontend/assets/filters.css
  Propósito: Estilos del botón "aspa" (reset) para limpiar filtros por panel.
  Uso: Cada panel de filtro debe envolver su contenido en un contenedor con clase
       `.filter-panel` y un botón con clase `.filter-reset` posicionado en la
       esquina superior derecha. La visibilidad del botón la controla la app (callbacks)
       mediante `style={display: "none"|"inline-flex"}` o agregando la clase
       `.filter-reset--visible`.
*/

:root {
  --filter-reset-size: 22px;              /* Tamaño del botón */
  --filter-reset-fg: #6b7280;             /* Texto/ícono (gris 500) */
  --filter-reset-fg-hover: #374151;       /* Gris 700 */
  --filter-reset-bg: #ffffff;             /* Fondo */
  --filter-reset-bg-hover: #f3f4f6;       /* Gris 100 */
  --filter-reset-border: #d1d5db;         /* Gris 300 */
  --filter-reset-shadow: 0 1px 2px rgba(0,0,0,0.08);
  --filter-reset-shadow-hover: 0 2px 6px rgba(0,0,0,0.12);
  --filter-reset-ring: 0 0 0 3px rgba(59,130,246,0.35); /* Azul 500 con alpha */
}

/* Soporte tema oscuro por preferencia del sistema */
@media (prefers-color-scheme: dark) {
  :root {
    --filter-reset-fg: #9ca3af;            /* Gris 400 */
    --filter-reset-fg-hover: #e5e7eb;      /* Gris 200 */
    --filter-reset-bg: #111827;            /* Gris 900 */
    --filter-reset-bg-hover: #1f2937;      /* Gris 800 */
    --filter-reset-border: #374151;        /* Gris 700 */
    --filter-reset-shadow: 0 1px 2px rgba(0,0,0,0.45);
    --filter-reset-shadow-hover: 0 2px 6px rgba(0,0,0,0.6);
    --filter-reset-ring: 0 0 0 3px rgba(59,130,246,0.5);
  }
}

/* Contenedor del panel de filtro */
.filter-panel {
  position: relative; /* Contexto para posicionar el aspa */
}

/* Botón aspa (reset) */
.filter-reset {
  position: absolute;
  top: 6px;
  right: 6px;
  width: var(--filter-reset-size);
  height: var(--filter-reset-size);
  display: none;                 /* La app lo muestra cuando hay selección */
  align-items: center;
  justify-content: center;
  font-size: 14px;               /* Tamaño del carácter × */
  line-height: 1;
  border-radius: 9999px;         /* Totalmente redondeado */
  border: 1px solid var(--filter-reset-border);
  background: var(--filter-reset-bg);
  color: var(--filter-reset-fg);
  box-shadow: var(--filter-reset-shadow);
  cursor: pointer;
  user-select: none;
  z-index: 2;                    /* Por encima del contenido del panel */
}

/* Variante visible (opcional). Alternativa a usar style={display: ...} */
.filter-reset--visible { display: inline-flex !important; }

/* Hover/active/focus accesibles */
.filter-reset:hover {
  background: var(--filter-reset-bg-hover);
  color: var(--filter-reset-fg-hover);
  box-shadow: var(--filter-reset-shadow-hover);
}
.filter-reset:active { transform: translateY(1px); }
.filter-reset:focus-visible { outline: none; box-shadow: var(--filter-reset-ring); }

/* Asegura que el aspa no desplace el layout si el panel usa padding superior */
.filter-panel-padding { padding-top: calc(var(--filter-reset-size) + 10px); }

/* Tamaños alternativos por si algún panel es más compacto */
.filter-reset.sm { --filter-reset-size: 18px; font-size: 12px; }
.filter-reset.lg { --filter-reset-size: 26px; font-size: 16px; }

/* Si el botón es un <button> de Bootstrap, neutraliza estilos agresivos */
.filter-reset.btn,
.filter-reset.btn:focus,
.filter-reset.btn:active {
  border-color: var(--filter-reset-border) !important;
  background: var(--filter-reset-bg) !important;
  color: var(--filter-reset-fg) !important;
  box-shadow: var(--filter-reset-shadow) !important;
}

/* Para ícono SVG en lugar del carácter × (opcional) */
.filter-reset svg { width: 60%; height: 60%; pointer-events: none; }