/* Palette & basic layout */
:root{
  --bg-start: #f3f0ff;    /* subtle lilac */
  --bg-end: #fff0f6;      /* soft pastel pink */
  --card: #ffffff;
  --text: #0f172a;        /* dark slate for body text */
  --muted: #6b7280;       /* gray for small link text */
  --accent: #7c3aed;      /* vibrant indigo */
  --accent-2: #ec4899;    /* bright magenta/pink */
  --accent-dark: #5b21b6; /* darker on hover */
  --glow: rgba(124,58,237,0.18);
  --shadow-purple: rgba(124,58,237,0.12);
  --radius: 16px;
  --max-width: 1100px;    /* increased for spacious layout */
  --card-width: 420px;
  --gap: 20px;
  --mobile-padding: 20px;
  --base-font-size-desktop: 18px; /* larger base for PC readability */
  font-synthesis: none;
}

.community-share-notice{
  position:fixed;
  inset:0;
  z-index:100050;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(5,3,15,.72);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}

.community-share-notice.is-open{
  display:flex;
  animation:community-notice-in .2s ease-out;
}

.community-share-dialog{
  position:relative;
  width:min(420px,100%);
  padding:30px 26px 24px;
  border:2px solid var(--accent-2);
  border-radius:12px;
  background:#120b20;
  color:#fff;
  box-shadow:0 0 0 4px rgba(124,58,237,.28), 0 24px 70px rgba(0,0,0,.5);
  text-align:center;
  font-family:"Press Start 2P", monospace;
}

.community-share-dialog::before,
.community-share-dialog::after{
  position:absolute;
  width:10px;
  height:10px;
  background:var(--accent);
  content:"";
}

.community-share-dialog::before{
  top:-2px;
  left:-2px;
}

.community-share-dialog::after{
  right:-2px;
  bottom:-2px;
  background:var(--accent-2);
}

.community-share-notice-close{
  position:absolute;
  top:10px;
  right:10px;
  display:inline-flex;
  width:30px;
  height:30px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--accent-2);
  border-radius:7px;
  background:rgba(236,72,153,.14);
  color:#f9a8d4;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  line-height:1;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}

.community-share-notice-close:hover,
.community-share-notice-close:focus-visible{
  outline:none;
  background:var(--accent-2);
  color:#fff;
  transform:scale(1.05);
}

.community-share-notice-icon{
  display:grid;
  width:48px;
  height:48px;
  margin:0 auto 16px;
  place-items:center;
  border:2px solid var(--accent);
  border-radius:10px;
  background:linear-gradient(135deg,rgba(124,58,237,.42),rgba(236,72,153,.32));
  color:#f9a8d4;
  font-size:22px;
  box-shadow:0 0 22px rgba(236,72,153,.28);
}

.community-share-dialog h3{
  margin:0 0 14px;
  color:#f9a8d4;
  font-size:14px;
  letter-spacing:.08em;
}

.community-share-dialog p{
  margin:0;
  color:#f8fafc;
  font-size:11px;
  line-height:1.8;
}

.community-share-notice.is-error .community-share-dialog{
  border-color:#fb7185;
}

.community-share-notice.is-error .community-share-notice-icon{
  border-color:#fb7185;
  color:#fda4af;
}

.community-share-notice.is-error .community-share-dialog h3{
  color:#fda4af;
}

