/* ============================================================
   Sistema de iconos SVG — Cositas PY
   Sprite: assets/iconos/sprite.svg   ·  Loader: js/core/iconos.js
   Los iconos heredan color (currentColor) y se dimensionan con --ico-size.
   ============================================================ */

/* Glifos que no pueden ser un <svg> porque viven en un ::before/::after o en
   un control nativo. Se pintan con mask + currentColor, así heredan el color
   y se ven igual en todas las plataformas (a diferencia de ▸ ▾ ◄ ►). */
:root {
    --ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.2 6.2 5.8 5.8-5.8 5.8'/%3E%3C/svg%3E");
    --ico-chevron-abajo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.2 9.2 5.8 5.8 5.8-5.8'/%3E%3C/svg%3E");
    --ico-chevron-arriba: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.2 14.8 5.8-5.8 5.8 5.8'/%3E%3C/svg%3E");
    --ico-check-glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.4 12.6 5.2 5.2L19.6 6.6'/%3E%3C/svg%3E");
}

.ico {
    /* tamaño ligado al texto para que acompañe cualquier escala tipográfica */
    --ico-size: 1.15em;
    width: var(--ico-size);
    height: var(--ico-size);
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: -0.16em;
    color: inherit;
    fill: none;
    stroke: currentColor;
    overflow: visible;
    pointer-events: none;
}

/* Tamaños fijos (independientes del texto) */
.ico--xs { --ico-size: 14px; }
.ico--sm { --ico-size: 16px; }
.ico--md { --ico-size: 20px; }
.ico--lg { --ico-size: 24px; }
.ico--xl { --ico-size: 32px; }
.ico--2xl { --ico-size: 40px; }

/* Trazo: por defecto 1.7 (viene del sprite). Variantes para tamaños extremos. */
.ico--xl *,
.ico--2xl * { stroke-width: 1.5; }

/* Tono */
.ico--suave { opacity: 0.62; }
.ico--exito { color: var(--success-color, #4dcf74); }
.ico--peligro { color: var(--danger-color, #ff6384); }
.ico--aviso { color: #e5a13a; }
.ico--acento { color: var(--primary-color, #ea0b80); }

/* Giro para estados de carga: <svg class="ico ico--girando"> */
@keyframes ico-girar { to { transform: rotate(360deg); } }
.ico--girando { animation: ico-girar 0.9s linear infinite; transform-origin: 50% 50%; }

@media (prefers-reduced-motion: reduce) {
    .ico--girando { animation-duration: 2.4s; }
}

/* ── Contenedor pastilla: para KPI cards, secciones y estados vacíos ── */
.ico-caja {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(234, 11, 128, 0.16), rgba(132, 89, 232, 0.14));
    color: var(--primary-color, #ea0b80);
    flex: 0 0 auto;
}

.ico-caja .ico { --ico-size: 22px; }

.ico-caja--sm .ico { --ico-size: 18px; }

.ico-caja--lg .ico { --ico-size: 28px; }


body[data-theme='dark'] .ico-caja {
    background: linear-gradient(135deg, rgba(234, 11, 128, 0.3), rgba(132, 89, 232, 0.2));
    color: #d8c8ff;
}


/* ── Botón que es sólo un icono ──
   Garantiza el mínimo táctil de 44px sin inflar el icono. */
.btn-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
    border-radius: 11px;
    border: 1px solid var(--border-color, rgba(23, 22, 34, 0.14));
    background: var(--card-bg, #fff);
    color: var(--text-color, #18152c);
    cursor: pointer;
    line-height: 0;
}

.btn-ico:hover { border-color: var(--primary-color, #ea0b80); color: var(--primary-color, #ea0b80); }
.btn-ico:focus-visible { outline: 2px solid var(--primary-color, #ea0b80); outline-offset: 2px; }
.btn-ico .ico { --ico-size: 19px; }

@media (pointer: coarse) {
    .btn-ico { min-width: 44px; min-height: 44px; }
}

/* El marcador declarativo se comporta como el propio icono: envuelve al <svg>
   sin agregar caja extra, y reserva el espacio antes de hidratarse para que no
   haya salto de layout. */
[data-icono] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 0;
}

[data-icono]:empty {
    width: 1.15em;
    height: 1.15em;
}

/* Si el sprite no cargó, un icono vacío es invisible y el fallo pasa
   desapercibido. Con esta marca queda un hueco punteado evidente. */
.sin-iconos [data-icono],
.sin-iconos .ico {
    outline: 1px dashed var(--danger-color, #ff6384);
    outline-offset: 1px;
    min-width: 1em;
    min-height: 1em;
}

/* Separación icono/texto: se resuelve con gap en el contenedor, no con
   márgenes, para que no se duplique cuando el contenedor ya es flex. */
.btn:has(> [data-icono]),
.btn:has(> .ico),
button:has(> [data-icono]),
label:has(> [data-icono]),
h1:has(> [data-icono]),
h2:has(> [data-icono]),
h3:has(> [data-icono]),
h4:has(> [data-icono]) {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
}

h1:has(> [data-icono]),
h2:has(> [data-icono]),
h3:has(> [data-icono]),
h4:has(> [data-icono]) {
    display: flex;
}

/* Un botón que sólo tiene el icono se centra y no hereda el gap. */
.btn:has(> [data-icono]:only-child),
button:has(> [data-icono]:only-child) {
    justify-content: center;
    gap: 0;
}