/* =====================================================================
   Diseño «España cañí» (se activa con <html data-diseno="canai">)
   Inspiración: rótulos de azulejo de taberna («Vermut de grifo»,
   «Exquisito Vermouth»): baldosa blanca con juntas, letra azul cobalto
   con sombra azul clara, tipo de madera del Oeste, cenefas de volutas
   azules sobre ocre y acentos terracota. Solo sobrescribe styles.css.
   ===================================================================== */

html[data-diseno="canai"] {
  --az: #1E3A8A;          /* azul cobalto */
  --az-cl: #9DB7E2;       /* azul claro (sombras de letra) */
  --az-me: #3F6BC2;
  --ocre: #E6AE34;        /* amarillo ocre */
  --terra: #C4532A;       /* terracota */
  --vino: #7A2430;        /* granate */
  --baldosa: #F7F4EC;     /* blanco esmaltado */
  --junta: #DCD5C3;
  --f-rotulo: 'Rye', 'Playfair Display', Georgia, serif;
  --f-cartel: 'Playfair Display', Georgia, serif;

  --bg: var(--baldosa); --bg-2: #EDE6D3; --surface: #FFFDF7;
  --text: #1B2547; --muted: #5A6283; --line: var(--az); --link: var(--az);
  --btn-bg: var(--az); --btn-fg: #FFFDF7; --danger: var(--vino);
  --c1: var(--az); --c2: var(--terra); --c3: var(--ocre); --c4: var(--vino);
  --red: var(--terra); --blue: var(--az); --mustard: var(--ocre); --ink: #14204A; --cream: #FFFDF7;
  --grano: none;
  /* baldosas de 72 px con su junta */
  --azulejo: linear-gradient(var(--junta) 1px, transparent 1px) 0 0 / 72px 72px, linear-gradient(90deg, var(--junta) 1px, transparent 1px) 0 0 / 72px 72px, radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.7), rgba(255,255,255,0) 60%) 0 0 / 72px 72px;
  /* cenefa: volutas azules sobre banda ocre */
  --cenefa: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='24' viewBox='0 0 48 24'><rect width='48' height='24' fill='%23E6AE34'/><rect y='0' width='48' height='3' fill='%231E3A8A'/><rect y='21' width='48' height='3' fill='%231E3A8A'/><path d='M4 18c0-7 6-11 11-9s4 8-1 8-4-5 0-5M28 6c0 7 6 11 11 9s4-8-1-8-4 5 0 5' fill='none' stroke='%231E3A8A' stroke-width='2.4' stroke-linecap='round'/><path d='M15 9c4-4 9-4 13-3M39 15c4 3 7 3 9 2M0 17c2 1 3 1 4 1' fill='none' stroke='%233F6BC2' stroke-width='1.6' stroke-linecap='round'/><circle cx='24' cy='12' r='1.8' fill='%23C4532A'/></svg>") repeat-x center / auto 100%;
  background: var(--az);
}
html[data-diseno="canai"][data-theme="noche"] {
  --baldosa: #142047; --junta: #22306A; --bg: #142047; --bg-2: #1A2856; --surface: #1C2A5C;
  --text: #F3EEDD; --muted: #B8C3E6; --link: #F2C45A; --az-cl: #0B1433; --cream: #F3EEDD;
}

/* ---------- base: pared de azulejos ---------- */
html[data-diseno="canai"] body { background: var(--az); font-family: var(--f-body); }
html[data-diseno="canai"] main, html[data-diseno="canai"] .foot { background: var(--azulejo), var(--baldosa); }
html[data-diseno="canai"] .top { background: none; }
html[data-diseno="canai"] .stripe { height: 22px; background: var(--cenefa); }
html[data-diseno="canai"] .stripe i { display: none; }
html[data-diseno="canai"] a { color: var(--link); }
html[data-diseno="canai"] a:hover { color: var(--terra); }