@keyframes community-notice-in{
  from{ opacity:0; transform:scale(.96) translateY(8px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}

@media (max-width:520px){
  .community-share-dialog{
    padding:28px 20px 22px;
  }

  .community-share-dialog p{
    font-size:10px;
  }
}

/* Global reset & typography */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100%;
  /* soft linear pastel background */
  background: linear-gradient(160deg, var(--bg-start) 0%, #fdf5fb 45%, var(--bg-end) 100%);
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size:var(--base-font-size-desktop); /* larger default for desktop */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(12px,4vw,36px);
}

/* Main viewport container fits one screen and centers content */
.viewport{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  align-items:stretch; /* ensure both columns match height */
  justify-content:space-between;
  gap:3rem; /* elegant separation between left text and right card */
  padding:clamp(12px,3vw,28px);
  box-sizing:border-box;
}

/* Hoja1 inner wrapper: two-column layout that aligns items to same height */
.hoja1-inner-wrapper{
  display:flex;
  align-items:stretch;
  gap:3rem;
  width:100%;
  box-sizing:border-box;
  padding:12px;
}

/* Branding block (title + description) */
.branding{
  flex:1 1 60%;
  min-width:260px;
  max-width:720px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Pixelated retro title using imported pixel font and gradient text */
.title{
  margin:0 0 12px 0;
  font-family: "Press Start 2P", monospace;
  font-weight:400;
  font-size:clamp(28px,5.2vw,56px); /* bigger for desktop */
  letter-spacing:1px;
  text-transform:uppercase;
  line-height:1;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 6px 0 rgba(0,0,0,0.06);
  padding-bottom:6px;
}

/* Description paragraph: more airy for readability */
.description{
  margin:0;
  font-size:clamp(14px,1.6vw,16px);
  color:var(--text);
  opacity:0.95;
  line-height:1.65;
  max-width:46ch;
  margin-top:6px;
  white-space:normal;
}

/* Technique list container: keep pills horizontal and flowing */
.tech-list{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  align-items:center;
  margin-top:10px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* Intro line above technique pills - match paragraph typography exactly */
.intro-tech{
  margin-top:6px;
  margin-bottom:6px;
  font-weight:400;
  font-size:clamp(14px,1.6vw,16px);
  color:var(--text);
  line-height:1.65;
  max-width:46ch;
  white-space:normal;
  opacity:0.95;
  letter-spacing:0.0em;
}
.tech{
  flex:0 0 auto;
  display:inline-block;
  padding:6px 10px;
  background: linear-gradient(180deg, rgba(124,58,237,0.14), rgba(236,72,153,0.06));
  color: #1f1140;
  font-weight:700;
  border-radius:999px;
  font-size:13px;
  box-shadow: 0 2px 6px rgba(15,23,42,0.04);
}

/* Card with access form: floating purple-tinted shadow, larger radius */
.card{
  width:100%;
  max-width:var(--card-width);
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.98));
  border-radius:var(--radius);
  box-shadow: 0 18px 40px var(--shadow-purple), 0 2px 8px rgba(0,0,0,0.04);
  padding:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  border: 1px solid rgba(124,58,237,0.06);
  align-self:stretch; /* match height of branding block */
}

/* Accessibility: hide only visual, keep for screen readers */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Form layout */
.access-form{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Label */
.field-label{
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-bottom:6px;
  font-weight:700;
  letter-spacing:0.02em;
}

/* Input - animated focus glow with rounded clean border */
.field-input{
  width:100%;
  padding:12px 14px;
  font-size:16px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,0.06);
  background: linear-gradient(180deg,#ffffff,#fbfbff);
  outline:none;
  transition:box-shadow .22s cubic-bezier(.2,.9,.3,1), border-color .18s;
  letter-spacing:0.22em; /* for placeholder dot feel */
  caret-color: var(--accent-dark);
  box-shadow: 0 2px 8px rgba(31,17,64,0.03) inset;
}

.field-input::placeholder{ color: #c7c9d6; opacity:1; }

.field-input:focus{
  border-color: rgba(124,58,237,0.9);
  box-shadow: 0 6px 30px var(--glow), 0 1px 0 rgba(124,58,237,0.06) inset;
  transform: translateZ(0);
}

/* Primary button full width - pixel font touch, soft depth */
.btn-primary{
  display:inline-block;
  width:100%;
  padding:12px 14px;
  margin-top:8px;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;
  border:none;
  font-weight:700;
  border-radius:10px;
  cursor:pointer;
  font-size:13px;
  transition:transform .08s ease, box-shadow .12s;
  font-family: "Press Start 2P", monospace;
  letter-spacing:0.04em;
  box-shadow: 0 8px 20px rgba(124,58,237,0.14);
}

.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow: 0 18px 30px rgba(124,58,237,0.16);
}

.btn-primary:active{
  transform:translateY(0);
}

/* Admin link small and muted */
.admin-link-wrap{
  text-align:center;
  margin-top:8px;
}

.admin-link{
  font-size:13px;
  color:var(--muted);
  text-decoration:none;
  transition:color .12s;
}

.admin-link:hover{
  color: #374151;
}

/* --- Modal de acceso del administrador --- */
.admin-access-modal{
  position:fixed;
  inset:0;
  z-index:100210;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(9, 5, 18, 0.72);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}

.admin-access-modal.is-open{
  display:flex;
  animation:admin-access-fade-in .16s ease-out both;
}

.admin-access-dialog{
  width:min(360px, 100%);
  padding:28px 25px 25px;
  border:4px solid #ff4a85;
  border-radius:10px;
  background:linear-gradient(160deg, #2f1d47 0%, #241436 100%);
  color:#fff;
  text-align:center;
  box-shadow:0 0 20px rgba(255,74,133,.5), 0 24px 70px rgba(0,0,0,.35);
  animation:admin-access-pop-in .2s cubic-bezier(.2,.9,.3,1.1) both;
}

.admin-access-kicker{
  margin:0 0 12px;
  color:#ff9cbe;
  font-family:"Press Start 2P", monospace;
  font-size:9px;
  letter-spacing:.08em;
}

#admin-access-title{
  margin:0;
  color:#fff;
  font-family:"Press Start 2P", monospace;
  font-size:clamp(14px, 3vw, 18px);
  font-weight:400;
  line-height:1.65;
}

.admin-access-copy{
  margin:14px 0 0;
  color:#eadff1;
  font-size:15px;
  line-height:1.45;
}

.admin-access-input{
  width:100%;
  margin:16px 0 8px;
  padding:11px 12px;
  border:2px solid #ff4a85;
  border-radius:5px;
  outline:none;
  box-sizing:border-box;
  background:#150a21;
  color:#fff;
  font:inherit;
  font-size:16px;
  transition:box-shadow .15s ease, border-color .15s ease;
}

.admin-access-input::placeholder{
  color:#b8a9c2;
}

.admin-access-input:focus{
  border-color:#ff8bb0;
  box-shadow:0 0 0 3px rgba(255,74,133,.2);
}

.admin-access-input.has-error{
  border-color:#ffb4c9;
  box-shadow:0 0 0 3px rgba(255,180,201,.18);
}

.admin-access-error{
  min-height:20px;
  margin:0 0 5px;
  color:#ffb4c9;
  font-size:13px;
  line-height:1.4;
}

.admin-access-buttons{
  display:flex;
  gap:10px;
}

.admin-access-buttons button{
  width:100%;
  min-height:42px;
  padding:10px 14px;
  border:0;
  border-radius:5px;
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  line-height:1.2;
  transition:transform .12s ease, filter .12s ease;
}

.admin-access-buttons button:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
}

.admin-access-buttons button:active{
  transform:translateY(0);
}

.admin-access-accept{
  background:#ff4a85;
  color:#fff;
}

.admin-access-cancel{
  background:#4a3b63;
  color:#ddd5e5;
}

@keyframes admin-access-fade-in{
  from{ opacity:0; }
  to{ opacity:1; }
}

@keyframes admin-access-pop-in{
  from{ opacity:0; transform:translateY(8px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* --- Panel de administración: estilos aislados de Hoja 1 --- */
.admin-panel-modal{
  position:fixed;
  inset:0;
  z-index:100200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(31, 18, 58, 0.56);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
}

.admin-panel-modal.is-open{
  display:flex;
}

.admin-panel-dialog{
  position:relative;
  width:100%;
  max-width:950px;
  max-height:min(92vh, 900px);
  overflow:auto;
  padding:clamp(22px, 4vw, 34px);
  border:3px solid rgba(124,58,237,0.16);
  border-radius:22px;
  background:linear-gradient(160deg, #ffffff 0%, #fffaff 100%);
  box-shadow:0 28px 90px rgba(15,23,42,0.36), 0 0 0 8px rgba(236,72,153,0.08);
  color:var(--text);
}

.admin-panel-close{
  position:absolute;
  top:14px;
  right:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border:1px solid rgba(124,58,237,0.1);
  border-radius:12px;
  background:#f7f3ff;
  color:var(--accent-dark);
  cursor:pointer;
  font-size:16px;
  font-weight:900;
  transition:transform .12s ease, background .12s ease;
}

.admin-panel-close:hover{
  transform:translateY(-2px);
  background:#f0e8ff;
}

.admin-panel-kicker{
  margin:0 0 10px;
  color:var(--accent-2);
  font-family:"Press Start 2P", monospace;
  font-size:10px;
  letter-spacing:.08em;
  text-align:center;
}

#admin-panel-title{
  margin:0 auto 26px;
  max-width:500px;
  color:var(--accent-dark);
  font-family:"Press Start 2P", monospace;
  font-size:clamp(14px, 2.1vw, 19px);
  font-weight:400;
  line-height:1.65;
  text-align:center;
}

.admin-panel-sections{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.admin-panel-section{
  min-width:0;
  padding:18px;
  border:1px solid rgba(124,58,237,0.13);
  border-radius:16px;
  background:rgba(255,255,255,.86);
  box-shadow:0 10px 26px rgba(124,58,237,.07);
}

.admin-panel-section-heading{
  display:flex;
  align-items:flex-start;
  gap:9px;
}

.admin-panel-section-icon{
  flex:0 0 auto;
  color:var(--accent-2);
  font-size:21px;
  line-height:1;
}

.admin-panel-section h3{
  margin:0;
  color:#24143e;
  font-family:"Press Start 2P", monospace;
  font-size:11px;
  font-weight:400;
  line-height:1.65;
}

.admin-panel-note{
  margin:12px 0 14px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.admin-panel-status{
  min-height:17px;
  margin:0 0 8px;
  color:var(--accent-dark);
  font-size:11px;
  line-height:1.45;
}

.admin-community-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.admin-community-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  border:1px solid #eee8fa;
  border-radius:11px;
  background:#fcfbff;
}

.admin-community-thumbnail{
  flex:0 0 52px;
  width:52px;
  height:52px;
  border:1px solid #e2d9f2;
  border-radius:8px;
  background:#fff;
  image-rendering:pixelated;
  object-fit:contain;
}

/* The marker is a separate, paint-only layer over report miniatures. */
.report-thumbnail-guide{
  position:relative;
  display:block;
  flex:0 0 45px;
  width:45px;
  height:45px;
  overflow:hidden;
  border-radius:6px;
  isolation:isolate;
}

.report-thumbnail-guide > .community-isolated-row-thumbnail{
  display:block;
  width:45px;
  height:45px;
}

.report-thumbnail-guide-line,
.report-thumbnail-guide-cell{
  position:absolute;
  z-index:2;
  display:block;
  pointer-events:none;
  box-sizing:border-box;
  border:0;
  background:#ff1493;
  box-shadow:
    0 0 2px rgba(255,255,255,.95),
    0 0 5px rgba(255,20,147,.95),
    0 0 9px rgba(255,20,147,.8);
}

.report-thumbnail-guide-line{
  min-height:2px;
  transform:translateY(-50%);
}

.report-thumbnail-guide-cell{
  border:1px solid #ff1493;
  background:rgba(255,20,147,.22);
}

.admin-community-model{
  flex:1 1 auto;
  min-width:0;
}

.admin-community-model strong{
  display:block;
  overflow:visible;
  color:#2f1852;
  font-size:13px;
  white-space:normal;
  overflow-wrap:anywhere;
}

.admin-community-model span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:11px;
}

.admin-community-model .admin-community-technical{
  color:#6d28d9;
  font-size:10px;
  font-weight:800;
}

.admin-community-model .admin-community-badge{
  display:inline-block;
  width:max-content;
  padding:3px 6px;
  border-radius:999px;
  background:#fff7ed;
  color:#b45309;
  font-size:9px;
  font-weight:800;
}

.admin-remove-button{
  flex:0 0 auto;
  width:145px;
  box-sizing:border-box;
  border:0;
  border-radius:8px;
  padding:8px 9px;
  background:#dc2626;
  color:#fff;
  cursor:pointer;
  font-family:"Press Start 2P", monospace;
  font-size:8px;
  line-height:1.45;
  text-transform:uppercase;
  transition:background .12s ease, transform .12s ease;
}

.admin-remove-button:hover{
  transform:translateY(-1px);
  background:#b91c1c;
}

.admin-remove-button.is-marked{
  background:#9ca3af;
  cursor:default;
}

.admin-delete-button{
  flex:0 0 auto;
  width:145px;
  box-sizing:border-box;
  border:0;
  border-radius:8px;
  padding:8px 9px;
  background:#dc2626;
  color:#fff;
  cursor:pointer;
  font-family:"Press Start 2P", monospace;
  font-size:8px;
  line-height:1.45;
  text-transform:uppercase;
  transition:background .12s ease, transform .12s ease;
}

.admin-delete-button:hover{
  transform:translateY(-1px);
  background:#b91c1c;
}

.admin-delete-button:disabled{
  cursor:wait;
  opacity:.72;
}

.admin-community-actions{
  display:flex;
  flex:0 0 145px;
  flex-direction:column;
  gap:6px;
}

.admin-community-actions .admin-remove-button,
.admin-community-actions .admin-delete-button{
  width:100%;
}

.admin-premium-controls{
  display:flex;
  flex-direction:column;
  gap:9px;
}

.admin-premium-input{
  width:100%;
  min-width:0;
  border:1px solid rgba(124,58,237,0.18);
  border-radius:10px;
  padding:11px 12px;
  outline:none;
  background:#fff;
  color:#2f1852;
  font-family:"Press Start 2P", monospace;
  font-size:10px;
  letter-spacing:.04em;
}

.admin-premium-input::placeholder{
  color:#aaa2bd;
  font-family:ui-sans-serif, system-ui, sans-serif;
  letter-spacing:0;
}

.admin-generate-button{
  width:100%;
  border:0;
  border-radius:10px;
  padding:12px 10px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#fff;
  cursor:pointer;
  font-family:"Press Start 2P", monospace;
  font-size:10px;
  line-height:1.55;
  text-transform:uppercase;
  box-shadow:0 8px 18px rgba(124,58,237,.16);
  transition:transform .12s ease, box-shadow .12s ease;
}

.admin-generate-button:hover{
  transform:translateY(-2px);
  box-shadow:0 13px 24px rgba(124,58,237,.22);
}

.admin-gift-button{
  background:linear-gradient(90deg, #c084fc, #a78bfa);
  box-shadow:0 8px 18px rgba(168,85,247,.18);
}

.admin-gift-button:hover{
  box-shadow:0 13px 24px rgba(168,85,247,.28);
}

.admin-key-inventory-section{
  grid-column:1 / -1;
}

.admin-key-inventory-intro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.admin-key-inventory-intro .admin-panel-note{
  margin-bottom:14px;
}

.admin-key-inventory-updated{
  flex:0 0 auto;
  color:#8a7d9c;
  font-size:10px;
  white-space:nowrap;
}

.admin-key-summary{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
}

.admin-key-summary-card{
  min-width:0;
  padding:13px 14px 12px;
  border:1px solid;
  border-radius:12px;
  background:#fff;
}

.admin-key-summary-card.is-free{
  border-color:#b7e8d4;
  background:linear-gradient(145deg, #f5fffa, #ffffff);
}

.admin-key-summary-card.is-active{
  border-color:#c8d8fb;
  background:linear-gradient(145deg, #f5f8ff, #ffffff);
}

.admin-key-summary-card.is-expired{
  border-color:#f7caca;
  background:linear-gradient(145deg, #fff7f7, #ffffff);
}

.admin-pixelfree-summary-card{
  border-color:#f4c6e7;
  background:
    radial-gradient(circle at 100% 0, rgba(236,72,153,.16), transparent 48%),
    linear-gradient(145deg, #fff5fc, #ffffff);
}

.admin-pixelfree-summary-card .admin-key-summary-label{
  color:#9d174d;
}

.admin-key-summary-label,
.admin-key-summary-caption{
  display:block;
}

.admin-key-summary-label{
  color:#51455f;
  font-size:11px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.admin-key-summary-card strong{
  display:block;
  margin-top:3px;
  color:#24143e;
  font-family:"Press Start 2P", monospace;
  font-size:20px;
  font-weight:400;
  line-height:1.4;
}

.admin-key-summary-caption{
  margin-top:4px;
  color:#8a7d9c;
  font-size:10px;
  line-height:1.35;
}

.admin-key-inventory-meter{
  display:flex;
  width:100%;
  height:8px;
  margin:14px 0 16px;
  overflow:hidden;
  border-radius:999px;
  background:#f0edf5;
}

.admin-key-inventory-meter span{
  display:block;
  min-width:0;
  transition:width .25s ease;
}

.admin-key-inventory-meter .is-free{ background:#34c58a; }
.admin-key-inventory-meter .is-active{ background:#5b82e8; }
.admin-key-inventory-meter .is-expired{ background:#ef7070; }

.admin-key-inventory-toolbar{
  display:flex;
  gap:9px;
  margin-bottom:10px;
}

.admin-key-search,
.admin-key-filter{
  display:flex;
  align-items:center;
  min-width:0;
  border:1px solid #e7def3;
  border-radius:10px;
  background:#fff;
  color:#8c7ca0;
}

.admin-key-search{
  flex:1 1 auto;
  gap:7px;
  padding:0 11px;
}

.admin-key-search input,
.admin-key-filter select{
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:#35244a;
  font:inherit;
  font-size:12px;
}

.admin-key-search input{
  width:100%;
  padding:10px 0;
}

.admin-key-search input::placeholder{
  color:#a99bb8;
}

.admin-key-filter{
  flex:0 0 180px;
  padding:0 9px;
}

.admin-key-filter select{
  width:100%;
  height:36px;
  cursor:pointer;
}

.admin-key-list-wrap{
  overflow:hidden;
  border:1px solid #eee8fa;
  border-radius:11px;
  background:#fcfbff;
}

.admin-key-list-heading,
.admin-key-inventory-item{
  display:grid;
  grid-template-columns:minmax(150px, 1.2fr) minmax(80px, .7fr) minmax(125px, .8fr);
  align-items:center;
  gap:12px;
}

.admin-key-list-heading{
  padding:9px 12px;
  border-bottom:1px solid #eee8fa;
  background:#f8f4ff;
  color:#8c7ca0;
  font-size:9px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.admin-key-inventory-list{
  max-height:250px;
  margin:0;
  padding:0;
  overflow-y:auto;
  list-style:none;
  scrollbar-color:#c7b5e0 #f5f0fb;
  scrollbar-width:thin;
}

.admin-key-inventory-item{
  padding:9px 12px;
  border-bottom:1px solid #f0ebf6;
  color:#453653;
  font-size:11px;
}

.admin-key-inventory-item:last-child{
  border-bottom:0;
}

.admin-key-code{
  overflow:hidden;
  color:#2f1852;
  font-family:"Press Start 2P", monospace;
  font-size:9px;
  letter-spacing:.03em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.admin-key-state{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  align-items:center;
  gap:5px;
  border-radius:999px;
  padding:4px 7px;
  font-size:10px;
  font-weight:800;
  line-height:1;
}

.admin-key-state::before{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  content:"";
}

.admin-key-state.is-free{
  background:#e5f8ef;
  color:#178458;
}

.admin-key-state.is-active{
  background:#eaf0ff;
  color:#3e65bd;
}

.admin-key-state.is-expired{
  background:#ffebeb;
  color:#c34a4a;
}

.admin-key-expiry{
  color:#6f617f;
  font-variant-numeric:tabular-nums;
}

.admin-key-expiry.is-active{
  color:#315db8;
  font-weight:800;
}

.admin-key-expiry.is-expired{
  color:#b15a5a;
}

.admin-key-inventory-empty{
  margin:0;
  padding:25px 12px;
  color:#8c7ca0;
  font-size:12px;
  text-align:center;
}

@media (max-width:640px){
  .admin-access-modal{ padding:14px; }
  .admin-access-dialog{ padding:24px 18px 19px; }
  .admin-panel-modal{ padding:12px; }
  .admin-panel-dialog{ padding:22px 15px 16px; border-radius:17px; }
  .admin-panel-sections{ grid-template-columns:1fr; }
  .admin-key-inventory-section{ grid-column:auto; }
  .admin-panel-section{ padding:14px; }
  .admin-community-item{ align-items:center; }
  .admin-community-actions{ flex-basis:116px; }
  .admin-remove-button,
  .admin-delete-button{ max-width:116px; }
  .admin-key-inventory-intro{ align-items:flex-start; flex-direction:column; gap:0; }
  .admin-key-inventory-updated{ margin-top:-7px; margin-bottom:12px; }
  .admin-key-summary{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:7px; }
  .admin-key-summary-card{ padding:10px 9px; }
  .admin-key-summary-card strong{ font-size:clamp(13px, 3.7vw, 15px); }
  .admin-key-summary-caption{ font-size:9px; }
  .admin-key-inventory-toolbar{ flex-direction:column; }
  .admin-key-filter{ flex-basis:auto; }
  .admin-key-list-heading,
  .admin-key-inventory-item{
    grid-template-columns:minmax(98px, 1.2fr) minmax(60px, .8fr) minmax(76px, .8fr);
    gap:7px;
    padding-left:9px;
    padding-right:9px;
  }
  .admin-key-list-heading{ font-size:8px; }
  .admin-key-code{ font-size:8px; }
}

/* Responsive behavior: stack vertically on narrow screens */
@media (max-width:880px){
  .viewport{
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:16px;
  }
  .hoja1-inner-wrapper{
    flex-direction:column;
    gap:14px;
    padding:8px 6px;
  }
  .branding{
    text-align:center;
    max-width:100%;
  }
  .card{
    margin-top:0;
    align-self:stretch;
    width:100%;
    max-width:100%;
  }
  .hoja2-body{display:flex;flex-direction:column;gap:14px}
  .hoja2-top{justify-content:center}
  .hoja2{padding:16px}
}

/* Ensure everything comfortably fits a single mobile viewport height:
   reduce spacing slightly on small heights */
@media (max-height:640px){
  body{padding:12px}
  .viewport{gap:12px;padding:12px}
  .card{padding:16px}
  .title{font-size:28px}
  .description{font-size:13px}
}

/* Message area under the input */
.field-message{
  min-height:20px;
  font-size:13px;
  margin-top:6px;
  color:var(--muted);
  transition:color .12s, opacity .12s;
}
.field-message.error{
  color:#b91c1c; /* red-700 */
}
.field-message.ok{
  color:#065f46; /* green-800 */
}
.field-message.pending{
  color:#5b21b6;
}
.field-message.blocked{
  margin-top:8px;
  padding:12px 13px;
  border:1px solid rgba(190,24,93,.22);
  border-radius:12px;
  background:linear-gradient(135deg, #fff1f8, #fff7ed);
  color:#9f1239;
  font-size:12px;
  font-weight:700;
  line-height:1.55;
  box-shadow:0 8px 20px rgba(190,24,93,.08);
  animation:free-trial-blocked-in .2s ease-out both;
}
@keyframes free-trial-blocked-in{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Hoja 2 panel isolation: start fully hidden and only show when activated */
#hoja2-panel{ display:none !important; width:100%; max-width:var(--max-width); margin-top:16px; margin-left:auto; margin-right:auto; box-sizing:border-box; }

/* Hoja 2 styles (inner shell that animates when revealed) */
.hoja2{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  display:block;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,245,255,0.96));
  border-radius: var(--radius);
  padding:28px;
  box-shadow: 0 14px 32px var(--shadow-purple);
  border: 1px solid rgba(124,58,237,0.06);
}

.hoja2-inner{display:flex;flex-direction:column;gap:16px;}

/* Access timer and its compact expiry notice share one visual status area. */
.access-status-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:min(100%, 560px);
  margin:0 auto 1.5rem;
}

/* Centered, pill-style timer banner for Hoja 2 (top centered) */
.timer-banner-top {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    text-align: center !important;
    padding: 0.6rem 1.5rem !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    max-width: fit-content !important;
    font-weight: 800 !important;
    color: var(--accent-dark) !important;
    font-size: 14px !important;
    z-index: 2000 !important;
}

.expiry-alert{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:8px;
  width:min(100%, 520px);
  box-sizing:border-box;
  padding:10px 14px;
  border:1px solid rgba(217,119,6,.3);
  border-radius:12px;
  background:linear-gradient(135deg, #fffbeb, #fff7ed);
  color:#92400e;
  font-family:ui-sans-serif, system-ui, sans-serif;
  font-size:12px;
  font-weight:750;
  line-height:1.45;
  text-align:left;
  box-shadow:0 6px 16px rgba(217,119,6,.09);
  animation:expiry-alert-in .2s ease-out both;
}

.expiry-alert.is-premium{
  border-color:rgba(234,88,12,.32);
  background:linear-gradient(135deg, #fff7ed, #fff1f2);
  color:#9a3412;
  box-shadow:0 6px 16px rgba(234,88,12,.1);
}

.expiry-alert[hidden]{
  display:none;
}

@keyframes expiry-alert-in{
  from{ opacity:0; transform:translateY(-3px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Report row active highlight used by Hoja 3 interactive report (one active row at a time) */
.fila-tejiendo-activa {
    background-color: rgba(255, 235, 59, 0.12) !important;
    transition: background-color 0.18s ease, box-shadow 0.18s ease !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    box-shadow: 0 6px 18px rgba(212, 175, 55, 0.06) !important;
}

/* Ensure individual cells keep internal grid alignment but allow visual rounding on row ends */
.fila-tejiendo-activa td {
    border: none !important;
    background-clip: padding-box !important;
}

/* Rounded left end: apply to the first narrow cell (Fila column) */
.fila-tejiendo-activa td.col-narrow:first-child {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

/* Rounded right end: apply to the last cell (Total column) */
.fila-tejiendo-activa td.col-center:last-child,
.fila-tejiendo-activa td.col-center.total:last-child {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.hoja2-top{display:flex;justify-content:center;margin-bottom:18px;}
.hoja2-cta{
  width:auto;
  padding:14px 20px;
  border-radius:14px;
  font-family: "Press Start 2P", monospace;
  font-size:16px; /* larger CTA */
  letter-spacing:0.02em;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;
  box-shadow: 0 12px 30px rgba(124,58,237,0.12);
}

.hoja2-body{display:grid;grid-template-columns:40% 60%;gap:24px;align-items:start;align-content:start;}
.hoja2-history{grid-column:1 / 2;min-width:220px;padding:8px;}
.hoja2-community{grid-column:2 / 3;min-width:260px;padding:8px;}

.hoja2-featured{
  margin:0 0 24px;
  padding:18px;
  border:1px solid rgba(236,72,153,0.16);
  border-radius:18px;
  background:
    radial-gradient(circle at 92% 8%, rgba(251,191,36,0.16), transparent 28%),
    linear-gradient(135deg, rgba(255,250,253,0.98), rgba(247,243,255,0.98));
  box-shadow:0 12px 28px rgba(124,58,237,0.07);
}

.featured-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 12px;
}

.featured-heading .hoja2-section-title{ margin-bottom:0; }

.featured-kicker{
  margin:0 0 7px;
  color:#db2777;
  font-family:"Press Start 2P", monospace;
  font-size:9px;
  letter-spacing:.05em;
}

.featured-spark{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:14px;
  color:#b45309;
  background:rgba(251,191,36,0.18);
  font-size:24px;
}

.featured-grid:empty::before{
  content:"Todavía no hay diseños destacados.";
  display:block;
  grid-column:1 / -1;
  padding:14px 8px;
  color:var(--muted);
  text-align:center;
  font-size:14px;
}

.featured-grid .pattern-card{
  border-color:rgba(236,72,153,0.12);
}

.hoja2-section-title{
  margin:0 0 12px 0;
  font-weight:800;
  color:var(--accent-dark);
  font-size:clamp(18px,2.2vw,26px); /* larger, prominent headings on desktop */
  letter-spacing:0.02em;
}

.history-box{
  border:2px dashed rgba(124,58,237,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(250,250,255,0.8));
  border-radius:12px;
  padding:18px;
  min-height:84px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.history-empty{color:var(--muted);margin:0;text-align:center;padding:4px 8px;font-size:14px}

/* Community grid */
.community-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px;
}

/* pattern card */
.pattern-card{
  background:#fff;
  border-radius:12px;
  padding:10px;
  position:relative;
  box-shadow: 0 6px 18px rgba(15,23,42,0.04);
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:stretch;
  border:1px solid rgba(15,23,42,0.03);
}

.pattern-thumb{
  height:96px; /* larger preview badge for readability */
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:rgba(31,17,64,0.95);
  background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(236,72,153,0.04));
  font-size:18px; /* larger dimension text */
}

.pattern-thumb--small{height:64px}
.pattern-thumb--medium{height:80px}

.pattern-meta{display:flex;flex-direction:column;gap:6px}
.pattern-meta strong{font-size:16px; font-weight:800;}
.pattern-author{font-size:14px;color:var(--muted)}

.official-design-option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(124,58,237,0.14);
  border-radius:10px;
  background:linear-gradient(135deg,rgba(250,245,255,.86),rgba(255,247,251,.92));
  color:#312e81;
  cursor:pointer;
  font-size:13px;
  line-height:1.35;
}

.official-design-option input{
  width:17px;
  height:17px;
  margin:1px 0 0;
  accent-color:#db2777;
  flex:0 0 auto;
}

.official-design-option span{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.official-design-option small{
  color:var(--muted);
  font-size:11px;
}

.official-badge{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  gap:4px;
  width:max-content;
  padding:4px 7px;
  border-radius:999px;
  background:#fff7ed;
  color:#b45309;
  font-size:11px;
  font-weight:800;
}

.featured-badge{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  gap:4px;
  width:max-content;
  padding:4px 7px;
  border-radius:999px;
  background:#fdf2f8;
  color:#be185d;
  font-size:11px;
  font-weight:800;
}

.admin-feature-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
  width:38px;
  height:38px;
  margin:0;
  border:1px solid rgba(245,158,11,0.28);
  border-radius:12px;
  background:#fffbeb;
  color:#b45309;
  cursor:pointer;
  font-size:20px;
  line-height:1;
  transition:transform .12s ease, background .12s ease, box-shadow .12s ease;
}

.admin-feature-button:hover{
  transform:translateY(-2px) scale(1.04);
  background:#fef3c7;
  box-shadow:0 7px 14px rgba(245,158,11,0.16);
}

.admin-feature-button:disabled{
  cursor:wait;
  opacity:.65;
  transform:none;
}

.admin-feature-button.is-featured{
  border-color:rgba(234,88,12,0.3);
  background:#ffedd5;
  color:#c2410c;
  cursor:pointer;
}

.btn-load{
  margin-top:8px;
  background:transparent;
  border:1px solid rgba(124,58,237,0.12);
  color:var(--accent-dark);
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:800;
  font-size:15px; /* larger, easier to read */
}

@media (max-width:880px){
  .hoja2-body{flex-direction:column}
  .hoja2-top{justify-content:center}
  .hoja2{padding:16px}
  .hoja2-featured{padding:14px}
  .featured-kicker{font-size:8px}
}

/* Hoja3 editor styles */
.hoja3-panel{ width:100%; max-width:var(--max-width); margin:18px auto; box-sizing:border-box; }
.hoja3{ background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,245,255,0.98)); border-radius:var(--radius); padding:18px; box-shadow: 0 18px 40px var(--shadow-purple); border:1px solid rgba(124,58,237,0.06); }
.hoja3-header{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.btn-back{ background:transparent; border:none; font-weight:700; color:var(--accent-dark); cursor:pointer; padding:8px 12px; border-radius:10px; }
.hoja3-title{ margin:0; font-size:20px; color:var(--accent-dark); font-weight:800; }

.hoja3-body{ display:flex; gap:18px; align-items:flex-start; }

/* Ensure the left controls column is a strict vertical flex column so we can control ordering */
.hoja3-controls{
  width:320px;
  min-width:260px;
  display:flex !important;
  flex-direction:column !important;
  gap:12px;
}

/* Default child fallback order to keep unpredictable injection safe */
.hoja3-controls > * { order: 99 !important; }

/* 1. Top pink uploader header: force first */
#hoja3-top-header { order: 1 !important; }

/* 2. Orientation block: target the direct child wrapper that contains the orientation buttons */
.hoja3-controls > div:has(#btn-orientacion-normal, #btn-orientacion-espejo) {
  order: 2 !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

/* 3. ANCHO DE CELDAS wrapper — target wrapper that contains the new numeric input */
.hoja3-controls > div:has(input#input-ancho-celdas-nuevo) {
  order: 3 !important;
}

/* 4. ALTO DE CELDAS wrapper */
.hoja3-controls > div:has(input#input-alto-celdas-nuevo) {
  order: 4 !important;
}

/* 5. Orden de secuencia block (toggle-buttons) */
.hoja3-controls > div:has(.toggle-buttons[aria-label="Orden de secuencia"]) {
  order: 5 !important;
}

/* 6. Modo de lectura block (toggle-buttons) */
.hoja3-controls > div:has(.toggle-buttons[aria-label="Modo de lectura"]) {
  order: 6 !important;
}

/* Keep labels/inputs comfortable spacing when re-ordered */
.hoja3-controls > div { display: flex; flex-direction: column; gap: 8px; }
.hoja3-controls label { margin: 0; }
.hoja3-controls input, .hoja3-controls button { z-index: 1; }

/* Keep the native file control invisible while preserving its clickable area.
   The visible pixel-art upload surface is the parent label. */
#hoja3 input[type="file"]#img-upload{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  cursor:pointer !important;
  z-index:99999 !important;
}

/* Hoja3 controls inner input styles */
.hoja3-controls label{ display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--muted); }
.hoja3-controls input[type="number"]{ padding:8px 10px; border-radius:10px; border:1px solid rgba(15,23,42,0.06); font-size:15px; }

.hoja3-row{ display:flex; gap:8px; align-items:center; }
.btn-primary.small{ padding:8px 10px; font-size:13px; border-radius:10px; }
.btn-primary.ghost{ background:transparent; color:var(--accent-dark); border:1px solid rgba(124,58,237,0.08); box-shadow:none; }

.toggle-group{ border-radius:10px; padding:8px; background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(250,250,255,0.8)); border:1px solid rgba(124,58,237,0.04); }
.toggle-group legend{ font-weight:800; color:var(--accent-dark); margin-bottom:6px; }

.palette-area h4{ margin:0 0 6px 0; color:var(--accent-dark); font-weight:800; }
.palette-list{
  /* Spacious vertical card list for selected colors (desktop-friendly height and smooth vertical scroll) */
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
  padding: 0.6rem 0.8rem !important;
  margin: 0 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-sizing: border-box !important;
  max-height: 320px !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}
.palette-item{
  /* Compact horizontal card for ultra-visibility without scroll */
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 4px 8px !important;
  margin-bottom: 4px !important;
  height: auto !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  font-size: 0.85rem !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}
.palette-item .swatch{ width:18px !important; height:18px !important; border-radius:4px !important; border:1px solid rgba(0,0,0,0.06) !important; flex:0 0 auto !important; }
.palette-item .palette-name{ flex:1; border:none; background:transparent; font-weight:700; font-size:0.9rem !important; padding:0 !important; margin:0 !important; }
.palette-item .palette-hex{ display:none !important; } /* hex shown inline with name now */
.palette-remove{ background:transparent; border:none; cursor:pointer; font-size:14px; color:#b91c1c; padding:2px 4px; }

.hoja3-canvas-area{ flex:1 1 auto; display:flex; flex-direction:column; gap:8px; align-items:stretch; }
.canvas-wrap{ position:relative; overflow:auto; border-radius:12px; background: #fff; border:1px solid rgba(15,23,42,0.04); max-width:100%; max-height:640px; }
#patternCanvas{ display:block; background:#fff; image-rendering: pixelated; }
#contenedor-marcador-rosa{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:9999; display:block !important; }

/* Central pattern identity field: the only title source for editor actions. */
.pattern-name-save-group{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 420px;
  min-width:300px;
  max-width:580px;
  margin-left:auto;
}
.hoja3-header .pattern-name-field{
  display:flex;
  flex:1 1 360px;
  min-width:220px;
  max-width:none;
  flex-direction:column;
  gap:5px;
  margin-left:0;
  padding:8px 10px 9px;
  border:2px solid rgba(124,58,237,0.22);
  border-radius:9px;
  background:linear-gradient(135deg, rgba(255,255,255,0.98), rgba(253,242,248,0.96));
  box-shadow:4px 4px 0 rgba(124,58,237,0.10), inset 0 0 0 1px rgba(255,255,255,0.7);
  box-sizing:border-box;
}
.pattern-name-label{
  display:block;
  cursor:text;
}
.pattern-name-field span{
  color:var(--accent-dark);
  font-family:"Press Start 2P", monospace;
  font-size:9px;
  letter-spacing:.04em;
  line-height:1.35;
}
.pattern-name-field input{
  width:100%;
  height:42px;
  min-width:0;
  padding:5px 6px;
  border:0;
  border-bottom:2px solid rgba(124,58,237,0.24);
  outline:0;
  background:transparent;
  color:#261244;
  font-family:"Press Start 2P", monospace;
  font-size:12px;
  line-height:1.5;
  text-transform:uppercase;
  box-sizing:border-box;
}
.pattern-name-save-row{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
}
.pattern-name-save-row input{
  flex:1 1 auto;
  width:auto;
}
.pattern-name-field input::placeholder{
  color:#a78bba;
  opacity:.85;
}
.pattern-name-field input:focus{
  border-bottom-color:var(--accent-2);
  box-shadow:0 3px 0 rgba(236,72,153,0.12);
}
.pattern-save-icon{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
  width:44px !important;
  min-width:44px;
  height:42px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:9px !important;
  font-family:"Press Start 2P", monospace !important;
  font-size:18px !important;
  line-height:1;
  letter-spacing:0 !important;
  box-sizing:border-box;
}
.hoja3-upload-label{
  white-space:nowrap;
}
@media (max-width:700px){
  .hoja3-header{
    flex-wrap:wrap;
    gap:8px;
  }
  .hoja3-header .hoja3-title{
    flex:1 1 auto !important;
    min-width:150px;
    font-size:18px;
  }
  .pattern-name-save-group{
    order:3;
    flex:1 1 100%;
    min-width:0;
    max-width:none;
    margin-left:0;
  }
  .hoja3-header .pattern-name-field{
    flex:1 1 auto;
    max-width:none;
    margin-left:0;
  }
}

.hoja3-hint{ margin:0; color:var(--muted); font-size:13px; }
.report-box{ margin-top:12px; padding:12px; background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,250,255,0.98)); border-radius:10px; border:1px solid rgba(124,58,237,0.04); max-height:520px; overflow:auto; }

/* Free-trial protection is scoped to the rendered count report only. */
#report-section.pixelfree-report-protected #reportBox,
#report-section.pixelfree-report-protected #reportBox *{
  -webkit-user-select:none !important;
  user-select:none !important;
}
#report-section.pixelfree-report-protected #reportBox{
  position:relative;
  overflow:hidden;
  background-image:
    repeating-linear-gradient(
      -18deg,
      rgba(124,58,237,0.035) 0,
      rgba(124,58,237,0.035) 2px,
      transparent 2px,
      transparent 18px
    );
}
#report-section.pixelfree-report-protected #reportBox::before{
  content:"FREE  •  2 PROYECTOS  •  FREE  •  2 PROYECTOS";
  position:absolute;
  z-index:5;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  color:rgba(91,33,182,0.15);
  font-family:"Press Start 2P", monospace;
  font-size:10px;
  line-height:2;
  letter-spacing:.08em;
  text-align:center;
  white-space:normal;
  pointer-events:none;
  transform:rotate(-18deg);
  text-shadow:2px 0 rgba(236,72,153,0.08);
}
#report-section.pixelfree-report-capture-hidden #reportBox{
  visibility:hidden !important;
  opacity:0 !important;
  filter:blur(10px) !important;
}

/* Hoja 3 marker (pink guide overlay) */
#marcador-guia-rosa{
  position: absolute;
  pointer-events: none;
  background: rgba(236, 72, 153, 0.35);
  border: 2px solid #ec4899;
  display: none;
  z-index: 50;
  transition: all 0.1s ease;
}

/* Ensure printed table looks technical: force borders and wrapping when printed */
@media print{
  .report-table{ width:100% !important; border-collapse:collapse !important; }
  .report-table th, .report-table td{ border:1px solid #000 !important; color:#000 !important; -webkit-print-color-adjust:exact; }
  .report-table td{ word-break:break-word; white-space:normal; }

  /* Destructive rule: remove any miniatures or canvas from the printed PDF */
  td img, .mini-mapa-hilera, td canvas, .mini-canvas-container canvas, .mini-mapa-tabla { 
      display: none !important; 
      visibility: hidden !important; 
      width: 0 !important; 
      height: 0 !important; 
  }

  body *{ visibility: hidden; }
  #reportBox, #reportBox *{ visibility: visible; }
  #reportBox{ position:fixed; inset:0; margin:0; padding:12mm; background:#fff; }
}

.btn-primary.large{ padding:12px 14px; margin-top:6px; font-size:15px; border-radius:12px; }

/* Hoja 2 — Unified card title/author symmetry and refined guide label */
.card-title, .card h3 {
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-top: 8px !important;
    margin-bottom: 4px !important;
    text-align: center !important;
}
.card-author, .card span, .card p {
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    text-align: center !important;
}

/* Specific Hoja2 guide label floating above CTA */
.hoja2-guide { display:flex; gap:0.5rem; align-items:center; justify-content:center; }
.hoja2-guide .guide-label {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    color: #374151;
    display:inline-block;
    vertical-align:middle;
}
.hoja2-guide .guide-button {
    font-weight: 700;
    letter-spacing: 0.01em;
    background: transparent;
    border: none;
    padding: 0;
    margin-left: 6px;
    color: #7c3aed;
    text-decoration: underline;
    cursor: pointer;
}

/* Hoja 3 mobile: make left control column scrollable and compact when keyboard reduces viewport.
   Ensures inputs (Alto/Ancho) remain visible and buttons (Subir Imagen / Reset) flow without overlapping. */
@media (max-width: 768px) {
  .hoja3-controls {
    max-height: calc(100vh - 60px) !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }

  /* Ensure the width/height number inputs remain visible and are not pushed out by buttons */
  .hoja3-controls label { margin-bottom: 6px !important; }

  /* Button row: keep buttons compact and allow wrapping if needed */
  .hoja3-row {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }
  .hoja3-row .btn-primary.small,
  .hoja3-row input[type="file"] {
    flex: 0 1 auto !important;
    min-width: 44px !important;
  }
  .btn-primary.small {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }

  /* Make primary large buttons slightly smaller on phones so they don't push layout */
  .btn-primary.large {
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  /* Ensure palette area scrolls within the controls column without growing the page height */
  .palette-list {
    max-height: 220px !important;
    overflow-y: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Conversion landing modal: neon purple / pink pixel-art treatment
   -------------------------------------------------------------------------- */
.neon-modal-overlay{
  position:fixed;
  inset:0;
  z-index:100020;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  box-sizing:border-box;
  background:rgba(18, 8, 37, .78);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.neon-landing-modal{
  position:relative;
  width:min(100%, 860px);
  max-height:min(92vh, 940px);
  overflow-y:auto;
  box-sizing:border-box;
  padding:24px;
  border:1px solid rgba(255, 91, 205, .68);
  border-radius:28px;
  color:#fff;
  background:
    radial-gradient(circle at 90% 0%, rgba(236,72,153,.2), transparent 30%),
    radial-gradient(circle at 0% 72%, rgba(124,58,237,.28), transparent 34%),
    linear-gradient(145deg, #160d2b 0%, #24143e 48%, #130a27 100%);
  box-shadow:
    0 30px 100px rgba(10, 3, 24, .72),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 42px rgba(236,72,153,.18);
  scrollbar-color:#d946ef rgba(255,255,255,.08);
  scrollbar-width:thin;
}

.neon-landing-modal::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size:18px 18px;
  mask-image:linear-gradient(to bottom, #000, transparent 46%);
}

.neon-modal-close{
  position:absolute;
  z-index:2;
  top:16px;
  right:16px;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;
  color:#fff;
  background:rgba(18,8,37,.62);
  cursor:pointer;
  font-size:18px;
  font-weight:900;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}

.neon-modal-close:hover,
.neon-modal-close:focus-visible{
  transform:rotate(8deg) scale(1.06);
  border-color:#ff59c8;
  outline:none;
  background:#7c2d78;
}

.neon-landing-hero{
  position:relative;
  z-index:1;
  overflow:hidden;
  padding:42px 52px 34px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:22px;
  text-align:center;
  background:
    linear-gradient(135deg, rgba(124,58,237,.52), rgba(190,24,93,.2)),
    rgba(29,16,54,.76);
  box-shadow:0 16px 34px rgba(10,3,24,.18);
}

.neon-landing-hero::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-70px;
  bottom:-96px;
  border:22px solid rgba(255,88,201,.12);
  transform:rotate(45deg);
}

.neon-landing-kicker,
.neon-section-label,
.neon-payment-label{
  display:block;
  color:#f9a8d4;
  font-family:"Press Start 2P", monospace;
  font-size:9px;
  letter-spacing:.08em;
  line-height:1.6;
  text-transform:uppercase;
}

.neon-landing-hero h3{
  position:relative;
  z-index:1;
  max-width:680px;
  margin:16px auto 14px;
  color:#fff;
  font-family:"Press Start 2P", monospace;
  font-size:clamp(19px, 3.2vw, 31px);
  font-weight:400;
  letter-spacing:.02em;
  line-height:1.55;
  text-shadow:3px 3px 0 #7e22ce, 0 0 24px rgba(255,72,194,.48);
}

.neon-landing-hero p{
  position:relative;
  z-index:1;
  max-width:590px;
  margin:0 auto;
  color:#f3e8ff;
  font-size:15px;
  line-height:1.65;
}

.pixel-sparkle-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:22px;
  color:#f9a8d4;
  font-size:12px;
  text-shadow:0 0 12px #ff43c3;
}

.pixel-sparkle-row span:nth-child(2n){
  color:#c4b5fd;
  font-size:9px;
}

.neon-community-card{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:18px;
  margin-top:18px;
  padding:20px 22px;
  border:2px solid #ff4fc3;
  border-radius:18px;
  background:#2a1b40;
  box-shadow:0 0 24px rgba(255,79,195,.13), 0 12px 26px rgba(9,3,23,.2);
}

.neon-community-mark{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:15px;
  color:#fff;
  background:linear-gradient(145deg, #ff3cac, #7c3aed);
  box-shadow:0 0 18px rgba(255,60,172,.34);
  font-size:29px;
  line-height:1;
}

.neon-community-copy h4,
.neon-purchase-heading h4{
  margin:3px 0 6px;
  color:#fff;
  font-size:20px;
  line-height:1.25;
}

.neon-community-copy p,
.neon-payment-card p{
  margin:0;
  color:#e9d5ff;
  font-size:13px;
  line-height:1.55;
}

.neon-tiktok-button,
.neon-paypal-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  box-sizing:border-box;
  border-radius:11px;
  color:#fff;
  font-family:"Press Start 2P", monospace;
  font-size:9px;
  line-height:1.5;
  text-align:center;
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.neon-tiktok-button{
  padding:12px 16px;
  border:1px solid rgba(255,255,255,.24);
  background:linear-gradient(135deg, #ec4899, #a21caf);
  box-shadow:0 8px 18px rgba(236,72,153,.22);
}

.neon-tiktok-button:hover,
.neon-tiktok-button:focus-visible,
.neon-paypal-button:hover,
.neon-paypal-button:focus-visible,
.neon-whatsapp-banner:hover,
.neon-whatsapp-banner:focus-visible{
  transform:translateY(-2px);
  filter:saturate(1.12) brightness(1.06);
  outline:none;
}

.neon-purchase-section{
  position:relative;
  z-index:1;
  margin-top:25px;
}

.neon-purchase-heading{
  margin-bottom:13px;
  text-align:center;
}

.neon-purchase-heading h4{
  margin-top:7px;
  font-family:"Press Start 2P", monospace;
  font-size:15px;
  font-weight:400;
}

.neon-payment-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
}

.neon-payment-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:20px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  background:rgba(255,255,255,.065);
  box-shadow:0 12px 25px rgba(8,2,22,.18);
}

.neon-payment-card-heading{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:54px;
}

.neon-payment-card h5{
  margin:4px 0 0;
  color:#fff;
  font-size:21px;
  line-height:1.2;
}

.neon-payment-card p{
  min-height:42px;
  margin:15px 0 17px;
}

.neon-payment-icon{
  display:grid;
  place-items:center;
  flex:0 0 46px;
  width:46px;
  height:46px;
  border-radius:14px;
  font-family:Arial, sans-serif;
  font-size:29px;
  font-weight:900;
}

.paypal-icon{
  color:#003087;
  background:linear-gradient(145deg, #fff, #ffc439);
  box-shadow:0 0 18px rgba(255,196,57,.22);
}

.local-icon{
  color:#f0abfc;
  border:1px solid rgba(240,171,252,.34);
  background:rgba(124,58,237,.42);
}

.neon-paypal-card{
  border-color:rgba(0,112,186,.68);
  background:linear-gradient(145deg, rgba(0,48,135,.48), rgba(42,27,64,.78));
}

.neon-paypal-card .neon-section-label,
.neon-paypal-card .neon-payment-label{
  color:#93c5fd;
}

.neon-paypal-button{
  width:100%;
  padding:13px 15px;
  border:1px solid rgba(255,196,57,.62);
  background:linear-gradient(135deg, #0070ba, #003087);
  box-shadow:0 7px 18px rgba(0,48,135,.3), 0 0 0 2px rgba(255,196,57,.1) inset;
}

.neon-local-card{
  border-color:rgba(244,114,182,.3);
  background:linear-gradient(145deg, rgba(190,24,93,.2), rgba(42,27,64,.82));
}

.neon-bank-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:auto;
}

.neon-bank-button{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  gap:7px;
  min-width:0;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  color:#fff;
  cursor:pointer;
  font-family:ui-sans-serif, system-ui, sans-serif;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
  text-align:left;
  transition:transform .16s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.neon-bank-button:hover,
.neon-bank-button:focus-visible{
  transform:translateY(-2px);
  outline:none;
}

.bank-pichincha{
  background:linear-gradient(135deg, rgba(202,138,4,.65), rgba(180,83,9,.52));
}

.bank-pichincha:hover,
.bank-pichincha:focus-visible{
  border-color:#facc15;
  background:linear-gradient(135deg, #ca8a04, #b45309);
  box-shadow:0 8px 18px rgba(202,138,4,.25);
}

.bank-guayaquil{
  background:linear-gradient(135deg, rgba(219,0,117,.68), rgba(157,23,77,.56));
}

.bank-guayaquil:hover,
.bank-guayaquil:focus-visible{
  border-color:#f9a8d4;
  background:linear-gradient(135deg, #db0075, #9d174d);
  box-shadow:0 8px 18px rgba(219,0,117,.24);
}

.bank-button-logo{
  display:grid;
  place-items:center;
  width:23px;
  height:23px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:7px;
  background:rgba(255,255,255,.15);
  font-size:12px;
}

.bank-button-arrow{
  font-size:17px;
  opacity:.78;
}

.neon-whatsapp-banner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:20px;
  padding:16px 19px;
  border:1px solid rgba(187,247,208,.7);
  border-radius:17px;
  color:#fff;
  background:linear-gradient(135deg, #25d366, #128c7e);
  box-shadow:0 12px 26px rgba(18,140,126,.25), 0 0 0 2px rgba(255,255,255,.1) inset;
  text-decoration:none;
  transition:transform .16s ease, filter .16s ease, box-shadow .16s ease;
  animation:whatsapp-soft-pulse 2.8s ease-in-out infinite;
}

.whatsapp-banner-icon{
  display:grid;
  place-items:center;
  flex:0 0 42px;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#fff;
  color:#128c7e;
  font-size:23px;
}

.whatsapp-banner-copy{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.whatsapp-banner-copy strong{
  font-family:"Press Start 2P", monospace;
  font-size:11px;
  font-weight:400;
  line-height:1.5;
}

.whatsapp-banner-copy small{
  font-size:13px;
  font-weight:700;
  line-height:1.35;
}

.whatsapp-banner-arrow{
  font-size:25px;
  font-weight:900;
}

.neon-landing-footnote{
  position:relative;
  z-index:1;
  margin:14px 0 0;
  color:#c4b5fd;
  font-size:11px;
  text-align:center;
}

@keyframes whatsapp-soft-pulse{
  0%, 100%{ box-shadow:0 12px 26px rgba(18,140,126,.25), 0 0 0 2px rgba(255,255,255,.1) inset; }
  50%{ box-shadow:0 14px 30px rgba(18,140,126,.36), 0 0 0 3px rgba(187,247,208,.16) inset; }
}

@media (max-width:700px){
  .neon-modal-overlay{
    align-items:flex-start;
    padding:12px;
  }

  .neon-landing-modal{
    max-height:calc(100vh - 24px);
    padding:12px;
    border-radius:21px;
  }

  .neon-modal-close{
    top:11px;
    right:11px;
  }

  .neon-landing-hero{
    padding:40px 18px 25px;
    border-radius:16px;
  }

  .neon-landing-hero h3{
    margin-top:14px;
    font-size:18px;
    line-height:1.6;
  }

  .neon-landing-hero p{
    font-size:13px;
  }

  .neon-community-card{
    grid-template-columns:auto minmax(0, 1fr);
    gap:13px;
    padding:16px;
  }

  .neon-community-mark{
    width:42px;
    height:42px;
    font-size:23px;
  }

  .neon-community-copy h4{
    font-size:17px;
  }

  .neon-community-copy p{
    font-size:12px;
  }

  .neon-tiktok-button{
    grid-column:1 / -1;
    width:100%;
  }

  .neon-payment-grid{
    grid-template-columns:1fr;
  }

  .neon-payment-card p{
    min-height:0;
  }

  .neon-whatsapp-banner{
    padding:14px;
  }

  .whatsapp-banner-copy strong{
    font-size:9px;
  }

  .whatsapp-banner-copy small{
    font-size:12px;
  }
}

@media (max-width:430px){
  .neon-bank-grid{
    grid-template-columns:1fr;
  }

  .neon-landing-kicker,
  .neon-section-label,
  .neon-payment-label{
    font-size:8px;
  }
}

/* The login card has legacy typography rules for all nested spans and
   paragraphs. Keep those rules from leaking into this standalone landing. */
.card .neon-landing-modal span,
.card .neon-landing-modal p{
  font-family:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  color:inherit !important;
  text-align:inherit !important;
}

.card .neon-landing-modal .neon-landing-kicker,
.card .neon-landing-modal .neon-section-label,
.card .neon-landing-modal .neon-payment-label{
  color:#f9a8d4 !important;
  font-family:"Press Start 2P", monospace !important;
  font-size:9px !important;
  font-weight:400 !important;
  letter-spacing:.08em !important;
  line-height:1.6 !important;
  text-transform:uppercase !important;
}

.card .neon-landing-modal .neon-landing-hero h3{
  margin:16px auto 14px !important;
  color:#fff !important;
  font-family:"Press Start 2P", monospace !important;
  font-size:clamp(19px, 3.2vw, 31px) !important;
  font-weight:400 !important;
  line-height:1.55 !important;
  text-align:center !important;
}

.card .neon-landing-modal .neon-landing-hero p{
  color:#f3e8ff !important;
  font-family:ui-sans-serif, system-ui, sans-serif !important;
  font-size:15px !important;
  font-weight:400 !important;
  line-height:1.65 !important;
}

.card .neon-landing-modal .pixel-sparkle-row span{
  color:#f9a8d4 !important;
  font-size:12px !important;
}

.card .neon-landing-modal .pixel-sparkle-row span:nth-child(2n){
  color:#c4b5fd !important;
  font-size:9px !important;
}

.card .neon-landing-modal .neon-community-copy p,
.card .neon-landing-modal .neon-payment-card p{
  color:#e9d5ff !important;
  font-family:ui-sans-serif, system-ui, sans-serif !important;
  font-size:13px !important;
  font-weight:400 !important;
  line-height:1.55 !important;
}

.card .neon-landing-modal .neon-tiktok-button,
.card .neon-landing-modal .neon-paypal-button{
  font-family:"Press Start 2P", monospace !important;
  font-size:9px !important;
  font-weight:400 !important;
}

.card .neon-landing-modal .neon-tiktok-button span,
.card .neon-landing-modal .neon-paypal-button span,
.card .neon-landing-modal .bank-button-logo,
.card .neon-landing-modal .bank-button-arrow,
.card .neon-landing-modal .whatsapp-banner-icon,
.card .neon-landing-modal .whatsapp-banner-copy,
.card .neon-landing-modal .whatsapp-banner-arrow{
  color:inherit !important;
  font-size:inherit !important;
  font-weight:inherit !important;
  line-height:inherit !important;
}

.card .neon-landing-modal .neon-payment-icon{
  font-family:Arial, sans-serif !important;
  font-size:29px !important;
  font-weight:900 !important;
}

.card .neon-landing-modal .bank-button-logo{
  font-family:ui-sans-serif, system-ui, sans-serif !important;
  font-size:12px !important;
  font-weight:inherit !important;
}

.card .neon-landing-modal .bank-button-arrow{
  font-size:17px !important;
}

.card .neon-landing-modal .whatsapp-banner-icon{
  font-size:23px !important;
}

.card .neon-landing-modal .whatsapp-banner-copy{
  font-family:ui-sans-serif, system-ui, sans-serif !important;
  font-size:inherit !important;
}

.card .neon-landing-modal .whatsapp-banner-copy strong{
  font-family:"Press Start 2P", monospace !important;
  font-size:11px !important;
  font-weight:400 !important;
  line-height:1.5 !important;
}

.card .neon-landing-modal .whatsapp-banner-copy small{
  font-family:ui-sans-serif, system-ui, sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
}

.card .neon-landing-modal .whatsapp-banner-arrow{
  font-size:25px !important;
  font-weight:900 !important;
}

.card .neon-landing-modal .neon-landing-footnote{
  color:#c4b5fd !important;
  font-family:ui-sans-serif, system-ui, sans-serif !important;
  font-size:11px !important;
  font-weight:400 !important;
  line-height:1.4 !important;
  text-align:center !important;
}

@media (max-width:700px){
  .card .neon-landing-modal .neon-landing-hero h3{
    margin:14px auto !important;
    font-size:18px !important;
  }

  .card .neon-landing-modal .neon-landing-hero p{
    font-size:13px !important;
  }

  .card .neon-landing-modal .neon-community-copy p{
    font-size:12px !important;
  }

  .card .neon-landing-modal .whatsapp-banner-copy strong{
    font-size:9px !important;
  }

  .card .neon-landing-modal .whatsapp-banner-copy small{
    font-size:12px !important;
  }
}

@media (max-width:430px){
  .card .neon-landing-modal .neon-landing-kicker,
  .card .neon-landing-modal .neon-section-label,
  .card .neon-landing-modal .neon-payment-label{
    font-size:8px !important;
  }
}

/* --------------------------------------------------------------------------
   Ecuador bank account modal: branded pixel-art account card
   -------------------------------------------------------------------------- */
.bank-modal-overlay{
  position:fixed;
  inset:0;
  z-index:100010;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  box-sizing:border-box;
  background:rgba(15, 6, 31, .78);
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
}

.bank-modal-dialog{
  position:relative;
  width:min(100%, 590px);
  max-height:min(90vh, 760px);
  overflow-y:auto;
  box-sizing:border-box;
  padding:26px;
  border:1px solid rgba(236,72,153,.48);
  border-radius:24px;
  color:#fff;
  background:
    radial-gradient(circle at 90% 0%, rgba(236,72,153,.2), transparent 34%),
    radial-gradient(circle at 0% 100%, rgba(124,58,237,.26), transparent 38%),
    linear-gradient(145deg, #160d2b, #24143e 52%, #130a27);
  box-shadow:
    0 28px 85px rgba(8,2,20,.72),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 36px rgba(168,85,247,.16);
  scrollbar-color:#d946ef rgba(255,255,255,.08);
  scrollbar-width:thin;
}

.bank-modal-dialog::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  opacity:.13;
  background-image:
    linear-gradient(rgba(255,255,255,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.13) 1px, transparent 1px);
  background-size:16px 16px;
  mask-image:linear-gradient(to bottom, #000, transparent 62%);
}

.bank-modal-close{
  position:absolute;
  z-index:2;
  top:15px;
  right:15px;
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:11px;
  color:#fff;
  background:rgba(18,8,37,.62);
  cursor:pointer;
  font-size:16px;
  font-weight:900;
  transition:transform .16s ease, border-color .16s ease, background .16s ease;
}

.bank-modal-close:hover,
.bank-modal-close:focus-visible{
  transform:rotate(8deg) scale(1.05);
  border-color:#f9a8d4;
  outline:none;
  background:#7c2d78;
}

.bank-modal-header{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:15px;
  padding:9px 42px 20px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.bank-modal-logo{
  display:grid;
  place-items:center;
  flex:0 0 62px;
  width:62px;
  height:62px;
  border:1px solid rgba(196,181,253,.5);
  border-radius:16px;
  color:#fff;
  background:linear-gradient(145deg, #7c3aed, #be185d);
  box-shadow:0 0 20px rgba(236,72,153,.22);
  font-family:"Press Start 2P", monospace;
  font-size:23px;
  font-weight:400;
}

.bank-modal-heading{
  min-width:0;
}

.bank-modal-kicker{
  display:block;
  color:#c4b5fd;
  font-family:"Press Start 2P", monospace;
  font-size:8px;
  font-weight:400;
  letter-spacing:.08em;
  line-height:1.6;
  text-transform:uppercase;
}

.bank-modal-title{
  margin-top:8px;
  color:#fff;
  font-family:"Press Start 2P", monospace;
  font-size:clamp(15px, 3.1vw, 23px);
  font-weight:400;
  letter-spacing:.02em;
  line-height:1.45;
  text-transform:uppercase;
  text-shadow:2px 2px 0 #7e22ce;
}

.bank-modal-sub{
  margin-top:6px;
  color:#ddd6fe;
  font-family:ui-sans-serif, system-ui, sans-serif;
  font-size:12px;
  line-height:1.45;
}

.bank-details-card{
  position:relative;
  z-index:1;
  margin-top:21px;
  padding:20px;
  border:1px solid rgba(236,72,153,.34);
  border-radius:18px;
  background:#2a1b40;
  box-shadow:0 14px 28px rgba(7,2,18,.26), 0 0 0 1px rgba(255,255,255,.03) inset;
}

.bank-details-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom:15px;
  border-bottom:1px solid rgba(255,255,255,.11);
}

.bank-details-card h3{
  margin:5px 0 0;
  color:#fff;
  font-family:ui-sans-serif, system-ui, sans-serif;
  font-size:18px;
  line-height:1.3;
}

.bank-details-pixel-mark{
  display:grid;
  place-items:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:9px;
  color:#f0abfc;
  background:rgba(124,58,237,.34);
  font-family:"Press Start 2P", monospace;
  font-size:13px;
}

.bank-details-list{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:4px;
}

.bank-detail-row{
  display:grid;
  grid-template-columns:minmax(112px, 35%) minmax(0, 1fr);
  align-items:center;
  gap:14px;
  min-height:57px;
  border-bottom:1px solid rgba(255,255,255,.09);
}

.bank-detail-row:last-child{
  border-bottom:0;
}

.bank-detail-label{
  color:#c4b5fd;
  font-family:"Press Start 2P", monospace;
  font-size:8px;
  font-weight:400;
  letter-spacing:.04em;
  line-height:1.55;
}

.bank-detail-value{
  min-width:0;
  color:#fff;
  font-family:ui-sans-serif, system-ui, sans-serif;
  font-size:14px;
  font-weight:800;
  line-height:1.4;
  text-align:right;
  overflow-wrap:anywhere;
}

.bank-copy-value{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.bank-copy-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex:0 0 auto;
  min-height:28px;
  padding:6px 8px;
  border:1px solid rgba(196,181,253,.35);
  border-radius:7px;
  color:#f5d0fe;
  background:rgba(124,58,237,.38);
  cursor:pointer;
  font-family:"Press Start 2P", monospace;
  font-size:8px;
  font-weight:400;
  line-height:1;
  transition:transform .14s ease, color .18s ease, border-color .18s ease, background .18s ease;
}

.bank-copy-button:hover,
.bank-copy-button:focus-visible{
  transform:translateY(-1px);
  border-color:#f9a8d4;
  color:#fff;
  background:#be185d;
  outline:none;
}

.bank-copy-button.is-copied{
  border-color:#86efac;
  color:#052e16;
  background:#86efac;
}

.copy-button-label{
  letter-spacing:.02em;
}

.bank-modal-footer{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:19px;
  padding-top:15px;
  border-top:1px solid rgba(255,255,255,.1);
}

.bank-modal-hint{
  margin:0;
  color:#c4b5fd;
  font-family:ui-sans-serif, system-ui, sans-serif;
  font-size:11px;
  line-height:1.45;
  text-align:center;
}

/* Pichincha: official gold treatment. */
.bank-modal-overlay.is-pichincha .bank-modal-dialog{
  border-color:rgba(255,204,0,.62);
  box-shadow:0 28px 85px rgba(8,2,20,.72), 0 0 38px rgba(255,204,0,.13);
}

.bank-modal-overlay.is-pichincha .bank-modal-logo{
  border-color:#ffcc00;
  color:#241400;
  background:linear-gradient(145deg, #ffef99, #ffcc00);
  box-shadow:0 0 22px rgba(255,204,0,.3);
}

.bank-modal-overlay.is-pichincha .bank-modal-title{
  color:#ffcc00;
  text-shadow:2px 2px 0 #7a4a00;
}

.bank-modal-overlay.is-pichincha .bank-details-card{
  border-color:rgba(255,204,0,.6);
  box-shadow:0 14px 28px rgba(7,2,18,.26), 0 0 0 1px rgba(255,204,0,.08) inset;
}

.bank-modal-overlay.is-pichincha .bank-details-pixel-mark{
  border-color:rgba(255,204,0,.55);
  color:#ffcc00;
  background:rgba(202,138,4,.25);
}

.bank-modal-overlay.is-pichincha .bank-copy-button:hover,
.bank-modal-overlay.is-pichincha .bank-copy-button:focus-visible{
  border-color:#ffcc00;
  color:#241400;
  background:#ffcc00;
}

/* Guayaquil: magenta / fuchsia treatment. */
.bank-modal-overlay.is-guayaquil .bank-modal-dialog{
  border-color:rgba(236,0,126,.7);
  box-shadow:0 28px 85px rgba(8,2,20,.72), 0 0 38px rgba(236,0,126,.17);
}

.bank-modal-overlay.is-guayaquil .bank-modal-logo{
  border-color:#ff73bb;
  background:linear-gradient(145deg, #ff73bb, #d90075);
  box-shadow:0 0 22px rgba(236,0,126,.34);
}

.bank-modal-overlay.is-guayaquil .bank-modal-title{
  color:#ff73bb;
  text-shadow:2px 2px 0 #7e124e;
}

.bank-modal-overlay.is-guayaquil .bank-details-card{
  border-color:rgba(236,0,126,.62);
  box-shadow:0 14px 28px rgba(7,2,18,.26), 0 0 0 1px rgba(236,0,126,.1) inset;
}

.bank-modal-overlay.is-guayaquil .bank-details-pixel-mark{
  border-color:rgba(255,115,187,.55);
  color:#ff73bb;
  background:rgba(217,0,117,.25);
}

.bank-modal-overlay.is-guayaquil .bank-copy-button:hover,
.bank-modal-overlay.is-guayaquil .bank-copy-button:focus-visible{
  border-color:#ff73bb;
  background:#d90075;
}

@media (max-width:600px){
  .bank-modal-overlay{
    align-items:flex-start;
    padding:12px;
  }

  .bank-modal-dialog{
    max-height:calc(100vh - 24px);
    padding:21px 17px;
    border-radius:19px;
  }

  .bank-modal-header{
    gap:11px;
    padding-right:38px;
  }

  .bank-modal-logo{
    flex-basis:52px;
    width:52px;
    height:52px;
    border-radius:13px;
    font-size:19px;
  }

  .bank-modal-title{
    font-size:14px;
  }

  .bank-modal-sub{
    font-size:11px;
  }

  .bank-details-card{
    padding:16px 14px;
  }

  .bank-detail-row{
    grid-template-columns:1fr;
    align-items:start;
    gap:5px;
    min-height:0;
    padding:13px 0;
  }

  .bank-detail-value{
    text-align:left;
  }

  .bank-copy-value{
    justify-content:flex-start;
  }

  .bank-modal-footer{
    margin-top:16px;
    padding-top:13px;
  }
}

/* --------------------------------------------------------------------------
   Unified retro pixel-art modal system
   Visual-only layer: modal positioning, content, controls and application
   state remain owned by the existing markup and JavaScript.
   -------------------------------------------------------------------------- */
:root{
  --retro-modal-ink:#210c38;
  --retro-modal-deep:#160a27;
  --retro-modal-matte:#241535;
  --retro-modal-lavender:#e9dcff;
  --retro-modal-pink:#e639af;
  --retro-modal-pink-soft:#ff8bd8;
  --retro-modal-purple:#5b21b6;
  --retro-modal-shadow:#10051c;
}

:where(
  .community-share-notice,
  .neon-modal-overlay,
  .bank-modal-overlay,
  .admin-access-modal,
  .admin-panel-modal,
  .save-modal-backdrop,
  #modal-contador-pixeles,
  #modal-guia-corte-imagen,
  #modal-interno-cortador-limpio,
  #modal-interno-contador-limpio,
  .community-isolated-overlay
){
  background-color:rgba(13, 5, 25, .84) !important;
  background-image:
    linear-gradient(rgba(230,57,175,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.06) 1px, transparent 1px),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.025) 0 2px,
      transparent 2px 6px
    ) !important;
  background-size:16px 16px, 16px 16px, auto !important;
}

:where(
  .community-share-dialog,
  .neon-landing-modal,
  .bank-modal-dialog,
  .admin-access-dialog,
  .admin-panel-dialog,
  .save-modal,
  #modal-contador-pixeles > [role="dialog"],
  #modal-guia-corte-imagen > [role="dialog"],
  #modal-interno-cortador-limpio > [role="dialog"],
  #modal-interno-contador-limpio > [role="dialog"],
  .community-isolated-dialog
){
  border:3px solid var(--retro-modal-ink) !important;
  border-radius:4px !important;
  outline:2px solid var(--retro-modal-pink) !important;
  outline-offset:4px !important;
  background-color:var(--retro-modal-matte) !important;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,57,175,.045) 1px, transparent 1px),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.018) 0 3px,
      transparent 3px 7px
    ) !important;
  background-size:18px 18px, 18px 18px, auto !important;
  color:#fff !important;
  box-shadow:
    7px 7px 0 var(--retro-modal-shadow),
    0 0 0 2px rgba(230,57,175,.72) inset,
    0 0 0 5px rgba(91,33,182,.48) inset,
    0 0 28px rgba(230,57,175,.18) !important;
}

/* The isolated shared-model shell has an inner editor surface. Keep the
   original controls and report behavior intact while giving the window the
   same matte/lavender pixel frame. */
.community-isolated-dialog > .community-isolated-editor{
  border:3px solid var(--retro-modal-ink) !important;
  border-radius:2px !important;
  outline:2px solid var(--retro-modal-pink) !important;
  outline-offset:3px !important;
  background-color:#2b1a42 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,57,175,.045) 1px, transparent 1px) !important;
  background-size:18px 18px !important;
  color:#fff !important;
  box-shadow:
    5px 5px 0 var(--retro-modal-shadow),
    0 0 0 2px rgba(230,57,175,.7) inset !important;
}

:where(
  .community-share-dialog h1,
  .community-share-dialog h2,
  .community-share-dialog h3,
  .community-share-dialog h4,
  .neon-landing-modal h1,
  .neon-landing-modal h2,
  .neon-landing-modal h3,
  .neon-landing-modal h4,
  .bank-modal-dialog h1,
  .bank-modal-dialog h2,
  .bank-modal-dialog h3,
  .bank-modal-dialog h4,
  .admin-access-dialog h1,
  .admin-access-dialog h2,
  .admin-access-dialog h3,
  .admin-panel-dialog h1,
  .admin-panel-dialog h2,
  .admin-panel-dialog h3,
  .save-modal h1,
  .save-modal h2,
  .save-modal h3,
  #modal-contador-pixeles [role="dialog"] h1,
  #modal-contador-pixeles [role="dialog"] h2,
  #modal-contador-pixeles [role="dialog"] h3,
  #modal-guia-corte-imagen [role="dialog"] h1,
  #modal-guia-corte-imagen [role="dialog"] h2,
  #modal-guia-corte-imagen [role="dialog"] h3,
  #modal-interno-cortador-limpio [role="dialog"] h1,
  #modal-interno-cortador-limpio [role="dialog"] h2,
  #modal-interno-cortador-limpio [role="dialog"] h3,
  #modal-interno-contador-limpio [role="dialog"] h1,
  #modal-interno-contador-limpio [role="dialog"] h2,
  #modal-interno-contador-limpio [role="dialog"] h3,
  .community-isolated-dialog h1,
  .community-isolated-dialog h2,
  .community-isolated-dialog h3,
  .community-isolated-dialog h4
){
  color:var(--retro-modal-pink-soft) !important;
  text-shadow:2px 2px 0 var(--retro-modal-purple) !important;
}

:where(
  .community-share-dialog p,
  .neon-landing-modal p,
  .bank-modal-dialog p,
  .admin-access-dialog p,
  .admin-panel-dialog p,
  .save-modal p,
  #modal-contador-pixeles [role="dialog"] p,
  #modal-guia-corte-imagen [role="dialog"] p,
  #modal-interno-cortador-limpio [role="dialog"] p,
  #modal-interno-contador-limpio [role="dialog"] p
){
  color:#f3e8ff !important;
}

/* Inner panels use readable lavender surfaces while retaining the double
   purple/pink frame language. */
:where(
  .admin-panel-section,
  .admin-key-list-wrap,
  .bank-details-card,
  .neon-community-card,
  .neon-payment-card,
  .neon-landing-hero,
  #modal-contador-pixeles [role="dialog"] > section,
  #modal-interno-cortador-limpio [role="dialog"] #visor-scroll-cortador,
  #modal-interno-contador-limpio [role="dialog"] #contenedor-visor-contador-unico
){
  border:2px solid var(--retro-modal-purple) !important;
  border-radius:3px !important;
  background-color:var(--retro-modal-lavender) !important;
  background-image:
    linear-gradient(rgba(91,33,182,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,57,175,.07) 1px, transparent 1px) !important;
  background-size:14px 14px !important;
  box-shadow:
    4px 4px 0 rgba(33,12,56,.72),
    0 0 0 2px rgba(230,57,175,.28) inset !important;
}

:where(
  .admin-panel-section h3,
  .admin-panel-section .admin-panel-note,
  .admin-panel-section .admin-panel-status,
  .bank-details-card h3,
  .bank-details-card .bank-detail-label,
  .bank-details-card .bank-detail-value,
  .neon-community-card h4,
  .neon-payment-card h4,
  #modal-contador-pixeles [role="dialog"] label,
  #modal-guia-corte-imagen [role="dialog"] label
){
  color:var(--retro-modal-ink) !important;
}

/* Recessed fields are limited to modal-specific inputs. The original
   NOMBRE DEL PATRÓN field is deliberately not included. */
:where(
  .admin-access-input,
  .admin-premium-input,
  .admin-key-search,
  .admin-key-filter,
  .save-modal .modal-input,
  #modal-interno-cortador-limpio [role="dialog"] input:not([type="file"]),
  #modal-interno-contador-limpio [role="dialog"] input:not([type="file"])
){
  border:2px solid var(--retro-modal-purple) !important;
  border-radius:2px !important;
  background:#160a27 !important;
  color:#fff !important;
  box-shadow:
    3px 3px 0 rgba(33,12,56,.8),
    0 0 0 2px rgba(230,57,175,.25) inset !important;
}

:where(
  .admin-access-input::placeholder,
  .admin-premium-input::placeholder,
  .admin-key-search input::placeholder,
  .save-modal .modal-input::placeholder
){
  color:#c4b5fd !important;
}

/* Pixel-relief close controls. */
:where(
  .community-share-notice-close,
  .neon-modal-close,
  .bank-modal-close,
  .admin-panel-close,
  #cerrar-modal-conoce-x,
  #cerrar-contador-x,
  #cerrar-interno-cortador-x,
  #modal-interno-contador-limpio [role="dialog"] > button[aria-label*="Cerrar"],
  #modal-contador-pixeles [role="dialog"] > button[aria-label*="Cerrar"]
){
  border:2px solid var(--retro-modal-ink) !important;
  border-radius:2px !important;
  background:var(--retro-modal-pink) !important;
  color:#fff !important;
  box-shadow:3px 3px 0 var(--retro-modal-shadow) !important;
  text-shadow:1px 1px 0 var(--retro-modal-purple) !important;
}

:where(
  .community-share-notice-close,
  .neon-modal-close,
  .bank-modal-close,
  .admin-panel-close,
  #cerrar-modal-conoce-x,
  #cerrar-contador-x,
  #cerrar-interno-cortador-x,
  #modal-interno-contador-limpio [role="dialog"] > button[aria-label*="Cerrar"],
  #modal-contador-pixeles [role="dialog"] > button[aria-label*="Cerrar"]
):hover,
:where(
  .community-share-notice-close,
  .neon-modal-close,
  .bank-modal-close,
  .admin-panel-close,
  #cerrar-modal-conoce-x,
  #cerrar-interno-cortador-x,
  #modal-interno-contador-limpio [role="dialog"] > button[aria-label*="Cerrar"],
  #modal-contador-pixeles [role="dialog"] > button[aria-label*="Cerrar"]
):focus-visible{
  transform:translate(2px, 2px) !important;
  background:#ff67c5 !important;
  box-shadow:1px 1px 0 var(--retro-modal-shadow) !important;
  outline:2px solid #f9a8d4 !important;
  outline-offset:2px !important;
}

/* Action buttons share the same physical arcade key treatment. */
:where(
  .neon-tiktok-button,
  .neon-paypal-button,
  .neon-bank-button,
  .neon-whatsapp-banner,
  .admin-access-buttons button,
  .admin-generate-button,
  .admin-remove-button,
  .admin-delete-button,
  .modal-copy-btn,
  .save-modal .btn-save,
  .save-modal .btn-cancel,
  #btn-cortador-opcion,
  #btn-contador-opcion,
  #btn-cerrar-guia-corte,
  #input-nuevo-cargador-cortador + label,
  #input-archivo-contador-nuevo-id + label,
  #precision-back,
  #precision-cut-count,
  #precision-download,
  #pad-up,
  #pad-left,
  #pad-right,
  #pad-down,
  #interno-atrás,
  #interno-cortar,
  #interno-descargar,
  #btn-ejecutar-analisis-contador
){
  border:2px solid var(--retro-modal-ink) !important;
  border-radius:2px !important;
  background:linear-gradient(135deg, var(--retro-modal-purple), var(--retro-modal-pink)) !important;
  color:#fff !important;
  box-shadow:4px 4px 0 var(--retro-modal-shadow) !important;
  text-shadow:1px 1px 0 var(--retro-modal-purple) !important;
}

:where(
  .neon-tiktok-button,
  .neon-paypal-button,
  .neon-bank-button,
  .neon-whatsapp-banner,
  .admin-access-buttons button,
  .admin-generate-button,
  .admin-remove-button,
  .admin-delete-button,
  .modal-copy-btn,
  .save-modal .btn-save,
  .save-modal .btn-cancel,
  #btn-cortador-opcion,
  #btn-contador-opcion,
  #btn-cerrar-guia-corte,
  #input-nuevo-cargador-cortador + label,
  #input-archivo-contador-nuevo-id + label,
  #precision-back,
  #precision-cut-count,
  #precision-download,
  #pad-up,
  #pad-left,
  #pad-right,
  #pad-down,
  #interno-atrás,
  #interno-cortar,
  #interno-descargar,
  #btn-ejecutar-analisis-contador
):hover,
:where(
  .neon-tiktok-button,
  .neon-paypal-button,
  .neon-bank-button,
  .neon-whatsapp-banner,
  .admin-access-buttons button,
  .admin-generate-button,
  .admin-remove-button,
  .admin-delete-button,
  .modal-copy-btn,
  .save-modal .btn-save,
  .save-modal .btn-cancel,
  #btn-contador-opcion,
  #btn-cerrar-guia-corte,
  #input-nuevo-cargador-cortador + label,
  #input-archivo-contador-nuevo-id + label,
  #interno-atrás,
  #interno-cortar,
  #interno-descargar,
  #btn-ejecutar-analisis-contador
):focus-visible{
  transform:translate(2px, 2px) !important;
  filter:brightness(1.12) saturate(1.08) !important;
  box-shadow:2px 2px 0 var(--retro-modal-shadow) !important;
  outline:2px solid #f9a8d4 !important;
  outline-offset:2px !important;
}

/* Success, error and expiry alerts use the same compact arcade frame. */
:where(
  #global-toast,
  .save-toast,
  .expiry-alert
){
  border:2px solid var(--retro-modal-ink) !important;
  border-radius:3px !important;
  background-color:var(--retro-modal-matte) !important;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,57,175,.06) 1px, transparent 1px) !important;
  background-size:12px 12px !important;
  color:#fff !important;
  box-shadow:
    4px 4px 0 var(--retro-modal-shadow),
    0 0 0 2px var(--retro-modal-pink) inset !important;
  font-family:"Press Start 2P", monospace !important;
  text-shadow:1px 1px 0 var(--retro-modal-purple) !important;
}

#global-toast.success,
#global-toast.alert,
.expiry-alert.is-premium{
  background-color:var(--retro-modal-matte) !important;
  color:#fff !important;
}

#global-toast .gicon{
  width:34px !important;
  height:34px !important;
  border:2px solid var(--retro-modal-pink-soft) !important;
  border-radius:2px !important;
  background:var(--retro-modal-purple) !important;
  color:#fff !important;
  box-shadow:2px 2px 0 var(--retro-modal-shadow) !important;
}

.community-share-notice-icon{
  border-radius:2px !important;
  box-shadow:3px 3px 0 var(--retro-modal-shadow), 0 0 18px rgba(230,57,175,.4) !important;
}

/* --------------------------------------------------------------------------
   Maximum-priority square-frame override
   Hoja 1 and every platform modal intentionally use hard pixel corners.
   -------------------------------------------------------------------------- */
:where(
  #hoja1-panel,
  #hoja1-panel *,
  #login-page-container,
  #login-page-container *,
  #login-section,
  #login-section *,
  .login-wrapper-inner,
  .login-wrapper-inner *,
  .viewport,
  .community-share-notice,
  .community-share-notice *,
  .neon-modal-overlay,
  .neon-modal-overlay *,
  .bank-modal-overlay,
  .bank-modal-overlay *,
  .admin-access-modal,
  .admin-access-modal *,
  .admin-panel-modal,
  .admin-panel-modal *,
  .save-modal-backdrop,
  .save-modal-backdrop *,
  #modal-contador-pixeles,
  #modal-contador-pixeles *,
  #modal-guia-corte-imagen,
  #modal-guia-corte-imagen *,
  #modal-interno-cortador-limpio,
  #modal-interno-cortador-limpio *,
  #modal-interno-contador-limpio,
  #modal-interno-contador-limpio *,
  .community-isolated-overlay,
  .community-isolated-overlay *,
  #global-toast,
  #global-toast *,
  .save-toast,
  .expiry-alert
){
  border-radius:0px !important;
}

:where(
  #hoja1-panel,
  #hoja1-panel .hoja1-inner-wrapper,
  #hoja1-panel .card,
  #login-page-container,
  #login-section,
  .login-wrapper-inner,
  .community-share-dialog,
  .neon-landing-modal,
  .bank-modal-dialog,
  .admin-access-dialog,
  .admin-panel-dialog,
  .save-modal,
  #modal-contador-pixeles > [role="dialog"],
  #modal-guia-corte-imagen > [role="dialog"],
  #modal-interno-cortador-limpio > [role="dialog"],
  #modal-interno-contador-limpio > [role="dialog"],
  .community-isolated-dialog,
  .community-isolated-dialog > .community-isolated-editor
){
  border:4px double var(--retro-modal-ink) !important;
  outline:2px solid var(--retro-modal-pink) !important;
  outline-offset:4px !important;
  background-color:var(--retro-modal-matte) !important;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,57,175,.055) 1px, transparent 1px),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.018) 0 2px,
      transparent 2px 6px
    ) !important;
  background-size:18px 18px, 18px 18px, auto !important;
  box-shadow:
    8px 8px 0 var(--retro-modal-shadow),
    0 0 0 2px rgba(230,57,175,.8) inset,
    0 0 0 5px rgba(91,33,182,.5) inset !important;
}

/* Hoja 1 login surface: preserve the original layout while changing only
   its visual shell, field surfaces and text contrast. */
#hoja1-panel,
#login-page-container,
#login-section{
  background-color:var(--retro-modal-deep) !important;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,57,175,.06) 1px, transparent 1px),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.02) 0 3px,
      transparent 3px 8px
    ) !important;
  background-size:18px 18px, 18px 18px, auto !important;
  color:#f8f1ff !important;
}

#hoja1-panel .hoja1-inner-wrapper,
.login-wrapper-inner{
  background-color:rgba(36,21,53,.78) !important;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,57,175,.04) 1px, transparent 1px) !important;
  background-size:16px 16px !important;
}

#hoja1-panel .card{
  border:4px double var(--retro-modal-ink) !important;
  outline:2px solid var(--retro-modal-pink) !important;
  outline-offset:4px !important;
  background-color:#241535 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,57,175,.055) 1px, transparent 1px) !important;
  background-size:14px 14px !important;
  box-shadow:
    8px 8px 0 var(--retro-modal-shadow),
    0 0 0 2px rgba(230,57,175,.72) inset !important;
}

:where(
  #hoja1-panel .description,
  #hoja1-panel .intro-tech,
  #hoja1-panel .field-label,
  #hoja1-panel #footer-comercial-login,
  #hoja1-panel .admin-link,
  #hoja1-panel .field-message
){
  color:#f3e8ff !important;
}

#hoja1-panel .tech{
  border:2px solid var(--retro-modal-purple) !important;
  background:var(--retro-modal-lavender) !important;
  color:var(--retro-modal-ink) !important;
  box-shadow:3px 3px 0 var(--retro-modal-shadow) !important;
}

:where(
  #hoja1-panel .field-input,
  #hoja1-panel #btn-acordeon-comercial,
  #hoja1-panel #verifyBtn
){
  border:3px solid var(--retro-modal-purple) !important;
  background-color:#160a27 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,57,175,.06) 1px, transparent 1px) !important;
  background-size:12px 12px !important;
  color:#fff !important;
  box-shadow:
    4px 4px 0 var(--retro-modal-shadow),
    0 0 0 2px rgba(230,57,175,.3) inset !important;
}

#hoja1-panel #verifyBtn,
#hoja1-panel #btn-acordeon-comercial{
  background:linear-gradient(135deg, var(--retro-modal-purple), var(--retro-modal-pink)) !important;
  font-family:"Press Start 2P", monospace !important;
  text-shadow:1px 1px 0 var(--retro-modal-purple) !important;
}

:where(
  #global-toast,
  .save-toast,
  .expiry-alert
){
  border-radius:0px !important;
  border:3px double var(--retro-modal-ink) !important;
  outline:2px solid var(--retro-modal-pink) !important;
  outline-offset:3px !important;
  background-color:var(--retro-modal-matte) !important;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,57,175,.06) 1px, transparent 1px) !important;
  background-size:12px 12px !important;
  box-shadow:5px 5px 0 var(--retro-modal-shadow) !important;
}

