/**
 * Sistema de Iconos SVG — Heroicons v2 Outline
 * Tokens de color tomados de DESIGN.md. No se inventa ninguno.
 */

:root {
  /* Un solo acento en toda la aplicación: el olivo de la casa. */
  --tw-ico-primary: #788A25;
  --tw-ico-hover: #5C6B1C;
  --tw-ico-text: #3B4A54;
  --tw-ico-muted: #8696A0;
  --tw-ico-danger: #B3261E;
  --tw-ico-warning: #8A6A12;
  --tw-ico-success: #4F6118;
}

.svg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    flex-shrink: 0;
}

.svg-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Tamaños */
.svg-icon-xs {
    width: 0.75rem;
    height: 0.75rem;
}

.svg-icon-sm {
    width: 0.875rem;
    height: 0.875rem;
}

.svg-icon-md {
    width: 1rem;
    height: 1rem;
}

.svg-icon-lg {
    width: 1.25rem;
    height: 1.25rem;
}

.svg-icon-xl {
    width: 1.5rem;
    height: 1.5rem;
}

.svg-icon-2xl {
    width: 2rem;
    height: 2rem;
}

/* Colores temáticos (DESIGN.md §Colors) */
.svg-icon-primary {
    color: var(--tw-ico-primary);
}

.svg-icon-secondary {
    color: var(--tw-ico-text);
}

.svg-icon-danger {
    color: var(--tw-ico-danger);
}

.svg-icon-warning {
    color: var(--tw-ico-warning);
}

.svg-icon-success {
    color: var(--tw-ico-success);
}

.svg-icon-info {
    color: var(--tw-ico-hover);
}

.svg-icon-muted {
    color: var(--tw-ico-muted);
}

.svg-icon-white {
    color: #ffffff;
}

.svg-icon-dark {
    color: var(--tw-ico-text);
}

/* Estados hover */
.svg-icon-hover-primary:hover {
    color: var(--tw-ico-primary);
}

.svg-icon-hover-danger:hover {
    color: var(--tw-ico-danger);
}

.svg-icon-hover-warning:hover {
    color: var(--tw-ico-warning);
}

/* Animaciones */
.svg-icon-spin {
    animation: svg-icon-spin 1s linear infinite;
}

@keyframes svg-icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.svg-icon-pulse {
    animation: svg-icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes svg-icon-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Integración con sidebar */
.sidebar-item .svg-icon {
    margin-right: 0.5rem;
}

.user-item .svg-icon,
.group-item .svg-icon {
    margin-right: 0.25rem;
}

/* Badges con iconos */
.badge .svg-icon {
    margin-right: 0.25rem;
}

/* Botones con iconos */
.btn .svg-icon {
    margin-right: 0.375rem;
}

.btn-icon-only .svg-icon {
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   .tw-ico — icono EN LÍNEA dentro del CONTENIDO
   ═══════════════════════════════════════════════════════════════════════════
   Sustituye a los `<i class="fa-...">` que había dentro del contenido (avisos,
   cabeceras de sección, estados vacíos, filas). El menú lateral conserva Font
   Awesome y NO usa esta clase.

   Reglas: SVG monocromo de 16-20 px, trazo `currentColor` en olivo, nunca un
   icono de color ni el azul/verde de Tailwind. El tamaño va en `em`, así que
   las utilidades de tamaño que ya llevaba el icono (`text-sm`, `text-lg`,
   `text-4xl`...) siguen mandando sin tocar el HTML. */
.tw-ico {
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    color: var(--tw-ico-primary);
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Mismo tamaño que un icono de 20 px, para cabeceras de sección. */
.tw-ico--lg {
    width: 1.25rem;
    height: 1.25rem;
}

.tw-ico--xl {
    width: 1.5rem;
    height: 1.5rem;
}

/* Dentro de un aviso el icono hereda el color del texto del aviso
   (olivo, ámbar o peligro): sigue siendo monocromo y de la casa. */
.tw-ico--inherit {
    color: inherit;
}

/* Variantes de color: el icono de contenido es monocromo, y el color es
   siempre un token de DESIGN.md; nunca el de Tailwind. */
.tw-ico--blanco {
    color: #ffffff;
}

.tw-ico--peligro {
    color: var(--tw-ico-danger);
}

.tw-ico--aviso {
    color: var(--tw-ico-warning);
}

.tw-ico--exito {
    color: var(--tw-ico-success);
}

.tw-ico--muted {
    color: var(--tw-ico-muted);
}

.tw-ico--texto {
    color: var(--tw-ico-text);
}

/* Iconos que en Font Awesome eran macizos (círculo, estrella, punto). */
.tw-ico--relleno {
    fill: currentColor;
    stroke: none;
}

.tw-ico-giro {
    animation: svg-icon-spin 1s linear infinite;
}