/* ===== MiniShopCR – Tema claro legible (global) ===== */
:root{
  --bg:#f7fafc;            /* fondo página */
  --card:#ffffff;          /* tarjetas/header/footer */
  --fg:#0f172a;            /* texto principal (casi negro) */
  --muted:#475569;         /* texto secundario */
  --border:#e2e8f0;        /* bordes suaves */
  --link:#2563eb;          /* azul accesible */
  --link-hover:#1d4ed8;
  --primary:#2563eb;
  --primary-contrast:#ffffff;
  --success:#16a34a; --danger:#dc2626; --info:#0369a1;
  --shadow:0 2px 10px rgba(15,23,42,.06);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Inter,Arial,sans-serif;
  font-size:16px; line-height:1.55;
  background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline; color:var(--link-hover)}

.container{width:min(1100px,92%); margin:0 auto}

.topbar,.foot{
  background:var(--card);
  border-bottom:1px solid var(--border);
  box-shadow: var(--shadow);
}
.topbar .container,.foot .container{
  display:flex; align-items:center; justify-content:space-between; padding:12px 0;
}
.topbar .brand{font-weight:700; color:var(--fg)}
.topbar .nav{display:flex; gap:14px; flex-wrap:wrap}
.topbar .nav a{padding:6px 8px; border-radius:8px}
.topbar .nav a:hover{background:#eef2ff; text-decoration:none}

main.container{padding:24px 0 40px}

h1{font-size:28px; margin:0 0 10px}
h2{font-size:22px; margin:0 0 10px}
p,li,small{color:var(--muted)}

.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:16px; box-shadow:var(--shadow);
}

/* Flash messages */
.flash-stack{margin-bottom:16px}
.flash{
  padding:10px 12px; border-radius:10px; margin:8px 0;
  background:var(--card); border:1px solid var(--border);
}
.flash-success{border-left:4px solid var(--success)}
.flash-danger{border-left:4px solid var(--danger)}
.flash-info{border-left:4px solid var(--info)}

/* Formularios */
.form.card{max-width:720px}
.form-row{margin-bottom:12px; display:flex; flex-direction:column; gap:6px}
.form-row input,.form-row select,.form-row textarea{
  padding:10px 12px; border-radius:10px; background:var(--card); color:var(--fg);
  border:1px solid var(--border); outline:0; transition:.15s border, .15s box-shadow;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.15);
}
.form-row small{color:var(--muted)}
button{
  padding:10px 14px; border-radius:10px; border:1px solid transparent; cursor:pointer;
  background:var(--primary); color:var(--primary-contrast); font-weight:600;
  box-shadow: var(--shadow);
}
button:hover{background:var(--link-hover)}
button[disabled]{opacity:.65; cursor:not-allowed}
button.secondary{
  background:var(--card-soft); color:var(--fg); border-color:var(--border)
}