/* Hoja 1 final composition: one continuous dark field on the left and a
   single neon frame reserved for the access card on the right. */
#hoja1-panel{
  border:0 !important;
  outline:0 !important;
  outline-offset:0 !important;
  box-shadow:none !important;
  background-color:var(--retro-modal-deep) !important;
}

#hoja1-panel .hoja1-inner-wrapper{
  border:0 !important;
  outline:0 !important;
  outline-offset:0 !important;
  box-shadow:none !important;
  background-color:transparent !important;
  background-image:none !important;
}

#hoja1-panel .branding{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}

#hoja1-panel .title{
  color:#e639af !important;
  -webkit-text-fill-color:#e639af !important;
  background:#e639af !important;
  background-image:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  text-shadow:
    3px 3px 0 #5b21b6,
    0 0 10px rgba(230,57,175,.72) !important;
}

/* Keep the only Hoja 1 frame on the right-hand login card. */
#hoja1-panel .card{
  border:4px double var(--retro-modal-ink) !important;
  outline:2px solid var(--retro-modal-pink) !important;
  outline-offset:4px !important;
  box-shadow:
    8px 8px 0 var(--retro-modal-shadow),
    0 0 0 2px rgba(230,57,175,.8) inset !important;
}

/* Final logo cleanup: the text itself is pink; its box is fully transparent. */
#hoja1-panel .title{
  color:#e639af !important;
  -webkit-text-fill-color:#e639af !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  text-shadow:1px 1px 0 #000 !important;
}

