/* =====================================================================
   Diseño «Papelería elegante» (se activa con <html data-diseno="papeleria">)
   Inspiración: etiquetas de lote (rejilla de filetes finos, mono de máquina
   de escribir, título grotesco condensado, sello rojo) y cartel tipográfico
   con acentos naranja y azul cielo. El diseño «Cuadros de color» es el de
   styles.css; aquí solo se sobrescribe.
   ===================================================================== */

html[data-diseno="papeleria"] {
  /* tinta y papel propios del diseño */
  --pp: #F3F0E8;          /* papel */
  --ps: #FBF9F4;          /* papel claro (tarjetas) */
  --pi: #141414;          /* tinta */
  --pr: #141414;          /* filete */
  --pm: #6B665E;          /* texto secundario */
  --pa-rojo: #C8312A;     /* sello */
  --pa-naranja: #E9772A;  /* cartel */
  --pa-cielo: #2499D2;    /* cartel */
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* variables del sistema base reinterpretadas */
  --bg: var(--pp); --bg-2: #EAE6DC; --surface: var(--ps);
  --text: var(--pi); --muted: var(--pm); --line: var(--pr); --link: var(--pi);
  --btn-bg: var(--pi); --btn-fg: var(--pp); --danger: var(--pa-rojo);
  --c1: var(--pi); --c2: var(--pa-naranja); --c3: var(--pa-cielo); --c4: var(--pm);
  --gutter: 1px; --grano: none; --grano-op: 0;
  --f-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-script: var(--f-mono);
  background: var(--pr);
}
html[data-diseno="papeleria"][data-theme="noche"] {
  --pp: #171614; --ps: #1F1D1A; --pi: #EFEBE2; --pr: #4A463F; --pm: #A39D92;
  --bg-2: #24221E;
}

/* ---------- base ---------- */
html[data-diseno="papeleria"] body { background: var(--pr); font-family: var(--f-body); font-stretch: 100%; }
html[data-diseno="papeleria"] .top, html[data-diseno="papeleria"] main,
html[data-diseno="papeleria"] .foot { background-color: var(--pp); background-image: none; }
html[data-diseno="papeleria"] .stripe { height: 4px; }
html[data-diseno="papeleria"] .stripe i:nth-child(1) { background: var(--pi); }
html[data-diseno="papeleria"] .stripe i:nth-child(2) { background: var(--pa-naranja); }
html[data-diseno="papeleria"] .stripe i:nth-child(3) { background: var(--pa-cielo); }
html[data-diseno="papeleria"] a { color: var(--pi); text-decoration-thickness: 1px; }
html[data-diseno="papeleria"] a:hover { color: var(--pa-rojo); }

/* ---------- cabecera: logotipo en caja negra, menú en mono ---------- */
html[data-diseno="papeleria"] .brand { background: var(--pp); padding-top: 14px; padding-bottom: 14px; font-stretch: 100%; font-weight: 800; font-size: 1.55rem; letter-spacing: .01em; }
html[data-diseno="papeleria"] .brand .b1, html[data-diseno="papeleria"] .brand .b2 { background: var(--pi); color: var(--pp); padding: 7px 0; }
html[data-diseno="papeleria"] .brand .b1 { padding-left: 10px; } html[data-diseno="papeleria"] .brand .b2 { padding-right: 10px; }
html[data-diseno="papeleria"] .brand .b2::after { content: '®'; font-size: .45em; vertical-align: super; margin-left: 2px; }
html[data-diseno="papeleria"] .brand:hover { background: var(--pp); }
html[data-diseno="papeleria"] .brand:hover .b1, html[data-diseno="papeleria"] .brand:hover .b2 { color: var(--pp); background: var(--pa-rojo); }
html[data-diseno="papeleria"] .brand-vaso { stroke: var(--pi); filter: none; }
html[data-diseno="papeleria"] .bv-vidrio, html[data-diseno="papeleria"] .bv-hielo { fill: var(--pp); }
html[data-diseno="papeleria"] .bv-liq { fill: var(--pa-naranja); } html[data-diseno="papeleria"] .bv-naranja { fill: var(--pa-cielo); }
html[data-diseno="papeleria"] nav a, html[data-diseno="papeleria"] nav button, html[data-diseno="papeleria"] nav summary,
html[data-diseno="papeleria"] .theme-btn, html[data-diseno="papeleria"] .menu-btn {
  font: 500 .74rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; background: var(--pp); color: var(--pi);
}
html[data-diseno="papeleria"] nav a:hover, html[data-diseno="papeleria"] nav button:hover, html[data-diseno="papeleria"] nav summary:hover,
html[data-diseno="papeleria"] .theme-btn:hover { background: var(--pp); color: var(--pa-rojo); text-decoration: underline; text-underline-offset: 4px; }
html[data-diseno="papeleria"] nav a.on, html[data-diseno="papeleria"] nav summary.on { background: var(--pi); color: var(--pp); }
html[data-diseno="papeleria"] .lab-menu { background: var(--pr); border-color: var(--pr); }

