/* ============================================================
   v585 · ASPECTO A ELEGIR (en prueba, solo para la cuenta jbohoyo: aspecto.js).
   aspecto.js pone en <html>:
     .asp-on            → hay diseño o colores distintos de los de siempre (tokens --a-*)
     .asp-oscuro        → el diseño es oscuro (modo noche): aclara los textos de color
     data-boton="…"     → contorno | pildora | suave | relieve   (sin él, los de siempre)
     data-combo="…"     → linea | relleno | pildora | marcado    (sin él, los de siempre)
   Las clases de Tailwind se redefinen con más especificidad (html.asp-on .x): no hace falta !important.
   ============================================================ */

html.asp-on { --paper: var(--a-bg); --paper-raised: var(--a-sup); --ink: var(--a-tinta); --ink-soft: var(--a-suave);
  --hairline: var(--a-linea); --brass: var(--a-acento); --brass-strong: var(--a-acento); --dorado: var(--a-acento); --dorado-suave: var(--a-acento); }
html.asp-on, html.asp-on body { background: var(--a-bg); color: var(--a-tinta); }
html.asp-letra body, html.asp-letra button, html.asp-letra input, html.asp-letra select, html.asp-letra textarea { font-family: var(--a-f-txt, 'Helvetica Neue', Arial, sans-serif); }
html.asp-letra .font-serif, html.asp-letra h1, html.asp-letra h2 { font-family: var(--a-f-tit, Didot, Georgia, serif); }
html.asp-grande { font-size: 112.5%; }

/* Superficies */
html.asp-on .bg-white, html.asp-on .bg-stone-50, html.asp-on .app-header { background-color: var(--a-sup); }
html.asp-on .bg-stone-100, html.asp-on .bg-stone-200, html.asp-on .bg-gray-50, html.asp-on .bg-gray-100 { background-color: var(--a-sup2); }
html.asp-on .bg-stone-300 { background-color: color-mix(in srgb, var(--a-tinta) 22%, var(--a-sup)); }
html.asp-on .hover\:bg-stone-50:hover, html.asp-on .hover\:bg-stone-100:hover, html.asp-on .hover\:bg-stone-200:hover { background-color: var(--a-sup2); }

/* Textos */
html.asp-on .text-stone-900, html.asp-on .text-stone-800, html.asp-on .text-stone-700, html.asp-on .text-gray-900,
html.asp-on .text-gray-800, html.asp-on .text-gray-700, html.asp-on .text-black { color: var(--a-tinta); }
html.asp-on .text-stone-600, html.asp-on .text-stone-500, html.asp-on .text-stone-400, html.asp-on .text-gray-600, html.asp-on .text-gray-500,
html.asp-on .text-gray-400 { color: var(--a-suave); }

/* Bordes */
html.asp-on .border-stone-100, html.asp-on .border-stone-200, html.asp-on .border-stone-300, html.asp-on .border-gray-200,
html.asp-on .border-gray-300, html.asp-on .divide-stone-100 > * + *, html.asp-on .divide-stone-200 > * + * { border-color: var(--a-linea); }

/* Acciones principales (oscuras o verdes con texto blanco) → color principal */
html.asp-on .bg-stone-800, html.asp-on .bg-stone-900, html.asp-on .bg-stone-700, html.asp-on .gold-gradient,
html.asp-on .bg-emerald-700.text-white, html.asp-on .bg-emerald-600.text-white { background: var(--a-acento); }
html.asp-on .bg-stone-800.text-white, html.asp-on .bg-stone-900.text-white, html.asp-on .bg-stone-700.text-white,
html.asp-on .bg-emerald-700.text-white, html.asp-on .bg-emerald-600.text-white, html.asp-on .gold-gradient { color: var(--a-acento-tx); }
html.asp-on .hover\:bg-stone-700:hover, html.asp-on .hover\:bg-stone-900:hover, html.asp-on .hover\:bg-emerald-800:hover,
html.asp-on .hover\:bg-emerald-700:hover { background: color-mix(in srgb, var(--a-acento) 82%, var(--a-tinta)); }

/* Menú */
html.asp-on .nav-btn { color: var(--a-tinta); }
html.asp-on .nav-btn.active, html.asp-on .nav-btn.active:hover { background: var(--a-nav); color: var(--a-nav-tx); }
html.asp-on aside, html.asp-on #asideInterno { background-color: var(--a-sup); border-color: var(--a-linea); }

/* Campos */
html.asp-on input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]), html.asp-on select, html.asp-on textarea {
  background-color: var(--a-sup); color: var(--a-tinta); border-color: var(--a-linea); }
html.asp-on input:focus, html.asp-on select:focus, html.asp-on textarea:focus { box-shadow: 0 0 0 1px var(--a-acento); }
html.asp-on input::placeholder, html.asp-on textarea::placeholder { color: var(--a-suave); }