/* Remove any residual lateral frame, including generated decoration layers.
   The access card above remains the only framed Hoja 1 surface. */
:where(
  .viewport,
  #hoja1-panel,
  #hoja1-panel .hoja1-inner-wrapper,
  #hoja1-panel .branding
){
  border:0 !important;
  outline:0 !important;
  outline-offset:0 !important;
  box-shadow:none !important;
}

:where(
  .viewport::before,
  .viewport::after,
  #hoja1-panel::before,
  #hoja1-panel::after,
  #hoja1-panel .hoja1-inner-wrapper::before,
  #hoja1-panel .hoja1-inner-wrapper::after,
  #hoja1-panel .branding::before,
#hoja1-panel .branding::after
){
  content:none !important;
  display:none !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* Hoja 1 subtitle: a clearer scale relationship with the main logo. */
#hoja1-panel .description{
  font-size:clamp(17px, 1.9vw, 20px) !important;
}

/* Hoja 1 technique labels: identical type, spacing and pixel dimensions. */
#hoja1-panel .tech-list .tech{
  display:inline-flex !important;
  flex:0 0 132px !important;
  width:132px !important;
  min-width:132px !important;
  height:36px !important;
  min-height:36px !important;
  margin:0 !important;
  padding:8px 10px !important;
  box-sizing:border-box !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:13px !important;
  line-height:1.1 !important;
  text-align:center !important;
  white-space:nowrap !important;
}

