*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:        #EDE8DC;
      --surface:   #F7F3EB;
      --ink:       #0F0F0F;
      --ink-soft:  #2A2A28;
      --ink-faint: #666660;
      --border:    #0F0F0F;
      --shadow:    4px 4px 0px #0F0F0F;
      --shadow-lg: 6px 6px 0px #0F0F0F;
      --yellow:    #FFE500;
      --green:     #00D97E;
      --orange:    #FF7A00;
      --blue:      #0057FF;
      --radius:    6px;
    }

    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background: var(--bg);
      color: var(--ink);
      min-height: 100vh;
    }

    /* ── Header ── */
    #header {
      background: var(--ink);
      color: var(--bg);
      padding: 0 24px;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
      border-bottom: 2px solid var(--ink);
    }
    #header .logo {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 26px;
      letter-spacing: 2px;
      color: var(--yellow);
    }
    #header .subtitle {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #888880;
      display: none;
    }
    @media(min-width: 600px) { #header .subtitle { display: block; } }

    #btn-ayuda {
      background: var(--yellow);
      border: 2px solid var(--yellow);
      color: var(--ink);
      border-radius: 50%;
      width: 30px;
      height: 30px;
      font-size: 14px;
      font-weight: 900;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity .15s;
      flex-shrink: 0;
      touch-action: manipulation;
    }
    #btn-ayuda:hover { opacity: .8; }
    #btn-contacto {
      background: none;
      border: 2px solid #444;
      color: #aaa;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      touch-action: manipulation;
      transition: border-color .15s, color .15s;
      text-decoration: none;
      line-height: 1;
    }
    #btn-contacto:hover { border-color: var(--yellow); color: var(--yellow); }

    #contacto-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.55);
      z-index: 1100;
      padding: 20px 16px;
      align-items: center;
      justify-content: center;
    }
    #contacto-overlay.open { display: flex; }
    #contacto-overlay #ayuda-box { max-width: 520px; }
    #contacto-overlay #ayuda-body { padding: 28px 24px; }

    #ayuda-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.55);
      z-index: 1100;
      padding: 20px 16px;
      align-items: center;
      justify-content: center;
    }
    #ayuda-overlay.open { display: flex; }
    #ayuda-box {
      background: var(--bg);
      border: 3px solid var(--ink);
      border-radius: 12px;
      box-shadow: 6px 6px 0 var(--ink);
      width: 100%;
      max-width: 420px;
      overflow: hidden;
    }
    #ayuda-header {
      background: var(--ink);
      color: var(--yellow);
      padding: 16px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    #ayuda-header span { font-family:'Bebas Neue',sans-serif; font-size: 22px; letter-spacing: 1px; }
    #ayuda-close {
      background: none; border: none; color: var(--yellow);
      font-size: 24px; font-weight: 900; cursor: pointer; line-height: 1;
    }
    #ayuda-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
    .ayuda-tip {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }
    .ayuda-tip-icon {
      font-size: 22px;
      flex-shrink: 0;
      width: 30px;
      text-align: center;
      margin-top: 1px;
    }
    .ayuda-tip-text { font-size: 13px; line-height: 1.5; color: var(--ink); }
    .ayuda-tip-text strong { font-weight: 800; }

    /* ── Filter bar ── */
    #filter-bar {
      background: var(--bg);
      border-bottom: 2px solid var(--ink);
      padding: 14px 24px;
      position: sticky;
      top: 56px;
      z-index: 90;
      transition: padding .25s ease;
    }
    #filter-bar.collapsed { padding-top: 8px; padding-bottom: 8px; }
    .filter-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }
    .filter-row:last-child { margin-bottom: 0; }
    #filter-collapsible {
      overflow: hidden;
      transition: max-height .25s ease, opacity .2s ease;
      opacity: 1;
    }
    #filter-collapsible .filter-row:last-child { margin-bottom: 8px; }
    #filter-bar.collapsed #filter-collapsible {
      max-height: 0 !important;
      opacity: 0;
    }
    .filter-label {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--ink-soft);
      width: 80px;
      flex-shrink: 0;
    }
    .filter-pills { display: flex; flex-wrap: wrap; gap: 6px; }

    .pill {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 4px 12px;
      border: 2px solid var(--ink);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--ink);
      cursor: pointer;
      transition: transform .1s, box-shadow .1s;
      user-select: none;
      touch-action: manipulation;
      box-shadow: 2px 2px 0 var(--ink);
    }
    .pill:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
    .pill:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
    .pill.active { background: var(--ink); color: var(--yellow); }

    /* Day tiles */
    .day-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border: 2px solid var(--ink);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--ink);
      cursor: pointer;
      touch-action: manipulation;
      transition: transform .1s, box-shadow .1s;
      box-shadow: 2px 2px 0 var(--ink);
      user-select: none;
    }
    .day-tile:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
    .day-tile:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
    .day-tile.active { background: var(--ink); color: var(--yellow); }
    .day-tile .abrev { font-size: 10px; font-weight: 800; line-height: 1; }

    /* ── Grid ── */
    #main { max-width: 1200px; margin: 0 auto; padding: 24px; padding-bottom: 48px; }
    #contador {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--ink-soft);
      margin-bottom: 16px;
    }
    #grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 16px;
    }

    /* ── Card ── */
    .card {
      background: var(--surface);
      border: 2px solid var(--ink);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      cursor: pointer;
      transition: transform .12s ease, box-shadow .12s ease;
      overflow: hidden;
      animation: cardIn .15s ease-out both;
      display: flex;
      flex-direction: column;
    }
    .card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
    .card:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
    @keyframes cardIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: none; }
    }

    .card-header {
      padding: 16px 16px 12px;
      border-bottom: 2px solid var(--ink);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }
    .card-discount {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 64px;
      line-height: 1;
      letter-spacing: 1px;
    }
    .card-discount.wide   { font-size: 42px; white-space: nowrap; }
    .card-discount.green  { color: var(--green); }
    .card-discount.yellow { color: var(--yellow); -webkit-text-stroke: 1px var(--ink); }
    .card-discount.orange { color: var(--orange); }
    .card-discount.blue   { color: var(--blue); }
    .card-discount.gray   { color: var(--ink-faint); }
    .card-discount-sub {
      display: block;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 1px;
      line-height: 1.3;
    }

    .card-super-badge {
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 3px 8px;
      border: 2px solid var(--ink);
      border-radius: 4px;
      background: var(--bg);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .card-body { padding: 12px 16px 14px; flex: 1; }
    .card-bank {
      font-size: 15px;
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: 6px;
      min-height: 22px;
      color: var(--ink);
      display: inline-block;
      cursor: pointer;
      border-bottom: 1.5px dashed rgba(0,0,0,.2);
      padding-bottom: 1px;
      transition: border-color .15s;
      touch-action: manipulation;
    }
    .card-bank:hover { border-bottom-color: var(--ink); }
    .card-bank.pinned {
      background: var(--yellow);
      border-radius: 4px;
      border-bottom: none;
      padding: 1px 5px 2px;
    }

    #banco-activo {
      display: none;
      margin-bottom: 14px;
    }
    .banco-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: var(--yellow);
      border: 2px solid var(--ink);
      border-radius: 20px;
      padding: 5px 14px 5px 16px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 3px 3px 0 var(--ink);
      transition: box-shadow .1s, transform .1s;
      touch-action: manipulation;
    }
    .banco-chip:active { box-shadow: none; transform: translate(3px,3px); }
    .banco-chip-x { font-size: 17px; font-weight: 900; line-height: 1; opacity: .7; }
    .card-meta {
      font-size: 11px;
      color: var(--ink-soft);
      font-weight: 500;
      margin-bottom: 4px;
      min-height: 16px;
    }
    .card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 16px;
      border-top: 2px solid var(--bg);
      background: var(--bg);
    }
    .card-days { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); }
    .card-where { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-faint); }

    /* ── Empty / Loading ── */
    #loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 80px 0;
      gap: 16px;
    }
    .spinner {
      width: 28px; height: 28px;
      border: 3px solid var(--ink);
      border-top-color: var(--yellow);
      border-radius: 50%;
      animation: spin .7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .loading-text { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--ink-soft); }

    #empty {
      display: none;
      text-align: center;
      padding: 80px 0;
    }
    #empty .empty-big { font-family: 'Bebas Neue', sans-serif; font-size: 80px; color: var(--ink-faint); line-height: 1; }
    #empty .empty-sub { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-top: 8px; }

    #error-box {
      display: none;
      margin-bottom: 16px;
      padding: 12px 16px;
      border: 2px solid #D00;
      border-radius: var(--radius);
      background: #FFF0F0;
      font-size: 13px;
      font-weight: 600;
      color: #D00;
      box-shadow: 3px 3px 0 #D00;
    }

    /* ── Modal ── */
    #modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(15,15,15,.6);
      backdrop-filter: blur(2px);
      z-index: 200;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    #modal-overlay.open { display: flex; }
    #modal-box {
      background: var(--surface);
      border: 2px solid var(--ink);
      border-radius: var(--radius);
      box-shadow: 8px 8px 0 var(--ink);
      width: 100%;
      max-width: 420px;
      max-height: 90vh;
      overflow-y: auto;
      animation: modalIn .16s ease-out;
    }
    @keyframes modalIn { from { opacity:0; transform: scale(.96) translateY(10px); } to { opacity:1; transform: none; } }

    .modal-top {
      border-bottom: 2px solid var(--ink);
      padding: 20px;
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }
    .modal-discount-big {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 80px;
      line-height: 1;
      flex-shrink: 0;
    }
    .modal-discount-big.green  { color: var(--green); }
    .modal-discount-big.yellow { color: var(--yellow); -webkit-text-stroke: 1px var(--ink); }
    .modal-discount-big.orange { color: var(--orange); }
    .modal-discount-big.blue   { color: var(--blue); }
    .modal-discount-big.gray   { color: var(--ink-faint); }

    .modal-close {
      margin-left: auto;
      font-size: 20px;
      cursor: pointer;
      color: var(--ink-soft);
      flex-shrink: 0;
      line-height: 1;
      padding: 4px;
    }
    .modal-close:hover { color: var(--ink); }

    .modal-bank { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.1; }
    .modal-method { font-size: 13px; font-weight: 500; color: var(--ink-soft); margin-top: 4px; }

    .modal-body { padding: 20px; }
    .modal-section { margin-bottom: 16px; }
    .modal-section:last-child { margin-bottom: 0; }
    .modal-field-label {
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--ink-faint);
      margin-bottom: 4px;
    }
    .modal-field-value {
      font-size: 14px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.4;
    }
    .modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .modal-field {
      padding: 10px 12px;
      border: 2px solid var(--ink);
      border-radius: var(--radius);
      background: var(--bg);
    }

    /* ── Mobile (≤ 480px) ────────────────────────────────────────────────── */
    @media (max-width: 480px) {
      #filter-bar { padding: 10px 16px; }
      .filter-label { width: 56px; }
      .pill { padding: 3px 9px; font-size: 10px; }
      .day-tile { width: 34px; height: 34px; }
      #filtros-dia { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
      #filtros-dia::-webkit-scrollbar { display: none; }

      #main { padding: 16px; padding-bottom: 48px; }
      #grid { gap: 12px; }

      .card { box-shadow: 3px 3px 0 var(--ink); }
      .card-header { padding: 12px 12px 10px; }
      .card-body { padding: 10px 12px 12px; }
      .card-footer { padding: 6px 12px; }
      .card-discount { font-size: 48px; }
      .card-discount.wide { font-size: 34px; }
      .card-discount-sub { font-size: 11px; }

      #modal-overlay { padding: 8px; }
      #modal-box { box-shadow: 4px 4px 0 var(--ink); }
      .modal-top { padding: 14px; gap: 12px; }
      .modal-discount-big { font-size: 58px; }
      .modal-bank { font-size: 18px; }
      .modal-body { padding: 14px; }

      .empty-big { font-size: 60px; }
    }

    /* ── Tablet (481px – 768px) ──────────────────────────────────────────── */
    @media (min-width: 481px) and (max-width: 768px) {
      #main { padding: 18px; padding-bottom: 48px; }
      .card-discount { font-size: 56px; }
      .modal-discount-big { font-size: 68px; }
    }

    /* ── Dark mode ─────────────────────────────────────────────────────────── */
    [data-theme="dark"] {
      --bg:        #1A1917;
      --surface:   #252220;
      --ink:       #E8E4D6;
      --ink-soft:  #A09C94;
      --ink-faint: #6A6660;
      --border:    #E8E4D6;
      --shadow:    4px 4px 0px #E8E4D6;
      --shadow-lg: 6px 6px 0px #E8E4D6;
      --blue:      #5599FF;
    }

    /* Pills y day-tiles activos: fondo crema, letra negra */
    [data-theme="dark"] .pill.active,
    [data-theme="dark"] .day-tile.active { background: #E8E4D6; color: #0F0F0F; }

    /* Header: queda oscuro fijo para mantener contraste con el logo amarillo */
    [data-theme="dark"] #header {
      background: #111;
      border-bottom: 2px solid #2A2826;
    }
    [data-theme="dark"] #header .subtitle { color: #6A6660; }

    /* Filter bar */
    [data-theme="dark"] #filter-bar { border-bottom-color: #2A2826; }

    /* Subrayado punteado del banco en card */
    [data-theme="dark"] .card-bank { border-bottom-color: rgba(255,255,255,.18); }

    /* Cabecera del modal de ayuda */
    [data-theme="dark"] #ayuda-header { background: #111; }

    /* Modal de descuento: texto de descripción e inline styles */
    [data-theme="dark"] #modal-promo  { color: #A09C94 !important; }
    [data-theme="dark"] #modal-fuente { color: #6A6660 !important; }

    /* Error box */
    [data-theme="dark"] #error-box {
      background: #2A1010;
      border-color: #FF6B6B;
      color: #FF6B6B;
      box-shadow: 3px 3px 0 #FF6B6B;
    }

    /* Botón de tema */
    #btn-tema {
      background: none;
      border: 2px solid #444;
      color: #aaa;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      font-size: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color .15s, color .15s;
      flex-shrink: 0;
      touch-action: manipulation;
      line-height: 1;
    }
    #btn-tema:hover { border-color: var(--yellow); }
    [data-theme="dark"] #btn-tema { border-color: #555; color: #aaa; }

    .frescura-chip {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.5px;
      color: #888880;
      margin-left: 2px;
    }
    [data-theme="dark"] .frescura-chip { color: #6A6660; }

    #btn-mis-bancos {
      position: relative;
      background: none;
      border: 2px solid #444;
      color: #aaa;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      touch-action: manipulation;
      transition: border-color .15s, color .15s;
      line-height: 1;
    }
    #btn-mis-bancos:hover { border-color: var(--yellow); color: var(--yellow); }
    #btn-mis-bancos.activo { border-color: var(--yellow); color: var(--yellow); }
    #btn-mis-bancos-count {
      position: absolute;
      top: -5px;
      right: -5px;
      background: var(--yellow);
      color: var(--ink);
      border: 2px solid var(--ink);
      border-radius: 999px;
      font-size: 9px;
      font-weight: 800;
      min-width: 16px;
      height: 16px;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 0 3px;
    }
    #btn-mis-bancos.activo #btn-mis-bancos-count { display: flex; }

    #mis-bancos-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.55);
      z-index: 1100;
      padding: 20px 16px;
      align-items: center;
      justify-content: center;
    }
    #mis-bancos-overlay.open { display: flex; }
    #mis-bancos-box {
      background: var(--bg);
      border: 3px solid var(--ink);
      border-radius: 12px;
      box-shadow: 6px 6px 0 var(--ink);
      width: 100%;
      max-width: 420px;
      max-height: 85vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    #mis-bancos-header {
      background: var(--ink);
      color: var(--yellow);
      padding: 16px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 22px;
      letter-spacing: 1px;
    }
    #mis-bancos-header button {
      background: none; border: none; color: var(--yellow);
      font-size: 24px; font-weight: 900; cursor: pointer; line-height: 1;
    }
    #mis-bancos-body { padding: 16px; overflow-y: auto; flex: 1; }
    .mis-bancos-help { font-size: 12px; color: var(--ink-soft); margin-bottom: 12px; line-height: 1.4; }
    .mis-bancos-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 4px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
    }
    .mis-bancos-item input { width: 18px; height: 18px; cursor: pointer; }
    .mis-bancos-item img { height: 20px; width: 20px; object-fit: contain; }
    #mis-bancos-footer {
      border-top: 2px solid var(--ink);
      padding: 12px 16px;
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }
    .mis-bancos-btn-primario, .mis-bancos-btn-secundario {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 8px 16px;
      border: 2px solid var(--ink);
      border-radius: var(--radius);
      cursor: pointer;
      touch-action: manipulation;
    }
    .mis-bancos-btn-primario { background: var(--yellow); color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
    .mis-bancos-btn-secundario { background: var(--surface); color: var(--ink); }

    #btn-share {
      background: none;
      border: 2px solid #444;
      color: #aaa;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      font-size: 13px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      touch-action: manipulation;
      transition: border-color .15s, color .15s;
    }
    #btn-share:hover { border-color: var(--yellow); color: var(--yellow); }
    #btn-share.copied { border-color: var(--green); color: var(--green); }

    .logo-super {
      max-height: 14px;
      max-width: 56px;
      width: auto;
      height: auto;
      object-fit: contain;
      vertical-align: middle;
      display: inline-block;
    }
    .logo-banco {
      height: 18px;
      width: 18px;
      object-fit: contain;
      vertical-align: middle;
      margin-right: 4px;
      display: inline-block;
    }
    .logo-banco-modal {
      height: 26px;
      width: 26px;
      object-fit: contain;
      vertical-align: middle;
      margin-right: 8px;
      display: inline-block;
    }

    /* ── Dark mode: elementos con fondo amarillo deben mantener texto negro ── */
    [data-theme="dark"] #btn-ayuda { color: #0F0F0F; }
    [data-theme="dark"] #btn-mis-bancos-count {
      color: #0F0F0F;
      border-color: #0F0F0F;
    }
    [data-theme="dark"] .banco-chip {
      color: #0F0F0F;
      border-color: #0F0F0F;
      box-shadow: 3px 3px 0 #0F0F0F;
    }
    [data-theme="dark"] .card-bank.pinned { color: #0F0F0F; }
    [data-theme="dark"] .pill.active,
    [data-theme="dark"] .day-tile.active { color: #0F0F0F; }
    [data-theme="dark"] .mis-bancos-btn-primario {
      color: #0F0F0F;
      box-shadow: 2px 2px 0 #4A4640;
    }

    /* ── Dark mode: modales con menos contraste agresivo ── */
    [data-theme="dark"] #ayuda-box,
    [data-theme="dark"] #mis-bancos-box {
      background: #252220;
      border-color: #4A4640;
      box-shadow: 6px 6px 0 #4A4640;
    }
    [data-theme="dark"] #ayuda-header,
    [data-theme="dark"] #mis-bancos-header {
      background: #1A1917;
      border-bottom: 2px solid #4A4640;
    }
    [data-theme="dark"] #mis-bancos-footer { border-top-color: #4A4640; }
    [data-theme="dark"] .mis-bancos-btn-secundario {
      background: #1A1917;
      border-color: #4A4640;
    }
    [data-theme="dark"] .mis-bancos-item { color: var(--ink); }

    /* ── Dark mode: header con borde y bg más distintivos ── */
    [data-theme="dark"] #header {
      background: #0A0907;
      border-bottom: 2px solid #4A4640;
    }
    [data-theme="dark"] #header .subtitle { color: #6A6660; }