/* ══════════════════════════════════════════════════════════════════════
   Plantilla "Colorines" — cálida, colorida, tipografía redondeada.
   Inspirada en una propuesta de rediseño que le gustó a Damian
   (doc_dev/diseno/misanclub_crm_propuesta_diseno_COLORINES.html), no es
   una copia 1:1 — se tradujo el espíritu (dorado en vez de ámbar, fondo
   crema, títulos en Fredoka, confeti) al sistema de variables --mc-* ya
   existente. Se carga DESPUÉS de assets/css/theme.css: solo sobrescribe
   variables, no redeclara ningún selector de componente (salvo el
   @import de fuentes, que solo aplica mientras esta plantilla esté
   activa — no se tocó el enqueue global de Google Fonts).
   ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Fredoka:wght@400;500;600;700&display=swap');

/* ── Variante clara ────────────────────────────────────────────────── */
:root {
  --mc-dark:      #1B2430;  /* azul marino cálido en vez de negro-azulado */
  --mc-dark2:     #131A24;
  --mc-dark3:     #0D131B;

  --mc-amber:     #FFC72C;  /* dorado en vez de ámbar */
  --mc-amber2:    #A87900;  /* dorado oscuro, para texto/eyebrow sobre blanco */
  --mc-amber-bg:  rgba(255,199,44,0.14);
  --mc-amber-bdr: rgba(255,199,44,0.32);

  --mc-bg:        #FFFDF7;  /* crema cálido en vez de gris frío */
  --mc-border:    rgba(59,42,0,0.10);
  --mc-text:      #1B2430;
  --mc-muted:     rgba(27,36,48,0.50);

  --mc-font:         'Fredoka', 'Baloo 2', sans-serif; /* redondeada y juguetona en TODO el texto */
  --mc-font-heading: 'Baloo 2', 'Fredoka', sans-serif; /* títulos de página/tarjeta y cifras grandes */

  --mc-radius: 22px;        /* esquinas muy redondeadas (Genérica: 12px) */

  /* Paleta de colorines: se reparte por menú, tarjetas, tiles y botones */
  --cl-1: #FF6B6B; /* coral */
  --cl-2: #FFB400; /* sol */
  --cl-3: #2EC4A0; /* menta */
  --cl-4: #4DA3FF; /* cielo */
  --cl-5: #A66CFF; /* uva */
  --cl-6: #FF6FB5; /* chicle */
  --mc-shadow: 0 1px 4px rgba(59,42,0,0.06), 0 4px 16px rgba(59,42,0,0.05);

  --mc-sidebar-bg: #FFF6E3; /* crema, en vez del gris frío de la Genérica */
  --mc-topbar-bg:  #FFFFFF;
  --mc-hover-bg:   rgba(59,42,0,.06);

  /* Confeti bajo el logo del sidebar — puro CSS, sin archivo de imagen,
     mismo mecanismo que usa la plantilla "navidad" para su ribete. */
  --mc-decor-image: radial-gradient(circle at 15% 50%, #FF7A59 3px, transparent 3px),
                     radial-gradient(circle at 38% 25%, #A78BFA 3px, transparent 3px),
                     radial-gradient(circle at 62% 60%, #34D399 3px, transparent 3px),
                     radial-gradient(circle at 85% 30%, var(--mc-amber) 3px, transparent 3px),
                     radial-gradient(circle at 50% 85%, #4EA1E8 3px, transparent 3px);
  --mc-decor-opacity: 1;

  /* Estados — mismos tonos que la Genérica pero más cálidos/pasteles */
  --mc-success:    #158F6B;
  --mc-success-bg: #EAF7F2;
  --mc-success-bdr:rgba(21,143,107,.28);
  --mc-danger:     #E4572E;
  --mc-danger-bg:  #FFF1EC;
  --mc-danger-bdr: rgba(228,87,46,.28);
  --mc-warning:    #C88A00;
  --mc-warning-bg: #FFF6E0;
  --mc-warning-bdr:rgba(200,138,0,.30);
}

/* ── Variante oscura (2.7-A — obligatoria, mismo selector que la Genérica) ──
   Se mantiene el espíritu "cálido": texto casi-crema en vez del blanco
   frío por defecto, y el marino de --mc-dark pasa a ser la superficie de
   tarjeta (--mc-white) — una sola familia de color para todo el modo
   oscuro en vez de dos independientes. */
:root[data-mc-mode="dark"] {
  --mc-bg:         #12181F;
  --mc-white:      #1B2430;
  --mc-sidebar-bg: #0E131A;
  --mc-topbar-bg:  #1B2430;
  --mc-border:     rgba(255,255,255,0.08);
  --mc-text:       #FBF3E2;
  --mc-muted:      rgba(251,243,226,.5);
  --mc-shadow:     0 1px 4px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  --mc-hover-bg:   rgba(255,255,255,.07);

  --mc-amber:     #FFD35C;
  --mc-amber2:    #FFC72C;
  --mc-amber-bg:  rgba(255,211,92,0.16);
  --mc-amber-bdr: rgba(255,211,92,0.32);

  --mc-decor-opacity: .85;

  --mc-success:    #34D399;
  --mc-success-bg: rgba(52,211,153,.16);
  --mc-success-bdr:rgba(52,211,153,.32);
  --mc-danger:     #FF7A59;
  --mc-danger-bg:  rgba(255,122,89,.16);
  --mc-danger-bdr: rgba(255,122,89,.32);
  --mc-warning:    #F5B301;
  --mc-warning-bg: rgba(245,179,1,.16);
  --mc-warning-bdr:rgba(245,179,1,.32);
}

/* ══════════════════════════════════════════════════════════════════════
   Variación de color por componente (v2). Usa color-mix sobre --mc-white
   para que funcione igual en claro y oscuro.
   ══════════════════════════════════════════════════════════════════════ */

/* Fondo con manchas suaves de color */
.mcrm-portal-wrapper {
  background:
    radial-gradient(circle at 8% 12%, color-mix(in srgb, var(--cl-4) 14%, transparent) 0, transparent 38%),
    radial-gradient(circle at 92% 8%,  color-mix(in srgb, var(--cl-6) 13%, transparent) 0, transparent 34%),
    radial-gradient(circle at 85% 92%, color-mix(in srgb, var(--cl-3) 13%, transparent) 0, transparent 36%),
    radial-gradient(circle at 12% 88%, color-mix(in srgb, var(--cl-2) 14%, transparent) 0, transparent 34%),
    var(--mc-bg);
}

/* Contenido de las páginas más grande (el menú y la barra superior no cambian).
   Los templates llevan tamaños en px sueltos, así que se escala todo el área
   de contenido con zoom en vez de tocar cada selector. */
.mcrm-content { zoom: 1.15; }
.mcrm-table { font-size: 14px; }
@media (max-width: 768px) { .mcrm-content { zoom: 1.08; } }

/* Menú: cada opción con su color; la activa es un caramelo de degradado */
.mcrm-nav-item { border-radius: 0 999px 999px 0; margin-right: 10px; }
.mcrm-nav-item .material-symbols-outlined { opacity: 1; }
.mcrm-nav-item:nth-of-type(6n+1) .material-symbols-outlined { color: var(--cl-1); }
.mcrm-nav-item:nth-of-type(6n+2) .material-symbols-outlined { color: var(--cl-2); }
.mcrm-nav-item:nth-of-type(6n+3) .material-symbols-outlined { color: var(--cl-3); }
.mcrm-nav-item:nth-of-type(6n+4) .material-symbols-outlined { color: var(--cl-4); }
.mcrm-nav-item:nth-of-type(6n+5) .material-symbols-outlined { color: var(--cl-5); }
.mcrm-nav-item:nth-of-type(6n)   .material-symbols-outlined { color: var(--cl-6); }
.mcrm-nav-item:hover { background: color-mix(in srgb, var(--cl-4) 14%, transparent); }
.mcrm-nav-item.active {
  background: linear-gradient(90deg, var(--cl-2), var(--cl-1) 55%, var(--cl-6));
  border-left-color: var(--cl-1);
  color: #fff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--cl-1) 40%, transparent);
}
.mcrm-nav-item.active .material-symbols-outlined { color: #fff; }
.mcrm-nav-section { color: var(--cl-5); font-family: var(--mc-font-heading); font-size: 12px; }

/* Tarjetas: franja de color arriba, rota por posición */
.mcrm-card { border-top: 5px solid var(--cl-4); }
.mcrm-card:nth-of-type(6n+1) { border-top-color: var(--cl-1); }
.mcrm-card:nth-of-type(6n+2) { border-top-color: var(--cl-2); }
.mcrm-card:nth-of-type(6n+3) { border-top-color: var(--cl-3); }
.mcrm-card:nth-of-type(6n+4) { border-top-color: var(--cl-4); }
.mcrm-card:nth-of-type(6n+5) { border-top-color: var(--cl-5); }
.mcrm-card:nth-of-type(6n)   { border-top-color: var(--cl-6); }
.mcrm-card-title { font-size: 18px; font-weight: 700; }

/* Tiles de estadística: pastel distinto cada uno */
.mcrm-stat-tile {
  --tile: var(--cl-4);
  background: color-mix(in srgb, var(--tile) 18%, var(--mc-white));
  border: 2px solid color-mix(in srgb, var(--tile) 45%, transparent);
}
.mcrm-stat-tile:nth-child(6n+1) { --tile: var(--cl-1); }
.mcrm-stat-tile:nth-child(6n+2) { --tile: var(--cl-3); }
.mcrm-stat-tile:nth-child(6n+3) { --tile: var(--cl-5); }
.mcrm-stat-tile:nth-child(6n+4) { --tile: var(--cl-4); }
.mcrm-stat-tile:nth-child(6n+5) { --tile: var(--cl-2); }
.mcrm-stat-tile:nth-child(6n)   { --tile: var(--cl-6); }
.mcrm-stat-tile .mcrm-icon { color: var(--tile); opacity: 1; font-size: 30px; }
.mcrm-stat-tile .mcrm-value { font-size: 32px; font-weight: 800; }
.mcrm-stat-tile.primary { background: linear-gradient(135deg, var(--cl-5), var(--cl-4)); border-color: transparent; }
.mcrm-stat-tile.gold    { background: linear-gradient(135deg, var(--cl-2), var(--cl-1)); border-color: transparent; }
.mcrm-stat-tile.primary .mcrm-icon, .mcrm-stat-tile.gold .mcrm-icon,
.mcrm-stat-tile.primary .mcrm-value, .mcrm-stat-tile.gold .mcrm-value { color: #fff; }
.mcrm-stat-tile.primary .mcrm-label, .mcrm-stat-tile.gold .mcrm-label { color: rgba(255,255,255,.88); }

/* Títulos con subrayado arcoíris */
.mcrm-section-title {
  color: var(--mc-text); font-size: 28px; display: inline-block; padding-bottom: 6px;
  background: linear-gradient(90deg, var(--cl-1), var(--cl-2), var(--cl-3), var(--cl-4), var(--cl-5)) left bottom / 100% 5px no-repeat;
}
.mcrm-section-eyebrow { color: var(--cl-5); font-family: var(--mc-font-heading); font-size: 13px; }

/* Botones: píldoras con degradado y saltito al pasar el ratón */
.mcrm-btn { border-radius: 999px; padding: 11px 24px; box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.mcrm-btn:hover { transform: translateY(-2px) rotate(-1deg); }
.mcrm-btn.primary { background: linear-gradient(135deg, var(--cl-2), var(--cl-1)); color: #fff; }
.mcrm-btn.primary:hover { background: linear-gradient(135deg, var(--cl-1), var(--cl-6)); color: #fff; }
.mcrm-btn.secondary { background: linear-gradient(135deg, var(--cl-5), var(--cl-4)); color: #fff; }
.mcrm-btn.secondary:hover { background: linear-gradient(135deg, var(--cl-4), var(--cl-3)); }
.mcrm-btn.outline { border: 2px solid var(--cl-4); color: var(--cl-4); }
.mcrm-btn.outline:hover { border-color: var(--cl-6); color: var(--cl-6); }

/* Insignias, avisos, paginación y tablas */
.mcrm-badge { padding: 4px 12px; }
.mcrm-badge.green  { background: color-mix(in srgb, var(--cl-3) 22%, var(--mc-white)); color: var(--mc-success); }
.mcrm-badge.yellow { background: color-mix(in srgb, var(--cl-2) 24%, var(--mc-white)); color: var(--mc-amber2); }
.mcrm-badge.red    { background: color-mix(in srgb, var(--cl-1) 20%, var(--mc-white)); color: var(--mc-danger); }
.mcrm-badge.navy   { background: var(--cl-5); color: #fff; }
.mcrm-badge.amber  { background: var(--cl-2); color: #fff; }
.mcrm-alert { border-radius: 18px; }
.mcrm-alert.warning { border-left-color: var(--cl-2); }
.mcrm-pagination a { border-radius: 50%; }
.mcrm-pagination a:hover { background: color-mix(in srgb, var(--cl-4) 18%, transparent); border-color: var(--cl-4); }
.mcrm-pagination a.active { background: linear-gradient(135deg, var(--cl-6), var(--cl-5)); border-color: transparent; color: #fff; }
.mcrm-table th { color: var(--cl-5); font-family: var(--mc-font-heading); font-size: 12px; }
.mcrm-table tbody tr:nth-child(odd):hover td  { background: color-mix(in srgb, var(--cl-4) 10%, transparent); }
.mcrm-table tbody tr:nth-child(even):hover td { background: color-mix(in srgb, var(--cl-6) 10%, transparent); }

/* ══════════════════════════════════════════════════════════════════════
   Movimiento (v3): precarga colorida, entrada escalonada y microanimaciones.
   Solo CSS. Se repite en cada sección porque cada una recarga la página.
   Las entradas usan fill-mode "backwards" para no dejar transform residual
   (rompería modales position:fixed dentro de tarjetas).
   ══════════════════════════════════════════════════════════════════════ */

/* Precarga: telón liso que tapa desde el primer pintado; decor.js lo sustituye
   por el overlay con nombre/porcentaje (.cl-ready). Si el JS fallara, el
   telón se retira solo a los 4 s. */
.mcrm-portal-wrapper { --cl-d: 1.9s; } /* retraso de las entradas: esperan al precargador */
.mcrm-portal-wrapper::after {
  content: ''; position: absolute; inset: 0; z-index: 100000; pointer-events: none;
  background: var(--mc-bg);
  animation: cl-telon-seguro .4s ease 4s forwards;
}
.mcrm-portal-wrapper.cl-ready::after { display: none; }
@keyframes cl-telon-seguro { to { opacity: 0; visibility: hidden; } }

.cl-loader {
  position: fixed; inset: 0; z-index: 100001;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 24px; text-align: center; color: var(--mc-text);
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--cl-4) 22%, transparent) 0, transparent 40%),
    radial-gradient(circle at 85% 25%, color-mix(in srgb, var(--cl-6) 20%, transparent) 0, transparent 40%),
    radial-gradient(circle at 80% 85%, color-mix(in srgb, var(--cl-3) 20%, transparent) 0, transparent 40%),
    radial-gradient(circle at 20% 85%, color-mix(in srgb, var(--cl-2) 22%, transparent) 0, transparent 40%),
    var(--mc-bg);
  transition: clip-path .7s cubic-bezier(.7,0,.2,1), opacity .7s;
  clip-path: inset(0 0 0 0);
}
.cl-loader.cl-out { clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none; }
.cl-loader .cl-dots { display: flex; gap: 10px; margin-bottom: 14px; }
.cl-loader .cl-dots i { width: 18px; height: 18px; border-radius: 50%; animation: cl-bota .6s ease-in-out infinite alternate; }
.cl-loader .cl-dots i:nth-child(1) { background: var(--cl-1); }
.cl-loader .cl-dots i:nth-child(2) { background: var(--cl-2); animation-delay: calc(var(--cl-d) + .1s); }
.cl-loader .cl-dots i:nth-child(3) { background: var(--cl-3); animation-delay: calc(var(--cl-d) + .2s); }
.cl-loader .cl-dots i:nth-child(4) { background: var(--cl-4); animation-delay: calc(var(--cl-d) + .3s); }
.cl-loader .cl-dots i:nth-child(5) { background: var(--cl-5); animation-delay: calc(var(--cl-d) + .4s); }
@keyframes cl-bota { from { transform: translateY(8px) scale(1.1, .85); } to { transform: translateY(-14px) scale(.9, 1.1); } }
.cl-loader .cl-pre { font-family: var(--mc-font-heading); font-size: 20px; font-weight: 700; color: var(--cl-5); letter-spacing: .04em; }
.cl-loader .cl-name { font-family: var(--mc-font-heading); font-size: clamp(30px, 6vw, 52px); font-weight: 800; line-height: 1.1;
  background: linear-gradient(90deg, var(--cl-1), var(--cl-2), var(--cl-3), var(--cl-4), var(--cl-5), var(--cl-6), var(--cl-1)) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: cl-brillo 2.5s linear infinite; }
.cl-loader .cl-bar { width: min(360px, 78vw); height: 16px; margin-top: 18px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--cl-5) 16%, var(--mc-white)); box-shadow: inset 0 2px 4px rgba(0,0,0,.1); }
.cl-loader .cl-bar b { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--cl-3), var(--cl-4), var(--cl-5), var(--cl-6), var(--cl-3)) 0 0 / 200% 100%; animation: cl-brillo 1.2s linear infinite; }
.cl-loader .cl-pct { font-family: var(--mc-font-heading); font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 6px; }
.cl-loader .cl-snd { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--cl-4);
  background: var(--mc-white); font-size: 20px; cursor: pointer; line-height: 1; }

/* Entrada escalonada de lo que hay en cada página */
@keyframes cl-sube   { from { opacity: 0; transform: translateY(34px) scale(.94) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
@keyframes cl-entra  { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes cl-pop    { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
@keyframes cl-flota  { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(4deg); } }
@keyframes cl-brillo { to { background-position: 200% 0; } }
@keyframes cl-latido { 0%,100% { box-shadow: 0 4px 12px color-mix(in srgb, var(--cl-1) 40%, transparent); } 50% { box-shadow: 0 4px 22px color-mix(in srgb, var(--cl-6) 70%, transparent); } }

.mcrm-section-eyebrow, .mcrm-section-title { animation: cl-entra .6s cubic-bezier(.2,.9,.3,1.2) calc(var(--cl-d) + .9s) backwards; }
.mcrm-card, .mcrm-stat-tile, .mcrm-alert { animation: cl-sube .7s cubic-bezier(.2,.9,.3,1.25) backwards; }
.mcrm-card:nth-of-type(1), .mcrm-stat-tile:nth-child(1) { animation-delay: calc(var(--cl-d) + 1.0s); }
.mcrm-card:nth-of-type(2), .mcrm-stat-tile:nth-child(2) { animation-delay: calc(var(--cl-d) + 1.12s); }
.mcrm-card:nth-of-type(3), .mcrm-stat-tile:nth-child(3) { animation-delay: calc(var(--cl-d) + 1.24s); }
.mcrm-card:nth-of-type(4), .mcrm-stat-tile:nth-child(4) { animation-delay: calc(var(--cl-d) + 1.36s); }
.mcrm-card:nth-of-type(5), .mcrm-stat-tile:nth-child(5) { animation-delay: calc(var(--cl-d) + 1.48s); }
.mcrm-card:nth-of-type(n+6), .mcrm-stat-tile:nth-child(n+6) { animation-delay: calc(var(--cl-d) + 1.6s); }
.mcrm-table tbody tr { animation: cl-entra .5s ease-out backwards; }
.mcrm-table tbody tr:nth-child(1) { animation-delay: calc(var(--cl-d) + 1.2s); }
.mcrm-table tbody tr:nth-child(2) { animation-delay: calc(var(--cl-d) + 1.28s); }
.mcrm-table tbody tr:nth-child(3) { animation-delay: calc(var(--cl-d) + 1.36s); }
.mcrm-table tbody tr:nth-child(4) { animation-delay: calc(var(--cl-d) + 1.44s); }
.mcrm-table tbody tr:nth-child(5) { animation-delay: calc(var(--cl-d) + 1.52s); }
.mcrm-table tbody tr:nth-child(n+6) { animation-delay: calc(var(--cl-d) + 1.6s); }
.mcrm-badge { animation: cl-pop .5s ease-out calc(var(--cl-d) + 1.4s) backwards; }
.mcrm-btn { animation: cl-pop .5s ease-out calc(var(--cl-d) + 1.3s) backwards; }
.mcrm-nav-item { animation: cl-entra .45s ease-out backwards; }
.mcrm-nav-item:nth-of-type(1) { animation-delay: calc(var(--cl-d) + .9s); } .mcrm-nav-item:nth-of-type(2) { animation-delay: calc(var(--cl-d) + .95s); }
.mcrm-nav-item:nth-of-type(3) { animation-delay: calc(var(--cl-d) + 1s); }  .mcrm-nav-item:nth-of-type(4) { animation-delay: calc(var(--cl-d) + 1.05s); }
.mcrm-nav-item:nth-of-type(5) { animation-delay: calc(var(--cl-d) + 1.1s); } .mcrm-nav-item:nth-of-type(n+6) { animation-delay: calc(var(--cl-d) + 1.15s); }

/* Vida continua y reacción al pasar el ratón */
.mcrm-stat-tile .mcrm-icon { animation: cl-flota 3.2s ease-in-out infinite; display: inline-block; }
.mcrm-stat-tile:nth-child(even) .mcrm-icon { animation-delay: -1.6s; }
.mcrm-nav-item:hover .material-symbols-outlined { animation: cl-flota .6s ease-in-out; }
.mcrm-nav-item.active { background-size: 200% 100%; animation: cl-brillo 4s linear infinite, cl-latido 2.4s ease-in-out infinite; }
.mcrm-card, .mcrm-stat-tile { transition: transform .25s cubic-bezier(.2,.9,.3,1.4), box-shadow .25s; }
.mcrm-card:hover, .mcrm-stat-tile:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 14px 30px color-mix(in srgb, var(--cl-5) 25%, transparent); }
.mcrm-btn:active { transform: translateY(2px) scale(.96); box-shadow: none; }
.mcrm-section-title { background-size: 100% 5px; }
.mcrm-progress-fill { background-size: 200% 100%; animation: cl-brillo 3s linear infinite; }
.mcrm-topbar { border-image-source: linear-gradient(90deg, var(--cl-1), var(--cl-2), var(--cl-3), var(--cl-4), var(--cl-5), var(--cl-6), var(--cl-1)); }

/* Quien prefiera menos movimiento en su sistema, no lo ve */
@media (prefers-reduced-motion: reduce) {
  .mcrm-portal-wrapper::after { display: none; }
  .mcrm-portal-wrapper *, .mcrm-portal-wrapper *::before, .mcrm-portal-wrapper *::after { animation: none !important; transition: none !important; }
}

/* Barra superior arcoíris y progreso multicolor */
.mcrm-topbar { border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, var(--cl-1), var(--cl-2), var(--cl-3), var(--cl-4), var(--cl-5), var(--cl-6)) 1; }
.mcrm-progress-fill { background: linear-gradient(90deg, var(--cl-3), var(--cl-4), var(--cl-5), var(--cl-3)) 0 0 / 200% 100%; }