/* Ofertador B2B · Imagina Energía · Sistema de diseño (navy / coral / teal) */
:root{
/* Lenguaje visual (propuesta de septiembre de 2026): base clara y plana,
tinta azulada en vez de gris frío, naranja de marca como único color de
acción y azul reservado a lo informativo. Sin degradados ni sombras
marcadas: la jerarquia la dan el peso tipografico y las lineas finas.
Los nombres heredados (navy/teal/coral) se conservan como alias para no
romper las pantallas que ya los usan. */
--ink:#1B2433; --muted:#5E6878; --faint:#9AA2B0; --line:#E3E6EB; --canvas:#F3F4F6;
--brand:#EE5A1F; --brand-ink:#B03C0C; --brand-soft:#FDEFE7;
--info:#2F6FDB; --info-soft:#EAF1FD; --info-ink:#1E4FA8;
/* Estados de oferta: borrador gris, enviada azul, aceptada verde, descartada rojo. */
--s-borr:#AEB6C3; --s-env:#2F6FDB; --s-acep:#178A5C; --s-desc:#C2453A;
/* Alias heredados */
--color-navy:#1B2433; --color-navy-dark:#0F1621; --color-navy-700:#39424F;
--color-coral:#EE5A1F; --color-coral-dark:#B03C0C;
--color-teal:#178A5C;
--color-gold:#C08A16; --color-gold-dark:#8A6210; --color-gold-light:#F2C766;
--text-primary:#1B2433; --text-secondary:#5E6878; --text-light:#9AA2B0;
--bg-primary:#ffffff; --bg-secondary:#FAFBFC; --bg-tertiary:#EFF1F4;
--border-color:#E3E6EB; --border-strong:#C9CFD8;
--success-color:#178A5C; --error-color:#C2453A; --warning-color:#855000;
/* Sombras casi inexistentes: el diseno es plano y se apoya en las lineas. */
--shadow-sm:0 1px 1px rgba(27,36,51,.03);
--shadow-md:0 2px 6px -2px rgba(27,36,51,.07);
--shadow-lg:0 8px 22px -8px rgba(27,36,51,.13);
--shadow-xl:0 18px 40px -14px rgba(27,36,51,.18);
--radius-sm:8px; --radius:12px; --radius-lg:14px;
--container:1440px; --header-h:68px; --sidebar-w:268px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.45;
color:var(--text-primary);background:var(--canvas);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
:focus-visible{outline:2px solid var(--info);outline-offset:2px}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 1.5rem}
.hidden{display:none !important}
.loading{padding:5rem;text-align:center;color:var(--text-light)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--line);
border-radius:9px;padding:.55rem .9rem;font-weight:500;font-size:.9rem;cursor:pointer;transition:background .15s,border-color .15s,color .15s;white-space:nowrap;text-decoration:none;background:var(--bg-primary);color:var(--text-primary)}
.btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}.btn-primary:hover{background:var(--color-navy-dark);border-color:var(--color-navy-dark)}
.btn-coral{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-coral:hover{background:#DB4E16;border-color:#DB4E16}
.btn-ghost{background:var(--bg-primary);color:var(--text-primary);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--border-strong)}
.btn-danger{background:#fff;color:var(--error-color);border-color:#E9B4AF}.btn-danger:hover{background:#FBE9E7}
.btn-sm{padding:.4rem .7rem;font-size:.8rem}
.btn:disabled{opacity:.5;cursor:not-allowed}
/* --- Layout con sidebar --- */
.layout{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--bg-primary);border-right:1px solid var(--border-color);
color:var(--text-primary);display:flex;flex-direction:column;padding:1.25rem 1rem;position:sticky;top:0;height:100vh;z-index:100}
.sidebar .brand{display:flex;align-items:center;gap:.7rem;cursor:pointer;padding:.2rem .35rem .9rem;margin-bottom:.6rem;border-bottom:1px solid var(--border-color);flex:0 0 auto}
.sidebar .brand .brand-logo{background:#fff;border:1px solid var(--border-color);border-radius:10px;padding:.35rem .5rem;display:inline-flex;flex:0 0 auto}
.sidebar .brand .brand-logo img{height:30px;width:auto}
.sidebar .brand .brand-txt{display:flex;flex-direction:column;line-height:1.15}
.sidebar .brand .brand-txt b{font-size:.82rem;color:var(--text-primary);font-weight:700;letter-spacing:.02em}
.sidebar .brand .brand-txt span{font-size:.68rem;color:var(--text-light)}
/* El menú es lo ÚNICO que se desplaza dentro de la barra: con todos los
apartados abiertos crece más que la pantalla, y sin esto empujaba el bloque
del usuario fuera de la vista, sin manera de llegar a él. `min-height:0` es
lo que permite a un hijo flexible encogerse por debajo de su contenido; sin
él, `overflow` no llega a activarse. */
.nav{display:flex;flex-direction:column;gap:.2rem;margin-top:.5rem;
flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
scrollbar-width:thin;scrollbar-color:var(--border-color) transparent;
padding-right:.2rem;margin-right:-.2rem}
.nav::-webkit-scrollbar{width:6px}
.nav::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}
.nav::-webkit-scrollbar-track{background:transparent}
.nav-btn{background:transparent;border:1px solid transparent;color:var(--text-primary);padding:.6rem .7rem;border-radius:8px;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .15s;text-decoration:none;display:flex;align-items:center;gap:.55rem}
.nav-btn:hover{background:var(--canvas);color:var(--text-primary)}
.nav-btn.active{background:var(--brand-soft);color:var(--brand-ink);font-weight:500}
/* Iconos de línea del menú (frontend/iconos.js): heredan el color del enlace. */
.nav-btn .ico{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;fill:none;
stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.72}
.nav-btn:hover .ico,.nav-btn.active .ico{opacity:1}
.nav-btn>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-group-items .nav-btn .ico{width:16px;height:16px}
.nav-btn .dot{color:var(--color-coral);font-size:.6rem}
.nav-btn.active .dot{color:var(--color-coral)}
/* Menú en acordeón: grupos plegables (Ofertas, Precios, Configuración). */
.nav-plain{display:flex;flex-direction:column;gap:.2rem}
.nav-group{margin-top:.35rem}
.nav-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.4rem;padding:.5rem .7rem;border-radius:var(--radius-sm);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-light);user-select:none}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary::before{content:"▸";font-size:.66rem;opacity:.6;transition:transform .15s;flex:0 0 auto}
.nav-group[open]>summary::before{transform:rotate(90deg)}
.nav-group>summary:hover{color:var(--text-secondary);background:var(--bg-tertiary)}
.nav-group[open]>summary{color:var(--text-secondary)}
/* Sub-apartados: indentados y colgados de una línea guía a la izquierda. */
.nav-group-items{display:flex;flex-direction:column;gap:.12rem;margin:.15rem 0 .3rem 1.15rem;padding-left:.6rem;border-left:2px solid var(--border-color)}
.nav-group-items .nav-btn{padding:.5rem .7rem;font-size:.86rem;font-weight:600}
.nav-group-items .nav-btn.active{box-shadow:inset 2px 0 0 var(--color-coral)}
/* Subnivel: una opción que cuelga jerárquicamente de la de arriba (p. ej.
"Listado de ofertas" bajo "Procesos de oferta"). */
.nav-group-items .nav-btn.nav-sub{margin-left:.7rem;font-size:.82rem;color:var(--text-light)}
.nav-group-items .nav-btn.nav-sub::before{content:"↳";margin-right:.15rem;color:var(--text-light);font-weight:700}
.nav-group-items .nav-btn.nav-sub.active{color:var(--color-coral-dark)}
/* Código de la oferta como referencia secundaria bajo el código de proceso
(primera columna del listado de ofertas). */
.cod-oferta{display:block;font-size:.7rem;color:var(--text-light);margin-top:.15rem}
/* Pegado abajo y siempre visible: es desde donde se sale de la aplicación. */
.user-chip{display:flex;align-items:center;gap:.6rem;margin-top:auto;padding-top:1rem;
border-top:1px solid var(--border-color);flex:0 0 auto}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex:0 0 auto}
.user-meta{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.user-meta b{font-size:.82rem;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-chip .btn{margin-left:auto}
.role-pill{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:.05rem .4rem;border-radius:999px;align-self:flex-start}
.role-admin{background:#eef1f5;color:var(--color-navy)}.role-agente{background:#fff0e8;color:var(--color-coral-dark)}
.content{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
/* Barra superior móvil (oculta en escritorio) */
.mobilebar{display:none;align-items:center;gap:.75rem;background:var(--bg-primary);color:var(--text-primary);border-bottom:1px solid var(--border-color);padding:.7rem 1rem;position:sticky;top:0;z-index:90}
.mobilebar .brand-txt{font-weight:700;font-size:.95rem}
.mobilebar .menu-btn{background:var(--bg-tertiary);color:var(--text-primary);border:none;border-radius:var(--radius-sm);padding:.4rem .7rem;font-size:1.1rem;line-height:1;cursor:pointer}
.mobilebar .mb-active{margin-left:auto;color:var(--text-light);font-size:.85rem}
.sidebar-ov{display:none;position:fixed;inset:0;background:rgba(27,36,51,.45);z-index:95}
/* Banner de impersonación de rol (previsualización de la interfaz). */
.impersonate-bar{position:sticky;top:0;z-index:200;display:flex;align-items:center;gap:.75rem;
background:var(--ink);color:#fff;
padding:.55rem 1.25rem;font-size:.88rem;box-shadow:var(--shadow-md)}
.impersonate-bar .imp-ico{font-size:1.05rem;line-height:1}
.impersonate-bar .imp-txt{flex:1 1 auto;min-width:0}
.impersonate-bar b{color:var(--color-gold-light)}
.impersonate-bar .btn{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35);flex:0 0 auto}
.impersonate-bar .btn:hover{background:rgba(255,255,255,.24)}
.brand-txt{display:flex;flex-direction:column;line-height:1.1}
.screen{padding:2.25rem 0 4rem;min-height:100vh}
.screen>.container{margin:0;max-width:none}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.75rem}
.page-title{font-size:1.65rem;font-weight:600;letter-spacing:-.01em;line-height:1.15;color:var(--text-primary)}
.page-sub{color:var(--text-secondary);font-size:.95rem;margin-top:.15rem}
.eyebrow{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--brand-ink);margin-bottom:.35rem}
.head-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.card{background:var(--bg-primary);border:1px solid var(--line);border-radius:var(--radius-lg)}
.card-pad{padding:1.25rem 1.4rem}
.card-title{font-size:1rem;font-weight:600;margin-bottom:.25rem}
.grid{display:grid;gap:1.25rem}
.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.kpi{background:var(--bg-primary);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.25rem 1.4rem;position:relative;overflow:hidden}
.kpi .k-label{font-size:.82rem;color:var(--text-secondary);font-weight:500}
.kpi .k-value{font-size:2.1rem;font-weight:600;letter-spacing:-.01em;line-height:1.1;margin-top:.25rem;color:var(--text-primary);font-variant-numeric:tabular-nums}
.kpi .k-gwh{font-size:.9rem;font-weight:500;color:var(--text-primary);margin-top:.15rem;font-variant-numeric:tabular-nums}
.kpi .k-foot{font-size:.8rem;color:var(--text-light);margin-top:.2rem}
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);background:var(--bg-primary);min-width:0}
table.data{width:100%;border-collapse:collapse}
table.data th,table.data td{padding:.75rem .9rem;text-align:left;border-bottom:1px solid var(--border-color);font-size:.88rem;white-space:nowrap}
/* SIN uppercase: las cabeceras llevan unidades (p. ej. "OMIP (€/MWh)") y el
text-transform las rompería a "€/MWH", violando la regla dura de unidades.
El aspecto de cabecera se mantiene con peso, color y letter-spacing. */
table.data th{background:var(--bg-secondary);font-weight:500;color:var(--muted);font-size:.8rem;border-bottom:1px solid var(--line)}
table.data tr:last-child td{border-bottom:none}
/* Separación sutil entre bloques por fecha de inicio (hairline neutro + aire) */
.tabla-condiciones table.data>tbody>tr[data-bloque]>td{border-top:1px solid var(--border-strong);padding-top:.85rem}
table.data tbody tr{transition:background .12s}
table.data tbody tr.clickable{cursor:pointer}
table.data tbody tr.clickable:hover{background:var(--bg-secondary)}
.mono{font-family:'JetBrains Mono',monospace}
.num{text-align:right;font-variant-numeric:tabular-nums}
.muted{color:var(--text-light)}
.status{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.02em;text-transform:capitalize;white-space:nowrap}
.status::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
/* En la cabecera del detalle, el estado es una de las dos cosas que se miran al
entrar (la otra es el precio): se pinta a tamaño de titular, no de etiqueta. */
.dm-estado-cab .status{font-size:1rem;padding:.42rem 1rem;gap:.5rem}
.dm-estado-cab .status::before{width:10px;height:10px}
.dm-estado-cab .val-badge{font-size:.78rem}
.st-borrador{background:#EEF0F3;color:#4E5766}
.st-enviada{background:var(--info-soft);color:var(--info-ink)}
.st-descartada{background:#FBE9E7;color:#9A2F25}
.st-en_negociacion{background:#FFF1DC;color:#855000}
.st-aceptada{background:#E3F4EC;color:#11653F}
.st-rechazada{background:#FBE9E7;color:#9A2F25}
.st-caducada{background:#F3F4F6;color:var(--faint)}
/* Botón de estado (listado): pill coloreada que abre un popup para cambiarlo */
.status-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.24rem .65rem;border:none;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.02em;cursor:pointer;white-space:nowrap;font-family:inherit;transition:box-shadow .12s,filter .12s}
.status-btn::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.status-btn .caret{opacity:.65;font-size:.9em;margin-left:-.1rem}
.status-btn:hover{filter:brightness(.97);box-shadow:0 0 0 2px rgba(17,24,39,.06)}
.estado-pop{position:fixed;z-index:1000;background:#fff;border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:.35rem;display:flex;flex-direction:column;gap:.25rem;min-width:190px}
.estado-pop .pop-tit{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-light);padding:.15rem .5rem .3rem}
.estado-opt{display:flex;align-items:center;gap:.45rem;padding:.42rem .6rem;border:none;border-radius:var(--radius-sm);font-size:.78rem;font-weight:700;cursor:pointer;text-align:left;font-family:inherit;width:100%}
.estado-opt::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto}
.estado-opt:hover{filter:brightness(.95)}
.estado-opt.is-current{outline:2px solid currentColor;outline-offset:-2px}
/* Cálculo de oferta en segundo plano: avisos arriba a la derecha ("calculando"
y errores); el de "oferta calculada" se muestra centrado y más grande. */
@keyframes calc-spin{to{transform:rotate(360deg)}}
#calc-toasts{position:fixed;top:1rem;right:1rem;z-index:1500;display:flex;flex-direction:column;gap:.6rem;max-width:380px}
.calc-toast{display:flex;align-items:center;gap:.75rem;background:var(--bg-primary);border:1px solid var(--border-strong);border-left:4px solid var(--color-coral);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:.9rem 1.15rem;font-size:.95rem;color:var(--text-primary);animation:calc-in .2s ease-out}
@keyframes calc-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.calc-toast .ct-spin{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:3px solid var(--border-color);border-top-color:var(--color-coral);animation:calc-spin .8s linear infinite}
/* Rueda pequeña en línea, para avisos junto a un botón ("Leyendo…",
"Consultando SIPS…"): dice que la herramienta está haciendo algo. */
.hint-spin{display:inline-block;vertical-align:-3px;width:14px;height:14px;margin-right:.4rem;border-radius:50%;border:2px solid var(--border-color);border-top-color:var(--color-coral);animation:calc-spin .8s linear infinite}
.hint.is-busy{color:var(--text-primary);font-weight:600}
/* Facturación anual estimada de una condición (modal). Números centrados con
cabecera centrada; solo la primera columna (periodo / concepto) a la izquierda. */
.fact-bloque{margin-bottom:1.1rem;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-primary)}
.fact-cab{display:flex;align-items:center;gap:.75rem;padding:.6rem .9rem;background:var(--brand-soft);color:var(--brand-ink);border-bottom:1px solid var(--line)}
.fact-cab-t{font-weight:600;font-size:.92rem;letter-spacing:.2px}
.fact-cab-n{font-size:.76rem;color:var(--text-light);font-weight:400}
.fact-cab-i{margin-left:auto;font-weight:600;font-size:1rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.fact-wrap{overflow-x:auto}
.fact-tabla{min-width:820px}
.fact-tabla th:first-child,.fact-tabla td:first-child{text-align:left;width:22%;min-width:150px}
.fact-tabla th:not(:first-child),.fact-tabla td:not(:first-child){width:11%;min-width:92px}
.fact-tabla tr:last-child td,.fact-resumen tr:last-child td{border-bottom:none}
.fact-tabla td,.fact-resumen td{font-variant-numeric:tabular-nums;white-space:nowrap}
.fact-tabla tr.fact-sub td,.fact-resumen tr.fact-sub td{font-weight:600;background:var(--bg-secondary)}
.fact-resumen{width:100%}
.fact-resumen td:first-child{text-align:left;width:auto}
.fact-resumen th:not(:first-child),.fact-resumen td:not(:first-child){text-align:center;width:20%;min-width:140px}
.fact-resumen th:first-child{text-align:left}
.fact-resumen .fact-total td{font-weight:600;color:var(--brand-ink);font-size:.95rem;border-top:2px solid var(--line)}
.calc-toast .ct-ico{flex:0 0 auto;width:30px;height:30px;border-radius:50%;color:#fff;font-weight:800;font-size:1.05rem;display:flex;align-items:center;justify-content:center}
.calc-toast .ct-msg{flex:1 1 auto;line-height:1.35}
.calc-toast .ct-sub{font-size:.8rem;color:var(--text-light)}
.calc-toast .ct-x{flex:0 0 auto;border:none;background:transparent;color:var(--text-light);font-size:1.25rem;line-height:1;cursor:pointer;padding:0 .15rem}
.calc-toast.err{border-left-color:var(--error-color)}
.calc-toast.err .ct-ico{background:var(--error-color)}
/* "Oferta calculada": centrado en la pantalla y más grande/prominente */
.calc-toast.done{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
max-width:460px;width:calc(100% - 2.5rem);gap:1rem;padding:1.6rem 1.9rem;font-size:1.1rem;
border-left-width:5px;border-left-color:var(--success-color);box-shadow:var(--shadow-xl);
cursor:pointer;animation:calc-pop-center .3s ease-out}
@keyframes calc-pop-center{0%{opacity:0;transform:translate(-50%,-50%) scale(.9)}60%{transform:translate(-50%,-50%) scale(1.02)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.calc-toast.done:hover{background:#f0fdf4}
.calc-toast.done .ct-ico{background:var(--success-color);width:40px;height:40px;font-size:1.35rem}
/* Combobox buscable (cliente existente en nueva oferta) */
.combo{position:relative}
.combo-list{position:absolute;z-index:60;top:calc(100% + 4px);left:0;right:0;max-height:260px;overflow-y:auto;background:#fff;border:1px solid var(--border-strong);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:.25rem}
.combo-opt{display:block;width:100%;text-align:left;border:none;background:transparent;padding:.5rem .6rem;border-radius:var(--radius-sm);font-size:.9rem;cursor:pointer;font-family:inherit;color:var(--text-primary)}
.combo-opt:hover{background:var(--bg-tertiary)}
.combo-empty{padding:.5rem .6rem;color:var(--text-light);font-size:.85rem}
.val-badge{display:inline-block;font-size:.62rem;font-weight:700;padding:.05rem .45rem;border-radius:999px;text-transform:uppercase;letter-spacing:.3px;vertical-align:middle;white-space:nowrap}
.val-caducada{background:#fee2e2;color:#991b1b}
.val-pronto{background:#fef3c7;color:#92400e}
/* Scoring (credit check) del cliente: etiqueta de estado y aviso en la ficha. */
.sc-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;letter-spacing:.02em;border-radius:999px;padding:.22rem .6rem;white-space:nowrap;vertical-align:middle}
.sc-badge::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.sc-aprobado{background:#E3F4EC;color:#11653F}
.sc-revision{background:#FFF1DC;color:#855000}
.sc-denegado{background:#FBE9E7;color:#9A2F25}
.sc-pendiente{background:var(--info-soft);color:var(--info-ink)}
.sc-error,.sc-omitido{background:#EEF0F3;color:#4E5766}
.sc-aviso{border-left:3px solid currentColor;padding:.55rem .8rem;border-radius:0 9px 9px 0}
.sc-aviso-denegado{background:#FBE9E7;color:#9A2F25}
.sc-aviso-revision{background:#FFF1DC;color:#855000}
.sc-aviso-error{background:#EEF0F3;color:#4E5766}
/* Aviso fijo de que el scoring es orientativo: discreto, en la misma tinta
secundaria que las notas, con un icono de información delante. */
.sc-disclaimer{display:flex;align-items:baseline;gap:.4rem;color:var(--muted)}
.sc-disclaimer-ico{color:var(--info);font-size:.95em;flex:0 0 auto}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-size:.82rem;font-weight:600;color:var(--text-primary)}
.field .hint{font-size:.74rem;color:var(--text-light);font-weight:400;margin-left:.35rem}
.field input,.field select,.field textarea{padding:.6rem .7rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary);transition:border .15s,box-shadow .15s;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(238,90,31,.14)}
.field .suffix-wrap{position:relative}
.field .suffix{position:absolute;right:.7rem;top:50%;transform:translateY(-50%);color:var(--text-light);font-size:.82rem;pointer-events:none}
.field .suffix-wrap input{padding-right:4.2rem}
/* Margen: deslizador entre el mínimo y el máximo autorizados. Plano, sin
sombras: la pista es una línea y el relleno marca lo recorrido. */
.margen-rango{margin-top:.75rem}
.margen-rango[hidden]{display:none}
.margen-rango .mr-pista{position:relative}
.margen-rango input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:18px;
background:transparent;cursor:pointer}
.margen-rango input[type=range]:disabled{cursor:not-allowed;opacity:.5}
.margen-rango input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;
background:linear-gradient(to right,var(--brand) 0 var(--mr-pct,0%),var(--border-color) var(--mr-pct,0%) 100%)}
.margen-rango input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;
margin-top:-6px;border-radius:50%;background:#fff;border:2px solid var(--brand)}
.margen-rango input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--border-color)}
.margen-rango input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--brand)}
.margen-rango input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;
border:2px solid var(--brand)}
/* Marca del margen propuesto por pricing, alineada con el recorrido del tirador
(que va desplazado media anchura de tirador en cada extremo). */
.margen-rango .mr-prop{position:absolute;top:4px;width:2px;height:10px;border-radius:1px;background:var(--faint);
left:calc(8px + (100% - 16px) * var(--mr-prop,0));transform:translateX(-1px);pointer-events:none}
.margen-rango .mr-ejes{display:flex;justify-content:space-between;margin-top:.1rem;font-size:.72rem;
color:var(--text-light);font-variant-numeric:tabular-nums}
/* Margen por tarifa: una tarjeta por tarifa con su rango, su campo y su
deslizador. El rango autorizado depende de la tarifa, así que el margen se
elige tarifa a tarifa y no puede ser un solo campo de la rejilla. */
.margen-bloque{margin-top:1.1rem}
.margen-bloque-head{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;margin-bottom:.6rem}
.margen-bloque-tit{font-size:.82rem;font-weight:600;color:var(--text-primary)}
.margen-bloque-head .hint{font-size:.76rem;color:var(--text-light)}
.margen-tarifas{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.85rem}
.margen-card{border:1px solid var(--border-color);border-radius:var(--radius);padding:.7rem;
background:var(--bg-secondary)}
/* La tarifa va a la altura del campo (misma fila), no en una línea propia: la
tarjeta ocupa bastante menos y el margen se lee junto a su tarifa. */
.margen-card-head{display:flex;gap:.55rem;align-items:center}
.margen-card-head .field{flex:1 1 auto;min-width:0}
.margen-card .tarifa-badge{flex:0 0 auto;font-size:.82rem;padding:.25rem .6rem}
.margen-card .field{margin:0}
.margen-card input.margen-in{width:100%;padding:.45rem .7rem;font-variant-numeric:tabular-nums}
/* Aviso de la tarjeta (sin consumo, sin rango, margen fijado por pricing).
Cuando hay deslizador va oculto: el rango ya lo dicen sus extremos. */
.margen-card>.hint{display:block;margin:.45rem 0 0;font-size:.74rem;color:var(--text-light);
font-variant-numeric:tabular-nums}
.margen-card>.hint[hidden]{display:none}
.margen-card .margen-rango{margin-top:.45rem}
.form-actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.5rem;flex-wrap:wrap}
.form-section-title{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
padding-left:.6rem;border-left:3px solid var(--brand);margin:1.75rem 0 1rem}
/* La aclaración del título no se pega al texto ni se pone en mayúsculas: es una
frase, no un rótulo (y el uppercase heredado la haría ilegible). */
.form-section-title .hint{display:inline-block;margin-left:.55rem;text-transform:none;
letter-spacing:0;font-weight:500;font-size:.76rem;color:var(--text-light)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{border:1px solid var(--border-strong);background:#fff;border-radius:999px;padding:.45rem .9rem;font-weight:600;font-size:.85rem;cursor:pointer;transition:all .12s;user-select:none;color:var(--text-secondary)}
.chip:hover{border-color:var(--color-navy)}
.chip.active{background:var(--color-navy);color:#fff;border-color:var(--color-navy)}
.chip.coral.active{background:var(--brand);border-color:var(--brand);color:#fff}
.seg{display:inline-flex;background:var(--bg-primary);border:1px solid var(--line);border-radius:9px;padding:3px}
.seg button{border:none;background:transparent;padding:.35rem .7rem;border-radius:6px;font-weight:500;font-size:.85rem;color:var(--muted);cursor:pointer}
.seg button.active,.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
/* Filas dinámicas (fechas, duraciones, SSAA, tarifas) */
.dyn-row{display:flex;gap:.5rem;margin-bottom:.5rem;align-items:center}
.dyn-row input{flex:1}
.btn-x{border:1px solid var(--border-strong);background:#fff;color:var(--text-light);border-radius:var(--radius-sm);width:34px;height:34px;flex:0 0 auto;cursor:pointer;font-size:1rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.btn-x:hover{border-color:#fca5a5;color:var(--error-color);background:#fef2f2}
.add-line{margin-top:.25rem}
/* Editor de tarifas como tarjetas fluidas (responsive, sin anchos fijos) */
.tarifas-list{display:flex;flex-direction:column;gap:.75rem}
.tarifa-card{border:1px solid var(--border-color);border-radius:var(--radius);padding:1rem;background:var(--bg-secondary)}
.tarifa-card-head{display:flex;gap:.9rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:.85rem}
.tarifa-card-head .field{flex:1 1 160px;min-width:0}
.tarifa-card-head .tarifa-del{margin-bottom:.1rem}
/* Consumo por tarifa seleccionada (bajo los chips de tarifa) */
.tarifas-consumo{display:flex;flex-direction:column;gap:.85rem;margin-top:.85rem}
.tarifa-badge{flex:0 0 auto;align-self:center;font-weight:600;color:#fff;background:var(--brand);border-radius:999px;padding:.4rem .9rem;font-size:.9rem;letter-spacing:.02em}
.tarifa-periodos-label{font-size:.72rem;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem}
.tarifa-periodos{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:.6rem}
.tarifa-periodos .field label{font-size:.72rem;color:var(--text-light);font-weight:600}
/* Término de potencia del formulario de oferta: tres filas por tarifa —precio
ATR (regulado, no editable), incremento que teclea el comercial y precio
final, que es el que se oferta—. Reutiliza la matriz del desglose para que
las cifras se lean igual en el formulario y en el detalle. */
.potencia-inc{display:flex;flex-direction:column;gap:.85rem;margin-top:.2rem}
.pot-card{border:1px solid var(--border-color);border-radius:var(--radius);padding:1rem;background:var(--bg-secondary)}
.pot-card-head{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap;margin-bottom:.5rem}
.pot-card-head .hint{font-size:.74rem;color:var(--text-light)}
table.res.matriz-pot{table-layout:fixed;width:100%;font-size:.8rem;margin-top:0}
table.res.matriz-pot th,table.res.matriz-pot td{padding:.42rem .35rem}
table.res.matriz-pot thead th{font-size:.76rem}
table.res.matriz-pot col.c-name{width:32%}
table.res.matriz-pot col.c-per{width:auto}
table.res.matriz-pot tbody td.comp-name{color:var(--text-secondary);font-weight:600}
table.res.matriz-pot tr.pte-row td{font-size:.86rem}
table.res.matriz-pot tr.pot-inc-row td{padding:.28rem .25rem}
table.res.matriz-pot input.pot-in{width:100%;min-width:0;text-align:center;padding:.32rem .2rem;
border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:#fff;
font-size:.82rem;font-variant-numeric:tabular-nums;color:var(--text-primary)}
table.res.matriz-pot input.pot-in:focus{outline:none;border-color:var(--brand);
box-shadow:0 0 0 3px var(--brand-soft)}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1.25rem}
.filters input.search{padding:.5rem .7rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:#fff;min-width:240px}
.tablabel{font-size:.72rem;font-weight:700;color:var(--text-light)}
.filtro-sel{padding:.45rem .6rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:#fff;color:var(--text-primary);font-size:.85rem}
.row-link{color:var(--color-coral-dark);text-decoration:none}
.row-link:hover{text-decoration:underline}
/* Segunda línea de una celda (CIF bajo el cliente, modo bajo el nombre): mete
dos datos en una columna en vez de gastar dos. */
.fila-sub{display:block;font-size:.72rem;font-weight:600;color:var(--text-light);margin-top:.12rem}
.fila-fecha{white-space:nowrap}
/* Acciones de fila con icono: el texto de los botones ocupaba media tabla. */
.fila-acc{display:flex;gap:.3rem;align-items:center}
.icono-btn{width:1.75rem;height:1.75rem;flex:none;display:inline-flex;align-items:center;justify-content:center;
padding:0;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-primary);
color:var(--text-secondary);font-size:.9rem;line-height:1;cursor:pointer;font-family:inherit;
transition:background .12s,border-color .12s,color .12s}
.icono-btn:hover{background:var(--bg-secondary);border-color:var(--border-strong);color:var(--color-coral-dark)}
.icono-btn:disabled{opacity:.5;cursor:default}
/* Listado de ofertas: la tabla NUNCA provoca scroll horizontal. Layout fijo con
anchos en porcentaje, texto que parte por palabras y fechas que no se rompen.
Solo de 769px arriba: por debajo, `.data.etiquetas` la convierte en tarjetas y
estas reglas estorbarían. */
@media (min-width:769px){
#tabla table.data.etiquetas{table-layout:fixed;width:100%;max-width:100%}
#tabla table.data.etiquetas th,#tabla table.data.etiquetas>tbody>tr>td{
white-space:normal;overflow-wrap:break-word;word-break:normal;vertical-align:middle;
padding:.7rem .55rem}
#tabla table.data.etiquetas thead th:nth-child(1){width:16%}
#tabla table.data.etiquetas thead th:nth-child(2){width:20%}
#tabla table.data.etiquetas thead th:nth-child(3){width:17%}
/* Los códigos son monoespaciados (anchos) y no deben partirse por el guion. */
#tabla table.data.etiquetas>tbody>tr>td .mono{white-space:nowrap}
#tabla .row-link.mono{font-size:.76rem}
#tabla .cod-oferta{font-size:.66rem}
#tabla table.data.etiquetas thead th:nth-child(4){width:16%}
#tabla table.data.etiquetas thead th:nth-child(5){width:11%}
#tabla table.data.etiquetas thead th:nth-child(6){width:10%}
#tabla table.data.etiquetas thead th:nth-child(7){width:10%}
/* La píldora de estado es un botón con nowrap: se ajusta para que quepa en su
columna sin desbordarla. */
#tabla .status-btn{font-size:.68rem;padding:.22rem .5rem;gap:.3rem;border-radius:12px;
white-space:normal;text-align:left;max-width:100%}
#tabla .status{font-size:.68rem;white-space:normal}
/* El aviso de caducidad va en su propia línea, no pegado a la fecha. */
#tabla .val-badge{display:block;width:fit-content;margin-top:.25rem;font-size:.58rem;padding:.05rem .4rem}
}
.user-link{font-size:.7rem;color:var(--color-coral-dark);text-decoration:none;margin-top:.2rem;display:inline-block}
.user-link:hover{text-decoration:underline}
.pill-list{display:flex;gap:.3rem;flex-wrap:wrap}
.pill{background:var(--bg-tertiary);color:var(--text-secondary);padding:.1rem .5rem;border-radius:999px;font-size:.72rem;font-weight:600}
.empty{text-align:center;padding:3.5rem 1rem;color:var(--text-light)}
.empty .e-icon{font-size:2.5rem;margin-bottom:.5rem}
.empty h3{color:var(--text-secondary);font-weight:700;margin-bottom:.3rem}
.alert{padding:.7rem 1rem;border-radius:9px;border:0;font-size:.9rem;margin-bottom:1.25rem}
.alert-info{background:var(--info-soft);color:var(--info-ink)}
.alert-warning{background:#FFF1DC;color:#855000}
.alert-success{background:#E3F4EC;color:#11653F}
.alert-error{background:#FBE9E7;color:#9A2F25}
/* Lectura destacada (conclusion de un bloque), como el 'insight' del mockup. */
.insight{margin:1.1rem 0 0;padding:.75rem 1rem;border-radius:10px;background:var(--brand-soft);color:#5A2A12;font-size:.95rem}
.insight b{color:var(--brand-ink)}
/* Aviso flotante ("Guardado", errores…). OCULTO = fuera de la pantalla de
verdad: con solo translateY(120%) no se iba del todo (está anclado a 1,5rem
del borde) y asomaba una franja negra vacía por abajo en todas las pantallas.
Se oculta con visibility/opacity; la visibility espera a que acabe el
desplazamiento para no cortar la animación de salida. */
#toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(120%);background:var(--color-navy-dark);color:#fff;padding:.8rem 1.3rem;border-radius:var(--radius);box-shadow:var(--shadow-xl);z-index:9999;font-size:.9rem;font-weight:500;transition:transform .3s,opacity .3s,visibility 0s .3s;max-width:90vw;opacity:0;visibility:hidden;pointer-events:none}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible;transition:transform .3s,opacity .3s,visibility 0s}
#toast.ok{background:var(--success-color)}#toast.err{background:var(--error-color)}
/* Detalle · diseño editorial minimalista: una columna, secciones separadas por
líneas finas, mucho blanco, color contenido (naranja solo como acento). */
.detail-min{max-width:1240px}
/* Detalle de oferta: una sola columna a todo el ancho disponible. El historial
estaba en un lateral fijo de 300px que le quitaba ese ancho a las tablas de
precio, que es donde está la información; ahora baja a una sección. El tope
deja respirar en monitores grandes sin que las tablas queden nadando. */
.detail-min.detail-wide{max-width:1600px}
.dm-main{min-width:0;container-type:inline-size;container-name:dmmain}
.dm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.dm-title{font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-top:.4rem;color:var(--text-primary)}
.dm-sub{color:var(--text-secondary);margin-top:.4rem}
.dm-proceso{margin-top:.4rem;font-size:.82rem}
.dm-proceso a{color:var(--color-coral-dark);text-decoration:none;font-weight:600}
.dm-proceso a:hover{text-decoration:underline}
/* Ajustes de la oferta (borrador): margen / GdOs / ATR / perfilado */
.aj-flags{display:flex;flex-direction:column;gap:.5rem;margin:.9rem 0 1rem}
.aj-flag{display:flex;align-items:center;gap:.5rem;font-size:.88rem}
.aj-tarifas{display:flex;flex-direction:column;gap:1rem}
.aj-tarifa{border:1px solid var(--border-color);border-radius:var(--radius);padding:.9rem 1rem;background:var(--bg-primary)}
.aj-tar-head{font-weight:800;color:var(--color-navy);margin-bottom:.6rem}
.aj-margen{display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;font-weight:600;max-width:300px}
.aj-margen input{width:8rem;padding:.35rem .5rem;border:1px solid var(--border-strong);border-radius:6px;text-align:right;font:inherit}
.aj-hint{font-size:.72rem;font-weight:500;color:var(--text-light)}
.aj-perf{margin-top:.85rem}
.aj-perf-lbl{font-size:.75rem;color:var(--text-secondary);margin-bottom:.4rem}
.aj-deltas{display:flex;flex-wrap:wrap;gap:.5rem}
.aj-delta{display:flex;flex-direction:column;gap:.15rem;font-size:.68rem;color:var(--text-light);font-weight:700}
.aj-delta input{width:4.7rem;padding:.3rem .35rem;border:1px solid var(--border-strong);border-radius:6px;text-align:right;font:inherit;font-weight:400}
.aj-pmp{margin-top:.55rem;font-size:.78rem;font-weight:700;color:var(--text-light)}
.aj-pmp.aj-ok{color:#16a34a}
.aj-pmp.aj-bad{color:var(--error-color)}
.dm-section{border-top:1px solid var(--border-color);margin-top:2.6rem;padding-top:2.2rem}
.dm-h{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--color-navy);margin-bottom:1.1rem;display:flex;align-items:center;gap:.55rem}
.dm-h::before{content:"";width:.5rem;height:.5rem;background:var(--color-coral);border-radius:2px;flex:none}
.dm-note{color:var(--text-secondary);font-size:.9rem}
/* Precio como declaración grande (número en naranja, sin caja) */
/* Acciones: barra horizontal limpia; en móvil, apiladas a todo el ancho */
.dm-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
/* Botones de acción de la oferta: minimalistas, uniformes, con hover sutil. */
.dm-acciones{display:flex;flex-wrap:wrap;gap:.55rem}
.act-btn{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;font-weight:600;
padding:.55rem .95rem;border-radius:10px;border:1px solid var(--border-strong);background:#fff;
color:var(--text-primary);cursor:pointer;text-decoration:none;transition:all .15s;line-height:1.1}
.act-btn:hover{border-color:var(--color-coral);color:var(--color-coral-dark);
box-shadow:0 3px 10px rgba(226,84,26,.14);transform:translateY(-1px)}
.act-btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.act-primary{background:var(--color-coral);border-color:var(--color-coral);color:#fff}
.act-primary:hover{background:var(--color-coral-dark);border-color:var(--color-coral-dark);color:#fff}
.act-danger{color:var(--error-color);border-color:#f0c4c4}
.act-danger:hover{border-color:var(--error-color);color:var(--error-color);box-shadow:0 3px 10px rgba(200,30,30,.14)}
.dm-note-sm{font-size:.8rem;margin-top:.9rem}
/* Acceso y compartir: plegable para no recargar la pantalla. */
.acc-details{margin-top:1.15rem;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-secondary);padding:0 1rem}
.acc-details>summary{cursor:pointer;font-weight:700;font-size:.86rem;color:var(--color-navy);
padding:.7rem 0;list-style:none;display:flex;align-items:center;gap:.45rem}
.acc-details>summary::-webkit-details-marker{display:none}
.acc-details>summary::after{content:"▾";margin-left:auto;color:var(--text-light);transition:transform .15s}
.acc-details[open]>summary::after{transform:rotate(180deg)}
.acc-details[open]>summary{border-bottom:1px solid var(--border-color)}
.acc-help{font-size:.82rem;line-height:1.5;color:var(--text-secondary);margin:.8rem 0 .2rem}
.acc-body{padding-bottom:1rem}
/* --- Selector de condiciones para el PDF (§8.2) ------------------------------ */
.sel-ov{position:fixed;inset:0;z-index:1000;background:rgba(15,39,64,.45);
display:flex;align-items:center;justify-content:center;padding:1.5rem}
.sel-caja{background:#fff;border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.25);
width:100%;max-width:560px;max-height:85vh;display:flex;flex-direction:column;padding:1.25rem 1.4rem}
.sel-h{font-size:1.05rem;font-weight:800;color:var(--text-primary);margin-bottom:.25rem}
.sel-acc{display:flex;gap:.9rem;margin:.5rem 0 .3rem}
.sel-lista{overflow-y:auto;margin:.4rem -.4rem;padding:0 .4rem;min-height:0}
.sel-item{display:flex;gap:.6rem;align-items:flex-start;padding:.55rem .1rem;
border-bottom:1px solid var(--border-color);cursor:pointer;font-size:.88rem}
.sel-item:last-child{border-bottom:none}
.sel-item:hover{background:var(--bg-secondary)}
.sel-item input{margin-top:.15rem;width:1rem;height:1rem;accent-color:var(--color-coral);flex:none}
.sel-item small{display:block;color:var(--text-light);font-size:.74rem;margin-top:.1rem;
font-variant-numeric:tabular-nums}
.sel-pie{display:flex;align-items:center;gap:.6rem;margin-top:.9rem;padding-top:.9rem;
border-top:1px solid var(--border-color)}
.sel-pie .muted{margin-right:auto;font-size:.8rem}
/* Diálogos cortos (renombrar, confirmar una aceptación). */
.sel-caja-sm{max-width:440px}
.sel-caja-sm .field{margin-top:.9rem}
.conf-detalle{margin-top:.6rem;padding:.7rem .9rem;background:var(--bg-secondary);
border:1px solid var(--border-color);border-radius:var(--radius);font-size:.84rem;
color:var(--text-secondary)}
.conf-detalle ul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.3rem}
.conf-aviso{margin:.6rem 0 0;font-weight:700;color:var(--color-coral-dark);font-size:.82rem}
/* --- Desglose del precio en una capa ----------------------------------------
Se abre pinchando el nombre de la condición: fondo translúcido (.sel-ov) y
caja ancha, porque dentro va una tabla de 8 columnas. */
.dg-caja{max-width:900px}
.dg-h{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.dg-sub{font-size:.8rem;color:var(--text-light);margin-bottom:.2rem}
.dg-x{flex:none;background:none;border:none;font-size:1.5rem;line-height:1;cursor:pointer;
color:var(--text-light);padding:0 .2rem;border-radius:6px;font-family:inherit}
.dg-x:hover{color:var(--error-color);background:#fdeaea}
.dg-body{overflow-y:auto;min-height:0;margin:.6rem -.2rem 0;padding:0 .2rem}
.dg-body .matriz-sub{margin-top:.9rem}
.dg-body .table-wrap{overflow-x:auto}
/* Pestañas de la capa: desglose de PRICING (componentes) y de FORWARD (precio de
mercado mes a mes). Planas, sin caja: la activa se marca con la línea inferior
de marca, que es la misma jerarquía por líneas finas del resto del portal. */
.dg-tabs{display:flex;gap:1.3rem;margin-top:.9rem;border-bottom:1px solid var(--border-color)}
.dg-tab{background:none;border:none;cursor:pointer;font:inherit;font-size:.82rem;font-weight:600;
color:var(--text-light);padding:.45rem .1rem;border-bottom:2px solid transparent;margin-bottom:-1px}
.dg-tab:hover{color:var(--text-secondary)}
.dg-tab.active{color:var(--color-coral-dark);border-bottom-color:var(--color-coral)}
/* Resumen de la curva (nombre, meses, medias) sobre la tabla del forward. */
.dg-fw-specs{margin:.9rem 0 .2rem}
.dg-vacio{margin-top:1rem}
/* Tabla del forward: mes (izquierda), precio (centrado, columna numérica) y
origen (texto, izquierda). La unidad va en la cabecera, nunca en cada celda. */
table.res.matriz-fw col.c-fw-mes{width:22%}
table.res.matriz-fw col.c-fw-precio{width:30%}
table.res.matriz-fw col.c-fw-origen{width:48%}
table.res.matriz-fw tbody td.fw-origen,table.res.matriz-fw thead th:nth-child(3){text-align:left}
table.res.matriz-fw tbody td.fw-origen{color:var(--text-secondary)}
/* --- Menú de acciones de una condición --------------------------------------
Flotante y anclado al botón "⋯": así la columna se queda en el ancho del
icono y el menú no lo recorta el overflow de la tabla. */
.acc-menu-btn{background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;
font-size:1.05rem;line-height:1;padding:.1rem .3rem;color:var(--text-light);font-family:inherit}
.acc-menu-btn:hover{color:var(--color-coral-dark);border-color:var(--border-color);background:#fff}
.acc-pop{position:fixed;z-index:1200;background:#fff;border:1px solid var(--border-color);
border-radius:10px;box-shadow:0 12px 30px rgba(15,39,64,.18);padding:.3rem;
display:flex;flex-direction:column;min-width:190px}
.acc-pop .acc-opt{background:none;border:none;text-align:left;cursor:pointer;font:inherit;
font-size:.84rem;padding:.45rem .6rem;border-radius:6px;color:var(--text-primary);white-space:nowrap}
.acc-pop .acc-opt:hover{background:var(--bg-secondary)}
.acc-pop .acc-opt-ok{color:#15803d;font-weight:700}
/* Aviso dentro de una etiqueta de campo (p. ej. iniciales ya usadas por otro
usuario): mismo sitio y tamaño que la pista, pero se ve que es un aviso. */
.hint-alerta{color:#c2453a;font-weight:700}
/* --- Filas de CONDICIÓN en el detalle de la oferta (§2.3, §5.5) -------------
Cada fila identifica su condición (código, combinación y distintivos) y
muestra los cuatro parámetros con los que se calculó el precio. */
.tabla-condiciones .cond-nom-sub{font-size:.64rem;color:var(--text-secondary);line-height:1.25;
margin-top:.1rem;white-space:normal;overflow-wrap:anywhere}
.tabla-condiciones .cond-nom{font-weight:700;color:var(--text-primary);font-size:.8rem;
display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
/* Condición PREFERENTE (§3.1). Se marca en su propio identificador —fondo
naranja y letra blanca— con la palabra debajo a modo de leyenda. Antes era
una etiqueta al lado del título que se iba a una segunda línea y dejaba esa
fila con el doble de altura que las demás. */
/* Identificador de la condición PREFERENTE: naranja suave con un borde fino.
El bloque naranja macizo de antes pesaba tanto que la fila entera parecía un
aviso, y con tres tarifas la tabla se volvía una pared naranja. */
.tabla-condiciones .cond-nom-btn.es-pref,.tabla-condiciones .cond-nom-txt.es-pref{
background:var(--brand-soft);color:var(--color-coral-dark);border:1px solid #F6D3C2;
border-radius:6px;padding:.08rem .35rem;text-decoration:none}
.tabla-condiciones .cond-nom-btn.es-pref:hover{background:#FBE0D3;border-color:var(--color-coral)}
/* Qué significa el naranja, explicado UNA vez al pie de la tabla en lugar de
repetir la palabra en la fila (que la hacía más alta que las demás). */
.cond-leyenda{display:flex;align-items:center;gap:.4rem;margin:.6rem 0 0;
font-size:.74rem;color:var(--text-light)}
.cond-leyenda-muestra{display:inline-block;flex:none;color:var(--color-coral);font-size:1rem;line-height:1}
/* Combinación de la condición: una columna por dato (inicio, duración, tarifa).
La zona cuelga de la tarifa y solo aparece cuando no es Península. */
.tabla-condiciones .cond-dato{white-space:nowrap}
.tabla-condiciones .cond-zona{display:block;font-size:.62rem;color:var(--text-light);
line-height:1.2;margin-top:.05rem}
.tabla-condiciones .cond-acc{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.25rem}
/* El nombre abre el desglose: se ve pulsable sin gritar (es toda una columna). */
.tabla-condiciones .cond-nom-btn{background:none;border:none;padding:0;margin:0;cursor:pointer;
font:inherit;font-weight:700;color:var(--color-coral-dark);text-align:left;
text-decoration:underline;text-decoration-color:transparent;
text-underline-offset:2px;transition:text-decoration-color .12s}
.tabla-condiciones .cond-nom-btn:hover{text-decoration-color:currentColor}
.tabla-condiciones .cond-nom-txt{font-weight:700}
/* La fila la titula SIEMPRE el CÓDIGO de la condición: monoespaciado (se dicta
por teléfono) y algo más pequeño para que quepa entero sin ensanchar la
columna. `font:inherit` del botón gana a .mono por especificidad, así que hay
que escribirlo aquí. */
.tabla-condiciones .cond-nom-btn.mono,.tabla-condiciones .cond-nom-txt.mono{
font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:-.01em}
.tabla-condiciones .cond-link{background:none;border:none;padding:0;cursor:pointer;
font-size:.7rem;font-weight:700;color:var(--color-coral-dark);text-decoration:none}
.tabla-condiciones .cond-link:hover{text-decoration:underline}
.tabla-condiciones .cond-link:disabled{color:var(--text-light);cursor:default}
.cond-pref,.cond-manual,.cond-acept{font-size:.6rem;font-weight:800;text-transform:uppercase;
letter-spacing:.3px;border-radius:999px;padding:.05rem .4rem;white-space:nowrap}
.cond-pref{background:var(--color-coral);color:#fff}
/* Condición firmada por el cliente (§7.3): verde, distinta de la preferente. */
.cond-acept{background:#15803d;color:#fff}
.tabla-condiciones .cond-link-ok{color:#15803d}
.cond-manual{background:#fff4ec;color:var(--color-coral-dark)}
/* Celdas de parámetro (§5.5), una por columna. Los sí/no se leen por color y
forma: lo que interesa de un vistazo es dónde falta algo. */
.tabla-condiciones .par-txt{color:var(--text-secondary)}
.tabla-condiciones .par-si{color:var(--text-light)}
.tabla-condiciones .par-no{color:var(--error-color);font-weight:700}
/* "sí" que señala algo añadido (el incremento del término de potencia): se ve,
pero no es un error, así que va en el naranja de marca y no en rojo. */
.tabla-condiciones .par-marca{color:var(--color-coral-dark);font-weight:700}
.tabla-condiciones .par-rec{display:block;font-size:.6rem;font-weight:700;color:var(--error-color);
line-height:1.2;margin-top:.05rem}
.cond-perf{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.3px;
border-radius:999px;padding:.05rem .4rem;white-space:nowrap;background:#fff4ec;
color:var(--color-coral-dark)}
/* La columna de identidad (Condición) y la de SSAA son texto: van a la
izquierda; el resto —la combinación, las cifras y las dos marcas— van
centradas, cabecera y dato en el mismo eje.
`table-layout:fixed` hace que los anchos de abajo se respeten al pie de la
letra: sin él, una celda larga (el nombre de una variante) se comía a la
siguiente y el texto se montaba encima. Suman ~99 %, así que no hay scroll
horizontal en una pantalla normal. */
.tabla-condiciones table.data.etiquetas{table-layout:fixed}
/* Columna 1 (Condición): títulos de fila, a la izquierda y en dos líneas si
hace falta. Es la única que parte el texto: así el nombre de una variante
(«excepción -1,00 €/MWh») cae debajo del código en vez de salirse. */
.tabla-condiciones table.data.etiquetas th:nth-child(1),
.tabla-condiciones table.data.etiquetas>tbody>tr>td:nth-child(1){width:11%;text-align:left;
white-space:normal;word-break:normal;overflow-wrap:anywhere}
/* Columnas 2-5 (Inicio, Duración, Tarifa, Zona): la combinación, un dato por
columna. Centradas y sin partir: son códigos cortos que se comparan en vertical. */
.tabla-condiciones table.data.etiquetas th:nth-child(n+2):nth-child(-n+4),
.tabla-condiciones table.data.etiquetas>tbody>tr>td:nth-child(n+2):nth-child(-n+4){width:4.4%;
word-break:keep-all;overflow-wrap:normal}
.tabla-condiciones table.data.etiquetas th:nth-child(5),
.tabla-condiciones table.data.etiquetas>tbody>tr>td:nth-child(5){width:3.4%;
word-break:keep-all;overflow-wrap:normal}
/* Columna 6 (SSAA): texto corto, a la izquierda. */
.tabla-condiciones table.data.etiquetas th:nth-child(6),
.tabla-condiciones table.data.etiquetas>tbody>tr>td:nth-child(6){width:5%;text-align:left;
white-space:normal;word-break:normal;overflow-wrap:break-word}
/* GdOs, ATR y Pot. BOE: sí/no, lo más estrechas posible. */
.tabla-condiciones table.data.etiquetas th:nth-child(10),
.tabla-condiciones table.data.etiquetas>tbody>tr>td:nth-child(10),
.tabla-condiciones table.data.etiquetas th:nth-child(11),
.tabla-condiciones table.data.etiquetas>tbody>tr>td:nth-child(11){width:3%}
.tabla-condiciones table.data.etiquetas th:nth-child(12),
.tabla-condiciones table.data.etiquetas>tbody>tr>td:nth-child(12){width:3.4%}
/* Columnas NUMÉRICAS (SSAA €/MWh, Margen €/MWh, Comisión €/MWh, P1..P6 y
Pond.): TODAS el mismo ancho, según la regla dura de CLAUDE.md, y con el
mínimo para que la cifra de 8 caracteres (€/kWh, 6 decimales) no se parta. */
.tabla-condiciones table.data.etiquetas th:nth-child(7),
.tabla-condiciones table.data.etiquetas>tbody>tr>td:nth-child(7),
.tabla-condiciones table.data.etiquetas th:nth-child(8),
.tabla-condiciones table.data.etiquetas>tbody>tr>td:nth-child(8),
.tabla-condiciones table.data.etiquetas th:nth-child(9),
.tabla-condiciones table.data.etiquetas>tbody>tr>td:nth-child(9),
.tabla-condiciones table.data.etiquetas th:nth-child(n+13):nth-child(-n+19),
.tabla-condiciones table.data.etiquetas>tbody>tr>td:nth-child(n+13):nth-child(-n+19){width:5.3%}
/* Cabeceras: pueden caer en dos líneas, pero SOLO por un espacio («SSAA
€/MWh», «Pot. BOE», «Al cliente»); nunca se parte una palabra por la mitad. */
.tabla-condiciones table.data.etiquetas th{white-space:normal;word-break:keep-all;
overflow-wrap:normal;hyphens:none}
.tabla-condiciones table.data.etiquetas>tbody>tr>td:nth-child(n+2){font-size:.7rem}
.tabla-condiciones table.data.etiquetas th:nth-child(n+2){font-size:.66rem}
/* Columna 20: la marca de PREFERENTE de la tarifa. Estrecha y centrada,
cabecera y control en el mismo eje. Lo presentado al cliente no tiene
columna: la línea se arrastra a su sección. */
.tabla-condiciones table.data.etiquetas th:nth-child(20),
.tabla-condiciones table.data.etiquetas>tbody>tr>td:nth-child(20){width:3.4%;text-align:center}
/* Última columna: acciones. Estrecha, solo el botón de menú. */
.tabla-condiciones table.data.etiquetas th:last-child,
.tabla-condiciones table.data.etiquetas>tbody>tr>td:last-child{width:2.4%;
padding-left:0;padding-right:.15rem;text-align:center}
/* Filas más compactas: el desglose ya no vive dentro de la tabla. */
.tabla-condiciones table.data.etiquetas>tbody>tr>td{padding:.4rem .2rem}
/* Buscador corto y pegado a la izquierda: no necesita todo el ancho, y así el
filtro por tarifa cabe a su lado en la misma línea. */
.tabla-condiciones .filters{margin-bottom:.9rem;gap:.5rem .9rem}
.tabla-condiciones .filters .search{flex:0 1 300px;min-width:180px}
.tabla-condiciones .filters .tabla-filtro{margin:0;gap:.35rem}
.tabla-condiciones .filters .tabla-filtro .chip{padding:.3rem .7rem;font-size:.78rem}
/* --- Grupos de CÁLCULO dentro de la tabla de condiciones (§3.1) -------------
Un cálculo es una versión, y la numeración corre por tarifa: el mismo número
puede existir para dos tarifas y no para la tercera. La cabecera pliega el
grupo y resume qué trae. */
.tabla-condiciones tr.grupo-cab>td{background:var(--bg-tertiary);border-top:1px solid var(--border-strong);
border-bottom:1px solid var(--line);padding:.45rem .6rem !important;white-space:normal}
.tabla-condiciones .grupo-btn{display:flex;align-items:center;gap:.6rem;width:100%;background:none;
border:none;cursor:pointer;font:inherit;text-align:left;padding:0;color:var(--text-primary)}
.tabla-condiciones .grupo-flecha{display:inline-flex;width:1.1rem;height:1.1rem;align-items:center;
justify-content:center;color:var(--color-coral-dark);font-size:.7rem;flex:none;transition:transform .15s}
.tabla-condiciones tr.grupo-cab.cerrado .grupo-flecha{transform:rotate(-90deg)}
.tabla-condiciones .grupo-tit{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.tabla-condiciones .grupo-sub{font-size:.72rem;color:var(--text-secondary);font-weight:400;
text-transform:none;letter-spacing:0}
.tabla-condiciones .grupo-chips{display:flex;gap:.35rem;margin-left:auto;flex-wrap:wrap}
.tabla-condiciones .grupo-chip{font-size:.62rem;font-weight:700;letter-spacing:.2px;border-radius:999px;
padding:.1rem .45rem;background:#fff;border:1px solid var(--line);color:var(--text-secondary);white-space:nowrap}
.tabla-condiciones .grupo-chip.on{background:var(--brand-soft);border-color:#F6D3C2;color:var(--color-coral-dark)}
/* La fila se arrastra a la sección de lo presentado al cliente. */
.tabla-condiciones tr[draggable="true"]{cursor:grab}
.tabla-condiciones tr.arrastrando{opacity:.45}
/* Las dos marcas de la fila: preferente de la tarifa (botón de opción) y
presentada al cliente (casilla). Las dos con el naranja de marca. */
/* --- Marca de PREFERENTE: una estrella que se pulsa -------------------------
Debajo sigue habiendo un botón de opción agrupado por tarifa (marcar uno
desmarca el de su tarifa y ninguna se queda sin él); lo que cambia es que se
ve como una estrella, que se entiende sin leyenda y se distingue a un metro
de la pantalla. El input va oculto pero sigue siendo el que recibe el foco y
el teclado. */
.tabla-condiciones .pref-marca{display:inline-flex;align-items:center;justify-content:center;
width:26px;height:26px;border-radius:8px;cursor:pointer;position:relative;
transition:background .12s}
.tabla-condiciones .pref-marca input{position:absolute;opacity:0;width:100%;height:100%;
margin:0;cursor:pointer}
.tabla-condiciones .pref-ico{font-size:1rem;line-height:1;color:var(--border-strong);
transition:color .12s,transform .12s}
.tabla-condiciones .pref-marca.on .pref-ico{color:var(--color-coral)}
.tabla-condiciones .pref-marca:hover{background:var(--brand-soft)}
.tabla-condiciones .pref-marca:hover .pref-ico{color:var(--color-coral);transform:scale(1.12)}
/* Foco de teclado: el input no se ve, así que el aro se pinta en la estrella. */
.tabla-condiciones .pref-marca:focus-within{background:var(--brand-soft);
box-shadow:0 0 0 2px var(--color-coral)}
/* Sin permiso para editar: la estrella informa, pero no invita a pulsarla. */
.tabla-condiciones .pref-marca:has(input:disabled){cursor:default}
.tabla-condiciones .pref-marca:has(input:disabled):hover{background:none}
.tabla-condiciones .pref-marca:has(input:disabled):hover .pref-ico{color:var(--border-strong);
transform:none}
.tabla-condiciones .pref-marca.on:has(input:disabled):hover .pref-ico{color:var(--color-coral)}
/* La FILA preferente se señala entera con una línea naranja a la izquierda: es
lo que permite encontrarla sin recorrer veinte columnas. */
.tabla-condiciones tr.es-preferente>td:first-child{box-shadow:inset 3px 0 0 var(--color-coral)}
/* Línea que ya se le ha presentado al cliente: fondo cálido, sin más adornos
(no hay nada que marcar: la línea se MUEVE). */
.tabla-condiciones tr.ya-presentada>td{background:#FFFBF8}
/* --- Sección «Presentado al cliente» (§3.1) ---------------------------------
Es la misma tabla que la de los cálculos, agrupada por TARIFA: de una misma
tarifa se le pueden haber presentado varias opciones. Debajo, la cobertura y
si la oferta se puede mandar. */
#presentado.drop,#lista-result.drop{outline:2px dashed var(--color-coral);outline-offset:6px;
border-radius:12px;background:var(--brand-soft)}
.tabla-condiciones tr.arrastrando{opacity:.4}
.tabla-condiciones .grupo-chip.aviso{background:#FDF3F2;border-color:#E3B3AE;color:var(--error-color)}
/* Barra del consumo: los chips de tarifa a la izquierda y la descarga a la
derecha, en la misma línea (en móvil, el botón cae debajo). */
/* --- Menú del estado de la oferta (en la cabecera) --------------------------
Reutiliza el flotante del menú de acciones; solo añade la nota del pie. */
/* Cambio de estado desde la cabecera del detalle: la pastilla es el botón, con
una pista debajo, y el desplegable ofrece cada destino como la pastilla de
color con la que ese estado se pinta en los listados. */
.dm-estado-cab{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem}
.dm-estado-cab .status-btn{font-size:1rem;padding:.42rem .9rem;gap:.5rem}
.dm-estado-cab .status-btn::before{width:10px;height:10px}
.dm-estado-hint{font-size:.7rem;color:var(--text-light);white-space:nowrap}
.estado-pop-cab{min-width:220px;padding:.55rem;gap:.4rem;border-radius:14px}
.estado-pop-cab .pop-tit{padding:.1rem .35rem .15rem}
.estado-pop-cab .estado-opt{width:auto;align-self:flex-start;border-radius:999px;
padding:.45rem .95rem .45rem .8rem;font-size:.84rem;letter-spacing:.02em;
transition:filter .12s,box-shadow .12s}
.estado-pop-cab .estado-opt:hover{filter:brightness(.96);box-shadow:0 0 0 2px rgba(17,24,39,.06)}
.estado-pop-cab .pop-nota{margin:.35rem .25rem 0;font-size:.72rem;color:var(--text-secondary);
line-height:1.35;border-top:1px solid var(--line);padding-top:.5rem;max-width:340px}
/* --- Resumen de una condición (consumo, precios y facturación estimada) -----
Se abre al pinchar el identificador. La primera columna va a la izquierda y
el resto centradas, como el resto de tablas con cifras. */
.rc-tabla input.rc-kw{width:100%;max-width:6.5rem;padding:.25rem .4rem;font:inherit;
font-size:.82rem;text-align:center;border:1px solid var(--border-color);border-radius:6px;
font-variant-numeric:tabular-nums}
.rc-tabla input.rc-kw:focus{outline:none;border-color:var(--color-coral)}
.rc-fact{margin-top:1.1rem;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rc-linea{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
padding:.5rem .9rem;font-size:.86rem;color:var(--text-secondary);
border-bottom:1px solid var(--line)}
.rc-linea b{color:var(--text-primary);font-weight:600;font-variant-numeric:tabular-nums}
.rc-linea.rc-sub{background:var(--bg-secondary)}
.rc-linea.rc-total{background:var(--brand-soft);border-bottom:none}
.rc-linea.rc-total span{color:var(--color-coral-dark);font-weight:600}
.rc-linea.rc-total b{color:var(--color-coral-dark);font-size:1.05rem}
.cons-barra{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:.9rem}
.cons-barra .chips{margin-bottom:0}
.cons-barra .act-btn{margin-left:auto;font-size:.8rem;padding:.42rem .8rem}
@media (max-width:640px){.cons-barra .act-btn{margin-left:0}}
.pres-pie{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1rem;
border-top:1px solid var(--line);padding-top:.9rem}
.pres-aviso{font-size:.8rem;font-weight:600;border-radius:9px;padding:.45rem .7rem;flex:1 1 320px}
.pres-aviso.ok{background:#EAF6F0;color:#0F6B48;border:1px solid #B9E0CD}
.pres-aviso.mal{background:#FDF3F2;color:var(--error-color);border:1px solid #E3B3AE}
.pres-cobertura{font-size:.82rem;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.pres-cobertura b{color:var(--text-primary);font-weight:600}
@media(max-width:760px){.pres-pie{flex-direction:column;align-items:stretch}}
/* --- Formulario de oferta v2 (§4) -------------------------------------------
Fechas de inicio: selector de mes + Añadir, y la lista de meses como chips
con una × para quitarlos (sustituye al rango desde/hasta). */
.fecha-add{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-bottom:.6rem}
.fecha-add input[type="month"]{padding:.45rem .6rem;border:1px solid var(--border-strong);
border-radius:var(--radius-sm);background:#fff}
.chip-fecha{display:inline-flex;align-items:center;gap:.35rem;padding-right:.35rem}
.chip-x{border:none;background:transparent;cursor:pointer;font-size:1rem;line-height:1;
color:var(--text-light);padding:0 .15rem;border-radius:4px}
.chip-x:hover{color:var(--error-color);background:#fdeaea}
/* Parámetros de precio: los dos sí/no (GdOs y ATR). */
.param-flags{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:.9rem}
.param-flags .chk{display:inline-flex;align-items:center;gap:.5rem;font-size:.88rem;
color:var(--text-primary);cursor:pointer}
.param-flags .chk input{width:1rem;height:1rem;accent-color:var(--color-coral);cursor:pointer}
/* Aviso de lo que se hereda al crear otra oferta a partir de una existente. */
.heredado-aviso{margin-bottom:1rem;padding:.75rem .9rem;background:#fff8f3;
border:1px solid #ffd9c2;border-radius:var(--radius);line-height:1.5}
/* Cliente y bróker heredados del proceso (no se piden, §4). */
.heredado{display:flex;flex-wrap:wrap;gap:.9rem 2rem;padding:.85rem 1rem;
background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius);
font-size:.9rem}
.heredado-lbl{display:block;font-size:.66rem;font-weight:700;text-transform:uppercase;
letter-spacing:.4px;color:var(--text-light);margin-bottom:.15rem}
/* Nota de algo pendiente de rellenar (p. ej. el texto de cláusula SSAA). */
.dm-note-falta{color:var(--color-coral-dark)}
/* Información: rejilla de datos, sin caja */
.dm-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.15rem 1.5rem}
.dm-spec{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.dm-spec-label{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-light)}
.dm-spec-val{font-size:.98rem;font-weight:600;color:var(--text-primary);word-break:break-word}
@media (max-width:560px){
.dm-actions{flex-direction:column;align-items:stretch}
.dm-estado{flex-direction:column}
.dm-actions .btn,.dm-estado .acc-select{width:100%}
.dm-acciones{flex-direction:column}
.dm-acciones .act-btn{width:100%;justify-content:center}
}
/* Detalle (rejilla antigua, aún usada por otros componentes) */
.detail-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:1.25rem;align-items:start}
/* Sección de datos a ancho completo (consumo + tabla de precios): sus tarjetas
deben poder encoger para no desbordar la página en pantallas medias. */
.detail-full>*{min-width:0}
/* Detalle: en la vista tabla (escritorio) los encabezados y números de la tabla
de precios van centrados. En la vista apilada (abajo) manda el @media. */
.tabla-condiciones table.data.etiquetas th,.tabla-condiciones table.data.etiquetas>tbody>tr>td{text-align:center}
/* Cabeceras en caso normal (no uppercase) para respetar la grafía "MWh"; tabla
compacta para que las 11 columnas en €/kWh no provoquen scroll horizontal. */
/* Cabeceras: se permiten en 2 líneas (p. ej. "Selling price (€/MWh)") para que
un encabezado largo NO ensanche la columna y fuerce scroll horizontal. */
.tabla-condiciones table.data th{text-transform:none;letter-spacing:0;font-size:.72rem;white-space:normal;line-height:1.15}
/* Padding horizontal ajustado: 12 columnas (con selling price) deben caber en el
ancho de la columna principal (con barra lateral) sin scroll horizontal. */
.tabla-condiciones table.data th,.tabla-condiciones table.data>tbody>tr>td{padding:.45rem .25rem;font-size:.78rem;font-variant-numeric:tabular-nums}
/* BLINDAJE definitivo contra el scroll horizontal: la tabla de resultados se
clava al 100% del ancho disponible (table-layout fijo) y el contenido envuelve,
de modo que NUNCA desborda su contenedor a ningún ancho. Anula el overflow-x
del .table-wrap para que no aparezca barra de scroll. */
/* Tabla horizontal SIEMPRE que quepa: se clava al 100% del ancho disponible
(table-layout fijo) y el contenido de las celdas de valor puede partir, así que
NUNCA desborda ni provoca scroll horizontal. Solo se apila en tarjetas cuando la
columna principal es de verdad estrecha (container query más abajo). */
.tabla-condiciones .table-wrap{overflow-x:visible;max-width:100%}
.tabla-condiciones table.data.etiquetas{table-layout:fixed;width:100%;max-width:100%}
/* Las cabeceras envuelven solo entre palabras (nunca a mitad de palabra: evita
engendros tipo "Ponderad o"); las cabeceras ya son cortas para que quepan. */
.tabla-condiciones table.data th{overflow-wrap:break-word;word-break:normal;hyphens:none}
.tabla-condiciones table.data>tbody>tr>td{overflow-wrap:anywhere;word-break:break-all}
/* Cuando la columna principal (contenedor) es demasiado estrecha para la fila de
resumen (19 columnas), se apila en tarjetas — así se mantiene horizontal siempre
que hay sitio y nunca aparece scroll horizontal.
El umbral es el ancho mínimo con el que las columnas numéricas siguen cabiendo
sin que las cifras de €/kWh (8 caracteres) se monten unas sobre otras: medido,
la tabla aguanta hasta 975px y se rompe en 970, así que por debajo de 980px se
apila en una tarjeta por condición. */
@container dmmain (max-width: 980px){
/* Solo las celdas DIRECTAS de la fila se apilan; no las de la matriz anidada. */
.tabla-condiciones .table-wrap{overflow:visible;border:none;background:transparent}
.tabla-condiciones table.data.etiquetas thead{display:none}
.tabla-condiciones table.data.etiquetas,.tabla-condiciones table.data.etiquetas>tbody,.tabla-condiciones table.data.etiquetas>tbody>tr,.tabla-condiciones table.data.etiquetas>tbody>tr>td{display:block;width:auto}
.tabla-condiciones table.data.etiquetas>tbody>tr{border:1px solid var(--border-color);border-radius:var(--radius);margin:0 0 .8rem;background:var(--bg-primary);box-shadow:var(--shadow-sm);overflow:hidden}
.tabla-condiciones table.data.etiquetas>tbody>tr[data-bloque]{margin-top:1.6rem}
.tabla-condiciones table.data.etiquetas>tbody>tr>td{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;text-align:right;white-space:normal;padding:.55rem .9rem;border:none;border-bottom:1px solid var(--border-color)}
.tabla-condiciones table.data.etiquetas>tbody>tr>td:last-child{border-bottom:none}
.tabla-condiciones table.data.etiquetas>tbody>tr>td::before{content:attr(data-label);font-weight:700;color:var(--color-navy);text-transform:none;letter-spacing:.2px;font-size:.66rem;text-align:left;flex:0 0 42%;align-self:center}
}
/* Permite que las columnas (y sus tablas) encojan en vez de forzar scroll
horizontal de toda la página: los items de grid tienen min-width:auto por
defecto, lo que impedía que la tabla de resultados se contuviera. */
.detail-grid>*,.detail-grid .grid>*{min-width:0}
.spec-list{display:grid;grid-template-columns:1fr 1fr;gap:.1rem}
.spec{padding:.65rem 0;border-bottom:1px solid var(--border-color)}
.spec .s-label{font-size:.72rem;color:var(--text-light);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.spec .s-val{font-size:.96rem;font-weight:600;margin-top:.15rem}
/* Hero de precio: minimalista y plano. Orden: etiqueta, parámetros, precio. */
.result-hero{background:var(--brand);color:#fff;border-radius:var(--radius-lg);padding:1.75rem}
.result-hero .rh-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;opacity:.85;font-weight:600}
.result-hero .rh-sub{opacity:.9;font-size:.9rem;margin-top:.35rem}
.result-hero .rh-value{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;margin-top:.5rem;line-height:1.05}
/* Acciones: botones grandes, a todo el ancho, protagonistas. */
.acciones{display:flex;flex-direction:column;gap:.55rem;margin-top:.85rem}
.acc-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-light)}
.acc-select{padding:.6rem .7rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:#fff;color:var(--text-primary);width:100%}
.btn-block{width:100%;padding:.72rem 1rem;font-size:.92rem}
/* Tabla de resultados por periodo (P1..P6 + ponderado) */
table.res{width:100%;border-collapse:collapse;margin-top:.75rem;font-size:.85rem}
table.res th,table.res td{padding:.55rem .6rem;border-bottom:1px solid var(--border-color);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
/* SIN uppercase (mismo motivo: cabeceras con unidades). */
table.res th{background:var(--bg-secondary);color:var(--color-navy);letter-spacing:.3px;font-size:.68rem;font-weight:700}
table.res td:nth-child(-n+4),table.res th:nth-child(-n+4){text-align:left}
table.res .pond{background:#fff4ec;font-weight:700;color:var(--color-coral-dark)}
table.res .err-cell{color:var(--error-color);font-size:.82rem}
/* Matriz completa de componentes (solo admin). Vive en la capa del desglose
(.dg-body), que se abre pinchando el nombre de la condición. */
/* Desglose del precio · diseño minimalista.
Reglas: (1) tipografía MENOR que la fila de la oferta; (2) los TOTALES son los
únicos puntos con negrita o resaltado — la fila de total (banda coral) y la
columna Pond. (tinte suave); (3) los nombres van en UNA línea, nunca se parten
(etiquetas cortas en app.js + nowrap), así que no hay palabras cortadas. */
/* Jerarquía tipográfica: TOTAL (mayor) > cabeceras y % de consumo (enfatizados)
> componentes (base) > Selling price (contexto atenuado). */
table.res.matriz{font-size:.7rem;margin-top:.55rem}
table.res.matriz th,table.res.matriz td{padding:.34rem .25rem;font-weight:400;border-bottom:1px solid #f1f2f4}
/* Números y cabeceras CENTRADOS; la primera columna (títulos) a la izquierda. */
table.res.matriz tbody td,table.res.matriz thead th{text-align:center}
/* Cabeceras ENFATIZADAS: navy, negrita y con línea inferior marcada. */
table.res.matriz thead th{background:transparent;color:var(--color-navy);font-size:.7rem;font-weight:700;
letter-spacing:.02em;border-bottom:1.5px solid var(--border-strong)}
table.res.matriz tbody td.comp-name,table.res.matriz thead th:first-child{text-align:left}
table.res.matriz tbody td.comp-name{color:var(--text-secondary)}
/* Columna ponderada = total por periodos: resaltada con tinte. */
table.res.matriz .pond{background:#fff8f3;color:inherit}
table.res.matriz thead th.pond{background:#fff4ec}
/* Aire que separa el bloque de componentes del total y del selling. */
table.res.matriz tr.matriz-aire td{padding:0;height:.45rem;border:none;background:none}
/* % de consumo por periodo: ENFATIZADO (es contexto clave para leer el precio). */
table.res.matriz tr.consumo-row td{background:#f7f8fa;color:var(--color-navy);font-size:.7rem;font-weight:600}
table.res.matriz tr.consumo-row td.pond{background:#fff4ec}
/* Selling price: referencia interna, no es un total → atenuado. */
table.res.matriz tr.selling-row td{background:none;color:var(--text-light);font-size:.66rem;font-weight:400}
table.res.matriz tr.selling-row td.pond{background:#fff8f3}
/* TOTAL: el texto MAYOR de la tabla (nunca menor que el detalle) + banda coral. */
table.res.matriz tr.pte-row td{background:#fff4ec;font-size:.78rem;font-weight:700;color:var(--color-coral-dark);
border-top:none;border-bottom:none;padding-top:.45rem;padding-bottom:.45rem}
table.res.matriz tr.pte-row td:first-child{border-radius:6px 0 0 6px}
table.res.matriz tr.pte-row td:last-child{border-radius:0 6px 6px 0}
table.res.matriz tr.pte-row td.pond{background:#ffeee4}
/* La unidad NO debe pasar por uppercase (rompería la literalidad €/MWh → €/MWH). */
.matriz-sub{font-size:.68rem;font-weight:700;letter-spacing:.04em;color:var(--color-navy);margin:.9rem 0 .35rem}
.matriz-nota{font-size:.72rem;color:var(--text-light);margin:.4rem 0 0}
/* El desglose se ajusta al ancho disponible: NUNCA scroll horizontal. Columnas de
ancho fijo (colgroup) y contenido en una línea con elipsis si no cupiera. */
.dg-body table.res.matriz{table-layout:fixed;width:100%;max-width:100%}
.dg-body table.res.matriz th,.dg-body table.res.matriz td{padding:.4rem .2rem;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.res.matriz col.c-name{width:16%}
table.res.matriz col.c-per{width:11.9%}
table.res.matriz col.c-pond{width:12.6%}
/* Jerarquía de tamaños dentro de la capa: TOTAL > cabeceras = % consumo >
componentes > selling. Antes hacía falta el id `.tabla-condiciones` delante para
ganarle a `table.data td` (selector descendiente de la tabla que la envolvía);
en la capa ya no hay tabla alrededor, así que se declara para la propia capa,
con algo más de cuerpo porque hay sitio de sobra. */
.dg-body table.res.matriz th,.dg-body table.res.matriz td{font-size:.74rem}
.dg-body table.res.matriz thead th{font-size:.76rem;font-weight:700;color:var(--color-navy);
text-transform:none;letter-spacing:.02em}
.dg-body table.res.matriz tr.consumo-row td{font-size:.76rem;font-weight:600;color:var(--color-navy)}
.dg-body table.res.matriz tr.pte-row td{font-size:.86rem;font-weight:700}
.dg-body table.res.matriz tr.selling-row td{font-size:.72rem;font-weight:400}
.dg-body table.res.matriz tbody td.comp-name{text-align:left}
.dg-body table.res.matriz thead th:first-child{text-align:left}
/* --- Análisis de margen (pantalla interna) --- */
.back-link{display:inline-block;font-size:.8rem;font-weight:600;color:var(--color-coral-dark);text-decoration:none;margin-bottom:.4rem}
.back-link:hover{text-decoration:underline}
.am-page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.am-card{margin-bottom:1.25rem}
.am-head{margin-bottom:.9rem}
.am-kpis{margin-bottom:1rem}
.am-u{font-size:.62rem;font-weight:600;color:var(--text-light);margin-left:.25rem}
.k-value.pos,.k-foot.pos{color:#16a34a}
.k-value.neg,.k-foot.neg{color:var(--error-color)}
.am-chart{margin-top:.4rem}
.am-tabla-wrap{margin-top:1rem;overflow-x:auto}
/* Tabla de números (ver CLAUDE.md · "Tablas con números"): cabecera y número
CENTRADOS, todas las columnas numéricas con el MISMO ancho y un mínimo legible,
y separación por padding proporcionado (no por columnas sobredimensionadas). */
.am-tabla{width:100%;border-collapse:collapse;font-size:.82rem;table-layout:fixed}
.am-tabla th,.am-tabla td{padding:.45rem .5rem;border-bottom:1px solid var(--border-color);text-align:center;
white-space:nowrap;font-variant-numeric:tabular-nums;text-transform:none}
/* Cabeceras: pueden envolver ENTRE PALABRAS (los números nunca se parten). */
.am-tabla th{background:var(--bg-secondary);color:var(--color-navy);font-size:.66rem;font-weight:700;letter-spacing:.2px;
white-space:normal;overflow-wrap:break-word;word-break:normal;line-height:1.2}
/* Columnas numéricas: mismo ancho para todas, con mínimo para que se lean. */
.am-tabla th:not(:first-child),.am-tabla td:not(:first-child){width:12.6%;min-width:72px}
/* Primera columna (títulos de fila): a la izquierda, con ancho suficiente para
las etiquetas más largas del pie ("Total / ponderado", "Margen total (k€)"). */
.am-tabla th:first-child,.am-tabla td:first-child{text-align:left;font-weight:600;width:24%;min-width:138px}
.am-tabla tbody tr:hover{background:var(--bg-secondary)}
.am-tabla td.pos{color:#16a34a;font-weight:700}
.am-tabla td.neg{color:var(--error-color);font-weight:700}
.am-tabla tfoot .am-tot td{background:#fff4ec;font-weight:700;color:var(--color-coral-dark);border-top:2px solid var(--color-coral)}
.am-tabla tfoot .am-keur td{background:var(--bg-secondary);font-weight:700;color:var(--color-navy)}
.am-tabla tfoot td.pos{color:#16a34a}
.am-tabla tfoot td.neg{color:var(--error-color)}
/* Pie de diálogo con varias salidas: la cancelación a la izquierda. */
.sel-pie-cols{flex-wrap:wrap}
.sel-pie-cols button:first-child{margin-right:auto}
/* Resumen de la consulta a SIPS: qué ha reconocido, por tarifa. */
.sips-res{margin-top:.9rem;padding:.85rem 1rem;border:1px solid var(--border-color);
border-radius:var(--radius);background:var(--bg-secondary)}
.sips-h{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;font-weight:700;
font-size:.9rem;color:var(--color-navy);margin-bottom:.5rem}
.sips-tot{font-size:.78rem;font-weight:600;color:var(--text-secondary)}
/* Duración de la oferta: campo libre en meses (1–999) con los plazos habituales
como atajo al lado. Antes eran tres chips fijos, y eso escondía que ya se
contrataban plazos como 18, 27 o 51 meses. */
.dur-fila{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.dur-in{width:6.5rem;padding:.5rem .7rem;border:1px solid var(--border-strong);
border-radius:var(--radius-sm);background:#fff;font:inherit;font-weight:700;
text-align:center;font-variant-numeric:tabular-nums;color:var(--text-primary)}
.dur-in:focus{outline:none;border-color:var(--color-coral)}
.dur-in.campo-mal{border-color:var(--error-color);background:#fdeaea;color:var(--error-color)}
.dur-uni{font-weight:600;color:var(--text-secondary)}
/* Selector del mes de inicio: el summary{cursor:pointer;font-size:.78rem;font-weight:600;
color:var(--color-coral-dark);list-style:none;width:fit-content}
.cl-det>summary::-webkit-details-marker{display:none}
.cl-det>summary::before{content:"▸ ";font-weight:800}
.cl-det[open]>summary::before{content:"▾ "}
.cl-det>summary:hover{text-decoration:underline}
.cl-texto{margin-top:.5rem;font-size:.8rem;line-height:1.6;color:var(--text-light);
padding-left:.9rem;border-left:2px solid var(--border-color)}
/* §4.2 · CUPS que SIPS no resuelve: se teclea su tarifa y su consumo. */
.sinsips{margin-top:.9rem;padding:1rem 1.1rem;border:1px solid var(--line);border-left:3px solid var(--brand);
border-radius:var(--radius-lg);background:var(--bg-primary)}
.sinsips-top{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.85rem}
.sinsips-ico{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--brand-soft);
color:var(--brand-ink);font-weight:600;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.sinsips-h{font-weight:600;color:var(--ink);font-size:.92rem}
.sinsips-sub{margin:.15rem 0 0;font-size:.8rem;color:var(--muted);line-height:1.45}
.sinsips-sub b{color:var(--ink);font-weight:600}
/* Rejilla: CUPS a la izquierda; tarifa, zona y los seis periodos centrados
bajo su cabecera, los periodos con el mismo ancho entre sí. */
.sinsips-tabla{border:1px solid var(--line);border-radius:var(--radius-sm);overflow-x:auto}
.sinsips-fila{display:grid;align-items:center;gap:.4rem;padding:.45rem .6rem;min-width:860px;
grid-template-columns:minmax(190px,1.4fr) 104px 128px repeat(6,minmax(72px,1fr))}
.sinsips-fila+.sinsips-fila{border-top:1px solid var(--line)}
.sinsips-cab{background:var(--canvas);padding-top:.4rem;padding-bottom:.4rem}
.sinsips-cab span{font-size:.72rem;font-weight:600;color:var(--muted);text-align:center}
.sinsips-cab span:first-child{text-align:left}
.sinsips-cups{font-size:.78rem;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.sinsips-sel,.sinsips-per{height:34px;width:100%;min-width:0;border:1px solid var(--line);
border-radius:var(--radius-sm);background-color:var(--bg-primary);color:var(--ink);
font:inherit;font-size:.82rem;transition:border-color .15s,box-shadow .15s}
.sinsips-sel{-webkit-appearance:none;appearance:none;padding:0 1.7rem 0 .6rem;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235E6878' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right .6rem center}
.sinsips-per{padding:0 .4rem;text-align:center;font-variant-numeric:tabular-nums}
.sinsips-per::placeholder{color:var(--faint)}
.sinsips-sel:hover,.sinsips-per:hover:not(:disabled){border-color:var(--border-strong)}
.sinsips-sel:focus,.sinsips-per:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(238,90,31,.14)}
.sinsips-per:disabled{background:var(--canvas);border-color:transparent;cursor:not-allowed}
.sinsips-per:disabled::placeholder{color:transparent}
/* Tarifa sin elegir: el selector llama la atención, porque sin ella no se cotiza. */
.sinsips-fila.sin-tarifa .sinsips-tar{border-color:var(--brand);background-color:var(--brand-soft);color:var(--brand-ink)}
.sinsips-pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1rem;margin-top:.6rem;
font-size:.76rem;color:var(--muted)}
.sinsips-pie b{color:var(--ink);font-weight:600}
/* Cláusulas de servicios de ajuste (§5.1), en la pantalla de Pricing. */
.ssaa-mod{padding:.9rem 0;border-top:1px solid var(--border-color)}
.ssaa-mod:first-of-type{border-top:none;padding-top:.2rem}
.ssaa-h{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem}
.ssaa-nom{flex:0 1 240px;font-weight:700;padding:.35rem .5rem;border:1px solid var(--border-color);
border-radius:6px;font-family:inherit;font-size:.9rem;background:var(--bg-primary)}
.ssaa-cod{font-size:.72rem;color:var(--text-light);font-weight:700}
.ssaa-falta{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.3px;
background:#fff4ec;color:var(--color-coral-dark);border-radius:999px;padding:.1rem .45rem}
.ssaa-mod textarea{font-size:.84rem;line-height:1.45}
/* Marcador sustituible dentro de un texto explicativo. */
code.marca{font-family:'JetBrains Mono',monospace;font-size:.82em;background:var(--bg-tertiary);
border-radius:4px;padding:.05rem .3rem}
/* Informe de ponderación mensual (§4.2), en la pantalla de Pricing. */
.pm-estado{margin-top:1rem;padding:.6rem .85rem;border-radius:var(--radius);font-size:.84rem;
border:1px solid var(--border-color);background:var(--bg-secondary);color:var(--text-secondary)}
.pm-estado.on{border-color:#bbf7d0;background:#f0fdf4;color:#15803d}
.am-tabla .pm-sub{display:block;font-size:.72rem;font-weight:600;color:var(--text-light);
margin-top:.12rem;white-space:normal;overflow-wrap:anywhere}
.pm-resumen{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;margin-top:1rem}
.pm-resumen .pr-lbl{display:block;font-size:.66rem;font-weight:700;text-transform:uppercase;
letter-spacing:.4px;color:var(--text-light);margin-bottom:.2rem}
.pm-resumen .pr-val{font-size:.98rem;font-weight:700;font-variant-numeric:tabular-nums;
color:var(--text-primary)}
/* Pricing: una tarjeta editable por tarifa, todas a la vista (sin selector) */
.pricing-grid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));align-items:start}
.pricing-card{display:flex;flex-direction:column;gap:.9rem}
.pricing-card-head{display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem}
.tarifa-badge{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.95rem;color:var(--color-coral-dark);
background:#fff1ea;border:1px solid #ffe0d0;padding:.3rem .7rem;border-radius:999px}
.pricing-card .pc-campania{max-width:150px}
.pricing-card .field label{font-size:.74rem;color:var(--text-secondary)}
.pc-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.pc-grid .field,.pc-grid .field .suffix-wrap,.pc-grid .field input,.pc-grid .field select{min-width:0}
@media (max-width:520px){.pc-grid{grid-template-columns:1fr}}
.pc-manual{border-top:1px dashed var(--border-color);padding-top:.75rem}
.pc-manual-lbl{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--color-coral-dark);margin-bottom:.5rem}
.pc-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.35rem}
.pc-msg{font-size:.8rem;font-weight:600}
.pc-msg.ok{color:var(--success-color)}
.pc-msg.err{color:var(--error-color)}
/* Consumo anual: tabla por periodo (MWh) + gráfica de barras mensual */
/* Scroll propio: no se ve afectado por el override móvil de .table-wrap. */
.cons-scroll{overflow-x:auto;border:1px solid var(--border-color);border-radius:var(--radius);background:var(--bg-primary);min-width:0}
.consumo-tabla{width:100%;border-collapse:collapse;font-size:.85rem}
.consumo-tabla th,.consumo-tabla td{padding:.5rem .6rem;border-bottom:1px solid var(--border-color);text-align:center;
white-space:nowrap;font-variant-numeric:tabular-nums}
.consumo-tabla tr:last-child td{border-bottom:none}
.consumo-tabla th{background:var(--bg-secondary);color:var(--color-navy);text-transform:uppercase;letter-spacing:.3px;font-size:.68rem;font-weight:700}
.consumo-tabla .pond{background:#fff4ec;font-weight:700;color:var(--color-coral-dark)}
/* Primera columna: títulos de fila (MWh / % consumo), a la izquierda; el resto
de la tabla son números, centrados (regla dura de CLAUDE.md). */
.consumo-tabla .cons-lbl{text-align:left;font-weight:700;color:var(--text-secondary);
font-size:.72rem;white-space:nowrap}
.consumo-tabla th:first-child{width:1%}
/* El % acompaña al consumo: mismo peso visual, un punto más tenue. */
.consumo-tabla tr.fila-pct td{color:var(--text-light);font-size:.8rem}
.consumo-tabla tr.fila-pct td.pond{color:var(--color-coral-dark)}
.barchart{display:flex;align-items:flex-end;gap:.4rem;height:170px;margin-top:.6rem;padding-top:.5rem}
.barchart .bar{flex:1 1 0;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.barchart .bar-fill{width:100%;max-width:38px;min-height:2px;border-radius:4px 4px 0 0;
background:var(--brand);transition:height .2s}
.barchart .bar:hover .bar-fill{filter:brightness(1.08)}
.barchart .bar-lbl{font-size:.6rem;color:var(--text-light);margin-top:.35rem;font-weight:600}
.barchart .bar-val{font-size:.56rem;font-weight:700;color:var(--color-coral-dark);margin-bottom:.2rem;
font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1}
/* Gráfico de consumo mensual real: puede haber 12, 24 o 36 meses, así que las
barras REPARTEN el ancho disponible pero nunca bajan de 30px; cuando ya no
caben, el contenedor .cons-scroll aporta el scroll horizontal. Con ancho fijo,
doce meses se apelotonaban a la izquierda y dejaban media tarjeta en blanco. */
.barchart-mensual{min-width:min-content;padding:.5rem .6rem}
.barchart-mensual .bar{flex:1 1 30px;min-width:30px}
/* Con pocos meses la columna es ancha: la barra puede crecer un poco más para
que el gráfico no queden doce rayitas perdidas en una tarjeta enorme. */
.barchart-mensual .bar-fill{max-width:54px}
.barchart-mensual .bar-lbl{white-space:nowrap}
/* Tarjeta KPI compacta en la cabecera (p. ej. total de clientes) */
.kpi-head{flex:0 0 auto;border:1px solid var(--border-color);border-radius:var(--radius);background:var(--bg-primary);box-shadow:var(--shadow-sm);padding:.6rem 1.1rem;text-align:right;min-width:130px}
.kpi-head .v{font-size:1.7rem;font-weight:800;color:var(--color-coral-dark);line-height:1}
.kpi-head .l{font-size:.66rem;color:var(--text-light);text-transform:uppercase;letter-spacing:.05em;margin-top:.25rem}
/* En móvil la tabla de consumo se apila (etiqueta + valor), sin scroll lateral. */
@media (max-width:560px){
.cons-scroll{overflow:visible;border:none;background:transparent}
.consumo-tabla thead{display:none}
.consumo-tabla,.consumo-tabla tbody,.consumo-tabla tr,.consumo-tabla td{display:block;width:auto}
.consumo-tabla td{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .2rem;border-bottom:1px solid var(--border-color)}
.consumo-tabla tr td:last-child{border-bottom:none}
.consumo-tabla td::before{content:attr(data-label);font-weight:700;color:var(--color-navy);text-align:left}
}
/* Comentarios */
.coment{padding:.65rem .85rem;border-left:3px solid var(--color-teal);background:var(--bg-secondary);border-radius:var(--radius-sm);margin-bottom:.6rem}
.coment-meta{font-size:.74rem;color:var(--text-light);margin-bottom:.25rem}
/* Panel de comentarios plegable en el listado de ofertas (una fila por oferta) */
.coment-row>td{background:var(--bg-secondary);padding:1rem}
.coment-panel{max-width:640px}
.coment-panel .coment{background:#fff}
.coment-form textarea{width:100%;padding:.6rem .7rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font:inherit;resize:vertical}
/* Historial / timeline de la oferta (offer_events) */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--border-strong)}
.tl-item{position:relative;padding:0 0 .95rem 1.6rem;min-height:1.1rem}
.tl-item:last-child{padding-bottom:0}
/* Pie del detalle a dos columnas: comentarios (lo que se escribe) a la
izquierda e historial (lo que se consulta) a la derecha, a la misma altura.
Por debajo de 900px se apilan, comentarios primero. */
.dm-pie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:0 2.5rem;align-items:start}
/* Las dos columnas conservan el margen y la línea superior de sección: así
empiezan a la MISMA altura y se leen como dos bloques hermanos. */
.dm-pie .dm-pie-col{min-width:0}
.dm-pie .coment-lista{margin-bottom:.85rem;max-height:22rem;overflow-y:auto}
.dm-pie .timeline{max-height:22rem;overflow-y:auto;padding-right:.3rem}
@media (max-width:900px){
.dm-pie{grid-template-columns:1fr;gap:0}
.dm-pie .coment-lista,.dm-pie .timeline{max-height:none;overflow:visible}
}
.tl-dot{position:absolute;left:0;top:.15rem;width:14px;height:14px;border-radius:50%;background:var(--color-teal);border:2px solid var(--bg-primary);box-shadow:0 0 0 1px var(--border-strong)}
.tl-creada .tl-dot{background:var(--success-color)}
.tl-estado .tl-dot{background:var(--color-coral)}
.tl-editada .tl-dot,.tl-recalculada .tl-dot{background:var(--color-gold-dark)}
.tl-comentario .tl-dot{background:var(--text-light)}
.tl-act{font-size:.9rem;font-weight:600;color:var(--text-primary)}
.tl-meta{font-size:.74rem;color:var(--text-light);margin-top:.1rem}
.row-estado{min-width:150px}
/* Login split-screen */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.login-hero{position:relative;overflow:hidden;color:#fff;padding:3.5rem;display:flex;flex-direction:column;justify-content:space-between;
background:radial-gradient(1000px 500px at 85% -10%,rgba(238,90,31,.36),transparent 60%),linear-gradient(135deg,var(--color-navy-dark),var(--color-navy) 60%,var(--color-navy-700))}
.login-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(ellipse at center,#000 25%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 78%)}
.login-hero>*{position:relative;z-index:1}
.login-hero .lh-logo{background:#fff;border-radius:14px;padding:.6rem .9rem;display:inline-flex;align-self:flex-start;box-shadow:var(--shadow-lg)}
.login-hero .lh-logo img{height:44px}
.login-hero h2{font-size:2.1rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;max-width:16ch}
.login-hero p{opacity:.82;max-width:42ch;margin-top:.9rem}
.login-hero .lh-foot{font-size:.8rem;opacity:.6}
.login-blob{position:absolute;width:340px;height:300px;right:-60px;top:38%;background:radial-gradient(circle at 35% 30%,#ffb37a,#ff6b35 45%,#e3551f 80%);border-radius:60% 40% 55% 45%/55% 50% 50% 45%;filter:blur(2px);opacity:.55;animation:float 9s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(8deg)}}
.login-panel{display:flex;align-items:center;justify-content:center;padding:2rem;background:var(--bg-secondary)}
.login-card{width:100%;max-width:400px}
.login-card h1{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.login-card .sub{color:var(--text-secondary);font-size:.92rem;margin:.25rem 0 1.6rem}
.login-card .field{margin-bottom:1rem}
.login-links{margin-top:1rem;text-align:center}
.login-links a{color:var(--color-coral-dark);font-size:.85rem;font-weight:600;text-decoration:none}
.login-links a:hover{text-decoration:underline}
@media (max-width:980px){.login-wrap{grid-template-columns:1fr}.login-hero{display:none}.detail-grid{grid-template-columns:1fr}}
@media (max-width:900px){
.mobilebar{display:flex}
.sidebar{position:fixed;top:0;left:0;height:100vh;transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow-xl)}
.layout.nav-open .sidebar{transform:translateX(0)}
.layout.nav-open .sidebar-ov{display:block}
.spec-list{grid-template-columns:1fr}
}
/* --- Tabla en formato etiqueta (responsive) -------------------------------- */
/* Escritorio: tabla normal. Móvil: cada fila se apila y cada celda muestra su
cabecera como etiqueta (vía data-label). El buscador reutiliza .filters .search. */
.filters .search{flex:1 1 260px;min-width:0}
.data.etiquetas .pond-val{color:var(--color-coral-dark);font-weight:700}
/* Selling price (interno, solo admin): navy y negrita para distinguirlo. */
.data.etiquetas .selling-val{color:var(--color-navy);font-weight:700}
.tabla-condiciones table.data.etiquetas>tbody>tr>td:has(.selling-val),
.tabla-condiciones table.data.etiquetas>tbody>tr>td.selling-val{background:#eef1f5}
.data.etiquetas .err-cell{color:var(--error-color)}
.vacio-row{text-align:center;padding:1.5rem !important;white-space:normal !important}
@media (max-width:768px){
/* La tabla deja de ser tabla: cada fila es un bloque con etiquetas. */
.table-wrap{overflow:visible;border:none;background:transparent}
table.data.etiquetas thead{display:none}
table.data.etiquetas,table.data.etiquetas tbody,table.data.etiquetas tr,table.data.etiquetas td{display:block;width:auto}
table.data.etiquetas tr{border:1px solid var(--border-color);border-radius:var(--radius);margin:0 0 .8rem;
background:var(--bg-primary);box-shadow:var(--shadow-sm);overflow:hidden}
table.data.etiquetas tr.clickable{cursor:pointer}
table.data.etiquetas tr.clickable:active{background:var(--bg-secondary)}
table.data.etiquetas td{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;text-align:right;
white-space:normal;padding:.55rem .9rem;border:none;border-bottom:1px solid var(--border-color)}
table.data.etiquetas tr td:last-child{border-bottom:none}
/* SIN uppercase: el data-label puede llevar unidad ("SSAA (€/MWh)") y saldría
como "€/MWH". Al venir de attr() no se puede envolver en un span, así que la
única forma de respetar la literalidad es no transformar el texto. */
table.data.etiquetas td::before{content:attr(data-label);font-weight:700;color:var(--color-navy);
letter-spacing:.3px;font-size:.64rem;text-align:left;flex:0 0 42%;align-self:center}
/* Celda de acciones (usuarios/roles): etiqueta arriba y botones debajo, que
envuelven en varias filas en lugar de salirse de la tarjeta. */
table.data.etiquetas td.col-acciones{display:block;text-align:left;white-space:normal}
table.data.etiquetas td.col-acciones::before{display:block;flex:none;margin-bottom:.45rem}
table.data.etiquetas td.col-acciones .btn{margin:0 .4rem .4rem 0}
.filters{flex-direction:column;align-items:stretch}
/* El filtro de estado ocupa el ancho y envuelve, sin scroll horizontal. */
.filters .seg{display:flex;flex-wrap:wrap}
}
/* =============================================================================
RBAC · Gestión de usuarios, roles y permisos
========================================================================== */
/* --- Celdas / badges / chips ------------------------------------------------ */
.cell-user{display:flex;align-items:center;gap:.6rem}
.badge{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;padding:.18rem .55rem;border-radius:999px;letter-spacing:.02em}
.badge-on{background:#ecfdf5;color:var(--success-color)}
.badge-off{background:var(--bg-tertiary);color:var(--text-light)}
.badge-count{background:#eef1f5;color:var(--color-navy);min-width:1.6rem;justify-content:center}
.role-chip{display:inline-block;background:#eef1f5;color:var(--color-navy);font-size:.72rem;font-weight:600;padding:.12rem .5rem;border-radius:999px;margin:.1rem 0}
.role-chip--all{background:var(--brand);color:#fff}
.tag-sistema{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;background:var(--bg-tertiary);color:var(--text-light);padding:.05rem .35rem;border-radius:4px;vertical-align:middle}
.col-acciones{white-space:nowrap}
td.num,th.num{text-align:center}
.td-empty{text-align:center;color:var(--text-light);padding:2rem !important;white-space:normal !important}
/* --- Filtros de administración ---------------------------------------------- */
.admin-filtros{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.mini-field{display:flex;flex-direction:column;gap:.25rem}
.mini-field span{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text-light)}
.mini-field select{padding:.5rem .7rem;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:#fff;min-width:160px}
/* --- Cabeceras ordenables --------------------------------------------------- */
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--color-coral)}
th.sortable .sort-ico{opacity:.5;font-size:.7em}
th.sortable.sorted{color:var(--color-coral)}
th.sortable.sorted .sort-ico{opacity:1}
/* --- Paginación ------------------------------------------------------------- */
.pager{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.pager-info{font-size:.82rem;color:var(--text-light)}
.pager-btns{display:flex;align-items:center;gap:.75rem}
.pager-page{font-size:.82rem;color:var(--text-secondary);font-weight:600}
.btn[disabled]{opacity:.45;cursor:not-allowed}
/* --- Modal ------------------------------------------------------------------ */
.modal-overlay{position:fixed;inset:0;background:rgba(60,35,12,.45);backdrop-filter:blur(2px);display:flex;align-items:flex-start;justify-content:center;padding:4vh 1rem;z-index:1000;overflow-y:auto}
.modal{background:var(--bg-primary);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);width:100%;animation:modal-in .18s ease}
@keyframes modal-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.4rem;border-bottom:1px solid var(--border-color)}
.modal-head h3{font-size:1.1rem;font-weight:800;color:var(--text-primary)}
.modal-x{border:none;background:transparent;color:var(--text-light);font-size:1.4rem;line-height:1;cursor:pointer;padding:.1rem .4rem;border-radius:var(--radius-sm)}
.modal-x:hover{background:var(--bg-tertiary);color:var(--text-primary)}
.modal-body{padding:1.4rem}
/* --- Listas de checks (asignar roles) --------------------------------------- */
.check-list{display:flex;flex-direction:column;gap:.2rem;max-height:220px;overflow-y:auto;border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:.5rem}
.check-row{display:flex;align-items:flex-start;gap:.6rem;padding:.4rem .5rem;border-radius:var(--radius-sm);cursor:pointer;font-size:.88rem}
.check-row:hover{background:var(--bg-secondary)}
.check-row input{margin-top:.15rem}
/* --- Chips con casilla (asignación de roles) --------------------------------
Mismo chip que tarifas y duraciones, pero gobernado por un checkbox oculto:
el estado marcado lo pinta la clase .active, que pone el JS. */
.chip-check{position:relative;display:inline-flex;align-items:center}
.chip-check input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.chip-check:focus-within{outline:2px solid var(--info);outline-offset:2px}
/* --- Previsualización de permisos efectivos --------------------------------- */
.perms-preview{border:1px dashed var(--border-strong);border-radius:var(--radius-sm);padding:.8rem;background:var(--bg-secondary);max-height:220px;overflow-y:auto}
.perm-group{margin-bottom:.7rem}
.perm-group:last-child{margin-bottom:0}
.perm-group-title{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-navy);margin-bottom:.35rem}
.perm-chips{display:flex;flex-wrap:wrap;gap:.35rem}
.perm-chip{background:#fff;border:1px solid var(--border-color);color:var(--text-secondary);font-size:.72rem;font-weight:600;padding:.15rem .5rem;border-radius:999px}
/* --- Interruptores (matriz de permisos por rol, formularios) ---------------- */
.switch{position:relative;display:inline-block;width:38px;height:22px;flex:0 0 auto;cursor:pointer}
/* El checkbox real es invisible pero OCUPA todo el interruptor y va por encima
del carril: es lo que recibe el clic. Con un input de 0x0 el clic se lo comía
el carril y el interruptor no se movía salvo que el envoltorio fuese