/* Estilos del simulador. Los tokens de color son el tema de la app; .oscuro cambia al modo oscuro. */
.app{--bg:#F5F6F8;--side:#FFFFFF;--card:#FFFFFF;--line:#E6E8EC;--track:#EEF0F3;--ink:#141821;--muted:#6A7280;--acento:#12A04B}
.app.oscuro{--bg:#0E1116;--side:#12161D;--card:#171C25;--line:#262D3A;--track:#202734;--ink:#E9ECF1;--muted:#8E98A8}

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:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.nota{font-size:12px;color:var(--muted)}

/* Ocupa toda la ventana, sin un mínimo de tamaño fijo. */
html,body{height:100%}
.app{width:100%;height:100vh;box-sizing:border-box;overflow:hidden;display:flex;background:var(--bg);color:var(--ink);font-variant-numeric:tabular-nums}

/* Panel lateral */
.lateral{width:280px;flex-shrink:0;box-sizing:border-box;overflow-y:auto;padding:24px 20px;display:flex;flex-direction:column;gap:28px;background:var(--side);border-right:1px solid var(--line)}
.marca-app{display:flex;align-items:center;gap:10px}
.marca-app .textos{display:flex;flex-direction:column}
.marca-app .t1{font-weight:700;font-size:15px}
.marca-app .t2{font-size:12px;color:var(--muted)}
.grupo{display:flex;flex-direction:column;gap:10px}
.segmentos{display:grid;gap:4px;padding:4px;border-radius:10px;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:34px;border:0;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;background:transparent;color:var(--muted);box-shadow:none}
.seg.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(16,24,40,.12)}
.ocasiones{display:flex;flex-direction:column;gap:4px}
.ocasion{height:40px;border:1px solid transparent;border-radius:9px;padding:0 12px;text-align:left;font-size:13.5px;font-weight:500;cursor:pointer;background:transparent;color:var(--ink)}
.ocasion.on{border-color:var(--line);background:var(--track)}
.stepper{display:flex;align-items:center;gap:8px}
.stepper button{width:40px;height:40px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:18px;cursor:pointer}
.stepper button:disabled{opacity:.4;cursor:default}
.stepper .valor{flex-grow:1;height:40px;border-radius:9px;border:1px solid var(--line);background:var(--card);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.pie-lateral{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.btn-lateral{height:40px;border-radius:9px;border:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 12px;background:transparent;color:var(--ink);font-size:13.5px;font-weight:500;cursor:pointer}

/* 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.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:17px;font-weight:700}
/* 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:10px;overflow:auto;padding-right:4px}
.tarjeta{padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.tarjeta .fila{display:flex;align-items:flex-start;gap:12px}
.tarjeta .fila > .logo{margin-top:2px}
.tarjeta .centro{flex-grow:1;min-width:0}
.selector{width:100%;border:1px solid var(--line);border-radius:9px;background:var(--bg);padding:5px 10px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;color:var(--ink)}
.selector.abierto{border-color:var(--ink)}
.selector .textos{display:flex;flex-direction:column;gap:1px;min-width:0}
.selector .t1{font-size:11px;color:var(--muted)}
.selector .t2{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selector .ico{color:var(--muted)}
.lista{margin-top:6px;padding:6px;border-radius:12px;background:var(--card);border:1px solid var(--line);box-shadow:0 12px 32px rgba(16,24,40,.16);display:flex;flex-direction:column;gap:2px;max-height:260px;overflow:auto}
.opcion{height:40px;flex-shrink:0;border:0;border-radius:8px;padding:0 8px;cursor:pointer;display:flex;align-items:center;gap:10px;text-align:left;font-size:13.5px;font-weight:500;background:transparent;color:var(--ink)}
.opcion.on{background:var(--track)}
.opcion .nombre{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.precio{display:flex;align-items:center;gap:4px;height:38px;padding:0 10px;border-radius:9px;border:1px solid var(--line);background:var(--bg);margin-top:2px}
.precio > span{font-size:13px;color:var(--muted)}
.precio input{width:56px;border:0;background:transparent;color:var(--ink);font-size:15px;font-weight:700;font-family:inherit;text-align:right;outline:none}
.rango{display:flex;align-items:center;gap:10px}
.rango > span{font-size:11.5px;color:var(--muted);width:38px}
.rango > span:last-child{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:6px;border-radius:3px;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:var(--acento);border:2px solid #FFFFFF;box-shadow:0 1px 3px rgba(16,24,40,.3)}
.deslizador input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--acento);border:2px solid #FFFFFF;box-shadow:0 1px 3px rgba(16,24,40,.3)}
/* 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 56px}
.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(--ink)}

/* Panel de share */
.panel-share{grid-column:span 7;padding:22px 24px;border-radius:16px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:18px;min-height:0}
.panel-share .encabezado{display:flex;align-items:baseline;justify-content:space-between}
.panel-share .textos{display:flex;flex-direction:column;gap:4px}
.panel-share h2{margin:0;font-size:17px;font-weight:700}
.panel-share .textos span{font-size:13px;color:var(--muted)}
.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;left:0;z-index:10;min-width:140px;margin-top:0}
/* "safe center": centra si cabe; si no, se comporta como flex-start para no recortar las
   primeras barras (con "center" a secas, el tramo que se sale por arriba queda fuera de scroll). */
.barras{display:flex;flex-direction:column;gap:14px;flex-grow:1;justify-content:safe center;min-height:0;overflow-y:auto}
.barra{display:grid;grid-template-columns:170px minmax(0,1fr);align-items:center;gap:14px}
.barra .quien{display:flex;align-items:center;gap:10px;min-width:0}
.barra .quien > span{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.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)}

/* 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,.panel-share{grid-column:auto}
  .tarjetas{overflow:visible}
  .cabecera{padding:0 20px}
}