/* --------------------------------------------------------------------------
   Hoja 2 retro-premium account panel
   Visual-only scope: no data, feed or account behavior is changed.
   -------------------------------------------------------------------------- */
#hoja2-panel,
#hoja2-panel *{
  border-radius:0px !important;
}

#hoja2-panel{
  background:transparent !important;
  color:#f8f1ff !important;
}

#hoja2-panel .hoja2{
  border:4px double var(--retro-modal-ink) !important;
  outline:2px solid var(--retro-modal-pink) !important;
  outline-offset:4px !important;
  background-color:var(--retro-modal-deep) !important;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,57,175,.06) 1px, transparent 1px),
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.02) 0 3px,
      transparent 3px 8px
    ) !important;
  background-size:18px 18px, 18px 18px, auto !important;
  box-shadow:
    8px 8px 0 var(--retro-modal-shadow),
    0 0 0 2px rgba(230,57,175,.72) inset !important;
}

#hoja2-panel .hoja2-inner,
#hoja2-panel .hoja2-body,
#hoja2-panel .hoja2-history,
#hoja2-panel .hoja2-community,
#hoja2-panel .community-grid{
  background:transparent !important;
}

/* Account details card: premium double purple frame with neon accent. */
#hoja2-panel #info-plan-status-card{
  border:4px double var(--retro-modal-ink) !important;
  outline:2px solid var(--retro-modal-pink) !important;
  outline-offset:4px !important;
  background-color:#241535 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,57,175,.055) 1px, transparent 1px) !important;
  background-size:14px 14px !important;
  color:#f8f1ff !important;
  box-shadow:
    7px 7px 0 var(--retro-modal-shadow),
    0 0 0 2px rgba(230,57,175,.75) inset !important;
}

