/* Estilos del simulador. Los tokens de color son el tema de la app; .oscuro cambia al modo oscuro. */
/* Neutros tipo zinc (shadcn/ui); --borde-fuerte para hover de campos, --anillo para el foco. */
.app{--bg:#F7F7F8;--side:#FFFFFF;--card:#FFFFFF;--line:#E4E4E7;--borde-fuerte:#D4D4D8;--track:#F4F4F5;--ink:#09090B;--muted:#71717A;--acento:#12A04B;--anillo:rgba(9,9,11,.22);--sombra:0 1px 2px rgba(9,9,11,.05)}
.app.oscuro{--bg:#09090B;--side:#0C0C0E;--card:#141417;--line:#27272A;--borde-fuerte:#3F3F46;--track:#1F1F23;--ink:#FAFAFA;--muted:#A1A1AA;--anillo:rgba(250,250,250,.3);--sombra:0 1px 2px rgba(0,0,0,.4)}

body{margin:0;font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;background:#E9EBEF}
button{font-family:inherit}
input[type=range]{accent-color:var(--acento)}
.lbl{font-size:12px;font-weight:500;color:var(--muted)}
.nota{font-size:12px;line-height:1.45;color:var(--muted)}

/* Ocupa toda la ventana, sin un mínimo de tamaño fijo. */
html,body{height:100%}
/* Todo al 95 % (usuario): el zoom achica también la altura en vh, así que se compensa. */
body{zoom:.95}
.app{width:100%;height:calc(100vh / .95);box-sizing:border-box;overflow:hidden;display:flex;background:var(--bg);color:var(--ink);font-variant-numeric:tabular-nums}

/* Panel lateral */
/* Sin scroll: el menú de "+" flota sobre la pantalla en vez de empujar el lateral. */
.lateral{width:252px;flex-shrink:0;box-sizing:border-box;overflow:visible;position:relative;z-index:20;padding:18px 14px;display:flex;flex-direction:column;gap:18px;background:var(--side);border-right:1px solid var(--line)}
.marca-app{display:flex;align-items:center;gap:10px;padding:0 2px}
.marca-app .textos{display:flex;flex-direction:column;gap:1px;min-width:0}
.marca-app .t1{font-weight:600;font-size:14px;letter-spacing:-.01em;line-height:1.25}
.marca-app .t2{font-size:12px;color:var(--muted)}
.grupo{display:flex;flex-direction:column;gap:8px}
.segmentos{display:grid;gap:2px;padding:3px;border-radius:8px;background:var(--track)}
.segmentos.x3{grid-template-columns:repeat(3,minmax(0,1fr))}
.segmentos.x2{grid-template-columns:repeat(2,minmax(0,1fr))}
.seg{height:30px;border:0;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;background:transparent;color:var(--muted);box-shadow:none}
.seg.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(9,9,11,.08),0 0 0 1px rgba(9,9,11,.03)}
.ocasiones{display:flex;flex-direction:column;gap:2px}
.ocasion{height:34px;border:0;border-radius:6px;padding:0 10px;text-align:left;font-size:14px;font-weight:400;cursor:pointer;background:transparent;color:var(--ink)}
.ocasion.on{background:var(--track);font-weight:500}
.stepper{display:flex;align-items:center;justify-content:space-between;gap:8px}
.stepper > button{height:32px;border-radius:6px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;box-shadow:var(--sombra)}
.stepper > button:disabled{opacity:.45;cursor:default}
.stepper .valor{font-size:14px;font-weight:500}
.pie-lateral{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:1px solid var(--line)}
.btn-lateral{height:34px;border-radius:6px;border:0;display:flex;align-items:center;gap:8px;padding:0 10px;background:transparent;color:var(--ink);font-size:13.5px;font-weight:400;cursor:pointer}
.btn-lateral .ico{color:var(--muted)}

/* Iconos: SVG del diseño como máscara, toman el color del texto */
.ico{display:inline-block;flex-shrink:0;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ico.i18{width:18px;height:18px}.ico.i16{width:16px;height:16px}
.ico.ayuda{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .9-1 1.6v.6'/%3E%3Ccircle cx='12' cy='17' r='.6'/%3E%3C/svg%3E")}
.ico.luna{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z'/%3E%3C/svg%3E")}
.ico.bajar{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E")}
.ico.tabla{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M4 10h16M10 4v16'/%3E%3C/svg%3E")}
.ico.abajo{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.ico.arriba{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E")}
.ico.palomita{color:var(--acento);--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}

/* Logos: tarjeta rectangular blanca (son wordmarks); "Otros" sin logo lleva texto */
.logo{flex-shrink:0;box-sizing:border-box;border-radius:7px;background:#FFFFFF;border:1px solid #E6E8EC;display:flex;align-items:center;justify-content:center;overflow:hidden}
.logo img{max-width:100%;max-height:100%;object-fit:contain}
.logo .sin{font-weight:700;color:#6A7280}
.logo.l38{width:58px;height:38px;padding:4px}
.logo.l32{width:48px;height:32px;padding:3px}.logo.l32 .sin{font-size:10px}
.logo.l26{width:40px;height:26px;padding:3px}.logo.l26 .sin{font-size:9px}
.logo.l24{width:36px;height:24px;padding:3px}.logo.l24 .sin{font-size:9px}
.logo.l38 .sin{font-size:11px}

/* Encabezado y pestañas */
.principal{flex-grow:1;display:flex;flex-direction:column;min-width:0}
.cabecera{height:68px;box-sizing:border-box;padding:0 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.pestanas{display:flex;align-items:flex-end;gap:4px;height:100%}
.pestana{height:100%;box-sizing:border-box;display:flex;align-items:center;gap:6px;padding:0 6px 0 14px;border-bottom:2px solid transparent}
.pestana.on{border-bottom-color:var(--ink)}
.pestana .abre{border:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:0;color:var(--muted)}
.pestana.on .abre{color:var(--ink)}
.pestana .t1{font-size:13.5px;font-weight:600}
.pestana .t2{font-size:11.5px;color:var(--muted)}
.pestana .cierra{width:22px;height:22px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1}
.nueva{height:100%;display:flex;align-items:center;padding-left:8px}
.nueva button{height:32px;padding:0 12px;border-radius:8px;border:1px dashed var(--line);background:transparent;color:var(--muted);font-size:13px;font-weight:500;cursor:pointer}
.acciones-cab{display:flex;align-items:center;gap:10px}
.chip{font-size:12.5px;font-weight:600;color:var(--ink);padding:5px 12px;border-radius:20px;border:1px solid var(--line)}
.btn-fuerte{height:38px;padding:0 16px;border-radius:9px;border:0;background:var(--ink);color:var(--bg);font-size:13.5px;font-weight:600;cursor:pointer}

/* Cuerpo */
.cuerpo{flex-grow:1;box-sizing:border-box;padding:28px 32px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:24px;min-height:0}
.col-opciones{grid-column:span 5;display:flex;flex-direction:column;gap:12px;min-height:0}
.titulo-sec{display:flex;align-items:baseline;justify-content:space-between}
.titulo-sec h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em}
/* flex:1 1 auto + min-height:0: sin esto un flex-item no se encoge bajo su alto de contenido y,
   con muchas tarjetas, se sale de .col-opciones en vez de scrollear dentro de sí misma. */
.tarjetas{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px;overflow:auto;padding:1px 4px 1px 1px}
.tarjeta{padding:10px 10px 10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sombra);display:flex;flex-direction:column;gap:6px}
.tarjeta .fila{display:flex;align-items:center;gap:10px}
.tarjeta .centro{flex-grow:1;min-width:0}
/* El nombre es el botón del menú: sin caja; el fondo aparece al pasar o con el menú abierto. */
.selector{width:100%;box-sizing:border-box;border:0;border-radius:8px;background:transparent;padding:4px 6px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:6px;text-align:left;color:var(--ink)}
.selector.abierto{background:var(--track)}
.selector .textos{display:flex;flex-direction:column;gap:1px;min-width:0}
.selector .t1{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selector .t2{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selector .ico{color:var(--muted)}
.lista{margin-top:6px;padding:4px;border-radius:10px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 28px rgba(9,9,11,.10),0 2px 6px rgba(9,9,11,.05);display:flex;flex-direction:column;gap:1px;max-height:260px;overflow:auto;transform-origin:top;animation:aparecer .16s cubic-bezier(.23,1,.32,1)}
/* Menú agrupado por marca: encabezado con logo y opciones de una línea, con sangría */
.grupo-lista{display:flex;align-items:center;gap:8px;padding:8px 8px 3px;font-size:11.5px;font-weight:600;color:var(--muted);flex-shrink:0}
.grupo-lista:first-child{padding-top:4px}
.opcion{min-height:30px;flex-shrink:0;border:0;border-radius:6px;padding:4px 8px 4px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;text-align:left;font-size:13px;font-weight:400;background:transparent;color:var(--ink)}
.opcion.on{background:var(--track);font-weight:500}
.opcion .nombre{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.precio{display:flex;align-items:center;gap:2px;height:34px;flex-shrink:0;box-sizing:border-box;padding:0 8px;border-radius:8px;border:1px solid var(--line);background:var(--card);box-shadow:var(--sombra)}
.precio > span{font-size:13px;color:var(--muted)}
.precio input{width:64px;border:0;background:transparent;color:var(--ink);font-size:14px;font-weight:600;font-family:inherit;text-align:right;outline:none}
.rango{display:flex;align-items:center;gap:8px;padding:0 0 0 58px}
.rango > span{font-size:11.5px;color:var(--muted);width:36px}
/* Indicador del cambio contra el precio actual: rojo si sube, verde si baja */
.rango > .cambio{width:auto;min-width:40px;box-sizing:border-box;padding:2px 7px;border-radius:999px;background:var(--track);color:var(--muted);font-size:11.5px;font-weight:600;text-align:center}
.rango > .cambio.sube{background:rgba(217,45,32,.09);color:#B42318}
.rango > .cambio.baja{background:rgba(18,160,75,.1);color:#067647}
.app.oscuro .rango > .cambio.sube{color:#F97066}.app.oscuro .rango > .cambio.baja{color:#47CD89}
.rango > .max{text-align:right}
.deslizador{position:relative;flex-grow:1;display:flex;align-items:center}
.deslizador input{width:100%;margin:0}
/* Pista de la barra con los colores del tema; --f (tramo lleno) lo fija el callback del globo */
.deslizador input[type=range]{-webkit-appearance:none;appearance:none;height:5px;border-radius:999px;cursor:pointer;background:linear-gradient(to right,var(--acento) var(--f,50%),var(--track) var(--f,50%))}
.deslizador input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#FFFFFF;border:2px solid var(--acento);box-shadow:0 1px 3px rgba(9,9,11,.18);transition:transform .15s ease,box-shadow .15s ease}
.deslizador input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#FFFFFF;border:2px solid var(--acento);box-shadow:0 1px 3px rgba(9,9,11,.18)}
.deslizador input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12);box-shadow:0 0 0 5px rgba(18,160,75,.15)}
/* Globo del precio al deslizar: mismo estilo que la etiqueta de valor de las barras */
.globo{position:absolute;bottom:calc(100% + 6px);transform:translateX(-50%);height:26px;padding:0 9px;border-radius:7px;background:var(--card);border:1px solid var(--line);box-shadow:0 4px 12px rgba(16,24,40,.12);display:flex;align-items:center;white-space:nowrap;font-size:13px;font-weight:700;color:var(--ink);pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:5}
.deslizador:hover .globo,.deslizador:active .globo{opacity:1}

/* Dash 4 envuelve cada dcc.Input en una caja propia (borde, 34 px, botones −/+): se neutraliza
   para que manden la caja del precio y la barra del diseño. */
.precio .dash-input-container,.deslizador .dash-input-container{width:auto;height:auto;border:0;border-radius:0;background:transparent;overflow:visible;outline:none;container-type:normal}
.deslizador .dash-input-container{width:100%}
.precio .dash-input-container:focus-within,.deslizador .dash-input-container:focus-within{border:0}
.precio .dash-input-stepper{display:none}
.precio .dash-input-element{flex:0 0 64px}
.precio .dash-input-element,.deslizador .dash-input-element{padding:0;height:auto;border-radius:0}
.precio .dash-input-element[type=number]{-moz-appearance:textfield}
.precio .dash-input-element[type=number]::-webkit-outer-spin-button,.precio .dash-input-element[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.precio:focus-within{border-color:var(--borde-fuerte);box-shadow:0 0 0 3px var(--track)}

/* Panel de share */
.col-share{grid-column:span 7;display:flex;flex-direction:column;gap:12px;min-height:0}
.panel-share{flex:1 1 auto;padding:18px 20px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sombra);display:flex;flex-direction:column;gap:16px;min-height:0;overflow-y:auto}
.fila-controles{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.panel-share .textos{display:flex;flex-direction:column;gap:4px}
.panel-share h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em}
.panel-share .textos span{font-size:13px;color:var(--muted)}
/* Pestañas del panel de resultados; el resumen va en una segunda línea chica */
.pestanas-res .seg{height:auto;min-height:40px;padding:4px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.pestanas-res .seg:disabled{opacity:.45;cursor:default}
.pestanas-res .dato{font-size:11.5px;font-weight:600;color:var(--muted)}
.frase{font-size:12.5px;color:var(--muted);line-height:1.4}
.resumen{font-size:14px;font-weight:500;line-height:1.45;color:var(--ink)}
.vacio{padding:40px 12px;text-align:center;font-size:13.5px;color:var(--muted)}
.curva{height:320px}
.selector-origen{display:flex;flex-direction:column;gap:6px}
.origenes{display:flex;flex-wrap:wrap}
.origenes .seg{padding:0 12px}
.controles-share{display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:space-between}
.subpestanas{flex-shrink:0}
.subpestanas .seg{padding:0 14px;white-space:nowrap}
.descargas{display:flex;gap:8px;position:relative;flex-shrink:0}
.btn-borde{height:34px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:6px}
.menu-descarga{position:absolute;top:40px;right:0;z-index:10;min-width:140px;margin-top:0}
/* Las barras no se encogen ni se estiran: si no caben junto con "A dónde se va el share", hace
   scroll todo el panel; si sobra alto, queda abajo, sin hueco entre barras y destinos. */
.barras{display:flex;flex-direction:column;gap:14px;flex:0 0 auto}
.barra{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:center;gap:14px}
.barra .quien{display:flex;align-items:center;gap:10px;min-width:0}
/* Nombre en hasta 2 renglones; si aún no cabe, se corta con "…" (el nombre completo va en el tooltip). */
.barra .quien > span{font-size:13.5px;font-weight:500;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.barra .pista{height:40px;border-radius:8px;background:var(--track);position:relative}
.barra .relleno{height:100%;border-radius:8px;transition:width .35s ease}
.barra .valor{position:absolute;top:7px;height:26px;padding:0 9px;border-radius:7px;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;white-space:nowrap;font-size:13px;font-weight:700;color:var(--ink)}
/* "A dónde se va el share" y pie de la tarjeta "Otros" */
.destinos{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid var(--line)}
.destinos h3{margin:0;font-size:15px;font-weight:700}
.barra.destino .pista{height:28px}
.barra.destino .valor{top:1px;height:24px;font-size:12.5px}
.pie-otros{display:flex;align-items:center;justify-content:space-between;gap:12px}
.quitar{width:28px;height:28px;flex-shrink:0;border:0;border-radius:6px;background:transparent;color:var(--muted);font-size:17px;line-height:1;cursor:pointer}
.quitar:disabled{opacity:.3;cursor:default}
.stepper > button.on{border-color:var(--borde-fuerte);background:var(--track)}
.stepper .agregar{width:34px;height:34px;padding:0;font-size:18px;line-height:1}
.cantidad{display:flex;align-items:center;gap:6px;height:34px;box-sizing:border-box;padding:0 10px;border:1px solid var(--line);border-radius:6px;background:var(--card);box-shadow:var(--sombra);flex-grow:1;cursor:text}
.cantidad:focus-within{border-color:var(--borde-fuerte);box-shadow:0 0 0 3px var(--track)}
.cantidad > span{font-size:13px;color:var(--muted)}
.cantidad input{width:100%;border:0;background:transparent;color:var(--ink);font-size:14px;font-weight:600;font-family:inherit;outline:none;padding:0}
.cantidad .dash-input-container{width:100%;height:auto;border:0;border-radius:0;background:transparent;overflow:visible;outline:none;container-type:normal}
.cantidad .dash-input-container:focus-within{border:0}
.cantidad .dash-input-stepper{display:none}
.cantidad .dash-input-element{padding:0;height:auto;flex:1 1 auto;-moz-appearance:textfield}
.cantidad .dash-input-element::-webkit-outer-spin-button,.cantidad .dash-input-element::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.lateral .opcion .nombre{white-space:normal;line-height:1.25}
.stepper{position:relative}
/* Menú de "+": panel a la derecha del lateral, a todo el alto de la ventana (siempre cabe). */
.stepper > .lista{position:fixed;left:258px;top:12px;bottom:12px;width:300px;max-height:none;margin:0;z-index:30;transform-origin:left center}
.tarjeta > .lista{margin:0 0 2px;max-height:300px}
/* Cascada: tramos flotantes sobre la pista; inicio y fin llenos desde el borde, con una marca
   de corte (//) cuando la escala no empieza en 0. */
.cascada .pista{overflow:visible}
.cascada .tramo{position:absolute;top:5px;bottom:5px;border-radius:4px}
.cascada .tramo.total{top:0;bottom:0;border-radius:8px}
.cascada .tramo.corte::before{content:"";position:absolute;left:12px;top:-1px;bottom:-1px;width:5px;background:var(--track);transform:skewX(-20deg)}
.textos-wf{display:flex;flex-direction:column;min-width:0}
.textos-wf .n{font-size:13.5px;font-weight:500;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.textos-wf .cuando{font-size:11.5px;color:var(--muted)}

/* Ayuda (siempre clara, como en el diseño) */
.velo{position:fixed;inset:0;background:rgba(14,17,22,.55);display:flex;align-items:center;justify-content:center;z-index:50}
.dialogo{width:620px;max-width:calc(100% - 32px);box-sizing:border-box;padding:32px;border-radius:18px;background:#FFFFFF;color:#141821;display:flex;flex-direction:column;gap:24px;box-shadow:0 24px 64px rgba(16,24,40,.25)}
.dialogo .cab{display:flex;flex-direction:column;gap:6px}
.dialogo .cab .lbl{font-size:12px;color:#6A7280}
.dialogo h1{margin:0;font-size:24px;font-weight:700}
.dialogo ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px}
.dialogo li{display:flex;gap:14px}
.dialogo .num{width:28px;height:28px;flex-shrink:0;border-radius:50%;background:#EEF0F3;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.dialogo .paso{display:flex;flex-direction:column;gap:2px}
.dialogo strong{font-size:15px}
.dialogo .paso span{font-size:14px;color:#4B5563}
/* Nota de "Otros" del modelo activo: texto corrido, no un paso numerado. */
.dialogo .otros{font-size:13.5px;line-height:1.5;color:#4B5563}
.dialogo .otros strong{color:#141821}
.dialogo .pie{display:flex;justify-content:flex-end}
.dialogo .pie button{height:42px;padding:0 20px;border-radius:10px;border:0;background:#141821;color:#FFFFFF;font-size:14px;font-weight:600;cursor:pointer}

/* Pantallas angostas: opciones arriba y share abajo, con scroll en el cuerpo */
@media (max-width:1100px){
  .cuerpo{grid-template-columns:minmax(0,1fr);grid-template-rows:none;overflow-y:auto;padding:20px}
  .col-opciones,.col-share{grid-column:auto}
  .tarjetas{overflow:visible}
  .cabecera{padding:0 20px}
}

/* Movimiento: transiciones cortas solo en color/borde/sombra; al presionar, el botón se encoge
   un poco; los menús aparecen con un fade corto; hover solo en dispositivos con mouse. */
button,.selector,.precio,.opcion,.seg{transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .1s ease}
button:active:not(:disabled){transform:scale(.97)}
@keyframes aparecer{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
@media (hover:hover){
  .seg:not(.on):not(:disabled):hover,.ocasion:not(.on):hover,.btn-lateral:hover,.opcion:hover,.quitar:not(:disabled):hover{background:var(--track);color:var(--ink)}
  .selector:hover{background:var(--track)}
  .precio:hover,.cantidad:hover,.stepper > button:not(:disabled):hover{border-color:var(--borde-fuerte)}
}
/* Foco visible solo con teclado */
button:focus-visible,input:focus-visible{outline:2px solid var(--anillo);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  button:active:not(:disabled){transform:none}
}