/* Modo noche: tonos claros de aviso y textos de color, legibles sobre fondo oscuro */
html.asp-oscuro { color-scheme: dark; }
html.asp-oscuro .bg-emerald-50, html.asp-oscuro .bg-green-50 { background-color: color-mix(in srgb, #10b981 16%, var(--a-sup)); }
html.asp-oscuro .bg-amber-50, html.asp-oscuro .bg-yellow-50, html.asp-oscuro .bg-orange-50 { background-color: color-mix(in srgb, #f59e0b 16%, var(--a-sup)); }
html.asp-oscuro .bg-red-50, html.asp-oscuro .bg-rose-50 { background-color: color-mix(in srgb, #ef4444 16%, var(--a-sup)); }
html.asp-oscuro .bg-blue-50, html.asp-oscuro .bg-sky-50, html.asp-oscuro .bg-indigo-50, html.asp-oscuro .bg-violet-50 { background-color: color-mix(in srgb, #3b82f6 16%, var(--a-sup)); }
html.asp-oscuro .bg-emerald-100, html.asp-oscuro .bg-amber-100, html.asp-oscuro .bg-red-100, html.asp-oscuro .bg-blue-100 { background-color: var(--a-sup2); }
html.asp-oscuro [class*="text-emerald-"], html.asp-oscuro [class*="text-green-"] { color: #5cc796; }
html.asp-oscuro [class*="text-red-"], html.asp-oscuro [class*="text-rose-"] { color: #f08070; }
html.asp-oscuro [class*="text-amber-"], html.asp-oscuro [class*="text-orange-"], html.asp-oscuro [class*="text-yellow-"] { color: #e6a54a; }
html.asp-oscuro [class*="text-blue-"], html.asp-oscuro [class*="text-sky-"], html.asp-oscuro [class*="text-indigo-"] { color: #8bb8ff; }
html.asp-oscuro .text-white { color: #fff; }
html.asp-oscuro [class*="border-emerald-"], html.asp-oscuro [class*="border-amber-"], html.asp-oscuro [class*="border-red-"],
html.asp-oscuro [class*="border-blue-"] { border-color: var(--a-linea); }
html.asp-oscuro svg text { fill: var(--a-suave); }
html.asp-oscuro img { filter: brightness(.92); }

/* ---------- Botones ----------
   «Principal» = los de fondo oscuro o verde con texto blanco; el resto con relleno o borde = secundarios.
   Cada estilo vale para la aplicación (html[data-boton]) y para su muestra (.asp-demo[data-b]); la muestra no hereda el de la aplicación. */
html[data-boton] .tab-section button[class*="px-"]:not(.asp-demo *),
html[data-boton] .app-header button[class*="px-"],
.asp-demo[data-b] button { transition: transform .08s; }

:is(html[data-boton="contorno"] :is(.tab-section, .app-header) button[class*="px-"]:not(.asp-demo *), .asp-demo[data-b="contorno"] button) {
  background: transparent; border: 2px solid var(--a-linea, #d6d3d1); }
:is(html[data-boton="contorno"] :is(.tab-section, .app-header), .asp-demo[data-b="contorno"]) :is(.bg-stone-800, .bg-stone-900, .bg-stone-700, .bg-emerald-700, .bg-emerald-600, .gold-gradient):is(button):not(.asp-demo:not([data-b="contorno"]) *) {
  background: transparent; border: 2px solid var(--a-acento, #292524); color: var(--a-acento, #292524); }

:is(html[data-boton="pildora"] :is(.tab-section, .app-header) button[class*="px-"]:not(.asp-demo *), .asp-demo[data-b="pildora"] button) {
  border-radius: 999px; padding-left: 1.1em; padding-right: 1.1em; }

:is(html[data-boton="suave"] :is(.tab-section, .app-header) button[class*="px-"]:not(.asp-demo *), .asp-demo[data-b="suave"] button) {
  border-color: transparent; background-color: color-mix(in srgb, var(--a-tinta, #292524) 8%, var(--a-sup, #fff)); border-radius: .6em; }
:is(html[data-boton="suave"] :is(.tab-section, .app-header), .asp-demo[data-b="suave"]) :is(.bg-stone-800, .bg-stone-900, .bg-stone-700, .bg-emerald-700, .bg-emerald-600, .gold-gradient):is(button):not(.asp-demo:not([data-b="suave"]) *) {
  background: color-mix(in srgb, var(--a-acento, #292524) 17%, var(--a-sup, #fff)); color: color-mix(in srgb, var(--a-acento, #292524) 75%, var(--a-tinta, #000)); font-weight: 700; }

:is(html[data-boton="relieve"] :is(.tab-section, .app-header) button[class*="px-"]:not(.asp-demo *), .asp-demo[data-b="relieve"] button) {
  box-shadow: 0 2px 0 color-mix(in srgb, var(--a-tinta, #292524) 25%, transparent); }
:is(html[data-boton="relieve"] :is(.tab-section, .app-header), .asp-demo[data-b="relieve"]) :is(.bg-stone-800, .bg-stone-900, .bg-stone-700, .bg-emerald-700, .bg-emerald-600, .gold-gradient):is(button):not(.asp-demo:not([data-b="relieve"]) *) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--a-acento, #292524) 80%, #fff), var(--a-acento, #292524));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--a-acento, #292524) 60%, #000); }
:is(html[data-boton="relieve"] :is(.tab-section, .app-header) button[class*="px-"]:not(.asp-demo *), .asp-demo[data-b="relieve"] button):active { transform: translateY(2px); box-shadow: none; }

/* ---------- Desplegables ---------- */
:is(html[data-combo="linea"] .tab-section select:not(.asp-demo *), .asp-demo[data-c="linea"] select) {
  border: 0; border-bottom: 2px solid var(--a-linea, #d6d3d1); border-radius: 0; background-color: transparent; padding-left: 0; }
:is(html[data-combo="linea"] .tab-section select:not(.asp-demo *), .asp-demo[data-c="linea"] select):focus { box-shadow: none; border-bottom-color: var(--a-acento, #b45309); }
:is(html[data-combo="relleno"] .tab-section select:not(.asp-demo *), .asp-demo[data-c="relleno"] select) {
  border-color: transparent; background-color: color-mix(in srgb, var(--a-tinta, #292524) 8%, var(--a-sup, #fff)); border-radius: 10px; }
:is(html[data-combo="pildora"] .tab-section select:not(.asp-demo *), .asp-demo[data-c="pildora"] select) {
  border-radius: 999px; padding-left: 1em; padding-right: 1em; }
:is(html[data-combo="marcado"] .tab-section select:not(.asp-demo *), .asp-demo[data-c="marcado"] select) {
  border: 2px solid color-mix(in srgb, var(--a-acento, #b45309) 55%, var(--a-linea, #d6d3d1)); border-radius: 8px; font-weight: 600; }

/* ---------- Pantalla «Aspecto» ---------- */
.asp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.asp-op { text-align: left; border: 2px solid var(--a-linea, #e7e5e4); border-radius: 10px; padding: 10px 12px; background: var(--a-sup, #fff); display: grid; gap: 8px; align-content: start; }
.asp-op { cursor: pointer; }
.asp-op:focus-visible { outline: 2px solid var(--a-acento, #292524); outline-offset: 2px; }
.asp-op[aria-pressed="true"] { border-color: var(--a-acento, #292524); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a-acento, #292524) 22%, transparent); }
.asp-op .asp-ok { visibility: hidden; font-size: 12px; font-weight: 700; color: var(--a-acento, #292524); }
.asp-op[aria-pressed="true"] .asp-ok { visibility: visible; }
.asp-muestras { display: flex; gap: 4px; }
.asp-muestras i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(128,128,128,.4); }
.asp-demo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; pointer-events: none; }
.asp-demo select { width: 100%; }
.asp-rapido { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.asp-colores input[type=color] { width: 48px; height: 36px; padding: 2px; border-radius: 8px; cursor: pointer; }

/* ---------- v586 · Iconos (emojis envueltos por aspecto.js en span.asp-emo) ---------- */
.asp-emo { display: inline-block; }
:is(html[data-iconos="gris"] .asp-emo:not(.asp-demo *), .asp-demo[data-i="gris"] .asp-emo) { filter: grayscale(1); }
:is(html[data-iconos="suaves"] .asp-emo:not(.asp-demo *), .asp-demo[data-i="suaves"] .asp-emo) { filter: grayscale(.75); opacity: .6; }
:is(html[data-iconos="grandes"] .asp-emo:not(.asp-demo *), .asp-demo[data-i="grandes"] .asp-emo) { font-size: 1.3em; line-height: 1; vertical-align: -.12em; }
:is(html[data-iconos="sin"] .asp-emo:not(.asp-emo-solo):not(.asp-demo *), .asp-demo[data-i="sin"] .asp-emo) { display: none; }
.asp-demo-ico { display: grid; gap: 4px; }
.asp-letra-tit { font-size: 20px; font-weight: 600; line-height: 1.15; color: var(--a-tinta, #24211D); }

/* ---------- v596 · Fondo con textura (html[data-textura]) y peso visual (html[data-estilo]) ---------- */
html { --a-trama: color-mix(in srgb, var(--a-tinta, #24211D) 7%, transparent); --a-trama2: color-mix(in srgb, var(--a-tinta, #24211D) 4%, transparent); }
html[data-textura="papel"] body, .asp-tex[data-tex="papel"] { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"); }
html[data-textura="lino"] body, .asp-tex[data-tex="lino"] { background-image: repeating-linear-gradient(0deg, var(--a-trama2) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, var(--a-trama2) 0 1px, transparent 1px 4px); }
html[data-textura="puntos"] body, .asp-tex[data-tex="puntos"] { background-image: radial-gradient(var(--a-trama) 1px, transparent 1.2px); background-size: 16px 16px; }
html[data-textura="cuadricula"] body, .asp-tex[data-tex="cuadricula"] { background-image: linear-gradient(var(--a-trama2) 1px, transparent 1px), linear-gradient(90deg, var(--a-trama2) 1px, transparent 1px); background-size: 22px 22px; }
html[data-textura="diagonal"] body, .asp-tex[data-tex="diagonal"] { background-image: repeating-linear-gradient(45deg, var(--a-trama2) 0 1px, transparent 1px 10px); }
html[data-textura] body { background-attachment: fixed; }
.asp-tex { display: block; height: 56px; border-radius: 8px; border: 1px solid var(--a-linea, #e7e5e4); background-color: var(--a-bg, #ECE8E1); }

/* Ligero (como ChronoIA): bordes finos y claros, sin sombras, menos negrita, botones con borde fino. */
:is(html[data-estilo="ligero"], html[data-estilo="aire"]) .tab-section :is(.border, .border-2, .border-b, .border-t, [class*="border-stone"]):not(.asp-demo *) { border-color: color-mix(in srgb, var(--a-tinta, #24211D) 9%, var(--a-sup, #fff)); }
:is(html[data-estilo="ligero"], html[data-estilo="aire"]) .tab-section .border-2:not(.asp-demo *) { border-width: 1px; }
:is(html[data-estilo="ligero"], html[data-estilo="aire"]) :is([class*="shadow"], .shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl) { box-shadow: none !important; }
:is(html[data-estilo="ligero"], html[data-estilo="aire"]) .tab-section :is(.font-bold, b, strong) { font-weight: 600; }
:is(html[data-estilo="ligero"], html[data-estilo="aire"]) .tab-section :is(h2, h3, .font-serif.font-bold) { font-weight: 500; letter-spacing: .01em; }
:is(html[data-estilo="ligero"], html[data-estilo="aire"]) .tab-section .font-semibold { font-weight: 500; }
:is(html[data-estilo="ligero"], html[data-estilo="aire"]) .tab-section :is(.rounded-xl, .rounded-2xl) { border-radius: .6rem; }
:is(html[data-estilo="ligero"], html[data-estilo="aire"]) .tab-section .uppercase { letter-spacing: .12em; font-weight: 500; }
/* Aireado: más espacio dentro y entre las cajas. */
html[data-estilo="aire"] .tab-section :is(.p-3) { padding: 1rem; }
html[data-estilo="aire"] .tab-section :is(.p-4) { padding: 1.35rem; }
html[data-estilo="aire"] .tab-section :is(.p-5) { padding: 1.6rem; }
html[data-estilo="aire"] .tab-section :is(.gap-2) { gap: .75rem; }
html[data-estilo="aire"] .tab-section :is(.gap-3) { gap: 1.1rem; }
html[data-estilo="aire"] .tab-section .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.1rem; }
html[data-estilo="aire"] .tab-section .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
html[data-estilo="aire"] .tab-section { line-height: 1.6; }
/* Muestras del estilo en la pantalla Aspecto */
.asp-demo-est { display: block; padding: 8px; background: var(--a-bg, #ECE8E1); border-radius: 8px; }
.asp-demo-tarjeta { display: grid; gap: 2px; background: var(--a-sup, #fff); border: 2px solid var(--a-linea, #d6d3d1); border-radius: 12px; padding: 8px 10px; box-shadow: 0 2px 6px rgba(0,0,0,.12); font-size: 13px; }
.asp-demo-tarjeta b { font-weight: 800; }
.asp-demo-est[data-est="ligero"] .asp-demo-tarjeta, .asp-demo-est[data-est="aire"] .asp-demo-tarjeta { border-width: 1px; border-color: color-mix(in srgb, var(--a-tinta, #24211D) 9%, var(--a-sup, #fff)); box-shadow: none; border-radius: 8px; }
.asp-demo-est[data-est="ligero"] .asp-demo-tarjeta b, .asp-demo-est[data-est="aire"] .asp-demo-tarjeta b { font-weight: 500; }
.asp-demo-est[data-est="aire"] .asp-demo-tarjeta { padding: 14px 14px; gap: 6px; }

/* ---------- v597 · Más texturas (SVG con ruido: el color va en la textura, muy suave) ---------- */
html[data-textura="madera"] body, .asp-tex[data-tex="madera"] { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='300'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.004 0.09' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .28  0 0 0 0 .12  .9 0 0 0 -.25'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>"); }
html[data-textura="cemento"] body, .asp-tex[data-tex="cemento"] { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='2'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .3  0 0 0 0 .3  0 0 0 .22 0'/></filter><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='8'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .35  0 0 0 0 .35  .5 0 0 0 -.18'/></filter><rect width='100%' height='100%' filter='url(%23d)'/><rect width='100%' height='100%' filter='url(%23c)'/></svg>"); }
html[data-textura="corcho"] body, .asp-tex[data-tex="corcho"] { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='k'><feTurbulence type='fractalNoise' baseFrequency='.28' numOctaves='3' seed='5'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .35  0 0 0 0 .17  1.2 0 0 0 -.45'/></filter><rect width='100%' height='100%' filter='url(%23k)'/></svg>"); }
html[data-textura="marmol"] body, .asp-tex[data-tex="marmol"] { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700'><filter id='r'><feTurbulence type='turbulence' baseFrequency='0.004 0.012' numOctaves='5' seed='11'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .35  0 0 0 0 .38  -1.6 0 0 0 .55'/></filter><rect width='100%' height='100%' filter='url(%23r)'/></svg>"); }
html[data-textura="vaquero"] body, .asp-tex[data-tex="vaquero"] { background-image: repeating-linear-gradient(45deg, rgba(30, 64, 120, .06) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(30, 64, 120, .04) 0 1px, transparent 1px 5px); }

/* ---------- v597 · Pestañas de arriba (.subnav-hijos; la elegida lleva bg-stone-800) ---------- */
:is(html[data-pestanas="subrayado"] .subnav-hijos:not(.asp-demo *), .asp-demo[data-p="subrayado"] .subnav-hijos) button { background: transparent !important; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--a-suave, #78716c); padding-left: .2em; padding-right: .2em; margin-right: .9em; }
:is(html[data-pestanas="subrayado"] .subnav-hijos:not(.asp-demo *), .asp-demo[data-p="subrayado"] .subnav-hijos) button:is(.bg-stone-800, .activo) { color: var(--a-acento, #292524) !important; border-bottom-color: var(--a-acento, #292524); }
:is(html[data-pestanas="solapa"] .subnav-hijos:not(.asp-demo *), .asp-demo[data-p="solapa"] .subnav-hijos) button { border-radius: .55rem .55rem 0 0; border: 1px solid var(--a-linea, #e7e5e4); border-bottom-width: 0; background: var(--a-sup2, #f5f5f4) !important; color: var(--a-suave, #78716c); margin-bottom: -1px; }
:is(html[data-pestanas="solapa"] .subnav-hijos:not(.asp-demo *), .asp-demo[data-p="solapa"] .subnav-hijos) button:is(.bg-stone-800, .activo) { background: var(--a-sup, #fff) !important; color: var(--a-tinta, #292524) !important; border-top: 3px solid var(--a-acento, #292524); }
:is(html[data-pestanas="segmentado"] .subnav-hijos:not(.asp-demo *), .asp-demo[data-p="segmentado"] .subnav-hijos) > .flex { gap: 0 !important; display: inline-flex; border: 1px solid var(--a-linea, #d6d3d1); border-radius: .6rem; overflow: hidden; background: var(--a-sup2, #f5f5f4); }
:is(html[data-pestanas="segmentado"] .subnav-hijos:not(.asp-demo *), .asp-demo[data-p="segmentado"] .subnav-hijos) button { border: 0; border-radius: 0; background: transparent !important; color: var(--a-tinta, #292524); border-right: 1px solid var(--a-linea, #d6d3d1); }
:is(html[data-pestanas="segmentado"] .subnav-hijos:not(.asp-demo *), .asp-demo[data-p="segmentado"] .subnav-hijos) button:is(.bg-stone-800, .activo) { background: var(--a-acento, #292524) !important; color: var(--a-acento-tx, #fff) !important; }
:is(html[data-pestanas="texto"] .subnav-hijos:not(.asp-demo *), .asp-demo[data-p="texto"] .subnav-hijos) button { background: transparent !important; border: 0; color: var(--a-suave, #78716c); padding-left: .3em; padding-right: .3em; font-weight: 500; }
:is(html[data-pestanas="texto"] .subnav-hijos:not(.asp-demo *), .asp-demo[data-p="texto"] .subnav-hijos) button:is(.bg-stone-800, .activo) { color: var(--a-acento, #292524) !important; font-weight: 800; }

/* ---------- v597 · Menú de la izquierda ---------- */
:is(html[data-menu="compacto"] #asideInterno, .asp-demo-menu[data-m="compacto"]) .nav-vertical .nav-btn { padding-top: .2rem; padding-bottom: .2rem; font-size: .82rem; }
:is(html[data-menu="barra"] #asideInterno, .asp-demo-menu[data-m="barra"]) .nav-vertical .nav-btn.active { background: transparent !important; color: var(--a-acento, #92400e) !important; border-left: 4px solid var(--a-acento, #92400e); border-radius: 0; font-weight: 700; }
:is(html[data-menu="relleno"] #asideInterno, .asp-demo-menu[data-m="relleno"]) .nav-vertical .nav-btn.active { background: var(--a-acento, #92400e) !important; color: var(--a-acento-tx, #fff) !important; }
:is(html[data-menu="grande"] #asideInterno, .asp-demo-menu[data-m="grande"]) .nav-vertical .nav-btn { font-size: 1.05rem; padding-top: .65rem; padding-bottom: .65rem; }
.asp-demo-menu .nav-vertical { display: grid; gap: 2px; background: var(--a-sup, #fff); border-radius: 8px; padding: 6px; }
.asp-demo-menu .nav-btn { display: block; padding: .4rem .6rem; border-radius: 8px; font-size: .9rem; }
.asp-demo-menu .nav-btn.active { background: var(--a-nav, #fef3e2); color: var(--a-nav-tx, #92400e); font-weight: 600; }

/* ---------- v597 · Menú abajo en el móvil ---------- */
.asp-barra-movil { display: none; }
@media (max-width: 767px) {
  .asp-barra-movil { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; background: var(--a-sup, #fff); border-top: 1px solid var(--a-linea, #e7e5e4);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -2px 10px rgba(0,0,0,.06); }
  .asp-barra-movil button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px; border-radius: 10px; font-size: 11px; color: var(--a-suave, #78716c); }
  .asp-barra-movil button.activo { color: var(--a-acento, #92400e); background: var(--a-nav, #fef3e2); font-weight: 700; }
  .asp-barra-ic { font-size: 20px; line-height: 1.1; }
  html.asp-barra body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  /* v633: con una ventana abierta (Nuevo proyecto…), la barra de abajo se aparta: si no, tapaba sus botones. */
  /* v636: solo las ventanas ABIERTAS (en la página hay siempre muchas escondidas con .hidden: contarlas dejaba el móvil sin barra). */
  html.asp-barra body:has(#cdModal) .asp-barra-movil, html.asp-barra body:has(.fixed.inset-0.z-50:not(.hidden)) .asp-barra-movil { display: none; }
  #cdModal { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- v597 · Panel «Diseñar en vivo» ---------- */
.asp-panel { position: fixed; right: 16px; bottom: 16px; z-index: 70; width: 290px; max-height: 78vh; overflow: auto; background: #fff; color: #1c1917; border: 2px solid #7c3aed;
  border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); font: 13px/1.35 'Helvetica Neue', Arial, sans-serif; }
.asp-pl-cab { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: #7c3aed; color: #fff; cursor: move; user-select: none; touch-action: none; }
.asp-pl-cab button { width: 26px; height: 26px; border-radius: 8px; color: #fff; font-weight: 700; } .asp-pl-cab button:hover { background: rgba(255,255,255,.2); }
.asp-pl-cuerpo { padding: 10px; display: grid; gap: 7px; }
.asp-pl-f { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 6px; }
.asp-pl-f span { color: #57534e; font-size: 12px; }
.asp-panel select, .asp-panel input:not([type=color]) { width: 100%; padding: 4px 6px; border: 1px solid #d6d3d1; border-radius: 6px; font-size: 12px; background: #fff; color: #1c1917; }
.asp-pl-colores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.asp-pl-c { display: grid; justify-items: center; gap: 2px; font-size: 10px; color: #57534e; } .asp-pl-c input { width: 40px; height: 28px; padding: 1px; border-radius: 6px; cursor: pointer; }
.asp-pl-perf { display: grid; gap: 5px; border-top: 1px solid #e7e5e4; padding-top: 7px; }
.asp-pl-perf button, .asp-pl-pie button { font-weight: 700; color: #6d28d9; padding: 2px 6px; border-radius: 6px; } .asp-pl-perf button:hover, .asp-pl-pie button:hover { background: #f3e8ff; }
.asp-pl-pie { font-size: 12px; color: #a8a29e; text-align: center; }

/* v598 · Vista previa de los botones del menú de abajo */
.asp-barra-prev { display: flex; gap: 6px; flex-wrap: wrap; background: var(--a-sup, #fff); border: 1px solid var(--a-linea, #e7e5e4); border-radius: 12px; padding: 6px; }
.asp-barra-pv { flex: 1; min-width: 74px; display: grid; justify-items: center; gap: 2px; padding: 4px; border-radius: 10px; }

/* v599 · Campos de fecha (styles.css .dfmt-*: el número lo pinta .dfmt-display encima del campo, que va transparente). Con un diseño elegido, la regla
   de los campos de arriba les ponía color y fondo y se veían DOS fechas superpuestas: el campo sigue transparente y la fecha, del color del texto. */
html.asp-on .dfmt-wrap input[type="date"] { color: transparent !important; background-color: transparent !important; }
html.asp-on .dfmt-wrap { background-color: var(--a-sup); border-radius: 6px; }
html.asp-on .dfmt-display { color: var(--a-tinta); }
html.asp-on .dfmt-display.dfmt-placeholder { color: var(--a-suave); }
html.asp-oscuro .dfmt-wrap input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }

/* v599 · Hoja de un bloque del menú del móvil */
.asp-hoja-fondo { position: fixed; top: 0; left: 0; right: 0; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); z-index: 60; background: rgba(0,0,0,.35); display: flex; align-items: flex-end; }
.asp-hoja { width: 100%; max-height: 72vh; overflow: auto; background: var(--a-sup, #fff); color: var(--a-tinta, #1c1917); border-radius: 18px 18px 0 0; padding: 10px 12px 14px; box-shadow: 0 -6px 24px rgba(0,0,0,.2); }
.asp-hoja-cab { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 10px; font-size: 16px; }
.asp-hoja-cab button { width: 34px; height: 34px; border-radius: 10px; font-size: 18px; }
.asp-hoja-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.asp-hoja-grid button { display: grid; justify-items: center; gap: 4px; padding: 12px 4px; border-radius: 14px; background: var(--a-sup2, #f5f5f4); font-size: 12px; line-height: 1.2; text-align: center; }
.asp-hoja-grid button.activo { background: var(--a-nav, #fef3e2); color: var(--a-nav-tx, #92400e); font-weight: 700; }
.asp-hoja-ic { font-size: 24px; }
.asp-hoja-pie { text-align: center; margin-top: 10px; font-size: 12px; } .asp-hoja-pie button { text-decoration: underline; color: var(--a-suave, #78716c); }

/* v601 · Pestañas en el móvil como barra superior: una línea que se desliza y se queda arriba al bajar */
@media (max-width: 767px) {
  html[data-pestanas-movil="arriba"] .subnav-hijos { position: sticky; top: 0; z-index: 30; background: var(--a-bg, var(--paper, #ECE8E1)); margin-left: -1.5rem; margin-right: -1.5rem; padding: .4rem 1.5rem; box-shadow: 0 6px 10px -10px rgba(0,0,0,.35); }
  html[data-pestanas-movil="arriba"] .subnav-hijos > .flex { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  html[data-pestanas-movil="arriba"] .subnav-hijos > .flex::-webkit-scrollbar { display: none; }
  html[data-pestanas-movil="arriba"] .subnav-hijos > .subnav-fila { margin: 0 -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }   /* v624: la fila y su línea, de borde a borde */
  html[data-pestanas-movil="arriba"] .subnav-hijos > .flex > button { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: center; }
  html[data-pestanas-movil="arriba"] .subnav-hijos > .flex.pl-3, html[data-pestanas-movil="arriba"] .subnav-hijos > .flex.ml-6 { margin-left: 0; }
}

/* v602 · Icono de usuario (móvil, con el menú abajo) que agrupa los iconos de arriba */
.asp-usuario-btn { display: none; }
@media (max-width: 767px) {
  html.asp-barra .asp-usuario-btn { display: flex; width: 38px; height: 38px; border-radius: 9999px; align-items: center; justify-content: center; font-size: 20px; border: 1px solid var(--a-linea, #d6d3d1); background: var(--a-sup, #fff); }
  html.asp-barra .asp-hdr-dcha > *:not(.asp-usuario-btn):not(.hdr-reloj):not(.hdr-usuario-btn) { display: none !important; }
  html.asp-barra:not(.asp-hdr-abierto) .asp-hdr-dcha > .hdr-reloj { display: inline-flex !important; }   /* v696: el reloj también en el móvil */
  html.asp-barra.asp-hdr-abierto .asp-hdr-dcha > *:not(.asp-usuario-btn):not(.hidden):not(#accederBtn):not(#sessionLabel):not(.bg-stone-100):not(#cambiarPassBtn) { display: flex !important; }
  html.asp-barra.asp-hdr-abierto .asp-hdr-dcha { position: relative; }
  html.asp-barra.asp-hdr-abierto .asp-hdr-dcha::after { content: ''; }
  html.asp-barra.asp-hdr-abierto .asp-hdr-dcha { flex-wrap: wrap; justify-content: flex-end; gap: 10px; position: fixed; top: 8px; right: 8px; left: auto; width: min(92vw, 360px); z-index: 75; background: var(--a-sup, #fff); border: 1px solid var(--a-linea, #e7e5e4); border-radius: 16px; padding: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
  html.asp-barra.asp-hdr-abierto .asp-hdr-dcha #hdrHogarCaja { flex-wrap: wrap; gap: 8px; }
  html.asp-barra.asp-hdr-abierto .asp-hdr-dcha #hdrHogarCaja .hidden { display: none !important; }
}
/* v602 · ★ pestaña por defecto */
.asp-estrella { flex: 0 0 auto; width: 30px; height: 30px; align-self: center; border-radius: 9999px; color: #b45309; font-size: 17px; line-height: 1; }
.asp-estrella:hover { background: #fef3c7; }

/* v603 · Menú de ARRIBA en el móvil, igual que el de abajo (icono y texto), fijo arriba al bajar; las pestañas de siempre se ocultan */
.asp-barra-arriba { display: none; }
@media (max-width: 767px) {
  html.asp-barra[data-pestanas-movil="arriba"] .asp-barra-arriba { display: flex; position: sticky; top: 0; z-index: 30; margin: 0 -1.5rem .5rem; padding: 4px 6px; overflow-x: auto; scrollbar-width: none;
    background: var(--a-sup, #fff); border-bottom: 1px solid var(--a-linea, #e7e5e4); box-shadow: 0 2px 10px rgba(0,0,0,.06); gap: 2px; }
  html.asp-barra[data-pestanas-movil="arriba"] .asp-barra-arriba::-webkit-scrollbar { display: none; }
  .asp-barra-arriba button { flex: 1 0 auto; min-width: 68px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 6px; border-radius: 10px; font-size: 11px; color: var(--a-suave, #78716c); white-space: nowrap; }
  .asp-barra-arriba button.activo { color: var(--a-acento, #92400e); background: var(--a-nav, #fef3e2); font-weight: 700; }
  /* v605: con la hoja abierta, la barra de arriba queda por encima del fondo oscuro: se puede tocar su icono para cerrarla */
  html.asp-barra[data-pestanas-movil="arriba"]:has(#aspHoja) .asp-barra-arriba { z-index: 62; }
  /* v604: la barra propia de una pantalla (Coche) se ve arriba como las demás; la de dentro, oculta */
  html.asp-barra[data-pestanas-movil="arriba"] .tab-section:has(#aspArriba) .asp-seg-propio { display: none !important; }
  html.asp-barra[data-pestanas-movil="arriba"] .tab-section.active > .subnav-hijos > .flex:first-child { display: none !important; }
  html.asp-barra[data-pestanas-movil="arriba"] .subnav-hijos { box-shadow: none; position: static; }
  html.asp-barra[data-pestanas-movil="arriba"] .subnav-hijos:not(:has(> .flex:not(:first-child))) { display: none; }
}
.asp-hoja-op { position: relative; }
.asp-hoja-op > button[data-ir] { width: 100%; display: grid; justify-items: center; gap: 4px; padding: 12px 4px; border-radius: 14px; background: var(--a-sup2, #f5f5f4); font-size: 12px; line-height: 1.2; text-align: center; }
.asp-hoja-op.activo > button[data-ir] { background: var(--a-nav, #fef3e2); color: var(--a-nav-tx, #92400e); font-weight: 700; }
.asp-hoja-est { position: absolute; top: 2px; right: 4px; width: 26px; height: 26px; border-radius: 9999px; color: #b45309; font-size: 16px; }
.asp-hoja-grid .asp-hoja-est { display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; font-size: 16px; }

/* v614 · En el móvil, el menú de arriba pegado a la cabecera: mismo fondo, sin línea entre los dos y se queda arriba al bajar */
@media (max-width: 767px) {
  html.asp-barra[data-pestanas-movil="arriba"] .asp-barra-arriba.asp-pegada { margin: 0; position: sticky; top: 0; z-index: 45; border-top: 0; box-shadow: 0 6px 12px -8px rgba(0,0,0,.25);
    background: var(--a-sup, #fff); }
  html.asp-barra[data-pestanas-movil="arriba"] header.app-header { border-bottom-color: transparent; }
  /* v622 · Subpestañas con el mismo aspecto que el menú de arriba, en su barra debajo (aspSubArriba); las de dentro de la sección, ocultas */
  html.asp-barra[data-pestanas-movil="arriba"] .asp-barra-arriba.asp-sub-arriba { z-index: 44; border-top: 1px solid var(--a-linea, #e7e5e4); box-shadow: 0 6px 12px -8px rgba(0,0,0,.2); }
  html.asp-barra[data-pestanas-movil="arriba"] .asp-barra-arriba.asp-pegada:has(+ .asp-sub-arriba) { box-shadow: none; }
  html.asp-barra[data-pestanas-movil="arriba"] .asp-sub-arriba button { min-width: 60px; font-size: 10.5px; }
  html.asp-barra[data-pestanas-movil="arriba"] body:has(.asp-sub-arriba) .tab-section.active > .subnav-hijos { display: none !important; }
}

/* v622 · Cabecera con fondo oscuro: «Autonom» (y el nombre de la marca) en blanco; «IA» sigue en naranja */
html.asp-cab-oscura .hdr-marca-txt { color: #fff; }

/* ---------- v629 · Iconos de un juego o cambiados a mano (aspectoIconos.js): el emoji se queda escondido dentro (para leerlo) ---------- */
.asp-emo-ico { display: inline-flex; align-items: center; justify-content: center; vertical-align: -0.15em; }
.asp-emo-t { display: none; }
.asp-ico { display: inline-block; width: 1.15em; height: 1.15em; background-color: currentColor; -webkit-mask: var(--aic) center / contain no-repeat; mask: var(--aic) center / contain no-repeat; }
.asp-ico-img { display: inline-block; width: 1.2em; height: 1.2em; object-fit: contain; }
.subnav-ic .asp-ico, .asp-barra-ic .asp-ico { color: var(--a-acento, #92400e); }
.aic-muestra { display: flex; gap: 6px; font-size: 22px; line-height: 1; flex-wrap: wrap; }
.aic-m { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; color: var(--a-tinta, #292524); }
.aic-m .asp-ico, .aic-m .asp-ico-img { width: 24px; height: 24px; }
.aic-item { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e7e5e4; border-radius: 9999px; padding: 4px 10px 4px 6px; background: #fff; font-size: 12px; max-width: 220px; }
.aic-item:hover { border-color: #f59e0b; }
.aic-item.aic-cambiado { border-color: #d97706; background: #fffbeb; }
.aic-item-ic { font-size: 18px; line-height: 1; }
.aic-item-tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #57534e; }
.aic-res { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 1px solid #e7e5e4; border-radius: 10px; background: #fff; font-size: 28px; color: #292524; }
.aic-res:hover { border-color: #f59e0b; background: #fffbeb; }
.aic-res .asp-ico, .aic-res .asp-ico-img { width: 30px; height: 30px; }

/* ---------- v724 · Color de las letras del menú de la izquierda y de las pestañas (y la elegida). :not(#asp-l) gana a los estilos de menú y pestañas de arriba ---------- */
html.asp-l-menu:not(#asp-l) :is(.nav-vertical .nav-btn, .nav-vertical > p, .asp-barra-movil button) { color: var(--a-l-menu) !important; }
html.asp-l-menu-act:not(#asp-l) :is(.nav-vertical .nav-btn.active, .nav-vertical .nav-btn.active:hover, .asp-barra-movil button.activo) { color: var(--a-l-menu-act) !important; }
html.asp-l-pest:not(#asp-l) :is(.subnav-hijos button, .subnav-bt, #aspArriba button) { color: var(--a-l-pest) !important; }
html.asp-l-pest-act:not(#asp-l) :is(.subnav-hijos button:is(.bg-stone-800, .activo), .subnav-bt.activo, #aspArriba button.activo) { color: var(--a-l-pest-act) !important; }