/* MiniShopCR Themes — v3 (tokens + animaciones en vibrante/suave) */
:root{
  --bg:#ffffff; --text:#1f2937; --muted:#6b7280; --card:#ffffff; --card-border:#e5e7eb;
  --accent:#2563eb; --accent-contrast:#ffffff;
  --danger:#dc2626; --success:#16a34a; --info:#0ea5e9;

  /* Aliases que usa app.css */
  --fg:var(--text);
  --border:var(--card-border);
  --primary:var(--accent);
  --primary-contrast:var(--accent-contrast);
  --link:var(--accent);
  --link-hover:#1d4ed8;
  --shadow:0 4px 14px rgba(17,24,39,.08);
}

/* === CLARO =============================================================== */
html[data-theme="claro"]{
  --bg:#ffffff; --text:#1f2937; --muted:#6b7280; --card:#ffffff; --card-border:#e5e7eb;
  --accent:#2563eb; --accent-contrast:#ffffff;
  --fg:var(--text); --border:var(--card-border);
  --primary:var(--accent); --primary-contrast:var(--accent-contrast);
  --link:#2563eb; --link-hover:#1d4ed8; --shadow:0 4px 14px rgba(17,24,39,.08);
}

/* === OSCURO (alto contraste) ============================================ */
html[data-theme="oscuro"]{
  --bg:#0f172a; --text:#e5e7eb; --muted:#94a3b8; --card:#111827; --card-border:#1f2937;
  --accent:#38bdf8; --accent-contrast:#0b1220;
  --fg:var(--text); --border:var(--card-border);
  --primary:var(--accent); --primary-contrast:var(--accent-contrast);
  --link:#7dd3fc; --link-hover:#bae6fd; --shadow:0 6px 20px rgba(0,0,0,.55);
}
html[data-theme="oscuro"] .topbar,
html[data-theme="oscuro"] .foot{ background:#0b1220; border-bottom:1px solid var(--border); }
html[data-theme="oscuro"] .table thead th{ background:#0b1220; border-bottom:1px solid var(--border); }
html[data-theme="oscuro"] .btn.secondary{ background:#1f2937; color:var(--fg); border-color:var(--border); }
html[data-theme="oscuro"] input,
html[data-theme="oscuro"] select,
html[data-theme="oscuro"] textarea{ background:#0b1220; color:var(--fg); border-color:var(--border); }

/* === ALTO CONTRASTE ====================================================== */
html[data-theme="alto-contraste"]{
  --bg:#000000; --text:#ffffff; --muted:#e5e7eb; --card:#000000; --card-border:#ffffff;
  --accent:#ffff00; --accent-contrast:#000000;
  --fg:var(--text); --border:var(--card-border);
  --primary:var(--accent); --primary-contrast:var(--accent-contrast);
  --link:#ffff00; --link-hover:#ffffff; --shadow:none;
}
html[data-theme="alto-contraste"] .topbar,
html[data-theme="alto-contraste"] .foot{ background:#000; border-bottom:2px solid var(--border); }
html[data-theme="alto-contraste"] .table,
html[data-theme="alto-contraste"] .card{ border:2px solid var(--border); box-shadow:none; }
html[data-theme="alto-contraste"] .table thead th{ background:#000; border-bottom:2px solid var(--border); }
html[data-theme="alto-contraste"] .btn.secondary{ background:#111; color:#fff; border-color:#fff; }
html[data-theme="alto-contraste"] input,
html[data-theme="alto-contraste"] select,
html[data-theme="alto-contraste"] textarea{ background:#000; color:#fff; border:2px solid #fff; }

/* === VIBRANTE (más llamativo + fondo animado) ============================ */
html[data-theme="vibrante"]{
  --bg:#ffffff; --text:#0f172a; --muted:#475569; --card:#ffffff; --card-border:#ffd1ea;
  --accent:#ff006e; --accent-contrast:#ffffff;
  --fg:var(--text); --border:#ffc2e8;
  --primary:var(--accent); --primary-contrast:var(--accent-contrast);
  --link:#ff006e; --link-hover:#d90466; --shadow:0 6px 18px rgba(255,0,110,.15);
}
html[data-theme="vibrante"] .topbar,
html[data-theme="vibrante"] .foot{ background:#fff0f6; border-bottom:1px solid #ffc2e8; }
html[data-theme="vibrante"] .table thead th{ background:#fff0f6; }

/* Fondo con movimiento suave (radiales + desplazamiento) */
@keyframes mscrGradientDrift {
  0%   { background-position:   0%  0%, 100% 100%, 50% 50%; }
  50%  { background-position: 100% 100%,   0%   0%, 50% 50%; }
  100% { background-position:   0%  0%, 100% 100%, 50% 50%; }
}
html[data-theme="vibrante"] body{
  background:
    radial-gradient(40% 40% at 10% 10%, rgba(255,0,110,.10), transparent 60%),
    radial-gradient(50% 50% at 90% 0%,  rgba(0,180,255,.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fff7fc 100%);
  background-attachment: fixed;
  background-size: 200% 200%, 200% 200%, 100% 100%;
  animation: mscrGradientDrift 18s ease-in-out infinite;
}

/* === SUAVE (pastel más vivo + fondo animado lento) ======================= */
html[data-theme="suave"]{
  --bg:#f9f5f0; --text:#3f3a34; --muted:#7a6f66; --card:#fffaf3; --card-border:#e7d8c9;
  --accent:#c97b2a; --accent-contrast:#ffffff;
  --fg:var(--text); --border:#e7d8c9;
  --primary:var(--accent); --primary-contrast:var(--accent-contrast);
  --link:#c97b2a; --link-hover:#a85f1f; --shadow:0 6px 18px rgba(120,85,40,.14);
}
html[data-theme="suave"] .topbar,
html[data-theme="suave"] .foot{ background:#fff3e6; border-bottom:1px solid #f2d6bd; }
html[data-theme="suave"] .table thead th{ background:#fff3e6; }
html[data-theme="suave"] .btn.secondary{ background:#fff7ed; color:var(--fg); border-color:var(--border); }

@keyframes mscrPastelFloat {
  0%   { background-position: 0% 0%, 100% 100%, 50% 50%; }
  50%  { background-position: 100% 100%, 0% 0%, 50% 50%; }
  100% { background-position: 0% 0%, 100% 100%, 50% 50%; }
}
html[data-theme="suave"] body{
  background:
    radial-gradient(60% 60% at 0% 0%,   rgba(201,123,42,.08), transparent 60%),
    radial-gradient(50% 50% at 100% 100%, rgba(63,58,52,.06), transparent 60%),
    linear-gradient(180deg, #f9f5f0 0%, #fffaf3 100%);
  background-attachment: fixed;
  background-size: 220% 220%, 220% 220%, 100% 100%;
  animation: mscrPastelFloat 28s ease-in-out infinite;
}

/* Respeto a usuarios con reduce motion */
@media (prefers-reduced-motion: reduce){
  html[data-theme="vibrante"] body,
  html[data-theme="suave"] body{ animation: none; }
}

/* === Reglas comunes ====================================================== */
body{ background:var(--bg); color:var(--fg); }
a{ color:var(--link); }
a:hover{ color:var(--link-hover); text-decoration:underline; }
.btn.primary{ background:var(--primary); color:var(--primary-contrast); border-color:var(--primary); }
.card{ background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); }
.muted{ color:var(--muted); }
.topbar,.foot{ background:var(--card); border-bottom:1px solid var(--border); }
.flash{ border:1px solid var(--border); }

/* ===== Alto Contraste – refinamientos (v3.1) ============================ */
/* Reglas al final para que ganen en especificidad por cascada */
html[data-theme="alto-contraste"]{
  --bg:#000000; --text:#ffffff; --muted:#e5e7eb; --card:#000000; --card-border:#ffffff;
  --accent:#ffff00; --accent-contrast:#000000;
  --fg:var(--text); --border:var(--card-border);
  --primary:var(--accent); --primary-contrast:var(--accent-contrast);
  --link:#ffff00; --link-hover:#ffffff; --shadow:none;
}

/* Sin sombras ni halos grises: puro contraste */
html[data-theme="alto-contraste"] *,
html[data-theme="alto-contraste"] *::before,
html[data-theme="alto-contraste"] *::after{
  text-shadow:none !important; box-shadow:none !important;
}

/* Links siempre subrayados y gruesos */
html[data-theme="alto-contraste"] a{
  text-decoration:underline;
  text-decoration-thickness:2px;
}

/* Anillo de enfoque bien visible para teclado/lectores */
html[data-theme="alto-contraste"] :where(a,button,input,select,textarea,summary,.btn):focus-visible{
  outline:3px solid var(--accent) !important;
  outline-offset:3px;
}

/* Componentes marcados */
html[data-theme="alto-contraste"] .card,
html[data-theme="alto-contraste"] .table{
  border:2px solid var(--border);
}

/* Tablas: encabezado nítido y filas cebra */
html[data-theme="alto-contraste"] .table thead th{
  background:#000; border-bottom:2px solid var(--border);
}
html[data-theme="alto-contraste"] .table tbody tr:nth-child(even){
  background:#0d0d0d;
}

/* Botones contundentes */
html[data-theme="alto-contraste"] .btn{
  border:2px solid var(--border); font-weight:700;
}
html[data-theme="alto-contraste"] .btn.primary{
  background:var(--accent); color:#000; border-color:var(--accent);
}
html[data-theme="alto-contraste"] .btn.primary:hover{
  background:#000; color:var(--accent); border-color:var(--accent);
}
html[data-theme="alto-contraste"] .btn.secondary{
  background:#111; color:#fff; border-color:#fff;
}
html[data-theme="alto-contraste"] .btn.secondary:hover{
  background:#000;
}

/* Formularios legibles */
html[data-theme="alto-contraste"] input,
html[data-theme="alto-contraste"] select,
html[data-theme="alto-contraste"] textarea{
  background:#000; color:#fff; border:2px solid #fff;
}
html[data-theme="alto-contraste"] input:focus,
html[data-theme="alto-contraste"] select:focus,
html[data-theme="alto-contraste"] textarea:focus{
  border-color:var(--accent);
}

/* Respeto a modo de alto contraste del SO (Windows, etc.) */
@media (forced-colors: active){
  html[data-theme="alto-contraste"]{
    --bg:Canvas; --text:CanvasText; --card:Canvas; --card-border:CanvasText;
    --link:LinkText; --link-hover:Highlight;
    --accent:Highlight; --accent-contrast:Canvas;
  }
}