/* ═══════════════════════════════════════════════════════════════════════════════
   MINI GENIOS - GLOBAL STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── BODY & LAYOUT ──────────────────────────────────────────────────────────── */

body.app-shell {
    background-image: radial-gradient(#e5e2dd 1px, transparent 1px),
                      radial-gradient(#e5e2dd 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
    background-color: #fcf9f4;
}

/* ─── PAPER CARD ─────────────────────────────────────────────────────────────── */

.paper-card {
    background: #ffffff;
    border: 2px solid #e5e2dd;
    box-shadow: 6px 6px 0px 0px rgba(0,0,0,0.05);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.paper-card:hover {
    transform: translateY(-2px);
    box-shadow: 8px 8px 0px 0px rgba(0,0,0,0.08);
}

/* ─── BUTTONS ────────────────────────────────────────────────────────────────── */

.sticker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.15);
    transition: all 0.1s;
    cursor: pointer;
}

.sticker-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0px 6px 0px 0px rgba(0,0,0,0.18);
}

.sticker-btn:active {
    transform: translateY(2px);
    box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.1);
}

.sticker-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0px 4px 0px 0px rgba(0,0,0,0.15);
}

/* ─── MATERIAL ICONS ─────────────────────────────────────────────────────────── */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

.filled-icon {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ─── FORM INPUTS ────────────────────────────────────────────────────────────── */

.input-stitch {
    border: 2px solid #bec8cc;
    border-radius: 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-stitch:focus {
    outline: none;
    border-color: #86d2ed;
    box-shadow: 0 0 0 4px rgba(134, 210, 237, 0.2);
}

/* ─── TOM SELECT (DROPDOWN) ──────────────────────────────────────────────────── */

.ts-wrapper .ts-control {
    border: 2px solid #bec8cc;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    min-height: 2.75rem;
    background: #ffffff;
}

.ts-wrapper.focus .ts-control {
    border-color: #86d2ed;
    box-shadow: 0 0 0 4px rgba(134, 210, 237, 0.2);
}

/* ─── AG GRID ALPINE THEME ───────────────────────────────────────────────────── */

.ag-theme-alpine {
    --ag-border-color: #e5e2dd;
    --ag-header-background-color: #f6f3ee;
    --ag-header-foreground-color: #1c1c19;
    --ag-odd-row-background-color: #fcf9f4;
    --ag-row-hover-color: #f0ede9;
    --ag-font-family: 'Quicksand', sans-serif;
    --ag-font-size: 14px;
    --ag-row-border-color: #e5e2dd;
    --ag-cell-horizontal-padding: 12px;
    --ag-row-height: 48px;
    --ag-header-height: 48px;
    width: 100%;
    height: 100%;
}

.ag-theme-alpine .ag-root {
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    border: none;
    border-radius: 0;
    overflow: hidden;
}

.ag-theme-alpine .ag-header {
    background-color: #f6f3ee;
    border-bottom: 2px solid #e5e2dd;
}

.ag-theme-alpine .ag-header-cell {
    background-color: #f6f3ee;
    border-color: #e5e2dd;
    color: #1c1c19;
    font-weight: 600;
    padding: 0 12px;
}

.ag-theme-alpine .ag-row {
    border-bottom: 1px solid #e5e2dd;
    height: 48px;
}

.ag-theme-alpine .ag-row-even {
    background-color: #fcf9f4;
}

.ag-theme-alpine .ag-row-odd {
    background-color: #ffffff;
}

.ag-theme-alpine .ag-row:hover {
    background-color: #f0ede9 !important;
}

.ag-theme-alpine .ag-cell {
    padding: 0 12px;
    display: flex;
    align-items: center;
    border-right: 1px solid #e5e2dd;
}

.ag-theme-alpine .ag-cell:last-child {
    border-right: none;
}

.ag-theme-alpine .ag-paging-panel {
    background-color: #fcf9f4;
    border-top: 1px solid #e5e2dd;
}

.ag-theme-alpine .ag-paginate-button {
    background-color: transparent;
    border: 1px solid #e5e2dd;
    color: #1c1c19;
}

.ag-theme-alpine .ag-paginate-button:hover {
    background-color: #f0ede9;
}

.ag-theme-alpine .ag-paginate-button.ag-disabled {
    opacity: 0.5;
}

/* ─── TOAST NOTIFICATIONS ────────────────────────────────────────────────────── */

#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toast {
    min-width: 300px;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideIn 0.3s ease-out;
    font-size: 14px;
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.toast.removing {
    animation: slideOut 0.3s ease-out;
}

.toast.success {
    background-color: #c8e6c9;
    color: #1b5e20;
}

.toast.error {
    background-color: #ffcdd2;
    color: #b71c1c;
}

.toast-icon {
    font-size: 20px;
    flex-shrink: 0;
}

/* ─── TABS & TAB CONTENT ─────────────────────────────────────────────────────── */

.tab-content {
    width: 100%;
    min-height: 520px;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .toast {
        min-width: 250px;
        font-size: 12px;
        padding: 12px;
    }

    .ag-theme-alpine {
        --ag-row-height: 40px;
        --ag-header-height: 40px;
        --ag-font-size: 12px;
    }

    #toast-container {
        bottom: 12px;
        right: 12px;
        gap: 8px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   STICKER / PASTEL DESIGN SYSTEM
   Lenguaje visual reutilizable extraído de Store/Index. Cualquier vista (y los
   módulos futuros) deben construirse con estas clases para mantener un mismo
   formato sin re-escribir CSS por pantalla.
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
    /* Tinta */
    --mg-ink:       #2a2a3a;
    --mg-ink-soft:  #5a5a6a;

    /* Acentos pastel: fondo / borde / acento sólido */
    --mg-pink-bg:  #fdeef4; --mg-pink-bd:  #f7c6dd; --mg-pink-ac:  #ec5f9b;
    --mg-mint-bg:  #e8f8f0; --mg-mint-bd:  #a8e6cf; --mg-mint-ac:  #2bae76;
    --mg-lav-bg:   #f0ecfb; --mg-lav-bd:   #cdbdf0; --mg-lav-ac:   #7c5cd6;
    --mg-peach-bg: #fff2e3; --mg-peach-bd: #ffd6ba; --mg-peach-ac: #f08a3c;
    --mg-sky-bg:   #e9f4ff; --mg-sky-bd:   #bcdcff; --mg-sky-ac:   #2b87e3;
}

/* ─── HERO / ENCABEZADO DE PÁGINA ────────────────────────────────────────────── */

.mg-hero {
    background: linear-gradient(135deg, #fef6fb 0%, #eef7ff 50%, #f3fff6 100%);
    border: 3px dashed #ffc8dd;
    border-radius: 2rem;
    position: relative;
    overflow: hidden;
}

.mg-hero__blob { position: absolute; border-radius: 50%; filter: blur(6px); opacity: .5; pointer-events: none; }
.mg-hero__blob--1 { width: 120px; height: 120px; background: #ffd6e8; top: -30px; left: -20px; }
.mg-hero__blob--2 { width: 90px;  height: 90px;  background: #c8f0dd; bottom: -20px; right: 60px; }
.mg-hero__blob--3 { width: 70px;  height: 70px;  background: #d8ccff; top: 20px; right: 20px; }

/* ─── TARJETA STICKER ────────────────────────────────────────────────────────── */

.sticker-card {
    background: var(--c-bg, #ffffff);
    border: 3px solid var(--c-border, #e5e2dd);
    border-radius: 28px;
    position: relative;
    box-shadow: 0 8px 0 0 var(--c-border, #e5e2dd), 0 14px 26px rgba(0,0,0,.08);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}

.sticker-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 0 0 var(--c-border, #e5e2dd), 0 22px 40px rgba(0,0,0,.14);
}

.sticker-card.is-featured {
    box-shadow: 0 8px 0 0 var(--c-border, #e5e2dd), 0 0 0 4px #ffe28a, 0 16px 30px rgba(0,0,0,.12);
}

/* Variantes de acento (asignan las variables que consumen sticker-card / pill-btn / chip) */
.accent-pink  { --c-bg: var(--mg-pink-bg);  --c-border: var(--mg-pink-bd);  --c-accent: var(--mg-pink-ac);  --c-on-accent: #fff; }
.accent-mint  { --c-bg: var(--mg-mint-bg);  --c-border: var(--mg-mint-bd);  --c-accent: var(--mg-mint-ac);  --c-on-accent: #fff; }
.accent-lav   { --c-bg: var(--mg-lav-bg);   --c-border: var(--mg-lav-bd);   --c-accent: var(--mg-lav-ac);   --c-on-accent: #fff; }
.accent-peach { --c-bg: var(--mg-peach-bg); --c-border: var(--mg-peach-bd); --c-accent: var(--mg-peach-ac); --c-on-accent: #fff; }
.accent-sky   { --c-bg: var(--mg-sky-bg);   --c-border: var(--mg-sky-bd);   --c-accent: var(--mg-sky-ac);   --c-on-accent: #fff; }

/* ─── PAPER CARD CON ACENTO (cinta superior de color, interior limpio) ─────────── */
/* Para secciones con datos: mantiene el fondo blanco legible y solo colorea el borde. */

.paper-card.accent-pink,
.paper-card.accent-mint,
.paper-card.accent-lav,
.paper-card.accent-peach,
.paper-card.accent-sky {
    border-top: 4px solid var(--c-accent);
}

/* ─── BOTÓN PILL (redondo, con rebote) ───────────────────────────────────────── */

.pill-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    border: none; cursor: pointer; border-radius: 999px;
    padding: .7rem 1.4rem; font-weight: 800; letter-spacing: .2px; font-size: 1rem;
    background: var(--c-accent, #00677f); color: var(--c-on-accent, #ffffff);
    box-shadow: 0 5px 0 0 rgba(0,0,0,.14);
    transition: transform .12s ease, box-shadow .12s ease;
}
.pill-btn:hover  { transform: translateY(-2px); box-shadow: 0 7px 0 0 rgba(0,0,0,.16); }
.pill-btn:active { transform: translateY(2px);  box-shadow: 0 2px 0 0 rgba(0,0,0,.12); }
.pill-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ─── CHIP ───────────────────────────────────────────────────────────────────── */

.mg-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .8rem; border-radius: 999px;
    font-weight: 700; font-size: .8rem; line-height: 1;
    background: var(--c-bg, #f0ede9); color: var(--c-accent, #3f484c);
    border: 2px solid var(--c-border, transparent);
}

/* ─── TÍTULO DE SECCIÓN (ícono en chip + texto) ──────────────────────────────── */

.mg-section-title {
    display: flex; align-items: center; gap: .7rem;
    font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
    color: var(--mg-ink);
}
.mg-section-title__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; border-radius: .9rem; flex-shrink: 0;
    background: var(--c-bg, #f0ede9); color: var(--c-accent, #00677f);
    border: 2px solid var(--c-border, #e5e2dd);
}

/* ─── CINTA "MEJOR VALOR" / DESTACADO ────────────────────────────────────────── */

.best-ribbon {
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #ffd54a, #ff9f43); color: #5b3b00;
    font-weight: 900; font-size: .72rem; letter-spacing: .5px; text-transform: uppercase;
    padding: .35rem .9rem; border-radius: 999px; box-shadow: 0 4px 10px rgba(0,0,0,.18);
    display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
    animation: mg-bob 2.2s ease-in-out infinite;
}

/* ─── ANIMACIONES ────────────────────────────────────────────────────────────── */

@keyframes mg-pop    { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mg-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes mg-bob    { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }

.mg-pop    { animation: mg-pop .5s ease-out both; }
.mg-floaty { animation: mg-floaty 4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .mg-pop, .mg-floaty, .best-ribbon { animation: none; }
    .sticker-card, .pill-btn, .sticker-btn, .paper-card { transition: none; }
}