/* Weekly featured container: its frame remains distinct from feed cards. */
#hoja2-panel .hoja2-featured{
  border:4px double var(--retro-modal-ink) !important;
  outline:2px solid var(--retro-modal-pink) !important;
  outline-offset:4px !important;
  background-color:#241535 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,57,175,.06) 1px, transparent 1px),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.018) 0 2px,
      transparent 2px 6px
    ) !important;
  background-size:18px 18px, 18px 18px, auto !important;
  box-shadow:
    7px 7px 0 var(--retro-modal-shadow),
    0 0 0 2px rgba(230,57,175,.72) inset !important;
}

#hoja2-panel .hoja2-section-title,
#hoja2-panel .featured-kicker{
  color:var(--retro-modal-pink-soft) !important;
  text-shadow:2px 2px 0 var(--retro-modal-purple) !important;
}

#hoja2-panel .featured-spark{
  border:2px solid var(--retro-modal-purple) !important;
  background:#e9dcff !important;
  color:var(--retro-modal-purple) !important;
  box-shadow:3px 3px 0 var(--retro-modal-shadow) !important;
}

/* Recent-model box and every public-feed card use the same matte texture. */
#hoja2-panel .history-box,
#hoja2-panel .pattern-card{
  border:2px solid var(--retro-modal-purple) !important;
  background-color:#2b1a42 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,57,175,.045) 1px, transparent 1px) !important;
  background-size:14px 14px !important;
  color:#f8f1ff !important;
  box-shadow:4px 4px 0 rgba(16,5,28,.78) !important;
}

#hoja2-panel .pattern-card .pattern-meta strong,
#hoja2-panel .pattern-card .pattern-author,
#hoja2-panel .history-empty,
#hoja2-panel .featured-grid:empty::before{
  color:#f3e8ff !important;
}

/* Public pattern-card copy: override muted inline labels for maximum
   contrast without changing card data or rendering behavior. */
#hoja2-panel .pattern-card > div:first-child > div,
#hoja2-panel .pattern-card .pattern-meta,
#hoja2-panel .pattern-card .pattern-meta *,
#hoja2-panel .pattern-card .official-badge,
#hoja2-panel .pattern-card .featured-badge,
#hoja2-panel .pattern-card .btn-load{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* The two Hoja 2 CTAs are solid arcade keys with a physical drop shadow. */
#hoja2-panel #btn-acceso-contador,
#hoja2-panel #crearModeloBtn{
  border:3px solid var(--retro-modal-ink) !important;
  background:linear-gradient(135deg, var(--retro-modal-purple), var(--retro-modal-pink)) !important;
  color:#fff !important;
  box-shadow:
    5px 5px 0 var(--retro-modal-shadow),
    0 0 0 2px rgba(230,57,175,.35) inset !important;
  text-shadow:1px 1px 0 var(--retro-modal-purple) !important;
}

#hoja2-panel #btn-acceso-contador:hover,
#hoja2-panel #crearModeloBtn:hover,
#hoja2-panel #btn-acceso-contador:focus-visible,
#hoja2-panel #crearModeloBtn:focus-visible{
  transform:translate(2px,2px) !important;
  filter:brightness(1.12) saturate(1.08) !important;
  box-shadow:2px 2px 0 var(--retro-modal-shadow) !important;
  outline:2px solid var(--retro-modal-pink-soft) !important;
  outline-offset:2px !important;
}

#hoja2-panel #btn-acceso-contador:active,
#hoja2-panel #crearModeloBtn:active{
  transform:translate(4px,4px) !important;
  box-shadow:1px 1px 0 var(--retro-modal-shadow) !important;
}

/* Hoja 2 width expansion: when the premium panel is active, release the
   outer viewport cap and let the panel/frame use the full available width. */
body:has(#hoja2-panel:not([aria-hidden="true"])){
  padding:0 !important;
}

body:has(#hoja2-panel:not([aria-hidden="true"])) > .viewport{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  gap:0 !important;
}

body:has(#hoja2-panel:not([aria-hidden="true"])) #hoja2-panel,
#hoja2-panel .hoja2,
#hoja2-panel .hoja2-featured,
#hoja2-panel .featured-grid,
#hoja2-panel .community-grid{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

body:has(#hoja2-panel:not([aria-hidden="true"])) #hoja2-panel{
  margin-left:0 !important;
  margin-right:0 !important;
}

#hoja2-panel .hoja2{
  margin-left:0 !important;
  margin-right:0 !important;
}

#hoja2-panel .hoja2-featured{
  margin-left:0 !important;
  margin-right:0 !important;
}

#hoja2-panel .hoja2-body{
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  grid-template-columns:minmax(0, 2fr) minmax(0, 3fr) !important;
}

/* Featured label contrast in both the weekly and shared card collections. */
#hoja2-panel .pattern-card .featured-badge{
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  font-size:0 !important;
  line-height:1.2 !important;
}

#hoja2-panel .pattern-card .featured-badge::before{
  content:"✨ Destacado";
  color:#f5e9ff !important;
  -webkit-text-fill-color:#f5e9ff !important;
  font-size:11px !important;
  font-weight:800 !important;
  text-shadow:
    1px 1px 0 #5b21b6,
    0 0 5px rgba(230,57,175,.7) !important;
}

/* Lower Hoja 2 collections: community feed wide on the left and the
   compact single weekly winner on the right. */
#hoja2-panel .hoja2-body{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(220px, .72fr) !important;
  gap:20px !important;
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  align-items:start !important;
}

#hoja2-panel .hoja2-community{
  grid-column:1 / 2 !important;
  grid-row:1 !important;
  width:100% !important;
  min-width:0 !important;
  padding:12px !important;
}

#hoja2-panel .hoja2-featured{
  grid-column:2 / 3 !important;
  grid-row:1 !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:14px !important;
}

/* Keep the weekly block compact and display only the first renderer-sorted
   featured card; all account, clock and action blocks stay outside this
   lower grid. */
#hoja2-panel #featured-grid .pattern-card:nth-child(n + 2){
  display:none !important;
}

#hoja2-panel #featured-grid .pattern-card:first-child{
  border-color:#ffcc00 !important;
  box-shadow:
    3px 3px 0 rgba(16,5,28,.78),
    0 0 0 1px rgba(255,204,0,.45) inset !important;
}

#hoja2-panel .hoja2-community .community-grid,
#hoja2-panel #featured-grid{
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

@media (max-width:880px){
  #hoja2-panel .hoja2-body{
    grid-template-columns:minmax(0, 1fr) !important;
  }

  #hoja2-panel .hoja2-community,
  #hoja2-panel .hoja2-featured{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
  }
}

/* Hoja 2 lower area: saved projects first, then a true two-column base.
   The upper access/timer/CTA blocks are intentionally outside this layout. */
#hoja2-panel .hoja2-inner{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

#hoja2-panel .hoja2-history{
  order:0 !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* Keep saved projects from creating a tall empty region. When cards exist,
   they remain in a bounded horizontal strip with their own x-scroll. */
#hoja2-panel .hoja2-history .history-box{
  width:100% !important;
  height:auto !important;
  min-height:64px !important;
  max-height:160px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  padding:8px !important;
  box-sizing:border-box !important;
}

#hoja2-panel .hoja2-history .history-box > div{
  display:flex !important;
  flex:0 0 auto !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  gap:8px !important;
  width:max-content !important;
  min-width:100% !important;
  height:138px !important;
  overflow:visible !important;
}

#hoja2-panel .hoja2-history .history-box .pattern-card{
  flex:0 0 min(250px, 78vw) !important;
  width:min(250px, 78vw) !important;
  min-width:0 !important;
  height:100% !important;
  box-sizing:border-box !important;
}

/* The base is parallel: a compact featured column and an extended feed. */
#hoja2-panel .hoja2-body{
  order:1 !important;
  display:grid !important;
  grid-template-columns:260px minmax(0, 1fr) !important;
  gap:12px !important;
  align-items:start !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  box-sizing:border-box !important;
}

#hoja2-panel .hoja2-featured,
#hoja2-panel .hoja2-community{
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:10px !important;
  box-sizing:border-box !important;
}

#hoja2-panel .hoja2-featured{
  grid-column:1 !important;
  grid-row:1 !important;
}

#hoja2-panel .hoja2-community{
  grid-column:2 !important;
  grid-row:1 !important;
}

#hoja2-panel .hoja2-featured .featured-heading{
  gap:8px !important;
  margin-bottom:8px !important;
}

#hoja2-panel .hoja2-featured .featured-heading > div{
  min-width:0 !important;
}

#hoja2-panel .hoja2-featured .hoja2-section-title{
  font-size:clamp(15px, 1.65vw, 20px) !important;
  line-height:1.2 !important;
}

#hoja2-panel .hoja2-featured .featured-spark{
  width:30px !important;
  height:30px !important;
  flex-basis:30px !important;
  font-size:17px !important;
}

#hoja2-panel .hoja2-community > .hoja2-section-title{
  font-size:clamp(15px, 1.65vw, 20px) !important;
  line-height:1.2 !important;
  margin-bottom:8px !important;
}

/* Both galleries stay on one compact row. Only these strips scroll
   horizontally when their cards no longer fit. */
#hoja2-panel .hoja2-community .community-grid,
#hoja2-panel #featured-grid{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  gap:8px !important;
  width:100% !important;
  height:204px !important;
  min-height:0 !important;
  max-height:204px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  grid-template-columns:none !important;
  box-sizing:border-box !important;
}

#hoja2-panel #featured-grid .pattern-card{
  flex:0 0 100% !important;
  width:100% !important;
  min-width:0 !important;
  height:100% !important;
  box-sizing:border-box !important;
}

#hoja2-panel .hoja2-community .community-grid .pattern-card{
  flex:0 0 min(190px, 42vw) !important;
  width:min(190px, 42vw) !important;
  min-width:0 !important;
  height:100% !important;
  box-sizing:border-box !important;
}

/* Compact card internals keep the lower row within the viewport. */
#hoja2-panel .hoja2-featured .pattern-card,
#hoja2-panel .hoja2-community .pattern-card{
  gap:5px !important;
  padding:8px !important;
}

#hoja2-panel .hoja2-featured .mini-preview-canvas,
#hoja2-panel .hoja2-community .mini-preview-canvas{
  width:52px !important;
  height:52px !important;
}

#hoja2-panel .hoja2-featured .pattern-meta,
#hoja2-panel .hoja2-community .pattern-meta{
  gap:3px !important;
}

#hoja2-panel .hoja2-featured .pattern-meta strong,
#hoja2-panel .hoja2-community .pattern-meta strong{
  font-size:13px !important;
  line-height:1.15 !important;
}

#hoja2-panel .hoja2-featured .pattern-author,
#hoja2-panel .hoja2-community .pattern-author{
  font-size:11px !important;
}

#hoja2-panel .hoja2-featured .btn-load,
#hoja2-panel .hoja2-community .btn-load{
  margin-top:3px !important;
  padding:6px 8px !important;
  font-size:11px !important;
}

/* Empty states should occupy only their message, never a blank card-height. */
#hoja2-panel #featured-grid:empty,
#hoja2-panel .hoja2-community .community-grid:has(> .history-empty:only-child){
  height:auto !important;
  min-height:48px !important;
  max-height:none !important;
  overflow:hidden !important;
  align-items:center !important;
  justify-content:center !important;
}

@media (max-width:700px){
  #hoja2-panel .hoja2-body{
    grid-template-columns:minmax(0, 1fr) !important;
  }

  #hoja2-panel .hoja2-featured,
  #hoja2-panel .hoja2-community{
    grid-column:1 !important;
    grid-row:auto !important;
  }
}

/* Hoja 2 — lower collections: fixed two-column workspace.
   The upper access controls remain untouched; only the collection area
   participates in this bounded layout. */
body:has(#hoja2-panel:not([aria-hidden="true"])){
  height:100vh !important;
  min-height:100vh !important;
  overflow:hidden !important;
}

body:has(#hoja2-panel:not([aria-hidden="true"])) > .viewport{
  height:100vh !important;
  min-height:0 !important;
  overflow:hidden !important;
}

#hoja2-panel .hoja2{
  height:100vh !important;
  max-height:100vh !important;
  min-height:0 !important;
  overflow:hidden !important;
}

#hoja2-panel .hoja2-inner{
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
}

#hoja2-panel .hoja2-lower{
  --hoja2-card-width: min(196px, calc(50vw - 44px));
  --hoja2-card-height: 190px;
  --hoja2-card-image-size: 64px;
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
  gap:18px !important;
  width:100% !important;
  height:clamp(320px, calc(100vh - 300px), 620px) !important;
  max-height:620px !important;
  min-height:0 !important;
  flex:0 1 auto !important;
  align-items:stretch !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

/* Left column: recent models are the only vertically scrolling collection. */
#hoja2-panel .hoja2-history{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:10px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

#hoja2-panel .hoja2-history .history-box{
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  width:100% !important;
  height:100% !important;
  max-height:620px !important;
  min-height:0 !important;
  padding:10px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  box-sizing:border-box !important;
}

#hoja2-panel .hoja2-history .history-box > div{
  display:flex !important;
  flex:0 0 auto !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  overflow:visible !important;
}

/* Right column: weekly winner above the horizontally scrolling feed. */
#hoja2-panel .hoja2-right-column{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) !important;
  grid-template-rows:270px minmax(0, 1fr) !important;
  gap:14px !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
}

#hoja2-panel .hoja2-right-column .hoja2-featured{
  grid-column:1 !important;
  grid-row:1 !important;
}

#hoja2-panel .hoja2-right-column .hoja2-community{
  grid-column:1 !important;
  grid-row:2 !important;
}

#hoja2-panel .hoja2-right-column .hoja2-featured,
#hoja2-panel .hoja2-right-column .hoja2-community{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:10px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

#hoja2-panel .hoja2-right-column .featured-heading{
  flex:0 0 auto !important;
  margin-bottom:8px !important;
}

#hoja2-panel .hoja2-right-column .community-grid{
  display:flex !important;
  flex:1 1 auto !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  gap:10px !important;
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 2px 8px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  grid-template-columns:none !important;
  box-sizing:border-box !important;
}

#hoja2-panel #featured-grid{
  justify-content:center !important;
  overflow-x:hidden !important;
  overflow-y:hidden !important;
}

#hoja2-panel #featured-grid .pattern-card:nth-child(n + 2){
  display:none !important;
}

/* One source of truth for every Hoja 2 pattern card. Recent, featured and
   shared cards intentionally share the exact same box, spacing and preview. */
#hoja2-panel .hoja2-lower .hoja2-history .pattern-card,
#hoja2-panel .hoja2-lower .hoja2-right-column .pattern-card{
  display:flex !important;
  flex:0 0 260px !important;
  width:260px !important;
  min-width:260px !important;
  max-width:260px !important;
  height:120px !important;
  min-height:120px !important;
  max-height:120px !important;
  margin:0 !important;
  padding:10px !important;
  gap:8px !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

#hoja2-panel .pattern-card .mini-preview-canvas{
  display:block !important;
  flex:0 0 var(--hoja2-card-image-size) !important;
  width:var(--hoja2-card-image-size) !important;
  height:var(--hoja2-card-image-size) !important;
  min-width:var(--hoja2-card-image-size) !important;
  min-height:var(--hoja2-card-image-size) !important;
  max-width:var(--hoja2-card-image-size) !important;
  max-height:var(--hoja2-card-image-size) !important;
  margin:0 auto !important;
  box-sizing:border-box !important;
}

#hoja2-panel .pattern-card > div:first-child{
  min-width:0 !important;
}

/* Recent cards keep their existing data/actions but use the same vertical
   card geometry as the public gallery. */
#hoja2-panel .hoja2-history .pattern-card > div:first-child{
  display:flex !important;
  flex:0 0 auto !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:10px !important;
  width:auto !important;
  height:70px !important;
}