/* Tablas */
.table{width:100%; border-collapse:separate; border-spacing:0; background:var(--card);
  border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
.table th,.table td{padding:10px 12px; text-align:left}
.table thead th{background:var(--card-soft); font-weight:700; border-bottom:1px solid var(--border)}
.table tbody tr{border-bottom:1px solid var(--border)}
.table tbody tr:nth-child(even){background:#fafcff}
.table tbody tr:hover{background:#eef2ff}

/* Media (imágenes/video) */
img,video{border-radius:10px; border:1px solid var(--border); background:var(--card); max-width:100%}

/* Footer */
.foot{border-top:1px solid var(--border); border-bottom:none}

/* Botones genéricos reutilizables */
.btn{display:inline-block; padding:10px 14px; border-radius:10px; border:1px solid transparent;
     background:var(--primary); color:var(--primary-contrast); font-weight:600; box-shadow:var(--shadow);
     text-decoration:none}
.btn:hover{background:var(--link-hover); text-decoration:none}
.btn.secondary{background:var(--card-soft); color:var(--fg); border-color:var(--border)}


/* Thumbnails en lista de productos */
.prod-cell { display:flex; align-items:center; gap:.6rem; }
.prod-cell .thumb { width:44px; height:44px; object-fit:cover; border-radius:.5rem; border:1px solid var(--border); background:#f9fafb; }
.prod-cell .thumb.blank { display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; color:#9ca3af; width:44px; height:44px; border-radius:.5rem; border:1px solid var(--border); }
.prod-cell .name { font-weight:500; }


/* Thumbnails en lista de productos (v2) */
.prod-cell { display:flex; align-items:center; gap:.75rem; }
.prod-cell .thumb { display:block; width:48px; height:48px; object-fit:cover; flex-shrink:0;
  border-radius:.5rem; border:1px solid var(--border); background:#f9fafb; }
.prod-cell .thumb.blank { display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; color:#9ca3af; }
.prod-cell .name { font-weight:500; }

/* === Landing styles (scoped) === */
.landing-hero{position:relative;padding:56px 0 36px 0}
.landing-hero-bg{
  position:absolute; inset:0; z-index:-1;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(14,165,233,.20), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(30,58,138,.18), transparent 60%),
              linear-gradient(180deg, #f2f6ff 0%, #ffffff 60%);
  animation: bgfloat 12s ease-in-out infinite alternate;
}
@keyframes bgfloat{from{transform:translateY(0)} to{transform:translateY(6px)}}

.brand-line{display:flex;align-items:center;justify-content:center;gap:12px}
.brand-logo{height:46px;width:auto;object-fit:contain;border-radius:12px;background:var(--card);padding:6px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.brand-title{font-size:clamp(30px,6vw,48px);margin:0;letter-spacing:.6px}
.brand-sub{margin:10px 0 18px 0;text-align:center;color:#475569;font-size:clamp(14px,2.4vw,18px)}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.btn-xl{font-size:1.05rem; padding:.85rem 1.2rem; border-radius:12px}
.btn-primary{background:#1e3a8a; border:1px solid #1e3a8a; color:#fff}
.btn-primary:hover{filter:brightness(1.05)}
.pulse{box-shadow:0 0 0 0 rgba(30,58,138,.45); animation:pulseRing 2.2s infinite}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(30,58,138,.45)} 70%{box-shadow:0 0 0 16px rgba(30,58,138,0)} 100%{box-shadow:0 0 0 0 rgba(30,58,138,0)}}

.btn-wa{background:#16a34a; border:1px solid #15803d; color:#fff}
.btn-wa:hover{filter:brightness(1.05)}

.badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.badges span{background:var(--card-soft);color:#334155;border:1px solid #e2e8f0;padding:.35rem .6rem;border-radius:999px;font-size:.85rem}

.landing-how{position:relative;padding:28px 0;background:var(--card);border-radius:16px;margin:8px 0}
.landing-how::after{
  content:""; position:absolute; inset:auto 20px 10px auto; width:180px; height:180px; opacity:.06;
  background-image:var(--logo-url); background-size:contain; background-repeat:no-repeat; background-position:center;
  pointer-events:none; filter:grayscale(30%);
}
.landing-how h2{text-align:center;margin:0 0 16px 0}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.steps li{display:flex;gap:10px;align-items:flex-start;background:var(--card,#fff);border:1px solid var(--border,#e5e7eb);border-radius:12px;padding:12px;box-shadow:var(--shadow,0 4px 14px rgba(17,24,39,.08))}
.steps .ico{width:34px;height:34px;border-radius:10px;background:#1e3a8a;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.steps .txt h3{margin:0 0 4px 0;font-size:1.05rem}
.steps .txt p{margin:0;color:#64748b}

.landing-demo{padding:22px 0}
.landing-demo h2{text-align:center;margin:0 0 14px 0}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.demo-item .ph{border-radius:10px;background:linear-gradient(90deg,#eef2ff,#f8fafc,#eef2ff);background-size:200% 100%;animation:shimmer 2.5s linear infinite}
.demo-item .media{height:120px;margin-bottom:8px}
.demo-item .title{height:16px;width:70%;margin:6px 0}
.demo-item .price{height:14px;width:40%;margin:6px 0}
.demo-item .actions{height:34px;width:100%;margin-top:8px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.landing-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:10px 0}
.landing-benefits .benefit{background:var(--card,#fff);border:1px solid var(--border,#e5e7eb);border-radius:12px;padding:14px;box-shadow:var(--shadow,0 4px 14px rgba(17,24,39,.08))}
.landing-benefits .benefit h3{margin:0 0 6px 0}

.landing-cta{margin:18px 0;padding:20px;border-radius:14px;background:linear-gradient(135deg,#1e3a8a 0%, #0ea5e9 100%);color:#fff;text-align:center}
.landing-cta .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.landing-cta .btn-primary{background:var(--card);color:#1e3a8a;border-color:#fff}
.landing-cta .btn-wa{background:#16a34a;border-color:#15803d;color:#fff}

/* util */
.fade-in{animation:fadeInUp .6s ease both}
@keyframes fadeInUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}

/* === Watermark global (logos aleatorios) === */
.wm-wall{
  position:fixed; inset:0; z-index:0; pointer-events:none;
}
.wm-wall .wm-logo{
  position:absolute; filter:grayscale(100%); opacity:.08;
  user-select:none; -webkit-user-drag:none;
}

/* Asegurar hero por encima de watermark */
.landing-hero, .landing-how, .landing-demo, .landing-benefits, .landing-cta {
  position:relative; z-index:1;
}

/* Demo con imágenes reales (placeholder logo) */
.demo-item .media{
  height:140px; margin-bottom:8px; border-radius:10px;
  background:var(--card); display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border,#e5e7eb);
}
.demo-item .media .ph-img{
  width:100%; height:100%; object-fit:contain; padding:10px;
}
.demo-item .ph{border-radius:10px;background:linear-gradient(90deg,#eef2ff,#f8fafc,#eef2ff);background-size:200% 100%;animation:shimmer 2.5s linear infinite}
.demo-item .title{height:16px;width:70%;margin:6px 0}
.demo-item .price{height:14px;width:40%;margin:6px 0}
.demo-item .actions{height:34px;width:100%;margin-top:8px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* === THEME PANEL (admin + dueño) — no afecta /shop === */
.panel{background:#f7f9fc;color:#0f172a}
.panel .topbar{backdrop-filter:saturate(1.2) blur(6px); background:rgba(255,255,255,.75); border-bottom:1px solid #e5e7eb}
.panel .brand{font-weight:700}
.panel .container{max-width:1100px;margin:0 auto;padding:16px}

.panel .card{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:12px}
.panel .btn{padding:.5rem .8rem;border-radius:12px;border:1px solid #1f2a44;background:#1e3a8a;color:#fff;cursor:pointer;line-height:1}
.panel .btn:hover{filter:brightness(1.05)}
.panel .btn.secondary{background:var(--card);color:#1e3a8a;border-color:#1e3a8a}
.panel .btn-link{background:transparent;color:#3b82f6;border:1px solid transparent;padding:0 .2rem}
.panel .btn-danger{background:#b91c1c;border-color:#7f1d1d}
.panel .btn:disabled{opacity:.6;cursor:not-allowed}

.panel input[type=text],
.panel input[type=password],
.panel input[type=number],
.panel input[type=email],
.panel input[type=tel],
.panel select,
.panel textarea{
  width:100%; padding:.55rem .7rem; border:1px solid #cbd5e1; border-radius:10px;
  background:var(--card); color:inherit; outline:none;
}
.panel input:focus, .panel select:focus, .panel textarea:focus{border-color:#1e3a8a; box-shadow:0 0 0 3px rgba(30,58,138,.12)}

.panel .table{width:100%; border-collapse:separate; border-spacing:0; background:var(--card);
  border:1px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:var(--shadow)}
.panel .table th,.panel .table td{padding:10px 12px; text-align:left}
.panel .table thead th{background:var(--card-soft); font-weight:700; border-bottom:1px solid #e5e7eb}
.panel .table tbody tr{border-bottom:1px solid #e5e7eb}
.panel .table tbody tr:nth-child(even){background:#fafcff}
.panel .table tbody tr:hover{background:#eef2ff}

.panel .flash-stack{position:relative;margin:10px 0}
.panel .flash{padding:.6rem .8rem;border-radius:10px;margin-bottom:6px;border:1px solid var(--border);background:var(--card);box-shadow:0 2px 8px rgba(17,24,39,.06)}
.panel .flash-success{border-color:#86efac;background:#f0fdf4}
.panel .flash-danger{border-color:#fecaca;background:#fef2f2}
.panel .flash-warning{border-color:#fde68a;background:#fffbeb}
.panel .flash-info{border-color:#bae6fd;background:#eff6ff}

.panel .modal[hidden]{display:none}
.panel .modal{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;}

.panel .modal-backdrop{position:absolute; inset:0; background:rgba(2,6,23,.45); backdrop-filter:saturate(1.2) blur(1px);}
.panel .modal-dialog{position:relative; z-index:1; width:100%; max-width:460px; background:var(--card);
  border:1px solid var(--border); border-radius:12px; box-shadow:0 10px 30px rgba(2,6,23,.18); padding:18px;}
.panel .modal-title{margin:0 0 6px 0}
.panel .modal-subtitle{margin:0 0 12px 0; color:#64748b}
.panel .modal-actions{display:flex; justify-content:flex-end; gap:.5rem; margin-top:12px}

/* === Auth login (usa tema del panel y centra el card) === */
.auth-login{position:relative; z-index:1; min-height:60vh; display:flex; align-items:center; justify-content:center; padding:24px 0}
.auth-login .login-wrap{width:100%; max-width:760px; padding:0 16px}
.auth-login .login-card{padding:18px 20px}
.auth-login .form-row{display:flex; flex-direction:column; gap:6px; margin:10px 0 0 0}
.auth-login label{font-weight:600}

/* === Completar tema del panel (admin + dueño) === */
.panel .actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.panel .prod-thumb{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--border);background:var(--card)}
.panel .form{margin:12px 0}
.panel .form.inline, .panel .form-search{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.panel .muted{color:#64748b}

/* === Panel: miniaturas de productos (media server /m/...) === */
.panel main.container table img[src^="/m/"]{
  max-width: 160px;   /* ancho máximo */
  max-height: 120px;  /* alto máximo ≈ 1/3 del tamaño que tenías */
  width: auto; height: auto;
  border-radius: 8px; border:1px solid var(--border); background:var(--card);
}
.panel .table td{ vertical-align: top; }

/* Ocultar botones Difusión en la barra */
.nav a[href*="/difusion"]{display:none!important}

/* === THEME OVERRIDES (checkout & global) ================================ */
/* Forzamos que todo lo de contenido use tokens del tema */
:root, html[data-theme] { color-scheme: light dark; }

/* Superficies */
main.container, .page, .section, .content, .checkout, .cart, .summary, .panel, .box, .wrapper {
  background: var(--bg) !important;
  color: var(--fg) !important;
}

/* Tarjetas y paneles */
.card, .panel, .box {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  color: var(--fg) !important;
}

/* Formularios */
input, select, textarea {
  background: var(--card) !important;
  color: var(--fg) !important;
  border: 1px solid var(--border) !important;
  outline: 0;
}
input::placeholder, textarea::placeholder { color: var(--muted) !important; opacity: 1; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); }

/* Botones */
.btn, button {
  border: 1px solid var(--border);
  color: var(--fg);
}
.btn.primary,
button.primary,
.checkout button[type="submit"],
.actions .btn.primary,
.actions button[type="submit"] {
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  border-color: var(--accent) !important;
  font-weight: 600;
  box-shadow: var(--shadow);
}
.btn.secondary, button.secondary {
  background: var(--card-soft) !important;
  color: var(--fg) !important;
  border-color: var(--border) !important;
}
.btn:hover, button:hover { filter: brightness(1.05); text-decoration: none; }

/* Tablas (resumen checkout) */
.table {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
  color: var(--fg);
}
.table thead th {
  background: var(--card-soft) !important;
  color: var(--fg) !important;
  border-bottom: 1px solid var(--border) !important;
}
.table td, .table th { border-color: var(--border) !important; color: var(--fg) !important; }

/* Alto contraste: refuerzos */
html[data-theme="alto-contraste"] .btn.secondary { background:#000 !important; color:#fff !important; border-color:#fff !important; }
html[data-theme="alto-contraste"] .table thead th { background:#000 !important; color:#fff !important; }
html[data-theme="alto-contraste"] .card, 
html[data-theme="alto-contraste"] .table,
html[data-theme="alto-contraste"] input,
html[data-theme="alto-contraste"] select,
html[data-theme="alto-contraste"] textarea,
html[data-theme="alto-contraste"] button { border-width:2px !important; }
html[data-theme="alto-contraste"] :focus {
  outline: 3px dotted var(--accent) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}
/* ======================================================================= */

/* === Fix zebra stripe en tablas (oscuro y demás temas) ================== */
.table tbody tr,
.table tbody tr:nth-child(even),
.table tbody tr:nth-child(odd) {
  background: var(--card) !important;
  color: var(--fg) !important;
}
.table tbody td, .table tbody th {
  background: inherit !important;
  color: inherit !important;
}

/* Si alguna fila viene deshabilitada/muted, que use el soft del tema */
.table tbody tr.muted,
.table tbody tr.disabled,
.table tbody tr[aria-disabled="true"] {
  background: var(--card-soft) !important;
  color: var(--muted) !important;
}
/* ======================================================================= */

/* === BEGIN themes.css (merged) === */
/* 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;
  }
}
/* === END themes.css (merged) === */