/* ---------- tipografía: grotesca condensada + mono ---------- */
html[data-diseno="papeleria"] h1, html[data-diseno="papeleria"] h2 { font-family: var(--f-display); font-stretch: 72%; font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; line-height: .95; }
html[data-diseno="papeleria"] h1 { font-size: clamp(2.2rem, 5.5vw, 4.2rem); }
html[data-diseno="papeleria"] h2 { font-size: 1.6rem; }
html[data-diseno="papeleria"] h3 { font: 600 .82rem/1.25 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
html[data-diseno="papeleria"] .script { font: 500 .78rem/1.3 var(--f-mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--pa-rojo); }
html[data-diseno="papeleria"] label, html[data-diseno="papeleria"] .inline-field { font: 500 .7rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
html[data-diseno="papeleria"] .muted { color: var(--pm); }

/* ---------- controles: filete fino ---------- */
html[data-diseno="papeleria"] button, html[data-diseno="papeleria"] .btn, html[data-diseno="papeleria"] a.button {
  font: 500 .74rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; background: var(--pi); color: var(--pp); border: 1px solid var(--pi);
}
html[data-diseno="papeleria"] button:hover, html[data-diseno="papeleria"] .btn:hover, html[data-diseno="papeleria"] a.button:hover { background: var(--pa-rojo); border-color: var(--pa-rojo); color: #fff; }
html[data-diseno="papeleria"] button.ghost, html[data-diseno="papeleria"] .btn.ghost { background: transparent; color: var(--pi); outline: 0; }
html[data-diseno="papeleria"] button.ghost:hover, html[data-diseno="papeleria"] .btn.ghost:hover { background: var(--pi); color: var(--pp); }
html[data-diseno="papeleria"] button.danger { background: transparent; color: var(--pa-rojo); border-color: var(--pa-rojo); }
html[data-diseno="papeleria"] button.danger:hover { background: var(--pa-rojo); color: #fff; }
html[data-diseno="papeleria"] input, html[data-diseno="papeleria"] select, html[data-diseno="papeleria"] textarea { border: 1px solid var(--pi); background: var(--ps); color: var(--pi); font-family: var(--f-body); }
html[data-diseno="papeleria"] input:focus, html[data-diseno="papeleria"] select:focus, html[data-diseno="papeleria"] textarea:focus { outline: 2px solid var(--pa-cielo); }
html[data-diseno="papeleria"] input[type=checkbox] { accent-color: var(--pi); }
html[data-diseno="papeleria"] input[type=range] { height: 2px; background: var(--pi); }
html[data-diseno="papeleria"] input[type=range]::-webkit-slider-thumb { width: 12px; height: 22px; background: var(--ps); border: 1px solid var(--pi); }
html[data-diseno="papeleria"] input[type=range]::-moz-range-thumb { width: 10px; height: 20px; background: var(--ps); border: 1px solid var(--pi); }
html[data-diseno="papeleria"] .slider output { font-stretch: 72%; font-weight: 800; color: var(--pi); }

/* ---------- bloques ---------- */
html[data-diseno="papeleria"] .panel, html[data-diseno="papeleria"] .card, html[data-diseno="papeleria"] .table-wrap { border: 1px solid var(--pr); background: var(--ps); }
html[data-diseno="papeleria"] th { background: transparent; color: var(--pi); font: 500 .68rem/1.2 var(--f-mono); letter-spacing: .14em; border-bottom: 1px solid var(--pr); }
html[data-diseno="papeleria"] th, html[data-diseno="papeleria"] td { border-bottom: 1px solid color-mix(in srgb, var(--pi) 22%, transparent); }
html[data-diseno="papeleria"] .tag { background: transparent; color: var(--pi); border: 1px solid var(--pi); font: 500 .66rem/1.6 var(--f-mono); letter-spacing: .12em; }
html[data-diseno="papeleria"] .tag.warn { color: var(--pa-rojo); border-color: var(--pa-rojo); }
html[data-diseno="papeleria"] .pill { border-width: 1px; font: 500 .7rem/1.3 var(--f-mono); letter-spacing: .08em; }
html[data-diseno="papeleria"] .post { border-left-width: 1px; border-left-color: var(--pa-naranja); }

/* ---------- filtros y fichas de filtro ---------- */
html[data-diseno="papeleria"] .filters, html[data-diseno="papeleria"] .chips { background: var(--pr); border-color: var(--pr); gap: 1px; }
html[data-diseno="papeleria"] .filters > div { background: var(--ps); }
html[data-diseno="papeleria"] .filters input, html[data-diseno="papeleria"] .filters select { border-width: 1px; }
html[data-diseno="papeleria"] button.chip { background: var(--ps); color: var(--pi); border: 0; }
html[data-diseno="papeleria"] button.chip:hover { background: var(--pp); color: var(--pa-rojo); }
html[data-diseno="papeleria"] button.chip[aria-pressed="true"] { background: var(--pi); color: var(--pp); }

/* ---------- portada: rejilla de filetes ---------- */
html[data-diseno="papeleria"] .hero { background: var(--pr); border-color: var(--pr); gap: 1px; }
html[data-diseno="papeleria"] .hero-texto { background: var(--ps); color: var(--pi); }
html[data-diseno="papeleria"] .hero-texto .script { color: var(--pa-rojo); opacity: 1; }
html[data-diseno="papeleria"] .hero-texto p:not(.script) { font-family: var(--f-mono); font-size: .92rem; letter-spacing: .02em; }
html[data-diseno="papeleria"] .hero-titulo { background: var(--ps); }
html[data-diseno="papeleria"] .hero-titulo h1 { color: var(--pi); font-size: clamp(2.2rem, 3.6vw, 3.4rem); }
html[data-diseno="papeleria"] .hero-titulo svg { fill: var(--pi); }
html[data-diseno="papeleria"] .hero-titulo svg circle { fill: var(--pa-naranja); }
html[data-diseno="papeleria"] .hero-num { background: var(--ps); color: var(--pa-cielo); }
html[data-diseno="papeleria"] .hero-num b { font-stretch: 72%; font-weight: 800; letter-spacing: -.03em; left: .04em; top: -.08em; }
html[data-diseno="papeleria"] .hero-num span { background: transparent; color: var(--pi); border: 1px solid var(--pi); font: 500 .74rem/1 var(--f-mono); letter-spacing: .14em; padding: 7px 10px; }
html[data-diseno="papeleria"] .hero-mapa { background: var(--ps); color: var(--pi); }
html[data-diseno="papeleria"] .hero-mapa .hm-paises path { fill: color-mix(in srgb, var(--pi) 10%, transparent); }
html[data-diseno="papeleria"] .hero-mapa .hm-paises path.on { fill: var(--pa-naranja); }
html[data-diseno="papeleria"] .hero-mapa .hm-pts circle { fill: var(--pi); stroke: var(--ps); }
html[data-diseno="papeleria"] .hero-mapa .hm-txt b, html[data-diseno="papeleria"] .hero-mapa .hm-txt span { text-shadow: none; }
html[data-diseno="papeleria"] .hero-mapa .hm-txt b { color: var(--pa-naranja); font-stretch: 72%; font-weight: 800; }
html[data-diseno="papeleria"] .hero-mapa .hm-txt span { font: 500 .8rem/1 var(--f-mono); letter-spacing: .14em; }
html[data-diseno="papeleria"] .hero-mapa .hm-txt em { background: var(--pi); color: var(--pp); font: 500 .72rem/1 var(--f-mono); letter-spacing: .14em; }
html[data-diseno="papeleria"] .hero-mapa:hover .hm-txt em { background: var(--pa-rojo); color: #fff; }
html[data-diseno="papeleria"] .hero-tipos { background: var(--ps); }
html[data-diseno="papeleria"] .hero-tipos h2 { font: 600 .78rem/1 var(--f-mono); letter-spacing: .16em; }
html[data-diseno="papeleria"] .hero-tipos .ht-n { font: 500 .7rem/1 var(--f-mono); letter-spacing: .12em; }
html[data-diseno="papeleria"] .hero-tipos b { font-stretch: 72%; font-weight: 800; }
html[data-diseno="papeleria"] .hp .hp-det { fill: var(--ps); }

/* ---------- tarjetas: ficha de papelería con filete de color según el tipo ---------- */
html[data-diseno="papeleria"] .t-rojo { --pt: var(--pa-rojo); } html[data-diseno="papeleria"] .t-blanco { --pt: #B8901C; }
html[data-diseno="papeleria"] .t-dry { --pt: #2E8A68; } html[data-diseno="papeleria"] .t-rosado { --pt: #D9796A; }
html[data-diseno="papeleria"] .t-reserva { --pt: var(--pa-cielo); }
html[data-diseno="papeleria"] .grid { background: var(--pr); border-color: var(--pr); gap: 1px; }
html[data-diseno="papeleria"] .vcard { background: var(--ps); }
html[data-diseno="papeleria"] .vcard-head, html[data-diseno="papeleria"] .cc .vcard-head, html[data-diseno="papeleria"] .rc .vcard-head {
  background: var(--ps); color: var(--pi); box-shadow: inset 0 5px 0 var(--pt, var(--pi)); border-bottom: 1px dashed color-mix(in srgb, var(--pi) 55%, transparent);
}
html[data-diseno="papeleria"] .vcard-head h3, html[data-diseno="papeleria"] .cc .vcard-head h3 { font: 800 1.7rem/.95 var(--f-display); font-stretch: 72%; letter-spacing: -.005em; text-transform: uppercase; }
html[data-diseno="papeleria"] .kind { font: 500 .68rem/1 var(--f-mono); letter-spacing: .16em; color: var(--pt, var(--pm)); opacity: 1; }
html[data-diseno="papeleria"] .cc-datos { border-top: 1px solid var(--pi); }
html[data-diseno="papeleria"] .cd-fila { border-bottom: 1px solid color-mix(in srgb, var(--pi) 20%, transparent); }
html[data-diseno="papeleria"] .cd-lab { font-family: var(--f-mono); font-weight: 500; }
html[data-diseno="papeleria"] .cd-fila b { font-stretch: 72%; font-weight: 800; font-size: 1.3rem; }
html[data-diseno="papeleria"] .cd-barras i { background: color-mix(in srgb, var(--pi) 14%, transparent); }
html[data-diseno="papeleria"] .cd-barras i.on { background: var(--pt, var(--pi)); }
html[data-diseno="papeleria"] .vcard-foto, html[data-diseno="papeleria"] .dh-foto { border: 1px solid var(--pi); }
html[data-diseno="papeleria"] .bar-row { font: 500 .7rem/1 var(--f-mono); letter-spacing: .1em; }
html[data-diseno="papeleria"] .bar-row b { font: 600 .78rem/1 var(--f-mono); letter-spacing: 0; }
html[data-diseno="papeleria"] .track { height: 6px; box-shadow: none; outline: 0; background: color-mix(in srgb, var(--pi) 12%, transparent); }
html[data-diseno="papeleria"] .fill { background: var(--pi); }
html[data-diseno="papeleria"] .spices { border-top-width: 1px; border-bottom-width: 1px; }
html[data-diseno="papeleria"] .sp i { font: 500 .58rem/1.1 var(--f-mono); letter-spacing: .06em; }
html[data-diseno="papeleria"] .count { font-family: var(--f-mono); font-style: normal; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- detalle ---------- */
html[data-diseno="papeleria"] .detail-head { background: var(--ps); color: var(--pi); border: 1px solid var(--pr); box-shadow: inset 0 6px 0 var(--pt, var(--pi)); }
html[data-diseno="papeleria"] .detail-head h1 { color: var(--pi); }

/* ---------- pie: sello circular de línea fina ---------- */
html[data-diseno="papeleria"] .seal { background: transparent; color: var(--pi); border: 1px solid var(--pi); font: 500 .66rem/1.2 var(--f-mono); letter-spacing: .16em; outline: 1px solid var(--pi); outline-offset: 3px; }
html[data-diseno="papeleria"] .foot .script { color: var(--pa-rojo); }
html[data-diseno="papeleria"] #toast { background: var(--pi); color: var(--pp); border-left-color: var(--pa-rojo); font-family: var(--f-mono); font-weight: 500; }

/* ---------- ajustes finos ---------- */
html[data-diseno="papeleria"] .hero-tipos button { background: transparent; color: var(--pi); border: 0; padding: 3px 0; font: inherit; letter-spacing: 0; text-transform: none; }
html[data-diseno="papeleria"] .hero-tipos button:hover { background: transparent; color: var(--pa-rojo); }
html[data-diseno="papeleria"] .hero-tipos li + li button { border-top: 1px dotted color-mix(in srgb, var(--pi) 35%, transparent); padding-top: 6px; }
html[data-diseno="papeleria"] .hero-titulo h1 { font-size: clamp(1.9rem, 2.6vw, 3rem); }
html[data-diseno="papeleria"] .dz-op { font: 400 1rem/1.4 var(--f-body); letter-spacing: 0; text-transform: none; border: 1px solid var(--pr); background: var(--ps); }
html[data-diseno="papeleria"] .dz-op.on { outline: 2px solid var(--pa-cielo); }
html[data-diseno="papeleria"] .dz-nombre { font: 800 1.2rem/1 var(--f-display); font-stretch: 72%; text-transform: uppercase; }
html[data-diseno="papeleria"] .etq { background: var(--ps); border-width: 1px; }
html[data-diseno="papeleria"] .etq .etq-marca { background: var(--pi); color: var(--pp); }
html[data-diseno="papeleria"] .mas { font-family: var(--f-mono); }
html[data-diseno="papeleria"] .hero-tipos h2, html[data-diseno="papeleria"] .hero-tipos, html[data-diseno="papeleria"] .hero-tipos b { color: var(--pi); }
html[data-diseno="papeleria"] .pv-pista { border-width: 1px; border-color: var(--pi); background: color-mix(in srgb, var(--pi) 8%, transparent); }
html[data-diseno="papeleria"] .pv-fila { font-family: var(--f-mono); font-weight: 500; letter-spacing: .1em; }
html[data-diseno="papeleria"] .pv-fila b { font-family: var(--f-display); font-stretch: 72%; font-weight: 800; letter-spacing: 0; }
html[data-diseno="papeleria"] .compra-fila { border-top-width: 1px; } html[data-diseno="papeleria"] .compra-fila:last-child { border-bottom-width: 1px; }
html[data-diseno="papeleria"] .compra-tienda { font-family: var(--f-mono); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; }
html[data-diseno="papeleria"] .compra-precio { font-stretch: 72%; font-weight: 800; }
html[data-diseno="papeleria"] .compra-pais select { border-width: 1px; }
html[data-diseno="papeleria"] .edad-gate { background: var(--pr); }
html[data-diseno="papeleria"] .edad-caja { background: var(--ps); border: 1px solid var(--pi); box-shadow: none; outline: 1px solid var(--pi); outline-offset: 6px; }
html[data-diseno="papeleria"] .edad-logo { background: var(--pi); font-stretch: 100%; font-weight: 800; }
html[data-diseno="papeleria"] .edad-logo b, html[data-diseno="papeleria"] .edad-logo i { color: var(--pp); }