#hoja2-panel .hoja2-history .pattern-card > div:first-child > div:first-child{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
}

#hoja2-panel .hoja2-history .pattern-card > div:first-child > div:first-child .mini-preview-canvas{
  flex:0 0 var(--hoja2-card-image-size) !important;
  margin:0 !important;
}

#hoja2-panel .hoja2-history .pattern-card > div:last-child{
  display:flex !important;
  flex:0 0 auto !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:6px !important;
  width:100% !important;
  margin:0 !important;
}

#hoja2-panel .pattern-card .pattern-meta{
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
  min-width:0 !important;
  margin:0 !important;
}

#hoja2-panel .pattern-card .pattern-meta strong,
#hoja2-panel .pattern-card .pattern-author{
  display:block !important;
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

#hoja2-panel .pattern-card .btn-load{
  flex:0 0 auto !important;
  width:100% !important;
  min-height:28px !important;
  margin:0 !important;
  padding:6px 8px !important;
  box-sizing:border-box !important;
}

#hoja2-panel .hoja2-history .pattern-card .btn-load{
  width:auto !important;
}

#hoja2-panel .hoja2-history .palette-remove{
  flex:0 0 auto !important;
  margin:0 !important;
  padding:6px 4px !important;
  font-size:11px !important;
}

@media (max-width:700px){
  #hoja2-panel .hoja2-lower{
    --hoja2-card-width: min(196px, calc(50vw - 34px));
    gap:10px !important;
  }

  #hoja2-panel .hoja2-right-column{
    grid-template-rows:260px minmax(0, 1fr) !important;
    gap:10px !important;
  }

  #hoja2-panel .hoja2-history,
  #hoja2-panel .hoja2-right-column .hoja2-featured,
  #hoja2-panel .hoja2-right-column .hoja2-community{
    padding:7px !important;
  }
}

/* --------------------------------------------------------------------------
   Hoja 2 — rigid two-column workspace
   This block is intentionally last: older Hoja 2 experiments above are kept
   for compatibility, while these rules define the final visual contract.
   -------------------------------------------------------------------------- */
html:has(#hoja2-panel[aria-hidden="false"]),
body:has(#hoja2-panel:not([aria-hidden="true"])){
  height:100vh !important;
  min-height:100vh !important;
  overflow:hidden !important;
}

body:has(#hoja2-panel:not([aria-hidden="true"])) > .viewport{
  width:100% !important;
  max-width:none !important;
  height:100vh !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

#hoja2-panel{
  position:fixed !important;
  inset:0 !important;
  z-index:20 !important;
  width:100vw !important;
  max-width:none !important;
  height:100vh !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}

#hoja2-panel .hoja2{
  width:100% !important;
  max-width:none !important;
  height:100vh !important;
  min-height:0 !important;
  margin:0 !important;
  padding:18px 24px 20px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

#hoja2-panel .hoja2-inner{
  display:grid !important;
  grid-template-rows:auto auto auto auto minmax(0,1fr) !important;
  gap:9px !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
}

/* Header surfaces: structure and copy stay the same, only their footprint is
   bounded so the collection area receives the remaining viewport height. */
#hoja2-panel .access-status-stack{
  width:100% !important;
  min-height:0 !important;
  margin:0 !important;
  gap:7px !important;
}

#hoja2-panel .timer-banner-top{
  display:flex !important;
  width:max-content !important;
  max-width:100% !important;
  min-height:32px !important;
  padding:7px 18px !important;
  border:2px solid #ff2b9a !important;
  border-radius:0 !important;
  background:#fff !important;
  color:#050505 !important;
  box-shadow:4px 4px 0 #14051f !important;
  font-family:"Press Start 2P", monospace !important;
  font-size:10px !important;
  font-weight:400 !important;
  line-height:1.35 !important;
}

#hoja2-panel #expiryAlert{
  width:min(100%,560px) !important;
}

#hoja2-panel #info-plan-status-card{
  width:min(100%,560px) !important;
  max-width:560px !important;
  min-height:0 !important;
  margin:0 auto !important;
  padding:10px 14px !important;
  border:3px solid #b84cff !important;
  outline:2px solid #ff2b9a !important;
  outline-offset:3px !important;
  border-radius:0 !important;
  background:#29113f !important;
  color:#fff !important;
  box-shadow:5px 5px 0 #14051f !important;
  font-family:system-ui,sans-serif !important;
  font-size:11px !important;
  line-height:1.35 !important;
}

#hoja2-panel #info-plan-status-card > div:first-child{
  color:#ff8dcc !important;
  font-family:"Press Start 2P", monospace !important;
  font-size:9px !important;
}

#hoja2-panel #info-plan-status-card > div:last-child{
  color:#f7eaff !important;
}

#hoja2-panel .hoja2-guide,
#hoja2-panel .hoja2-top{
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

#hoja2-panel .hoja2-guide > [role="region"],
#hoja2-panel .hoja2-top > #crearModeloBtn{
  width:min(100%,340px) !important;
  min-width:0 !important;
}

#hoja2-panel #btn-acceso-contador,
#hoja2-panel #crearModeloBtn{
  min-height:42px !important;
  padding:10px 14px !important;
  border:3px solid #16051f !important;
  border-radius:0 !important;
  background:linear-gradient(135deg,#a855f7,#ec4899) !important;
  box-shadow:5px 5px 0 #14051f !important;
  font-family:"Press Start 2P", monospace !important;
  font-size:10px !important;
  line-height:1.35 !important;
}

/* The requested lower work area: two equal columns, no page-level overflow. */
#hoja2-panel .hoja2-lower{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:25px !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

#hoja2-panel .hoja2-history,
#hoja2-panel .hoja2-right-column{
  min-width:0 !important;
  min-height:0 !important;
  height:100% !important;
  margin:0 !important;
  padding:10px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

#hoja2-panel .hoja2-history{
  display:flex !important;
  flex-direction:column !important;
}

#hoja2-panel .hoja2-history > .hoja2-section-title{
  flex:0 0 auto !important;
  margin:0 0 9px !important;
}

#hoja2-panel .hoja2-history .history-box{
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:10px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  scrollbar-color:#ff4caf #160b21 !important;
  box-sizing:border-box !important;
}

#hoja2-panel .hoja2-history .history-box > div{
  display:flex !important;
  flex:0 0 auto !important;
  flex-direction:column !important;
  gap:12px !important;
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
}

#hoja2-panel .hoja2-right-column{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:180px minmax(0,1fr) !important;
  gap:14px !important;
}

#hoja2-panel .hoja2-right-column > .hoja2-featured,
#hoja2-panel .hoja2-right-column > .hoja2-community{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:10px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

#hoja2-panel .hoja2-featured{
  grid-column:1 !important;
  grid-row:1 !important;
}

#hoja2-panel .hoja2-community{
  grid-column:1 !important;
  grid-row:2 !important;
}

/* Black featured header with the pink plus at the far right. */
#hoja2-panel .featured-heading{
  display:flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  min-height:39px !important;
  margin:0 0 9px !important;
  padding:8px 10px !important;
  background:#050505 !important;
  border:2px solid #050505 !important;
  box-sizing:border-box !important;
}

#hoja2-panel .featured-kicker{
  margin:0 0 3px !important;
  color:#fff !important;
  font-family:"Press Start 2P", monospace !important;
  font-size:8px !important;
  text-shadow:none !important;
}

#hoja2-panel .featured-heading .hoja2-section-title{
  margin:0 !important;
  color:#ff8dcc !important;
  font-size:12px !important;
  line-height:1.2 !important;
  text-shadow:none !important;
}

#hoja2-panel .featured-spark{
  display:inline-flex !important;
  flex:0 0 27px !important;
  width:27px !important;
  height:27px !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  border:1px solid #ff4caf !important;
  background:#ff4caf !important;
  color:#16051f !important;
  box-shadow:3px 3px 0 #7e1e5b !important;
  font-family:"Press Start 2P", monospace !important;
  font-size:15px !important;
  line-height:1 !important;
  cursor:pointer !important;
}

#hoja2-panel #featured-grid,
#hoja2-panel .hoja2-community .community-grid{
  display:flex !important;
  flex:1 1 auto !important;
  flex-wrap:nowrap !important;
  align-items:flex-start !important;
  gap:15px !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 2px 8px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scrollbar-color:#ff4caf #160b21 !important;
  box-sizing:border-box !important;
}

#hoja2-panel #featured-grid{
  justify-content:flex-start !important;
}

#hoja2-panel .hoja2-community > .hoja2-section-title{
  flex:0 0 auto !important;
  margin:0 0 9px !important;
  color:#ff8dcc !important;
  font-size:13px !important;
  line-height:1.25 !important;
}

/* One exact horizontal card geometry for recent, featured and shared items. */
#hoja2-panel .hoja2-lower .pattern-card{
  position:relative !important;
  display:flex !important;
  flex:0 0 260px !important;
  width:260px !important;
  min-width:260px !important;
  max-width:260px !important;
  height:120px !important;
  min-height:120px !important;
  max-height:120px !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 !important;
  padding:10px !important;
  border:2px solid #b84cff !important;
  border-radius:0 !important;
  background:#2b1a42 !important;
  box-shadow:4px 4px 0 #14051f !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

#hoja2-panel #featured-grid .pattern-card:first-child{
  border-color:#ffcc00 !important;
  box-shadow:4px 4px 0 #14051f, 0 0 0 1px rgba(255,204,0,.65) inset !important;
}

#hoja2-panel .pattern-card-media{
  display:flex !important;
  flex:0 0 70px !important;
  width:70px !important;
  height:70px !important;
  min-width:70px !important;
  min-height:70px !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid #fff !important;
  background:#fff !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

#hoja2-panel .pattern-card .mini-preview-canvas{
  display:block !important;
  flex:0 0 70px !important;
  width:70px !important;
  height:70px !important;
  min-width:70px !important;
  min-height:70px !important;
  max-width:70px !important;
  max-height:70px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:#fff !important;
  image-rendering:pixelated !important;
  box-sizing:border-box !important;
}

#hoja2-panel .pattern-card-body{
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
  height:70px !important;
}

#hoja2-panel .pattern-card .pattern-meta{
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:2px !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
  color:#fff !important;
  overflow:hidden !important;
}

#hoja2-panel .pattern-card .pattern-size{
  color:#f7eaff !important;
  font-family:"Press Start 2P", monospace !important;
  font-size:7px !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
}

#hoja2-panel .pattern-card .pattern-labor{
  color:#f2d9ff !important;
  font-family:monospace !important;
  font-size:10px !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}

#hoja2-panel .pattern-card .pattern-meta strong{
  display:block !important;
  max-width:100% !important;
  color:#fff !important;
  font-family:"Press Start 2P", monospace !important;
  font-size:9px !important;
  font-weight:400 !important;
  line-height:1.25 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

#hoja2-panel .pattern-card .pattern-author{
  display:block !important;
  max-width:100% !important;
  color:#f7eaff !important;
  font-family:monospace !important;
  font-size:10px !important;
  line-height:1.2 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

#hoja2-panel .pattern-card .pattern-status{
  display:block !important;
  font-family:monospace !important;
  font-size:10px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}

#hoja2-panel .pattern-card .pattern-status.is-public{
  color:#22d3ee !important;
}

#hoja2-panel .pattern-card .pattern-status.is-featured{
  color:#ffcc00 !important;
}

#hoja2-panel .pattern-card .official-badge,
#hoja2-panel .pattern-card .featured-badge{
  display:none !important;
}

/* Preserve loading/deletion behavior without allowing action controls to
   change the 260×120 visual contract. They appear on hover/focus only. */
#hoja2-panel .pattern-card-actions,
#hoja2-panel .pattern-card > .btn-load{
  position:absolute !important;
  right:8px !important;
  bottom:7px !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:row !important;
  gap:4px !important;
  align-items:center !important;
  opacity:0 !important;
  transition:opacity .15s ease !important;
}

#hoja2-panel .pattern-card:hover .pattern-card-actions,
#hoja2-panel .pattern-card:focus-within .pattern-card-actions,
#hoja2-panel .pattern-card:hover > .btn-load,
#hoja2-panel .pattern-card:focus-within > .btn-load{
  opacity:1 !important;
}

#hoja2-panel .pattern-card-actions .btn-load,
#hoja2-panel .pattern-card > .btn-load{
  width:auto !important;
  min-height:18px !important;
  margin:0 !important;
  padding:3px 5px !important;
  border:1px solid #ff4caf !important;
  border-radius:0 !important;
  background:#16051f !important;
  color:#fff !important;
  font:7px "Press Start 2P",monospace !important;
  white-space:nowrap !important;
}

#hoja2-panel .pattern-card-actions .palette-remove{
  margin:0 !important;
  padding:3px 4px !important;
  border:1px solid #ff4caf !important;
  color:#ff9dcb !important;
  font:9px monospace !important;
}

#hoja2-panel .pattern-card .pattern-star{
  position:absolute !important;
  top:5px !important;
  right:5px !important;
  z-index:3 !important;
  display:inline-flex !important;
  width:22px !important;
  height:22px !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  border:1px solid #fff !important;
  border-radius:0 !important;
  background:#050505 !important;
  color:#ffcc00 !important;
  font:15px/1 monospace !important;
  cursor:pointer !important;
  box-shadow:2px 2px 0 #000 !important;
}

#hoja2-panel .pattern-card .pattern-star:disabled{
  opacity:1 !important;
  cursor:default !important;
}

#hoja2-panel .pattern-card .pattern-star.is-featured{
  color:#ffcc00 !important;
}

@media (max-width:700px){
  #hoja2-panel .hoja2{
    padding:12px !important;
  }

  #hoja2-panel .hoja2-lower{
    gap:25px !important;
  }
}

/* --------------------------------------------------------------------------
   Hoja 2 — lower row alignment
   The previous right-hand wrapper is made layout-transparent so its two
   sections become the second and third grid tracks of one shared row.
   -------------------------------------------------------------------------- */
#hoja2-panel .hoja2-lower{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 284px minmax(0,1fr) !important;
  grid-template-rows:minmax(0,1fr) !important;
  align-items:stretch !important;
  gap:25px !important;
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
}

#hoja2-panel .hoja2-lower > .hoja2-right-column{
  display:contents !important;
}

#hoja2-panel .hoja2-lower > .hoja2-history,
#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-featured,
#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-community{
  grid-row:1 !important;
  height:100% !important;
  min-height:0 !important;
  min-width:0 !important;
  margin:0 !important;
  padding:10px !important;
  border:2px solid #b84cff !important;
  outline:2px solid #ff2b9a !important;
  outline-offset:2px !important;
  background:#2b1a42 !important;
  box-shadow:4px 4px 0 #14051f !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

#hoja2-panel .hoja2-lower > .hoja2-history{
  grid-column:1 !important;
  display:flex !important;
  flex-direction:column !important;
}

#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-featured{
  grid-column:2 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-community{
  grid-column:3 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
}

/* Identical header heights make the three card streams begin on one baseline. */
#hoja2-panel .hoja2-lower > .hoja2-history > .hoja2-section-title,
#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-community > .hoja2-section-title,
#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-featured > .featured-heading{
  flex:0 0 54px !important;
  width:100% !important;
  height:54px !important;
  min-height:54px !important;
  max-height:54px !important;
  margin:0 0 9px !important;
  box-sizing:border-box !important;
}

#hoja2-panel .hoja2-lower > .hoja2-history > .hoja2-section-title,
#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-community > .hoja2-section-title{
  display:flex !important;
  align-items:center !important;
  padding:8px 10px !important;
  border:2px solid #b84cff !important;
  background:#160b21 !important;
  color:#ff8dcc !important;
  line-height:1.2 !important;
  box-shadow:2px 2px 0 #14051f !important;
}

#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-featured > .featured-heading{
  flex-wrap:nowrap !important;
  padding:8px 10px !important;
}

/* The winner column has no stretched black gallery: only its header and the
   single 260×120 winner occupy space; the shared outer frame stays aligned. */
#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-featured > #featured-grid{
  display:flex !important;
  flex:0 0 120px !important;
  width:100% !important;
  height:120px !important;
  min-height:120px !important;
  max-height:120px !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-community > .community-grid{
  flex:1 1 auto !important;
  width:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 2px 8px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
}

#hoja2-panel .hoja2-lower > .hoja2-history > .history-box{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
}

#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-featured .pattern-card{
  flex:0 0 260px !important;
  width:260px !important;
  height:120px !important;
}

@media (max-width:700px){
  #hoja2-panel .hoja2-lower{
    grid-template-columns:minmax(0,1fr) 284px minmax(0,1fr) !important;
  }
}

/* --------------------------------------------------------------------------
   Hoja 2 — central winner release
   -------------------------------------------------------------------------- */
#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-featured{
  align-self:start !important;
  justify-self:center !important;
  width:260px !important;
  max-width:260px !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  border:0 !important;
  outline:0 !important;
  outline-offset:0 !important;
  padding:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}

#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-featured > .featured-heading{
  flex:0 0 54px !important;
}

#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-featured > #featured-grid{
  flex:0 0 120px !important;
  height:120px !important;
  min-height:120px !important;
  max-height:120px !important;
  overflow:hidden !important;
}

/* The community section is the viewport. Its grid is the moving track, so
   the section itself remains fixed while cards travel continuously through it. */
#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-community{
  overflow:hidden !important;
}

/* --------------------------------------------------------------------------
   Hoja 2 — final premium scale calibration
   Visual-only overrides: the access values and all report logic remain
   untouched while the hierarchy gets a stronger arcade presence.
   -------------------------------------------------------------------------- */
#hoja2-panel .timer-banner-top{
  min-height:46px !important;
  padding:10px 26px !important;
  border-width:3px !important;
  box-shadow:6px 6px 0 #14051f !important;
  font-size:13px !important;
  letter-spacing:.02em !important;
}

#hoja2-panel #info-plan-status-card{
  width:min(100%,760px) !important;
  max-width:760px !important;
  padding:18px 22px !important;
  border:6px double #b84cff !important;
  outline:3px solid #ff2b9a !important;
  outline-offset:4px !important;
  box-shadow:9px 9px 0 #14051f !important;
  font-size:22px !important;
  line-height:1.48 !important;
}

#hoja2-panel #info-plan-status-card > div:first-child{
  margin-bottom:10px !important;
  font-size:14px !important;
  line-height:1.35 !important;
}

#hoja2-panel #info-plan-status-card > div:last-child{
  font-size:22px !important;
  line-height:1.48 !important;
}

#hoja2-panel .hoja2-guide > [role="region"],
#hoja2-panel .hoja2-top > #crearModeloBtn{
  width:min(100%,560px) !important;
  min-width:450px !important;
  max-width:560px !important;
}

#hoja2-panel #btn-acceso-contador,
#hoja2-panel #crearModeloBtn{
  min-height:70px !important;
  padding:17px 24px !important;
  border-width:4px !important;
  box-shadow:10px 10px 0 #14051f !important;
  font-size:17px !important;
  letter-spacing:.04em !important;
  line-height:1.35 !important;
}