/* ---------- cabecera: rótulo de azulejo ---------- */
html[data-diseno="canai"] .brand { background: var(--baldosa); font-family: var(--f-rotulo); font-stretch: 100%; font-weight: 400; letter-spacing: .02em; box-shadow: inset 0 0 0 4px var(--az), inset 0 0 0 9px var(--ocre), inset 0 0 0 11px var(--az); }
html[data-diseno="canai"] .brand .b1, html[data-diseno="canai"] .brand .b2 { color: var(--az); text-shadow: 3px 3px 0 var(--az-cl); }
html[data-diseno="canai"] .brand .b2 { color: var(--terra); }
html[data-diseno="canai"] .brand:hover { background: #FFFDF7; }
html[data-diseno="canai"] .brand:hover .b1 { color: var(--az); } html[data-diseno="canai"] .brand:hover .b2 { color: var(--terra); }
html[data-diseno="canai"] .brand-vaso { stroke: var(--az); filter: drop-shadow(.05em .06em 0 var(--az-cl)); }
html[data-diseno="canai"] .bv-vidrio, html[data-diseno="canai"] .bv-hielo { fill: #FFFDF7; }
html[data-diseno="canai"] .bv-liq { fill: var(--vino); } html[data-diseno="canai"] .bv-naranja { fill: var(--ocre); }
html[data-diseno="canai"] nav a, html[data-diseno="canai"] nav button, html[data-diseno="canai"] nav summary,
html[data-diseno="canai"] .theme-btn, html[data-diseno="canai"] .menu-btn {
  font: 700 .98rem/1 var(--f-cartel); font-stretch: 100%; letter-spacing: .06em; text-transform: uppercase; background: var(--baldosa); color: var(--az);
}
html[data-diseno="canai"] nav a:hover, html[data-diseno="canai"] nav button:hover, html[data-diseno="canai"] nav summary:hover,
html[data-diseno="canai"] .theme-btn:hover { background: var(--ocre); color: var(--az); }
html[data-diseno="canai"] nav a.on, html[data-diseno="canai"] nav summary.on { background: var(--az); color: #FFFDF7; }
html[data-diseno="canai"] .theme-btn, html[data-diseno="canai"] .menu-btn { background: var(--ocre); }
html[data-diseno="canai"] .lab-menu { background: var(--az); border-color: var(--az); }

/* ---------- tipografía: letra de rótulo con sombra ---------- */
html[data-diseno="canai"] h1, html[data-diseno="canai"] h2 { font-family: var(--f-rotulo); font-weight: 400; font-stretch: 100%; color: var(--az); text-shadow: 3px 3px 0 var(--az-cl); letter-spacing: .01em; line-height: 1.02; }
html[data-diseno="canai"] h1 { font-size: clamp(2rem, 5vw, 3.6rem); }
html[data-diseno="canai"] h2 { font-size: 1.55rem; text-shadow: 2px 2px 0 var(--az-cl); }
html[data-diseno="canai"] h3 { font: 900 1.1rem/1.1 var(--f-cartel); font-stretch: 100%; color: var(--az); letter-spacing: .04em; text-transform: uppercase; }
html[data-diseno="canai"] .script { font: italic 700 1.2rem/1.2 var(--f-cartel); color: var(--terra); }
html[data-diseno="canai"][data-theme="noche"] h1, html[data-diseno="canai"][data-theme="noche"] h2, html[data-diseno="canai"][data-theme="noche"] h3 { color: #F2C45A; }

/* ---------- controles ---------- */
html[data-diseno="canai"] button, html[data-diseno="canai"] .btn, html[data-diseno="canai"] a.button { font: 700 .92rem/1 var(--f-cartel); font-stretch: 100%; letter-spacing: .06em; background: var(--az); color: #FFFDF7; border: 0; box-shadow: 3px 3px 0 var(--az-cl); }
html[data-diseno="canai"] button:hover, html[data-diseno="canai"] .btn:hover, html[data-diseno="canai"] a.button:hover { background: var(--terra); color: #FFFDF7; }
html[data-diseno="canai"] button.ghost, html[data-diseno="canai"] .btn.ghost { background: var(--baldosa); color: var(--az); box-shadow: inset 0 0 0 2px var(--az), 3px 3px 0 var(--az-cl); outline: 0; }
html[data-diseno="canai"] button.ghost:hover { background: var(--ocre); color: var(--az); }
html[data-diseno="canai"] button.danger { background: var(--vino); }
html[data-diseno="canai"] input, html[data-diseno="canai"] select, html[data-diseno="canai"] textarea { border: 2px solid var(--az); background: #FFFDF7; color: var(--text); }
html[data-diseno="canai"] input:focus, html[data-diseno="canai"] select:focus, html[data-diseno="canai"] textarea:focus { outline: 3px solid var(--ocre); }
html[data-diseno="canai"] input[type=checkbox] { accent-color: var(--az); }
html[data-diseno="canai"] input[type=range] { background: var(--az); }
html[data-diseno="canai"] input[type=range]::-webkit-slider-thumb { background: var(--ocre); border-color: var(--az); }
html[data-diseno="canai"] label, html[data-diseno="canai"] .inline-field { font-family: var(--f-cartel); }

/* ---------- bloques: marco de azulejo (cobalto · ocre · cobalto) ---------- */
html[data-diseno="canai"] .panel, html[data-diseno="canai"] .card, html[data-diseno="canai"] .table-wrap {
  background: #FFFDF7; border: 0; box-shadow: inset 0 0 0 3px var(--az), inset 0 0 0 9px var(--ocre), inset 0 0 0 11px var(--az); padding: 26px;
}
html[data-diseno="canai"] .table-wrap { padding: 11px; }
html[data-diseno="canai"] th { background: var(--az); color: #FFFDF7; font: 700 .82rem/1.2 var(--f-cartel); letter-spacing: .06em; }
html[data-diseno="canai"] th, html[data-diseno="canai"] td { border-bottom: 1px solid var(--az-cl); }
html[data-diseno="canai"] .tag { background: var(--az); color: #FFFDF7; font: 700 .72rem/1.6 var(--f-cartel); letter-spacing: .06em; }
html[data-diseno="canai"] .tag.warn { background: var(--vino); }
html[data-diseno="canai"] .pill { border: 2px solid var(--az); color: var(--az); font-family: var(--f-cartel); background: #FFFDF7; }
html[data-diseno="canai"] .post { border-left-color: var(--ocre); }

/* ---------- filtros ---------- */
html[data-diseno="canai"] .filters, html[data-diseno="canai"] .chips { background: var(--az); border-color: var(--az); }
html[data-diseno="canai"] .filters > div { background: var(--baldosa); }
html[data-diseno="canai"] button.chip { background: var(--baldosa); color: var(--az); box-shadow: none; }
html[data-diseno="canai"] button.chip:hover { background: var(--ocre); color: var(--az); }
html[data-diseno="canai"] button.chip[aria-pressed="true"] { background: var(--terra); color: #FFFDF7; }

/* ---------- portada: paneles de azulejo ---------- */
html[data-diseno="canai"] .hero { background: var(--az); border-color: var(--az); gap: 6px; }
html[data-diseno="canai"] .hero > * { box-shadow: inset 0 0 0 7px var(--ocre), inset 0 0 0 9px var(--az); }
html[data-diseno="canai"] .hero-texto { background: var(--baldosa); color: var(--az); padding: 22px 30px; }
html[data-diseno="canai"] .hero-texto .script { color: var(--terra); opacity: 1; }
html[data-diseno="canai"] .hero-texto p:not(.script) { font-family: var(--f-cartel); font-weight: 700; font-size: 1.12rem; }
html[data-diseno="canai"] .hero-titulo { background: var(--azulejo), var(--baldosa); padding: 22px 26px; }
html[data-diseno="canai"] .hero-titulo h1 { font-size: clamp(1.9rem, 3vw, 3rem); }
html[data-diseno="canai"] .hero-titulo svg { fill: var(--az); filter: drop-shadow(3px 3px 0 var(--az-cl)); }
html[data-diseno="canai"] .hero-titulo svg circle { fill: var(--terra); }
html[data-diseno="canai"] .hero-num { background: var(--az); color: #FFFDF7; }
html[data-diseno="canai"] .hero-num b { font-family: var(--f-rotulo); font-weight: 400; font-stretch: 100%; letter-spacing: -.02em; left: .08em; top: -.02em; text-shadow: 6px 6px 0 var(--az-me); }
html[data-diseno="canai"] .hero-num span { background: var(--ocre); color: var(--az); font: 700 1rem/1 var(--f-cartel); }
html[data-diseno="canai"] .hero-mapa { background: var(--terra); }
html[data-diseno="canai"] .hero-mapa .hm-paises path.on { fill: var(--ocre); }
html[data-diseno="canai"] .hero-mapa .hm-txt b { font-family: var(--f-rotulo); font-weight: 400; font-stretch: 100%; text-shadow: 4px 4px 0 var(--vino); }
html[data-diseno="canai"] .hero-mapa .hm-txt span { font-family: var(--f-cartel); font-weight: 900; }
html[data-diseno="canai"] .hero-mapa .hm-txt em { background: var(--az); font-family: var(--f-cartel); }
html[data-diseno="canai"] .hero-tipos { background: var(--baldosa); padding: 20px 24px; }
html[data-diseno="canai"] .hero-tipos h2 { font: 400 1.4rem/1 var(--f-rotulo); color: var(--az); text-shadow: 2px 2px 0 var(--az-cl); }
html[data-diseno="canai"] .hero-tipos .ht-n { font-family: var(--f-cartel); font-weight: 900; color: var(--az); }
html[data-diseno="canai"] .hero-tipos b { font-family: var(--f-cartel); color: var(--az); }
html[data-diseno="canai"] .hero-tipos button { background: transparent; box-shadow: none; color: var(--az); }
html[data-diseno="canai"] .hp .hp-det { fill: var(--baldosa); }

/* ---------- tarjetas: azulejos con cenefa del tipo ---------- */
html[data-diseno="canai"] .t-rojo { --pt: var(--terra); } html[data-diseno="canai"] .t-blanco { --pt: var(--ocre); }
html[data-diseno="canai"] .t-dry { --pt: #3E8E4A; } html[data-diseno="canai"] .t-rosado { --pt: #D9796A; }
html[data-diseno="canai"] .t-reserva { --pt: var(--az-me); }
html[data-diseno="canai"] .grid { background: var(--az); border-color: var(--az); }
html[data-diseno="canai"] .vcard { background: #FFFDF7; }
html[data-diseno="canai"] .vcard-head, html[data-diseno="canai"] .cc .vcard-head, html[data-diseno="canai"] .rc .vcard-head {
  background: var(--azulejo), var(--baldosa); color: var(--az); box-shadow: inset 0 8px 0 var(--pt, var(--az)), inset 0 10px 0 var(--az); border-bottom: 2px solid var(--az); padding-top: 22px;
}
html[data-diseno="canai"] .vcard-head h3, html[data-diseno="canai"] .cc .vcard-head h3 { font: 400 1.55rem/1.02 var(--f-rotulo); color: var(--az); text-shadow: 2px 2px 0 var(--az-cl); text-transform: none; letter-spacing: .01em; }
html[data-diseno="canai"] .kind { font: italic 700 .9rem/1 var(--f-cartel); color: var(--terra); text-transform: none; letter-spacing: .02em; opacity: 1; }
html[data-diseno="canai"] .cc-datos { border-top: 2px solid var(--az); }
html[data-diseno="canai"] .cd-fila { border-bottom: 1px solid var(--az-cl); }
html[data-diseno="canai"] .cd-lab { font-family: var(--f-cartel); font-weight: 700; color: var(--az); }
html[data-diseno="canai"] .cd-fila b { font-family: var(--f-cartel); font-weight: 900; color: var(--az); font-size: 1.2rem; }
html[data-diseno="canai"] .cd-barras i { background: var(--az-cl); } html[data-diseno="canai"] .cd-barras i.on { background: var(--az); }
html[data-diseno="canai"] .vcard-foto, html[data-diseno="canai"] .dh-foto { border: 3px solid var(--az); box-shadow: 0 0 0 4px var(--ocre), 0 0 0 6px var(--az); }
html[data-diseno="canai"] .pv-pista { border-color: var(--az); }
html[data-diseno="canai"] .pv-fila { font-family: var(--f-cartel); color: var(--az); }
html[data-diseno="canai"] .spices { border-color: var(--az); }
html[data-diseno="canai"] .sp i { font-family: var(--f-cartel); font-weight: 700; }
html[data-diseno="canai"] .count { font-family: var(--f-cartel); color: var(--az); }

/* ---------- detalle ---------- */
html[data-diseno="canai"] .detail-head { background: var(--azulejo), var(--baldosa); color: var(--az); border: 0; box-shadow: inset 0 0 0 4px var(--az), inset 0 0 0 11px var(--pt, var(--ocre)), inset 0 0 0 13px var(--az); padding: 30px; }
html[data-diseno="canai"] .detail-head h1 { color: var(--az); }

/* ---------- pie: cenefa y sello ---------- */
html[data-diseno="canai"] .foot { border-top: 0; position: relative; padding-top: 44px; }
html[data-diseno="canai"] .foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: var(--cenefa); }
html[data-diseno="canai"] .seal { background: var(--baldosa); color: var(--az); border: 4px solid var(--az); box-shadow: 0 0 0 5px var(--ocre), 0 0 0 7px var(--az); font-family: var(--f-cartel); }
html[data-diseno="canai"] .foot .script { color: var(--terra); }
html[data-diseno="canai"] #toast { background: var(--az); color: #FFFDF7; border-left-color: var(--ocre); font-family: var(--f-cartel); }

/* ---------- avisos de edad ---------- */
html[data-diseno="canai"] .edad-gate { background: var(--az); }
html[data-diseno="canai"] .edad-caja { background: var(--azulejo), var(--baldosa); border: 0; box-shadow: inset 0 0 0 4px var(--az), inset 0 0 0 12px var(--ocre), inset 0 0 0 14px var(--az); padding: 40px 34px; }
html[data-diseno="canai"] .edad-logo { background: none; font-family: var(--f-rotulo); font-weight: 400; font-stretch: 100%; }
html[data-diseno="canai"] .edad-logo b { color: var(--az); text-shadow: 3px 3px 0 var(--az-cl); } html[data-diseno="canai"] .edad-logo i { color: var(--terra); text-shadow: 3px 3px 0 var(--az-cl); }

/* ---------- miniatura en Laboratorio · Diseño ---------- */
.dz-canai { background: #1E3A8A; padding: 3px; gap: 0; }
.dz-canai .dz-cab { background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='20'><rect width='24' height='20' fill='%23E6AE34'/><path d='M3 15c0-6 5-8 8-6s2 6-1 6' fill='none' stroke='%231E3A8A' stroke-width='2'/></svg>") repeat-x; }
.dz-canai .dz-logo { background: #F7F4EC; color: #1E3A8A; font-family: Rye, Georgia, serif; font-weight: 400; text-shadow: 1px 1px 0 #9DB7E2; margin: 2px; line-height: 16px; }
.dz-canai .dz-cab i { background: transparent; }
.dz-canai .dz-rej > div, .dz-canai .dz-tarjetas > div { background: #F7F4EC; color: #1E3A8A; box-shadow: inset 0 0 0 2px #E6AE34; }
.dz-canai .dz-a b { font: 400 11px Rye, Georgia, serif; text-shadow: 1px 1px 0 #9DB7E2; }
.dz-canai .dz-b { background: #1E3A8A !important; color: #F7F4EC !important; } .dz-canai .dz-b b { font: 400 28px Rye, Georgia, serif; text-shadow: 2px 2px 0 #3F6BC2; }
.dz-canai .dz-c small { font: 700 7px Georgia, serif; text-transform: uppercase; }
.dz-canai .dz-c em:nth-of-type(1) { background: #C4532A; width: 90%; } .dz-canai .dz-c em:nth-of-type(2) { background: #E6AE34; width: 55%; } .dz-canai .dz-c em:nth-of-type(3) { background: #3E8E4A; width: 25%; }
.dz-canai .dz-d { background: #C4532A !important; color: #F7F4EC !important; } .dz-canai .dz-d b { font: 400 22px Rye, Georgia, serif; }
.dz-canai .dz-tarjetas small { font: italic 700 7px Georgia, serif; color: #C4532A; text-transform: none; }
.dz-canai .dz-tarjetas b { font: 400 10px Rye, Georgia, serif; text-transform: none; }
html[data-diseno="canai"] .hero-mapa, html[data-diseno="canai"] .hero-mapa:hover { color: #FFFDF7; }
html[data-diseno="canai"] .hero-mapa .hm-txt em { color: #FFFDF7; }
html[data-diseno="canai"] .hero-mapa:hover .hm-txt em { background: var(--ocre); color: var(--az); }
html[data-diseno="canai"] .hero-tipos button, html[data-diseno="canai"] .hero-tipos button:hover { background: transparent !important; box-shadow: none !important; }
html[data-diseno="canai"] .hero-tipos li + li button { border-top: 1px dotted var(--az-cl); }
/* ficha de elaboración como azulejo */
html[data-diseno="canai"] .etq { --etq-linea: var(--az); background: var(--azulejo), var(--baldosa); color: var(--az); border: 0; box-shadow: inset 0 0 0 4px var(--az), inset 0 0 0 10px var(--ocre), inset 0 0 0 12px var(--az); padding: 12px; }
html[data-diseno="canai"] .etq .etq-marca { background: var(--az); color: #FFFDF7; font-family: var(--f-rotulo); font-weight: 400; font-stretch: 100%; }
html[data-diseno="canai"] .etq .etq-titulo { font-family: var(--f-rotulo); font-weight: 400; color: var(--az); text-shadow: 3px 3px 0 var(--az-cl); }
html[data-diseno="canai"] .etq .etq-caja { border-color: var(--az); font-family: var(--f-cartel); }
html[data-diseno="canai"] .etq .etq-celda { border-color: var(--az); }
html[data-diseno="canai"] .etq .etq-sello { color: var(--terra); border-color: var(--terra); }