@media (max-width:560px){
  #hoja2-panel .hoja2-guide > [role="region"],
  #hoja2-panel .hoja2-top > #crearModeloBtn{
    width:calc(100vw - 32px) !important;
    min-width:0 !important;
    max-width:100% !important;
  }

}

/* --------------------------------------------------------------------------
   Hoja 2 — vertical card flow and unified lower headings
   -------------------------------------------------------------------------- */
#hoja2-panel .hoja2-lower > .hoja2-history > .hoja2-section-title,
#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-featured > .featured-heading .hoja2-section-title,
#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-community > .hoja2-section-title{
  font-family:"Press Start 2P", monospace !important;
  font-size:12px !important;
  font-weight:400 !important;
  letter-spacing:.01em !important;
  line-height:1.35 !important;
  text-align:left !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-transform:none !important;
}

/* The personal history remains a vertical priority feed. */
#hoja2-panel .hoja2-lower > .hoja2-history > .history-box{
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  min-height:0 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
}

/* The winner stays compact and begins at the top of its column. */
#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-featured{
  align-self:start !important;
  justify-self:center !important;
  width:260px !important;
  max-width:260px !important;
  height:auto !important;
  min-height:0 !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}

#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-featured > #featured-grid{
  display:flex !important;
  flex:0 0 120px !important;
  flex-direction:row !important;
  width:260px !important;
  height:120px !important;
  min-height:120px !important;
  max-height:120px !important;
  padding:0 !important;
  overflow:hidden !important;
}

/* Shared models now form a true downward gallery. The former carousel track
   and any stale animation state are explicitly neutralized. */
#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-community > .community-grid{
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
  flex-wrap:nowrap !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  gap:15px !important;
  margin:0 !important;
  padding:0 2px 10px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  animation:none !important;
  transform:none !important;
  will-change:auto !important;
  scrollbar-color:#ff4caf #160b21 !important;
}

#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-community > .community-grid .pattern-card{
  flex:0 0 120px !important;
  width:260px !important;
  min-width:260px !important;
  max-width:260px !important;
  height:120px !important;
  min-height:120px !important;
  max-height:120px !important;
}

/* Central heading: keep the unified arcade styling while allowing the full
   title to remain visible on one line. */
#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-featured > .featured-heading > div{
  flex:0 0 auto !important;
  width:max-content !important;
  min-width:max-content !important;
  max-width:none !important;
  overflow:visible !important;
}

#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-featured > .featured-heading .hoja2-section-title{
  width:max-content !important;
  max-width:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  font-family:"Press Start 2P", monospace !important;
  font-size:12px !important;
  color:#ff8dcc !important;
}

/* The central heading now uses the complete header width after removing the
   redundant plus control. */
#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-featured > .featured-heading{
  justify-content:flex-start !important;
}

#hoja2-panel .hoja2-lower > .hoja2-right-column > .hoja2-featured > .featured-heading > div{
  flex:1 1 auto !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
}

/* Pixel-counter modal — enlarged premium arcade scale. */
#modal-contador-pixeles > [role="dialog"]{
  width:min(92vw,980px) !important;
  min-width:750px !important;
  min-height:700px !important;
  max-height:92vh !important;
  padding:36px 42px !important;
  border:6px double #210c38 !important;
  border-radius:0 !important;
  outline:3px solid #e639af !important;
  outline-offset:5px !important;
  background-color:#241535 !important;
  box-shadow:
    12px 12px 0 #10051c,
    0 0 0 3px rgba(230,57,175,.8) inset,
    0 0 34px rgba(230,57,175,.24) !important;
}

#modal-contador-pixeles [role="dialog"] > #modal-contador-title{
  margin:24px 0 22px !important;
  font-size:1.25rem !important;
  line-height:1.4 !important;
}

#modal-contador-pixeles [role="dialog"] > h3 + div{
  width:100% !important;
  box-sizing:border-box !important;
  margin:18px 0 24px !important;
  padding:24px 28px !important;
  border:3px dashed #ffcc00 !important;
  border-radius:0 !important;
  background:#fffbea !important;
  color:#210c38 !important;
  font-family:system-ui,sans-serif !important;
  font-size:20px !important;
  line-height:1.55 !important;
}

#modal-contador-pixeles [role="dialog"] > input#input-cargador-contador + div{
  display:flex !important;
  width:100% !important;
  gap:20px !important;
  margin:22px 0 !important;
  align-items:stretch !important;
}

#modal-contador-pixeles #btn-cortador-opcion,
#modal-contador-pixeles #btn-contador-opcion{
  flex:1 1 0 !important;
  width:auto !important;
  min-width:0 !important;
  min-height:88px !important;
  padding:22px 24px !important;
  border:4px solid #210c38 !important;
  border-radius:0 !important;
  font-family:"Press Start 2P", monospace !important;
  font-size:1rem !important;
  line-height:1.4 !important;
  box-shadow:10px 10px 0 #10051c !important;
  text-shadow:2px 2px 0 #5b21b6 !important;
}

#modal-contador-pixeles #btn-cortador-opcion{
  background:linear-gradient(135deg,#a855f7,#e639af) !important;
  text-shadow:2px 2px 0 #5b21b6 !important;
}

#modal-contador-pixeles #btn-contador-opcion{
  background:linear-gradient(135deg,#a855f7,#e639af) !important;
  text-shadow:2px 2px 0 #5b21b6 !important;
}

@media (max-width:780px){
  #modal-contador-pixeles > [role="dialog"]{
    width:calc(100vw - 28px) !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:28px 20px !important;
  }

  #modal-contador-pixeles [role="dialog"] > input#input-cargador-contador + div{
    flex-direction:column !important;
  }

  #modal-contador-pixeles #btn-cortador-opcion,
  #modal-contador-pixeles #btn-contador-opcion{
    width:100% !important;
  }
}

/* Image-counter readability: presentation-only styles for the detected
   result and its local history metadata. */
#modal-interno-contador-limpio #texto-reporte-celdas-contador,
#modal-interno-contador-limpio .contador-detected-summary{
  color:#e639af !important;
  font-family:"Press Start 2P", monospace !important;
  font-size:1.1rem !important;
  font-weight:400 !important;
  line-height:1.55 !important;
  text-shadow:2px 2px 0 #5b21b6 !important;
}

#modal-interno-contador-limpio #texto-reporte-celdas-contador{
  background:rgba(230,57,175,.08) !important;
  border:2px solid rgba(230,57,175,.45) !important;
}

#modal-interno-contador-limpio #texto-reporte-celdas-contador.is-pending{
  color:#b3a9c2 !important;
  background:rgba(179,169,194,.08) !important;
  border-color:rgba(179,169,194,.28) !important;
  font-family:"Press Start 2P", monospace !important;
  font-size:.85rem !important;
  text-shadow:none !important;
}

#modal-interno-contador-limpio .contador-detected-summary{
  width:100% !important;
  text-align:center !important;
}

#modal-interno-contador-limpio .contador-history-row{
  min-height:58px !important;
  border:2px solid rgba(230,57,175,.28) !important;
  background:rgba(33,12,56,.72) !important;
  box-shadow:3px 3px 0 #10051c !important;
}

#modal-interno-contador-limpio .contador-history-meta{
  min-width:0 !important;
}

#modal-interno-contador-limpio .contador-history-summary{
  color:#fff !important;
  font-family:"Press Start 2P", monospace !important;
  font-size:.7rem !important;
  line-height:1.45 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* --------------------------------------------------------------------------
   Hoja 3 — retro premium dark cosmetic skin
   Presentation only: no layout, dimensions, canvas sizing, or interaction
   rules are changed here.
   -------------------------------------------------------------------------- */
#hoja3-panel,
#hoja3-panel #hoja3{
  background-color:#0d0a14 !important;
  background-image:
    linear-gradient(rgba(230,57,175,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,57,175,.05) 1px, transparent 1px) !important;
  background-size:20px 20px !important;
  color:#f7eaff !important;
}

#hoja3-panel #hoja3{
  border-color:#4c1d95 !important;
  border-radius:0 !important;
  box-shadow:
    0 0 0 2px #e639af inset,
    6px 6px 0 #08050d !important;
}

#hoja3-panel .hoja3-header,
#hoja3-panel .hoja3-controls > *,
#hoja3-panel .hoja3-canvas-area,
#hoja3-panel #report-section,
#hoja3-panel #report-content,
#hoja3-panel #reportBox{
  background-color:#130f1e !important;
  background-image:none !important;
  border:2px solid #4c1d95 !important;
  border-radius:0 !important;
  outline:1px solid #e639af !important;
  outline-offset:-5px !important;
  box-shadow:
    0 0 0 2px rgba(230,57,175,.28) inset,
    4px 4px 0 #08050d !important;
}

#hoja3-panel .hoja3-header{
  color:#f7eaff !important;
}

#hoja3-panel .hoja3-header .pattern-name-field{
  background:#130f1e !important;
  border-color:#4c1d95 !important;
  border-radius:0 !important;
  box-shadow:
    0 0 0 2px rgba(230,57,175,.28) inset,
    3px 3px 0 #08050d !important;
}

#hoja3-panel .hoja3-title,
#hoja3-panel .btn-back,
#hoja3-panel .hoja3-controls [style*="color:var(--accent-dark)"],
#hoja3-panel .palette-area h4,
#hoja3-panel .hoja3-hint,
#hoja3-panel #tamano-limite-info{
  color:#e639af !important;
  font-family:"Press Start 2P", monospace !important;
  text-shadow:1px 1px 0 #4c1d95 !important;
}

#hoja3-panel .hoja3-controls label,
#hoja3-panel .hoja3-controls > div,
#hoja3-panel .hoja3-controls span{
  color:#f7eaff !important;
}

#hoja3-panel .hoja3-controls [style*="color:var(--accent-dark)"],
#hoja3-panel .palette-area h4{
  color:#e639af !important;
}

#hoja3-panel input:not([type="file"]),
#hoja3-panel textarea,
#hoja3-panel select{
  background-color:#0d0a14 !important;
  color:#f7eaff !important;
  border-color:#6d28d9 !important;
}

#hoja3-panel input::placeholder{
  color:#b9a7c8 !important;
}

#hoja3-panel .toggle-buttons button,
#hoja3-panel .btn-primary.ghost{
  background:#1b122a !important;
  color:#d8c7ed !important;
  border:2px solid #4c1d95 !important;
  border-radius:0 !important;
  box-shadow:2px 2px 0 #08050d !important;
}

#hoja3-panel .toggle-buttons button.active,
#hoja3-panel .btn-primary:not(.ghost){
  background:linear-gradient(135deg,#5b21b6,#e639af) !important;
  color:#ffffff !important;
  border-color:#e639af !important;
  border-radius:0 !important;
  box-shadow:
    0 0 0 1px #f7a8d8 inset,
    3px 3px 0 #08050d !important;
}

#hoja3-panel .palette-list,
#hoja3-panel #lista-colores-nuevo{
  background:#0d0a14 !important;
  border-color:#6d28d9 !important;
  border-radius:0 !important;
}

#hoja3-panel .palette-item{
  background:#1b122a !important;
  color:#f7eaff !important;
  border-color:#4c1d95 !important;
  border-radius:0 !important;
}

#hoja3-panel .palette-item .palette-name,
#hoja3-panel .palette-item .palette-hex,
#hoja3-panel .palette-remove{
  color:#f7eaff !important;
}

#hoja3-panel .canvas-wrap{
  background-color:#0d0a14 !important;
  background-image:
    linear-gradient(rgba(230,57,175,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,57,175,.05) 1px, transparent 1px) !important;
  background-size:20px 20px !important;
  border-color:#4c1d95 !important;
  border-radius:0 !important;
  box-shadow:
    0 0 0 2px rgba(230,57,175,.28) inset,
    4px 4px 0 #08050d !important;
}

#hoja3-panel .canvas-wrap::before{
  background-image:
    linear-gradient(rgba(230,57,175,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,57,175,.05) 1px, transparent 1px) !important;
  background-size:20px 20px !important;
  border-radius:0 !important;
  opacity:1 !important;
}

#hoja3-panel .report-box,
#hoja3-panel .report-table,
#hoja3-panel .report-table thead tr,
#hoja3-panel .report-table tbody tr,
#hoja3-panel .report-table th,
#hoja3-panel .report-table td,
#hoja3-panel #report-content [data-report-row]{
  background:#130f1e !important;
  color:#f7eaff !important;
  border-color:#4c1d95 !important;
}

#hoja3-panel .report-table thead tr,
#hoja3-panel .report-table thead th{
  background:#211333 !important;
  color:#e639af !important;
  font-family:"Press Start 2P", monospace !important;
}

#hoja3-panel .report-box h4,
#hoja3-panel #report-content h4{
  color:#e639af !important;
  font-family:"Press Start 2P", monospace !important;
  text-shadow:1px 1px 0 #4c1d95 !important;
}

#hoja3-panel .report-table td.col-center,
#hoja3-panel .report-table td.col-wide,
#hoja3-panel #report-content [data-report-row]{
  color:#f7eaff !important;
}

#hoja3-panel .color-pill{
  background:#211333 !important;
  color:#ffffff !important;
  border-color:#e639af !important;
  border-radius:0 !important;
  box-shadow:2px 2px 0 #08050d !important;
}

/* Hoja 3 — high-contrast report typography and palette fields */
#hoja3-panel .report-table .color-pill,
#hoja3-panel #report-content .color-pill,
#hoja3-panel .report-table .color-pill *,
#hoja3-panel #report-content .color-pill *{
  color:#ffffff !important;
  text-shadow:1px 1px 0 #4c1d95 !important;
}

#hoja3-panel .report-table .color-pill .color-swatch,
#hoja3-panel #report-content .color-pill .color-swatch{
  text-shadow:none !important;
}

#hoja3-panel .palette-list input[type="text"],
#hoja3-panel .palette-list input:not([type]),
#hoja3-panel #lista-colores-nuevo input[type="text"],
#hoja3-panel #lista-colores-nuevo input:not([type]),
#hoja3-panel .palette-item input{
  background:#221936 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  caret-color:#86efac !important;
  border-color:#6d28d9 !important;
  text-shadow:1px 1px 0 #0d0a14 !important;
}

#hoja3-panel .palette-list input[type="text"]::placeholder,
#hoja3-panel #lista-colores-nuevo input[type="text"]::placeholder,
#hoja3-panel .palette-item input::placeholder{
  color:#86efac !important;
  opacity:1 !important;
}

#hoja3-panel .palette-list input[type="text"]:focus,
#hoja3-panel #lista-colores-nuevo input[type="text"]:focus,
#hoja3-panel .palette-item input:focus{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color:#86efac !important;
  outline:2px solid rgba(134,239,172,.35) !important;
  outline-offset:1px !important;
}

#hoja3-panel #lista-colores-nuevo > div{
  background:#221936 !important;
  color:#ffffff !important;
  border-color:#6d28d9 !important;
}

#hoja3-panel #lista-colores-nuevo > div > div:nth-child(3){
  color:#86efac !important;
  -webkit-text-fill-color:#86efac !important;
  text-shadow:1px 1px 0 #0d0a14 !important;
}

#hoja3-panel .report-table td.col-narrow,
#hoja3-panel .report-table td.col-center,
#hoja3-panel .report-table .mini-row-number,
#hoja3-panel #report-content [data-report-row] > div:first-child,
#hoja3-panel #report-content [data-report-row] > div:last-child{
  color:#ffffff !important;
  text-shadow:1px 1px 0 #4c1d95 !important;
}

#hoja3-panel .report-table td.col-narrow .mini-row-number,
#hoja3-panel .report-table td.col-center:last-child,
#hoja3-panel #report-content [data-report-row] > div:last-child{
  color:#ff9ddd !important;
  font-weight:900 !important;
}

/* Hoja 3 — high-contrast quantity badge inside every sequence pill */
#hoja3-panel .color-pill [data-sequence-count-label],
#hoja3-panel [data-sequence-count-label]{
  background:#000000 !important;
  color:#00ff66 !important;
  -webkit-text-fill-color:#00ff66 !important;
  font-family:"Press Start 2P", monospace !important;
  font-size:10px !important;
  font-weight:bold !important;
  line-height:1.25 !important;
  min-width:2.8em;
  padding:3px 6px !important;
  text-align:center !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-shadow:1px 1px 0 #0d0a14 !important;
  box-sizing:border-box !important;
}

/* Hoja 3 — fila actualmente seleccionada mediante "👁️ Ver" */
.fila-activa-tejiendo {
  background-color: #e639af !important;
  border: 2px solid #00ff66 !important;
  color: #000000 !important;
  box-shadow: inset 0 0 0 1px #000000 !important;
}

.fila-activa-tejiendo > td {
  background-color: #e639af !important;
  color: #000000 !important;
  border-color: #00ff66 !important;
}

.fila-activa-tejiendo > td,
.fila-activa-tejiendo > td *:not(canvas) {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border-color: #000000 !important;
  text-shadow: none !important;
}

.fila-activa-tejiendo .color-pill {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #000000 !important;
  text-shadow: 1px 1px 0 #000000 !important;
}

.fila-activa-tejiendo .color-pill *:not(canvas) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #000000 !important;
  text-shadow: 1px 1px 0 #000000 !important;
}

/* Refinamiento final de contraste para la fila seleccionada */
.fila-activa-tejiendo,
.fila-activa-tejiendo > td {
  background-color: #7b1fa2 !important;
}

.fila-activa-tejiendo > td:nth-child(2) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 1px 1px 0 #24002f !important;
}

.fila-activa-tejiendo > td:first-child button[data-target-row],
.fila-activa-tejiendo > td:first-child button {
  background-color: #4a0d63 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 1px 1px 0 #24002f !important;
}

/* Contraste definitivo de todos los datos visibles de la fila activa */
.fila-activa-tejiendo {
  border: 2px solid #00ff66 !important;
  background-color: #7b1fa2 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.fila-activa-tejiendo > td,
.fila-activa-tejiendo > td *:not(canvas) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.fila-activa-tejiendo > td:first-child,
.fila-activa-tejiendo > td:last-child,
.fila-activa-tejiendo > td:nth-child(2) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 900 !important;
}

.fila-activa-tejiendo > td:first-child button,
.fila-activa-tejiendo > td:nth-child(2),
.fila-activa-tejiendo > td:nth-child(2) *,
.fila-activa-tejiendo > td:last-child,
.fila-activa-tejiendo > td:last-child * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 900 !important;
}

/* Hoja 3 — marco de contraste para las muestras físicas de la paleta */
#hoja3-panel #lista-colores-nuevo > div > div:first-child,
#hoja3-panel .palette-item .swatch {
  border: 2px solid #ffffff !important;
  outline: 1px solid #ffffff !important;
  box-sizing: border-box !important;
}