:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #687385;
  --line: #d4dce7;
  --surface: #ffffff;
  --app-bg: #edf2f7;
  --green: #237b2e;
  --dark-green: #126326;
  --blue: #1f6fa8;
  --red: #c52f32;
  --focus: rgba(31, 111, 168, 0.22);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--app-bg);
}

body.login-locked .app-shell {
  display: none;
}

body.login-locked {
  overflow: hidden;
}

/* Desplegables SIEMPRE en claro: en Windows en modo OSCURO el popup nativo del <select> salía NEGRO
   (fondo oscuro del SO + texto oscuro del CSS = negro sobre negro, no se veían las opciones en CRM
   Contratos). Forzamos color-scheme claro en los controles y pintamos las opciones con fondo blanco y
   texto oscuro para que se lean siempre, esté el SO en claro o en oscuro. */
select, input, textarea { color-scheme: light; }
select option, select optgroup { background-color: #ffffff; color: #111827; }

.login-screen[hidden] {
  display: none !important;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 34px;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(5, 40, 68, 0.84), rgba(5, 40, 68, 0.48) 43%, rgba(35, 123, 46, 0.58)),
    url("../assets/onahorro-local.png") center / cover no-repeat;
}

.login-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(121, 193, 67, 0.34), transparent 30%),
    radial-gradient(circle at 82% 12%, rgba(31, 111, 168, 0.32), transparent 28%),
    rgba(239, 247, 250, 0.1);
  backdrop-filter: blur(3px);
}

.login-screen::after {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 28px;
  pointer-events: none;
}

.login-card {
  position: relative;
  z-index: 1;
  width: min(470px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 26px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 32px 90px rgba(4, 24, 44, 0.34);
  backdrop-filter: blur(16px);
}

.login-card img {
  width: 100%;
  height: 175px;
  border-radius: 18px;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.08) contrast(1.02);
}

.login-brand {
  margin: 18px 0 16px;
  padding: 18px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(10, 74, 120, 0.98), rgba(35, 123, 46, 0.94));
  color: #ffffff;
  text-align: center;
  box-shadow: 0 16px 32px rgba(10, 74, 120, 0.22);
}

.login-brand strong,
.login-brand span {
  display: block;
}

.login-brand strong {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.login-brand span {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  opacity: 0.94;
}

.login-card label {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  color: #435169;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  text-align: left;
}

.login-card input {
  min-height: 48px;
  border: 1px solid #bfd0e1;
  border-radius: 13px;
  padding: 10px 13px;
  background: #f8fbff;
  color: #0f172a;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.login-password-wrap {
  position: relative;
  display: block;
}

.login-password-wrap input {
  width: 100%;
  padding-right: 86px;
}

.login-card .login-password-toggle {
  position: absolute;
  top: 6px;
  right: 6px;
  width: auto;
  min-height: 36px;
  margin: 0;
  border: 1px solid #bfd0e1;
  border-radius: 10px;
  padding: 0 12px;
  background: #ffffff;
  color: #0a4a78;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: none;
}

.login-card .login-password-toggle:hover {
  transform: none;
  box-shadow: none;
  background: #eef6ff;
}

.login-card .login-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #d7e3ef;
  border-radius: 12px;
  background: #f8fbff;
  color: #123762;
  font-size: 12px;
  font-weight: 900;
  text-transform: none;
}

.login-card .login-remember input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  accent-color: #237b2e;
  box-shadow: none;
}

.login-card button {
  width: 100%;
  min-height: 50px;
  margin-top: 18px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #0a4a78, #1f7db8 52%, #237b2e);
  color: #ffffff;
  cursor: pointer;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 14px 28px rgba(31, 111, 168, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.login-card button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(31, 111, 168, 0.34);
}

#login-error {
  min-height: 18px;
  margin: 10px 0 0;
  color: #9f1d24;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.session-pill {
  position: fixed;
  bottom: 10px;
  left: 12px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid #c7d1dd;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
}

.session-pill[hidden],
.login-locked .session-pill {
  display: none;
}

/* Banner de vigilancia del sistema (alertas del monitor Gana+Naturgy) */
.ops-alert-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
}
.ops-alert-banner[hidden] { display: none; }
.ops-alert-banner.is-critical { background: linear-gradient(90deg, #b91c1c, #dc2626); }
.ops-alert-banner.is-warning { background: linear-gradient(90deg, #b45309, #d97706); }
.ops-alert-banner { max-height: 40px; overflow: hidden; }
.ops-alert-banner .ops-alert-icon { font-size: 16px; flex: none; }
/* Una sola linea: el banner NUNCA crece ni tapa la barra de pestanas (si hay mucho texto, se corta). */
.ops-alert-banner .ops-alert-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-alert-banner .ops-alert-close {
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}
.ops-alert-banner .ops-alert-close:hover { background: rgba(255, 255, 255, 0.34); }

.session-pill span {
  max-width: 190px;
  overflow: hidden;
  color: #123762;
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-pill-info {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  gap: 1px;
}
.session-version {
  font-size: 9.5px;
  font-weight: 700;
  color: #2a6aa0;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: underline dotted;
}
.session-version:hover { color: #123762; }

/* Ventana de novedades (changelog) */
.changelog-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: rgba(8, 20, 34, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.changelog-modal {
  width: min(560px, 100%);
  max-height: 80vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(8, 20, 34, 0.35);
}
.changelog-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e9f0;
  position: sticky;
  top: 0;
  background: #f6f9fc;
  border-radius: 14px 14px 0 0;
}
.changelog-modal-head strong { color: #0b243c; font-size: 14px; }
.changelog-close {
  border: none;
  background: #e6edf4;
  color: #123762;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-weight: 900;
}
.changelog-modal-body { padding: 12px 16px 18px; }
.changelog-release { margin-bottom: 14px; }
.changelog-release-head { font-weight: 900; color: #123762; font-size: 13px; margin-bottom: 4px; }
.changelog-release-head small { color: #6b7787; font-weight: 700; }
.changelog-release ul { margin: 0; padding-left: 18px; }
.changelog-release li { font-size: 12.5px; color: #2a3646; margin: 3px 0; line-height: 1.35; }

.session-pill button {
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  background: #123762;
  color: #ffffff;
  padding: 0 10px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.login-legal {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid #d7e3ef;
  border-radius: 10px;
  background: #f8fbff;
  color: #435169;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
  text-align: left;
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-height: 100vh;
  /* Hueco para la barra lateral fija (.page-tabs). */
  padding-left: 216px;
}
body.login-locked .app-shell {
  padding-left: 0;
}

.editor {
  width: min(1260px, calc(100% - 48px));
  margin: 0 auto 24px;
  background: #fbfcfe;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: auto;
  overflow: visible;
  padding: 18px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

/* La nav salio de aqui (ahora es barra lateral), asi que la cabecera del editor la ocupan solo las
   acciones (Aceptar, Guardar, PDF, Factura...), a ancho completo. */
.editor-header {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 14px;
  margin-bottom: 16px;
  padding: 10px;
  border: 1px solid #d9e3ee;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
}

.editor h1 {
  color: #111827;
  font-size: 21px;
  font-weight: 750;
  line-height: 1.1;
  margin: 0;
}

/* Navegacion como BARRA LATERAL izquierda fija (menu vertical), para ganar espacio arriba y que sea
   mas visual. Antes era una rejilla de botones en la cabecera. El contenido se desplaza a la derecha
   con padding-left en .app-shell. */
.page-tabs {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 216px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: linear-gradient(180deg, #0b243c 0%, #0a1e33 100%);
  overflow-y: auto;
  box-shadow: 3px 0 18px rgba(8, 20, 34, 0.35);
}
/* Compactado (2026-07-22): mas pestañas caben en alto (CREAR CONTRATO, CONTRATOS PENDIENTES...). */
.page-tabs {
  gap: 1px;
  padding: 8px 8px;
}

/* Logo ON AHORRO arriba de la barra */
.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  margin: 2px 6px 7px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.sidebar-brand-text { font: 900 14px/1.15 Arial, Helvetica, sans-serif; color: #0b2545; text-align: center; padding: 6px 4px; word-break: break-word; }
.page-tab-config { margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.18); padding-top: 10px; }
.tienda-seccion { margin: 14px 0 2px; font-size: 12px; font-weight: 900; letter-spacing: 0.4px; text-transform: uppercase; color: #0c4f84; border-bottom: 1px solid #dbe5ee; padding-bottom: 3px; }
.sidebar-brand img {
  max-width: 100%;
  max-height: 38px;
  object-fit: contain;
}

.page-tab {
  min-height: 28px;
  text-align: left;
  border: none;
  border-left: 3px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #aebfd2;
  cursor: pointer;
  font-family: inherit;
  font-style: normal;
  font-size: 11.7px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
  padding: 5px 10px;
  box-shadow: none;
  transition: background 130ms ease, color 130ms ease, border-color 130ms ease;
}

.page-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}


.page-tab.is-active {
  background: rgba(42, 138, 201, 0.20);
  border-left-color: #35a7e6;
  color: #ffffff;
  font-weight: 700;
  box-shadow: none;
}

/* Grupo OTROS: agrupa las pestañas menos usadas para despejar la barra. display:contents mantiene
   a los botones como hijos directos del flex de .page-tabs (mismo gap y layout en todas las vistas). */
.page-tabs-others {
  display: contents;
}

.page-tabs-others.is-collapsed .page-tab {
  display: none;
}

.page-tabs-others .page-tab {
  padding-left: 24px;
  font-size: 12px;
}

.page-tab-others-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #8fa5bb;
}

.page-tab-others-toggle .others-chevron {
  transition: transform 130ms ease;
}

.page-tab-others-toggle.is-open .others-chevron {
  transform: rotate(180deg);
}

.page-tab-others-toggle.has-active {
  border-left-color: #35a7e6;
  color: #ffffff;
}

/* Ocultar la barra en la pantalla de login (antes de entrar). */
body.login-locked .page-tabs {
  display: none;
}

/* En pantallas estrechas (movil/tablet) la barra lateral fija estorba: vuelve a nav superior. */
@media (max-width: 900px) {
  .page-tabs {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    border: 1px solid #d5e0eb;
    border-radius: 10px;
    background: #eef4fa;
    box-shadow: none;
  }
  .page-tab {
    flex: 1 1 118px;
    text-align: center;
    color: #102846;
    border: 1px solid #c4d1de;
  }
  .page-tab.is-active {
    color: #ffffff;
    border-color: var(--blue);
  }
  .app-shell {
    padding-left: 0;
  }
  .sidebar-brand {
    display: none;
  }
}

.editor-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.action-group {
  display: grid;
  gap: 7px;
  padding: 6px;
  border: 1px solid #d5e0eb;
  border-radius: 10px;
  background: #f4f8fc;
}

.action-group-primary {
  grid-template-columns: 1.15fr 1fr 0.78fr;
}

.action-group-secondary {
  grid-template-columns: 1fr 1fr 1fr 0.72fr 1.05fr;
}

.module-mode .editor {
  width: min(980px, calc(100% - 48px));
  margin-top: 24px;
}

.module-mode .editor-header {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}

.module-mode .editor-actions,
.module-mode #data-form,
.module-mode .sips-panel,
.module-mode .tariff-summary {
  display: none;
}

#data-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 12px;
}

#data-form.luz30-compact-form,
#data-form.luz20-compact-form {
  grid-template-columns: minmax(330px, 1.35fr) minmax(280px, 1fr) minmax(220px, 0.72fr) minmax(280px, 1fr);
  align-items: start;
}

/* LUZ 2.0: aprovechar el hueco. La ficha del cliente iba en columna alta y estrecha dejando espacio
   vacio al lado de potencia/energia. Ahora la ficha va A LO ANCHO arriba (campos en horizontal) y
   Potencia actual / Cambio potencia / Energia anual quedan en una fila debajo. Solo LUZ 2.0. */
#data-form.luz20-compact-form,
#data-form.gas-compact-form {
  grid-template-columns: minmax(260px, 1fr) minmax(210px, 0.72fr) minmax(260px, 1fr);
  align-items: start;
}
.luz20-compact-form .luz30-client-card,
.gas-compact-form .luz30-client-card {
  grid-column: 1 / -1;
}
.luz20-compact-form .luz30-client-card .luz30-compact-grid,
.gas-compact-form .luz30-client-card .luz30-compact-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
/* INTEGRA (Luz 2.0): la tarjeta de precio medio va en la 3a columna, bajo "Energia anual". */
@media (min-width: 901px) {
  .luz20-compact-form #integra-card {
    grid-column: 3;
  }
}

.study-transfer-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(180px, 0.8fr);
  align-items: center;
  gap: 10px;
  border: 1px solid #cfe0ef;
  border-radius: 11px;
  padding: 9px 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 251, 255, 0.98)),
    #ffffff;
  box-shadow: 0 8px 18px rgba(15, 44, 77, 0.06);
}

.study-transfer-title {
  display: grid;
  gap: 2px;
}

.study-transfer-title strong {
  color: #062b4f;
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
}

.study-transfer-title span,
.study-transfer-note {
  color: #5b6b7d;
  font-size: 11px;
  font-weight: 800;
}

.study-transfer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.study-transfer-btn {
  min-height: 34px;
  border: 1px solid #1f6fa8;
  border-radius: 9px;
  padding: 7px 11px;
  background: linear-gradient(180deg, #ffffff, #eef7ff);
  color: #0a4a78;
  cursor: pointer;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.study-transfer-btn:hover {
  background: #e7f3ff;
  transform: translateY(-1px);
}

.study-transfer-note {
  justify-self: end;
  text-align: right;
}

.editor-actions button,
.action-button {
  border: 1px solid #c7d1dd;
  background: #ffffff;
  color: #1c2737;
  min-height: 42px;
  border-radius: 9px;
  cursor: pointer;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.editor-actions button:hover,
.action-button:hover {
  background: #f2f6fa;
  border-color: #aebccd;
  transform: translateY(-1px);
}

.editor-actions button:active,
.action-button:active {
  transform: translateY(1px);
}

.action-accept {
  border-color: #bd7800;
  background: linear-gradient(135deg, #f6b62e, #d68a00);
  color: #1d1605;
}

.action-save {
  border-color: #126326;
  background: linear-gradient(135deg, #237b2e, #63a92f);
  color: #ffffff;
}

.action-print {
  border-color: #0f5f95;
  background: linear-gradient(135deg, #0f66a8, #1f7db8);
  color: #ffffff;
}

.action-privacy {
  border-color: #8fb2d1;
  background: #ffffff;
  color: #123762;
}

.action-import {
  border-color: #b7c7d8;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  color: #123762;
}

.action-reset {
  border-color: #d8b7b7;
  background: #fff8f8;
  color: #8c1617;
}

#privacy-mode.is-active {
  border-color: #126326;
  background: #e8f6e7;
  color: #126326;
}

body.privacy-mode .privacy-sensitive input,
body.privacy-mode .privacy-sensitive select {
  color: transparent;
  text-shadow: 0 0 8px rgba(17, 24, 39, 0.62);
  caret-color: #111827;
}

body.privacy-mode .privacy-value {
  color: #6b7280;
}

.language-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 42px;
  border: 1px solid #bed0e0;
  border-radius: 9px;
  padding: 3px;
  background: #f7fbff;
}

.language-toggle button {
  min-width: 42px;
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  padding: 0 9px;
  background: transparent;
  color: #123257;
  font-size: 12px;
  font-weight: 900;
  box-shadow: none;
}

.language-toggle button.is-active {
  background: #1f6fa8;
  color: #fff;
}

.field-group {
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  margin: 0;
  padding: 13px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.field-stack {
  display: grid;
  align-content: start;
  gap: 12px;
}

.field-group legend {
  color: #1c2737;
  font-size: 13px;
  font-weight: 700;
  padding: 0 6px;
  text-transform: uppercase;
}

.field-row {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
}

.field-row:last-child {
  margin-bottom: 0;
}

.field-row label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.field-row input,
.field-row select {
  width: 100%;
  min-height: 36px;
  border: 1px solid #c5cfdb;
  border-radius: 6px;
  padding: 7px 9px;
  background: #fcfdff;
  color: #111827;
  font-size: 14px;
}

.field-row input:focus,
.field-row select:focus {
  outline: 3px solid var(--focus);
  border-color: var(--blue);
  background: #fff;
}

.luz30-compact-form .tariff-field-group,
.luz20-compact-form .tariff-field-group {
  grid-column: 1 / -1;
  min-height: 0;
}

.luz30-compact-form .tariff-selector-layout,
.luz20-compact-form .tariff-selector-layout {
  grid-template-columns: minmax(180px, 260px) minmax(620px, 1fr);
  align-items: start;
  gap: 10px;
}

.luz30-compact-form .tariff-selector-layout > .field-row,
.luz20-compact-form .tariff-selector-layout > .field-row {
  max-width: 260px;
}

/* LUZ 2.0: quitado el selector desplegable -> la comparativa de resultados ocupa TODO el ancho. */
.luz20-compact-form .tariff-selector-layout {
  grid-template-columns: 1fr;
}

/* ===== Refresco visual "CRM moderno" (LUZ 2.0 y GAS comparten el mismo look) ===== */
.luz20-compact-form .luz30-compact-card,
.gas-compact-form .luz30-compact-card {
  border: 1px solid #e5ebf4;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(16, 42, 76, 0.06);
  padding: 14px 16px 15px;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.luz20-compact-form .luz30-compact-card:hover,
.gas-compact-form .luz30-compact-card:hover {
  box-shadow: 0 12px 28px rgba(16, 42, 76, 0.11);
  border-color: #cedcee;
}
.luz20-compact-form .luz30-client-card,
.gas-compact-form .luz30-client-card {
  background:
    linear-gradient(180deg, #fbfdff 0%, #ffffff 60%);
}
.luz20-compact-form .field-group legend,
.gas-compact-form .field-group legend {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #0c4f84;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.7px;
  padding: 3px 11px;
  border-radius: 999px;
  background: #eef5fc;
  border: 1px solid #d7e6f6;
}
.luz20-compact-form .field-group legend::before,
.gas-compact-form .field-group legend::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1f8b4c;
  box-shadow: 0 0 0 3px rgba(31, 139, 76, 0.16);
}
.luz20-compact-form .field-row label,
.gas-compact-form .field-row label {
  color: #6b7891;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
}
.luz20-compact-form .field-row input,
.luz20-compact-form .field-row select,
.gas-compact-form .field-row input,
.gas-compact-form .field-row select {
  border: 1px solid #dce4ef;
  border-radius: 9px;
  background: #f7fafd;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.luz20-compact-form .field-row input:hover,
.luz20-compact-form .field-row select:hover,
.gas-compact-form .field-row input:hover,
.gas-compact-form .field-row select:hover {
  border-color: #b7c8dd;
  background: #ffffff;
}
.luz20-compact-form .field-row input:focus,
.luz20-compact-form .field-row select:focus,
.gas-compact-form .field-row input:focus,
.gas-compact-form .field-row select:focus {
  border-color: #2f7fd1;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(47, 127, 209, 0.16);
  outline: none;
}
/* CUPS: campo mas ancho (20+ caracteres) */
.luz20-compact-form .luz30-compact-field.cups-wide,
.gas-compact-form .luz30-compact-field.cups-wide {
  grid-column: span 3;
}
/* Email: mas ancho para que quepa entero (a costa de DNI/movil) */
.luz20-compact-form .luz30-compact-field.field-span2,
.gas-compact-form .luz30-compact-field.field-span2 {
  grid-column: span 2;
}
/* Direccion: media fila -> CP/ciudad/provincia suben a su lado */
.luz20-compact-form .luz30-compact-field.field-span5,
.gas-compact-form .luz30-compact-field.field-span5 {
  grid-column: span 5;
}

.luz30-compact-form .summary-vertical,
.luz20-compact-form .summary-vertical {
  min-height: 0;
  max-height: 218px;
  overflow: auto;
  padding: 10px;
}

.luz30-compact-form .summary-vertical-title,
.luz20-compact-form .summary-vertical-title {
  margin-bottom: 8px;
}

.luz30-compact-card {
  min-width: 0;
  padding: 10px;
}

.luz30-client-card {
  grid-column: 1 / 2;
}

.luz30-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.luz30-compact-field {
  min-width: 0;
  margin-bottom: 0;
}

.luz30-compact-field.wide {
  grid-column: 1 / -1;
}

.luz30-compact-form .field-row label,
.luz30-table-field span {
  font-size: 10px;
}

.luz30-compact-form .field-row input,
.luz30-compact-form .field-row select,
.luz30-table-field input {
  min-height: 31px;
  padding: 5px 7px;
  font-size: 12px;
  font-weight: 750;
}

.luz30-period-table {
  display: grid;
  gap: 6px;
}

.luz30-option-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 31px;
  margin-bottom: 8px;
  padding: 6px 8px;
  border: 1px solid #d6e2ee;
  border-radius: 7px;
  background: #f8fbff;
  color: #123762;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.luz30-option-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

.luz30-power-change-card.is-collapsed .luz30-period-table {
  display: none;
}

.luz30-period-head,
.luz30-period-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr);
  gap: 7px;
  align-items: end;
}

.luz30-period-head-change,
.luz30-period-row-change {
  grid-template-columns: 42px minmax(0, 1fr);
}

.luz30-period-head {
  color: #536070;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.luz30-period-row strong {
  display: grid;
  place-items: center;
  min-height: 31px;
  border-radius: 6px;
  background: #eef5fb;
  color: #123762;
  font-size: 12px;
  font-weight: 900;
}

.luz30-period-row strong small {
  display: block;
  margin-top: -3px;
  font-size: 8px;
  font-weight: 800;
  color: #536070;
}

.luz30-table-field {
  display: grid;
  gap: 3px;
  margin: 0;
}

.luz30-table-field input {
  width: 100%;
  border: 1px solid #c5cfdb;
  border-radius: 6px;
  background: #fcfdff;
  color: #111827;
}

.field-row-manual label {
  color: #b4232b;
}

.field-row-manual input,
.field-row-manual select {
  border-color: #d33b3f;
  background: #fff7f7;
  box-shadow: inset 3px 0 0 #d33b3f;
}

.field-row-extracted label {
  color: #126326;
}

.field-row-extracted input,
.field-row-extracted select {
  border-color: #2fb344;
  background: #f4fff5;
  box-shadow: inset 3px 0 0 #2fb344;
}

.sips-panel {
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  margin: 12px 0 0;
  padding: 13px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.sips-title {
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
  text-align: center;
  text-transform: uppercase;
}

.sips-button {
  width: 100%;
  min-height: 38px;
  border: 1px solid #1f6fa8;
  border-radius: 6px;
  background: #1f6fa8;
  color: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.sips-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.sips-status {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.sips-status-success {
  color: #126326;
}

.sips-status-error {
  color: #9f1d24;
}

.tariff-summary {
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  margin-top: 12px;
  padding: 13px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.summary-title {
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
  text-align: center;
  text-transform: uppercase;
}

.tariff-field-group {
  min-height: 535px;
}

.tariff-selector-layout {
  display: grid;
  gap: 26px;
}

.tariff-selector-layout .field-row {
  margin-bottom: 0;
}

.summary-vertical {
  display: grid;
  align-content: start;
  min-height: 285px;
  border: 1px solid #dbe7d6;
  border-radius: 8px;
  padding: 13px 12px;
  background: linear-gradient(180deg, #fbfffb, #f3f9f1);
}

.summary-vertical-title {
  margin-bottom: 14px;
  color: #123257;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

.summary-bars {
  display: grid;
  gap: 10px;
}

.summary-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) 76px 88px;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  border: 1px solid #d8e2ee;
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
  color: #123257;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.05);
}

.summary-bar:hover,
.summary-bar.is-selected {
  border-color: var(--blue);
  outline: 2px solid rgba(31, 111, 168, 0.2);
  outline-offset: 1px;
}

.summary-bar-value {
  display: grid;
  gap: 2px;
  justify-self: end;
  font-weight: 900;
  line-height: 1.05;
  text-align: right;
  white-space: nowrap;
}

.summary-bar-saving {
  color: #061b34;
  font-size: 11.5px;
}

.summary-bar-commission {
  color: #237b2e;
  font-size: 10.5px;
}

.summary-bar-track {
  display: flex;
  align-items: center;
  height: 13px;
  border-radius: 999px;
  background: #e9eef4;
  overflow: hidden;
}

.summary-bar-fill {
  width: var(--bar-width, 12%);
  height: 100%;
  min-width: 8px;
  border-radius: 999px;
}

.summary-bar-best .summary-bar-fill {
  background: #62be77;
}

.summary-bar-middle .summary-bar-fill {
  background: #ffd85a;
}

.summary-bar-worst .summary-bar-fill {
  background: #ff6969;
}

.summary-bar-info {
  display: grid;
  gap: 2px;
  min-width: 0;
  line-height: 1.05;
}

.summary-bar-company {
  overflow: hidden;
  color: #126326;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.summary-bar-label {
  overflow: hidden;
  color: #1c2737;
  font-size: 10.8px;
  font-weight: 900;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offer-results-panel {
  gap: 12px;
  min-height: 0;
  max-height: 650px;
  overflow: auto;
  background: linear-gradient(180deg, #ffffff, #f5fbf4);
}

.offer-results-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.offer-results-subtitle {
  color: #617186;
  font-size: 11px;
  font-weight: 800;
}

.offer-client-toggle {
  border: 1px solid #bcd3e8;
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
  color: #0b4f82;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

.offer-client-toggle:hover {
  border-color: #1f6fa8;
  background: #eef7ff;
}

.offer-results-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(110px, 1fr));
  gap: 8px;
}

.offer-kpi {
  min-width: 0;
  border: 1px solid #dce8d8;
  border-radius: 8px;
  padding: 9px 10px;
  background: #ffffff;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04);
}

.offer-kpi span,
.offer-kpi small {
  display: block;
  overflow: hidden;
  color: #64748b;
  font-size: 9.5px;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.offer-kpi strong {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: #087b2f;
  font-size: 15px;
  font-weight: 1000;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offer-kpi small {
  margin-top: 2px;
  color: #123257;
  text-transform: none;
}

.offer-results-table {
  display: grid;
  gap: 6px;
  min-width: 850px;
}

.offer-results-head,
.offer-result-row {
  display: grid;
  grid-template-columns: minmax(145px, 1.15fr) 86px minmax(170px, 1.35fr) 105px 105px 94px 220px;
  gap: 8px;
  align-items: center;
}

.offer-results-head {
  position: sticky;
  top: -13px;
  z-index: 2;
  border-radius: 8px;
  padding: 9px 10px;
  background: #0b2239;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.offer-result-row {
  min-height: 76px;
  border: 1px solid #d8e3ee;
  border-radius: 8px;
  padding: 9px 10px;
  background: #ffffff;
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.04);
}

.offer-result-row.is-selected {
  border-color: #1f6fa8;
  box-shadow: 0 0 0 2px rgba(31, 111, 168, 0.16);
}

.offer-result-row.is-recommended {
  background: linear-gradient(90deg, #f2fff2, #ffffff);
  border-color: #62be77;
}

.offer-company-cell,
.offer-product-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.offer-company-cell {
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.offer-company-cell strong,
.offer-product-cell strong {
  overflow: hidden;
  color: #0b2239;
  font-size: 11px;
  font-weight: 1000;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.offer-product-cell small,
.offer-product-cell em {
  overflow: hidden;
  color: #52677f;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offer-product-cell em {
  color: #a26000;
}

.offer-company-logo {
  display: grid;
  place-items: center;
  width: 78px;
  height: 54px;
  border: 1px solid #e4ebf2;
  border-radius: 9px;
  background: #ffffff;
}

.offer-company-logo img {
  display: block;
  max-width: 72px;
  max-height: 46px;
  object-fit: contain;
}

.offer-company-logo.is-text {
  background: color-mix(in srgb, var(--offer-logo-color, #1f6fa8) 10%, #ffffff);
  color: var(--offer-logo-color, #1f6fa8);
  font-size: 12px;
  font-weight: 1000;
}

.offer-type-badge {
  display: inline-flex;
  justify-content: center;
  min-width: 64px;
  border-radius: 999px;
  padding: 6px 8px;
  background: #eef6ff;
  color: #0b4f82;
  font-size: 9.5px;
  font-weight: 1000;
  text-transform: uppercase;
}

.offer-type-indexado,
.offer-type-indexada,
.offer-type-mercado {
  background: #fff7df;
  color: #8a5a00;
}

.offer-type-servicio {
  background: #f1f5f9;
  color: #334155;
}

.offer-money-cell {
  color: #0b2239;
  font-size: 11px;
  font-weight: 1000;
  text-align: right;
  white-space: nowrap;
}

.offer-money-cell.is-saving {
  color: #087b2f;
}

.offer-money-cell.annual,
.offer-money-cell.is-commission {
  font-size: 12px;
}

.offer-money-cell.is-commission {
  display: inline-grid;
  justify-content: end;
  border-radius: 8px;
  padding: 7px 8px;
  background: #dcf7de;
  color: #063f1b;
}

.offer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.offer-tags span {
  border-radius: 999px;
  padding: 3px 6px;
  background: #e7f7e6;
  color: #087b2f;
  font-size: 8.5px;
  font-weight: 1000;
  text-transform: uppercase;
}

.offer-actions-cell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

.offer-actions-cell button {
  min-height: 28px;
  border: 1px solid #bcd3e8;
  border-radius: 7px;
  background: #ffffff;
  color: #0b4f82;
  font-size: 9.5px;
  font-weight: 1000;
  cursor: pointer;
}

.offer-actions-cell button:hover {
  background: #eef7ff;
  border-color: #1f6fa8;
}

.offer-actions-cell button.is-primary {
  border-color: #087b2f;
  background: #0f7b2c;
  color: #ffffff;
}

.offer-result-empty {
  border: 1px dashed #c8d6e2;
  border-radius: 8px;
  padding: 18px;
  color: #64748b;
  font-weight: 900;
  text-align: center;
}

.offer-results-panel.is-client-view .offer-advisor-only {
  display: none;
}

.offer-results-panel.is-client-view .offer-results-head,
.offer-results-panel.is-client-view .offer-result-row {
  grid-template-columns: minmax(145px, 1.15fr) 86px minmax(170px, 1.35fr) 105px 105px 220px;
}

.luz20-compact-form .offer-results-panel,
.luz30-compact-form .offer-results-panel {
  max-height: 520px;
  overflow: auto;
  padding: 10px;
}

.luz20-compact-form .offer-results-top,
.luz30-compact-form .offer-results-top {
  align-items: center;
}

.luz20-compact-form .offer-results-subtitle,
.luz30-compact-form .offer-results-subtitle {
  display: none;
}

.luz20-compact-form .offer-results-kpis,
.luz30-compact-form .offer-results-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.luz20-compact-form .offer-kpi,
.luz30-compact-form .offer-kpi {
  padding: 6px 7px;
}

.luz20-compact-form .offer-kpi span,
.luz30-compact-form .offer-kpi span,
.luz20-compact-form .offer-kpi small,
.luz30-compact-form .offer-kpi small {
  font-size: 8px;
}

.luz20-compact-form .offer-kpi strong,
.luz30-compact-form .offer-kpi strong {
  font-size: 11px;
}

.luz20-compact-form .offer-results-table,
.luz30-compact-form .offer-results-table {
  min-width: 0;
}

.luz20-compact-form .offer-results-head,
.luz20-compact-form .offer-result-row,
.luz30-compact-form .offer-results-head,
.luz30-compact-form .offer-result-row {
  grid-template-columns: minmax(210px, 240px) 66px minmax(160px, 1.7fr) 96px 98px 82px;
  gap: 7px;
}

.luz20-compact-form .offer-results-panel.is-client-view .offer-results-head,
.luz20-compact-form .offer-results-panel.is-client-view .offer-result-row,
.luz30-compact-form .offer-results-panel.is-client-view .offer-results-head,
.luz30-compact-form .offer-results-panel.is-client-view .offer-result-row {
  grid-template-columns: minmax(210px, 240px) 66px minmax(160px, 1.7fr) 96px 98px;
}

.luz20-compact-form .offer-results-head,
.luz30-compact-form .offer-results-head {
  top: -10px;
  padding: 7px 8px;
  font-size: 8px;
}

.luz20-compact-form .offer-results-head span:last-child,
.luz30-compact-form .offer-results-head span:last-child {
  display: none;
}

.luz20-compact-form .offer-result-row,
.luz30-compact-form .offer-result-row {
  min-height: 0;
  padding: 8px;
}

.luz20-compact-form .offer-company-cell,
.luz30-compact-form .offer-company-cell {
  grid-template-columns: 42px minmax(0, 1fr);
}

.luz20-compact-form .offer-company-logo,
.luz30-compact-form .offer-company-logo {
  width: 38px;
  height: 28px;
}

.luz20-compact-form .offer-company-logo img,
.luz30-compact-form .offer-company-logo img {
  max-width: 34px;
  max-height: 22px;
}

.luz20-compact-form .offer-company-cell strong,
.luz30-compact-form .offer-company-cell strong,
.luz20-compact-form .offer-product-cell strong,
.luz30-compact-form .offer-product-cell strong {
  font-size: 9.2px;
}

.luz20-compact-form .offer-product-cell small,
.luz30-compact-form .offer-product-cell small,
.luz20-compact-form .offer-product-cell em,
.luz30-compact-form .offer-product-cell em {
  font-size: 8.5px;
}

.luz20-compact-form .offer-type-badge,
.luz30-compact-form .offer-type-badge {
  min-width: 0;
  padding: 5px 7px;
  font-size: 8.5px;
}

.luz20-compact-form .offer-money-cell,
.luz30-compact-form .offer-money-cell {
  font-size: 9.2px;
}

.luz20-compact-form .offer-money-cell.annual,
.luz20-compact-form .offer-money-cell.is-commission,
.luz30-compact-form .offer-money-cell.annual,
.luz30-compact-form .offer-money-cell.is-commission {
  font-size: 9.7px;
}

.luz20-compact-form .offer-actions-cell,
.luz30-compact-form .offer-actions-cell {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  padding-top: 5px;
  border-top: 1px solid #eef2f7;
}

.luz20-compact-form .offer-actions-cell button,
.luz30-compact-form .offer-actions-cell button {
  min-width: 92px;
  min-height: 29px;
  padding: 5px 8px;
  font-size: 9px;
}

.summary-table {
  display: grid;
  gap: 3px;
}

.summary-row {
  display: grid;
  grid-template-columns: 76px 1fr 116px;
  align-items: stretch;
  width: 100%;
  min-height: 29px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #000;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  text-align: left;
}

.summary-row:hover {
  outline: 2px solid rgba(31, 111, 168, 0.22);
  outline-offset: 1px;
}

.summary-row.is-selected {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.summary-name,
.summary-saving,
.summary-company {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 4px 6px;
}

.summary-saving {
  justify-content: flex-end;
}

.summary-company {
  background: #ffffff;
  white-space: nowrap;
}

.summary-saving-best {
  background: #62be77;
}

.summary-saving-middle {
  background: #ffd85a;
}

.summary-saving-worst {
  background: #ff6969;
}

.crm-panel {
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  margin: 0;
  padding: 13px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.crm-title {
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 10px;
  text-align: center;
  text-transform: uppercase;
}

/* CRM Ofertas: la cabecera re-estila SU titulo (no toca el .crm-title de otros paneles). */
.crm-header .crm-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-bottom: 0;
  text-align: left;
  text-transform: none;
  color: #0f2338;
}

/* CRM Ofertas: cabecera con titulo + acciones (Guardar/Nueva comparativa). */
.crm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.crm-subtitle {
  color: #6b7c8f;
  font-size: 12.5px;
  font-weight: 600;
  margin-top: 2px;
}

.crm-header-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.crm-btn {
  border: 1.5px solid #d4dde8;
  border-radius: 10px;
  padding: 9px 15px;
  background: #ffffff;
  color: #0f2338;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.crm-btn:hover {
  background: #f6f9fc;
  border-color: #b9c6d6;
}

.crm-btn-primary {
  background: linear-gradient(180deg, #1f8a45, #126326);
  border-color: #126326;
  color: #ffffff;
}

.crm-btn-primary:hover {
  filter: brightness(1.06);
  background: linear-gradient(180deg, #1f8a45, #126326);
}

/* Tarjeta de filtros. */
.crm-controls {
  background: #f6f9fc;
  border: 1px solid #e4eaf1;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}

.crm-controls-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7c8f;
  margin-bottom: 12px;
}

.crm-controls-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.wide-field {
  grid-column: 1 / -1;
}

.tariff-editor-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 12px;
}

.tariff-editor-grid-single,
.tariff-editor-grid-30 {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.tariff-editor-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}

.tariff-editor-tab {
  min-height: 34px;
  border: 1px solid #c7d1dd;
  border-radius: 6px;
  padding: 7px 12px;
  background: #ffffff;
  color: #1c2737;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.tariff-editor-tab.is-active {
  border-color: var(--blue);
  background: var(--blue);
  color: #ffffff;
}

.tariff-filter-panel {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 12px;
  align-items: end;
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid #d6e1ec;
  border-radius: 8px;
  background: #f7fbff;
}

.tariff-filter-panel strong {
  display: block;
  color: #0b2545;
  font-size: 14px;
  text-transform: uppercase;
}

.tariff-filter-panel span {
  color: #5f6f82;
  font-size: 12px;
  font-weight: 700;
}

.tariff-filter-controls {
  display: grid;
  grid-template-columns: minmax(160px, .8fr) minmax(130px, .6fr) minmax(220px, 1.4fr) auto;
  gap: 8px;
}

.tariff-filter-controls-compact {
  grid-template-columns: minmax(160px, 240px);
  justify-content: start;
}

.tariff-filter-controls label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #4a5a6d;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.tariff-filter-controls input,
.tariff-filter-controls select {
  min-height: 36px;
  border: 1px solid #bfd0e1;
  border-radius: 7px;
  background: #ffffff;
  padding: 7px 9px;
  color: #172033;
  font-size: 13px;
  font-weight: 800;
  text-transform: none;
}

.tariff-company-switches {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 12px;
  align-items: center;
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid #dbe8d6;
  border-radius: 8px;
  background: linear-gradient(135deg, #f6fbf3, #ffffff);
}

.tariff-company-switches strong {
  display: block;
  color: #0b2545;
  font-size: 14px;
  text-transform: uppercase;
}

.tariff-company-switches span {
  color: #5f6f82;
  font-size: 12px;
  font-weight: 700;
}

.tariff-bulk-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 9px;
}

.tariff-bulk-actions button {
  min-height: 30px;
  border: 1px solid #bfd0e1;
  border-radius: 6px;
  padding: 5px 8px;
  background: #ffffff;
  color: #123762;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.tariff-visible-actions {
  display: flex;
  gap: 7px;
  align-items: end;
  flex-wrap: wrap;
}

.tariff-visible-actions button {
  min-height: 36px;
  border: 1px solid #bfd0e1;
  border-radius: 7px;
  padding: 7px 10px;
  background: #ffffff;
  color: #123762;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.tariff-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.tariff-card-head h3 {
  margin-bottom: 0;
}

.tariff-active-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  border: 1px solid #cfe0cf;
  border-radius: 999px;
  padding: 6px 9px;
  background: #ffffff;
  color: #126326;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
}

.tariff-active-toggle input {
  accent-color: #178537;
}

.tariff-active-toggle:has(input:not(:checked)),
.tariff-active-toggle:has(input:disabled) {
  border-color: #d6dde6;
  color: #66758a;
  background: #f7f8fa;
}

.tariff-bulk-actions button:hover {
  border-color: var(--blue);
  background: #eef5fb;
}

.tariff-company-switch-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tariff-company-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid #d6e1ec;
  border-radius: 999px;
  background: #fff;
  color: #304257;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.tariff-company-switch.is-active {
  border-color: #5dad38;
  background: #eef8e9;
  color: #126326;
}

.tariff-company-switch input {
  accent-color: #2f8f2f;
}

.clients-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.tariff-card,
.client-card,
.client-form-card {
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  padding: 12px;
  background: #fbfdff;
}

/* ===== Clientes — rediseño visual (2026-07-22) ===== */
.clients-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(120deg, #0e2c4d 0%, #123762 55%, #14507e 100%);
  color: #eaf3fb;
  box-shadow: 0 10px 26px -14px rgba(9, 32, 58, 0.6);
}
.clients-hero .crm-title { color: #ffffff; margin: 0; }
.clients-hero p { margin: 4px 0 0; font-size: 13px; color: #b9d3ea; max-width: 62ch; }
.clients-hero-count {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 18px; border-radius: 12px; background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.clients-hero-count b { font-size: 24px; font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.clients-hero-count small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #b9d3ea; margin-top: 3px; }

.client-form-card {
  background: #ffffff;
  border: 1px solid #e4ebf3;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 6px 20px -14px rgba(18, 55, 98, 0.4);
}
.client-form-card h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: .04em; color: #123762;
}
.client-form-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 8px;
  background: #e8f5ee; color: #166534; font-size: 14px; font-weight: 700;
}
.client-form-sections { display: grid; gap: 14px; }
.client-form-section { display: grid; gap: 8px; }
.client-form-section > h4 {
  margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: #4d6482; padding-bottom: 5px; border-bottom: 1px solid #eef2f7;
}
.client-form-section .client-field-grid { gap: 9px 10px; }
.client-field-grid .field-row { gap: 3px; }
.client-field-grid .field-row label {
  font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #566a83;
}
.client-field-grid .field-row input,
.client-field-grid .field-row select {
  height: 34px; border: 1px solid #d6deea; border-radius: 8px; padding: 0 10px;
  font-size: 13px; background: #fbfdff; transition: border-color .12s, box-shadow .12s, background .12s;
}
.client-field-grid .field-row input:focus,
.client-field-grid .field-row select:focus {
  outline: none; border-color: #22c55e; background: #fff; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

/* Listado de clientes: buscador ARRIBA + toolbar */
.client-list-searchbar {
  position: relative;
  margin-bottom: 12px;
}
.client-list-searchbar .client-search-icon {
  position: absolute;
  left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 15px; opacity: .6; pointer-events: none;
}
.client-list-searchbar input {
  width: 100%;
  height: 46px;
  padding: 0 16px 0 40px;
  font-size: 15px;
  border: 1px solid #d6deea;
  border-radius: 12px;
  background: #f7fafd;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.client-list-searchbar input::placeholder { color: #94a3b8; }
.client-list-searchbar input:focus {
  outline: none; border-color: #22c55e; background: #fff;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
}
.client-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eef2f7;
}
.client-list-toolbar-left { display: flex; align-items: center; gap: 10px; }
.client-list-toolbar-left h3 { margin: 0; }
.client-list-toolbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.client-list-summary {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  background: #eaf1f9; color: #274764;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.client-filter-select {
  height: 34px; padding: 0 10px;
  border: 1px solid #d6deea; border-radius: 8px;
  background: #fff; font-size: 12.5px; color: #274764;
}
.client-list-toolbar-right button {
  height: 34px; padding: 0 12px; border-radius: 8px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  border: 1px solid #d3ddea; background: #f4f7fb; color: #274764;
}
.client-list-toolbar-right button.primary { background: #123762; border-color: #123762; color: #fff; }
.client-list-toolbar-right button.primary:hover { background: #0f3054; }
.client-list-toolbar-right button:not(.primary):hover { background: #e7eef7; }

.tariff-card.is-disabled {
  opacity: .55;
  background: #f7f8fa;
}

.tariff-card h3,
.client-form-card h3 {
  margin: 0 0 10px;
  color: #123762;
  font-size: 14px;
  text-transform: uppercase;
}

.tariff-company {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: -4px 0 10px;
}

.tariff-company .company-preview {
  display: inline-flex;
  margin-top: 0;
  padding: 5px 8px;
  border: 1px solid #d9e6d5;
  border-radius: 7px;
  background: #f3faef;
}

.tariff-state-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid #d2dce7;
  background: #fff;
  color: #526070;
}

.tariff-state-pill.is-on {
  border-color: #9ed190;
  background: #eef9ea;
  color: #177327;
}

.tariff-state-pill.is-off {
  border-color: #e2c5c5;
  background: #fff4f4;
  color: #a53b3b;
}

.tariff-field-grid,
.client-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.form-status {
  margin-top: 10px;
  font-size: 13px;
  min-height: 18px;
  font-weight: 600;
}
.form-status.error { color: #b3261e; }
.form-status.ok { color: #1b7a3d; }
.form-status.pending { color: #6b6b6b; }

[data-client-field].invalid {
  border-color: #b3261e !important;
  outline: 1px solid #b3261e;
  background: #fff5f5;
}

.screenclip-overlay {
  position: fixed;
  inset: auto 14px 14px auto;
  background: transparent;
  z-index: 9999;
}
.screenclip-modal {
  background: #ffffff;
  border: 1px solid #cfd8e3;
  border-radius: 12px;
  padding: 14px 16px;
  width: 300px;
  max-width: calc(100vw - 28px);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.28);
}
.screenclip-modal h3 { font-size: 15px; }
.screenclip-steps { font-size: 12.5px !important; }
.screenclip-paste { padding: 14px !important; font-size: 13px; }
.screenclip-preview img { max-width: 100%; max-height: 130px; border-radius: 6px; display: block; }
.screenclip-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.screenclip-actions button { font-size: 13px; padding: 7px 10px; }
.screenclip-modal h3 { margin: 0 0 8px; color: #062b4f; }
.screenclip-steps { margin: 0 0 12px; padding-left: 18px; font-size: 14px; color: #2a3b4f; }
.screenclip-paste {
  border: 2px dashed #9bb4cc;
  border-radius: 10px;
  padding: 22px;
  text-align: center;
  color: #5a738c;
  background: #f6f9fc;
  outline: none;
  cursor: text;
}
.screenclip-paste:focus { border-color: #1f6fa8; background: #eef5fb; }
.screenclip-preview { margin-top: 12px; }
.screenclip-preview img { max-width: 100%; max-height: 320px; border: 1px solid #d6e2ef; border-radius: 8px; }
.screenclip-actions { display: flex; gap: 8px; margin-top: 14px; }
.screenclip-status { margin-top: 8px; font-size: 13px; min-height: 18px; color: #1b7a3d; }

.tariff-card-30 h3 {
  min-height: 34px;
  line-height: 1.2;
}

.tariff-field-grid-30 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.tariff-field-grid-30 .field-row {
  gap: 4px;
}

.tariff-field-grid-30 .field-row label {
  font-size: 10px;
  text-align: center;
}

.tariff-field-grid-30 .field-row input {
  min-height: 32px;
  padding: 5px 4px;
  font-size: 11px;
  text-align: center;
}

.tariff-subtitle {
  grid-column: 1 / -1;
  margin-top: 2px;
  color: #123762;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.clients-grid .client-field-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.company-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 8px;
  border: 1px solid #d9e6d5;
  border-radius: 7px;
  background: #ffffff;
  color: #172033;
  font-size: 12px;
  font-weight: 800;
}

.company-logo-img {
  width: 76px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
}

.company-mark {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 24px;
  padding: 0 7px;
  border-radius: 5px;
  background: #eef8ea;
  color: #126326;
  border: 1px solid #b7d8bd;
  font-size: 10px;
  font-weight: 900;
}

.gana-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 20, 34, 0.58);
}

.gana-dialog {
  width: min(1180px, 96vw);
  max-height: 92vh;
  overflow: auto;
  border-radius: 12px;
  background: #f8fbff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}

.gana-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  background: linear-gradient(90deg, #063d67, #1f6fa8);
  color: #fff;
}

.gana-head strong,
.gana-head span {
  display: block;
}

.gana-head span {
  margin-top: 3px;
  font-size: 12px;
  opacity: 0.9;
}

.gana-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  font-weight: 900;
}

.gana-status {
  margin: 14px 18px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #eef4fb;
  color: #123762;
  font-size: 13px;
  font-weight: 800;
}

.gana-status-error {
  background: #fff0f0;
  color: #9f1d24;
}

.gana-status-success {
  background: #eef8ea;
  color: #126326;
}

.gana-status-loading {
  background: #fff8e5;
  color: #7a4b00;
}

.gana-contract-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 10px 18px 0;
  border: 1px solid #bfd0e1;
  border-radius: 8px;
  padding: 10px 12px;
  background: #ffffff;
  color: #123762;
}

.gana-contract-summary span,
.gana-contract-summary small {
  display: block;
  color: #435169;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.gana-contract-summary strong {
  display: block;
  margin-top: 3px;
  font-size: 14px;
}

.gana-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 18px;
}

.gana-form fieldset {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid #d8e3ee;
  border-radius: 10px;
  background: #fff;
}

.gana-form legend {
  padding: 0 7px;
  color: #123762;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.gana-form label {
  display: grid;
  gap: 4px;
  color: #435169;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.gana-form input,
.gana-form select,
.gana-form textarea {
  min-height: 34px;
  border: 1px solid #bfd0e1;
  border-radius: 7px;
  padding: 7px 9px;
  font-size: 13px;
}

.gana-form input[readonly] {
  background: #f4f8fc;
  color: #123762;
  font-weight: 800;
}

.gana-form textarea {
  min-height: 84px;
  resize: vertical;
}

.gana-fixed-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  border: 1px solid #b7dfc0;
  border-radius: 7px;
  padding: 7px 9px;
  background: #f1fbf3;
  color: #0b6b2b;
  font-size: 12px;
  font-weight: 900;
}

.gana-fixed-note span {
  color: #123762;
}

.gana-power-change-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border: 2px solid #d97706;
  border-radius: 9px;
  padding: 10px;
  background: #fff7ed;
}

.gana-power-change-fields.is-hidden {
  display: none;
}

.gana-power-change-title {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #9a3412;
  font-size: 12px;
  font-weight: 900;
}

.gana-power-change-title span {
  color: #435169;
  font-weight: 800;
}

.gana-power-change-alert {
  grid-column: 1 / -1;
  border-radius: 7px;
  padding: 8px 10px;
  background: #ffedd5;
  color: #7c2d12;
  font-size: 12px;
  font-weight: 900;
  text-transform: none;
}

.gana-power-change-confirm {
  grid-column: 1 / -1;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px !important;
  min-height: 34px;
  border: 1px solid #fdba74;
  border-radius: 7px;
  padding: 7px 9px;
  background: #fff;
  color: #7c2d12 !important;
  text-transform: none !important;
}

.gana-power-change-confirm input {
  width: 18px;
  min-height: 18px;
}

.gana-preview {
  margin: 0 18px 18px;
  border: 1px solid #d8e3ee;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
  color: #435169;
  font-size: 12px;
}

.gana-preview pre {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  white-space: pre-wrap;
}

.gana-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid #e4eaf1;
  margin-top: 6px;
}

.gana-actions button,
.gana-sign-link {
  flex: 0 1 auto;
  border: 0;
  border-radius: 8px;
  padding: 11px 18px;
  background: #1f6fa8;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
}

/* Guardar = accion principal (verde); Cancelar = neutro, para que no compitan visualmente. */
.gana-actions .manual-contract-save { background: linear-gradient(180deg, #1f8a45, #126326); }
.gana-actions .gana-close { background: #eef2f7; color: #37475a; }

.gana-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.send-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 20, 34, 0.58);
}

.send-dialog {
  width: min(560px, 96vw);
  overflow: hidden;
  border-radius: 14px;
  background: #f8fbff;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
}

.send-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  background: linear-gradient(90deg, #063d67, #1f6fa8);
  color: #ffffff;
}

.send-head strong,
.send-head span {
  display: block;
}

.send-head strong {
  font-size: 17px;
  font-weight: 900;
}

.send-head span {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.9;
}

.send-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  cursor: pointer;
  font-size: 19px;
  font-weight: 900;
}

.send-body {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.send-body label {
  display: grid;
  gap: 5px;
  color: #435169;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.send-body input,
.send-body select,
.send-body textarea {
  min-height: 36px;
  border: 1px solid #bfd0e1;
  border-radius: 8px;
  padding: 8px 10px;
  color: #111827;
  font-size: 13px;
  font-weight: 700;
}

.send-body textarea {
  min-height: 122px;
  resize: vertical;
  text-transform: none;
  font-weight: 600;
}

.send-check {
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-content: start;
}

.send-check input {
  min-height: auto;
}

.send-status {
  padding: 10px 12px;
  border-radius: 8px;
  background: #eef4fb;
  color: #123762;
  font-size: 12px;
  font-weight: 800;
}

.send-status-success {
  background: #eef8ea;
  color: #126326;
}

.send-status-error {
  background: #fff0f0;
  color: #9f1d24;
}

.send-actions {
  padding: 0 18px 18px;
}

.send-submit {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 9px;
  background: #237b2e;
  color: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
}

.gana-submit-btn {
  background: #237b2e !important;
}

.history-sign {
  color: #126326;
  font-size: 12px;
  font-weight: 900;
}

.client-list {
  display: grid;
  gap: 8px;
  max-height: none;
  overflow: auto;
}

.client-list-summary {
  margin: 8px 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.client-table {
  min-width: 1480px;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.client-table-row {
  display: grid;
  /* CONTACTO (email/movil) y DIRECCION/CUPS anchos; CUENTA fija (238px) para que el IBAN se vea ENTERO. */
  grid-template-columns: 1.2fr 95px 108px 1.8fr 1.9fr 120px 238px 60px 196px;
  min-height: 38px;
  align-items: center;
  border-bottom: 1px solid #e3e9f0;
}

/* IBAN entero + boton de copiar */
.client-iban-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.client-iban-text {
  font-size: 11.5px;
  letter-spacing: -0.1px;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
}
.client-iban-copy {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #cfe0d4;
  border-radius: 6px;
  background: #eef8f1;
  color: #15803d;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.client-iban-copy:hover { background: #dcf0e2; }
.client-iban-copy.is-copied { background: #15803d; color: #fff; border-color: #15803d; }

/* Botones de acciones del listado: compactos, en UNA linea */
.client-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.client-row-actions button {
  min-height: 0;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  border: 1px solid #d3ddea;
  background: #f4f7fb;
  color: #274764;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.client-row-actions button:hover { background: #e7eef7; border-color: #b9c9dd; }
.client-row-actions .client-edit { background: #123762; border-color: #123762; color: #fff; }
.client-row-actions .client-edit:hover { background: #0f3054; }
.client-row-actions .client-delete { color: #a53b3b; border-color: #e6c6c6; background: #fdf4f4; }
.client-row-actions .client-delete:hover { background: #fbe7e7; }

.client-table-row:last-child {
  border-bottom: 0;
}

.client-table-row > span {
  min-width: 0;
  padding: 7px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
}

.client-table-head {
  min-height: 34px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, #17436f 0%, #123762 100%);
  color: #eaf3fb;
  text-transform: uppercase;
}
.client-table-head > span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  color: #cfe0f2;
}

.client-table-row:not(.client-table-head):nth-child(even) {
  background: #f7fafd;
}
.client-table-row:not(.client-table-head):hover {
  background: #eef4fb;
}
.client-table-row.is-active {
  background: #ecf9ef;
  box-shadow: inset 3px 0 0 #16a34a;
}
.client-table-row.is-active:hover {
  background: #e6f6ea;
}

.client-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  border: 1px solid #c8d9ee;
  border-radius: 999px;
  padding: 3px 8px;
  background: #eef5fb;
  color: #0b4f85;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.client-status-aceptado {
  border-color: #bfe2bf;
  background: #eef8ea;
  color: #126326;
}

.client-status-descartado {
  border-color: #f3c7c7;
  background: #fff2f2;
  color: #a71f1f;
}

.client-row-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.client-row-actions button,
.client-doc-link {
  min-height: 24px;
  border: 1px solid #c7d1dd;
  border-radius: 5px;
  background: #fff;
  color: #1c2737;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.client-doc-link {
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.client-card strong,
.client-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-actions {
  display: flex;
  gap: 6px;
  grid-column: 1 / -1;
  flex-wrap: wrap;
}

.client-actions button,
.tariff-actions button,
.client-doc-button {
  min-height: 32px;
  border: 1px solid #c7d1dd;
  border-radius: 6px;
  background: #fff;
  color: #1c2737;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.client-actions button.primary,
.tariff-actions button.primary,
.client-doc-button.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.client-docs {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.crm-controls .field-row {
  margin-bottom: 0;
  gap: 5px;
}

.crm-controls .field-row label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7c8f;
}

.crm-controls .field-row input,
.crm-controls .field-row select {
  width: 100%;
  min-height: 40px;
  border: 1.5px solid #d4dde8;
  border-radius: 10px;
  padding: 8px 12px;
  background: #ffffff;
  color: #0f2338;
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.crm-controls .field-row select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7c8f' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
}

.crm-controls .field-row input:hover,
.crm-controls .field-row select:hover {
  border-color: #b9c6d6;
}

.crm-controls .field-row input:focus,
.crm-controls .field-row select:focus {
  outline: none;
  border-color: #0f5c93;
  box-shadow: 0 0 0 3px rgba(15, 92, 147, 0.14);
}

.crm-controls .field-row input::placeholder {
  color: #9aa8b8;
}

.crm-current {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid #cfe6c8;
  border-radius: 12px;
  background: linear-gradient(180deg, #eef8ea, #e6f4e2);
  color: #126326;
  font-size: 13px;
  font-weight: 800;
}

.crm-current span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.crm-current strong {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 900;
  color: #2c4a34;
}

.crm-commission {
  color: #0b4a90;
}

.penalty-preview-field output {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 38px;
  border: 1px solid #dce4ef;
  border-radius: 9px;
  padding: 7px 10px;
  background: #f7fafd;
  color: #0b2545;
  font-weight: 900;
}

.penalty-preview-field output span {
  margin-top: 2px;
  color: #6b7280;
  font-size: 10px;
  font-weight: 800;
}

.history-list {
  display: grid;
  gap: 11px;
  max-height: 460px;
  overflow: auto;
  padding-right: 4px;
}

/* Tarjeta de oferta (CRM Ofertas). */
.history-record {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 16px;
  align-items: center;
  padding: 14px 16px 14px 20px;
  border: 1.5px solid #d4dde8;
  border-radius: 13px;
  background: #ffffff;
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}

.history-record::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 4px;
  background: #c3d0df;
}

.history-record.rec-luz::before { background: #e8a723; }
.history-record.rec-gas::before { background: #2f7fb5; }
.history-record.rec-luz30::before { background: #7b57d6; }

.history-record:hover {
  box-shadow: 0 8px 22px rgba(12, 30, 50, 0.12);
  transform: translateY(-1px);
  border-color: #c3d0df;
}

.history-record.is-active {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--focus);
}

.history-record.is-converted {
  background: linear-gradient(180deg, #f4f9ff, #eaf3ff);
  border-color: #bcd8f5;
}

.rec-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rec-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  min-width: 320px;
}

.history-open {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: #0f2338;
  cursor: pointer;
  text-align: left;
}

.history-name {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.history-open-action { display: none; }

.history-company-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.history-type-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.history-type-luz { background: #fdf0d6; color: #8a5a08; }
.history-type-gas { background: #dfeefb; color: #175888; }
.history-type-luz30 { background: #ece4fb; color: #5b39b7; }

.history-record.is-converted .history-name { color: #0b4a90; }

.history-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-converted-note { color: #0b4a90; }

.rec-figs {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.history-saving {
  font-size: 20px;
  font-weight: 900;
  color: #126326;
  font-variant-numeric: tabular-nums;
}

.history-commission {
  font-size: 12.5px;
  font-weight: 800;
  color: #0b4a90;
  background: #e9f1f9;
  border-radius: 8px;
  padding: 3px 9px;
}

.history-cups {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  font-family: "Cascadia Code", ui-monospace, "Consolas", monospace;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-permanence {
  display: flex;
  flex-direction: column;
  border: 1px solid #d4dde8;
  border-radius: 9px;
  padding: 5px 10px;
  background: #f6f9fc;
  color: #0b2d50;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

.history-permanence b {
  color: #7085a0;
  font-size: 9px;
  text-transform: uppercase;
}

.history-permanence strong { font-size: 12px; }

.history-permanence small {
  color: #7085a0;
  font-size: 10px;
  font-weight: 800;
}

.history-permanence-active.is-pending {
  border-color: #f0b24d;
  background: #fff7e7;
  color: #8a4d00;
}

.history-permanence-expired {
  border-color: #cce6d2;
  background: #eefaf0;
  color: #14732d;
}

.history-permanence-missing {
  border-style: dashed;
  color: #6b7280;
}

.history-row-actions {
  display: flex;
  gap: 7px;
  align-items: center;
}

.history-status {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  border: 1.5px solid #d4dde8;
  border-radius: 9px;
  padding: 6px 10px;
  background: #ffffff;
  color: #0f2338;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.history-status:hover { border-color: #b9c6d6; }

.history-pdf,
.history-email,
.history-whatsapp,
.history-accept {
  min-height: 36px;
  border-radius: 9px;
  border: 1.5px solid #d4dde8;
  padding: 6px 12px;
  background: #ffffff;
  color: #0f2338;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  transition: filter 0.12s, background 0.12s;
}

.history-email:hover,
.history-whatsapp:hover { background: #f6f9fc; }

.history-pdf {
  border-color: var(--blue);
  background: var(--blue);
  color: #ffffff;
}
.history-pdf:hover { filter: brightness(1.08); }

.history-whatsapp {
  border-color: #27b45b;
  color: #1c8a49;
}

.history-accept {
  border-color: #126326;
  background: linear-gradient(180deg, #1f8a45, #126326);
  color: #ffffff;
}
.history-accept:hover { filter: brightness(1.06); }

.history-pdf:disabled,
.history-email:disabled,
.history-whatsapp:disabled,
.history-accept:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.history-row-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.history-commercial {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.history-commercial-select {
  min-width: 150px;
  min-height: 34px;
  border: 1.5px solid #d4dde8;
  border-radius: 9px;
  padding: 5px 10px;
  background: #ffffff;
  color: #0b2d50;
  font-size: 12px;
  font-weight: 800;
}

.history-row-foot-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-screenclip,
.history-sign {
  font-size: 11px;
  font-weight: 800;
  color: var(--blue);
  text-decoration: none;
  border: 1px solid #cfe0f0;
  border-radius: 8px;
  padding: 5px 10px;
  background: #f2f8ff;
}

.history-delete {
  border: 1px solid #f2c7c7;
  border-radius: 8px;
  padding: 6px 12px;
  background: #fff5f5;
  color: #9f1d24;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.history-delete:hover {
  background: #9f1d24;
  border-color: #9f1d24;
  color: #fff;
}

.history-empty {
  padding: 10px;
  border: 1px dashed #c5cfdb;
  border-radius: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.contracts-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #063d67, #1f6fa8);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(6, 61, 103, 0.18);
}

.contracts-hero .crm-title {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 22px;
  text-align: left;
}

.contracts-hero p {
  margin: 0;
  max-width: 760px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 700;
}

.contracts-hero button,
.contract-actions button,
.contract-actions a {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  background: #ffffff;
  color: #0f4e80;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.contracts-hero-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.contracts-hero button:disabled {
  opacity: 0.7;
  cursor: wait;
}

.contract-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.contract-kpi {
  min-height: 78px;
  padding: 12px;
  border: 1px solid #dbe3ec;
  border-radius: 12px;
  background: #fbfdff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.contract-kpi span {
  display: block;
  color: #536070;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.contract-kpi strong {
  display: block;
  margin-top: 7px;
  color: #123762;
  font-size: 24px;
  font-weight: 900;
}

/* Tabla de contratos a ANCHO COMPLETO SIEMPRE: la ficha del detalle va debajo (no a la derecha)
   para no robar ancho a la tabla de 12 columnas y que se vea lo mas grande posible. */
.contracts-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

/* Contratos y Renovaciones son tablas de muchas columnas: necesitan mas ancho que el resto de
   paneles (limitados a 1280px). Se ensanchan para que quepan sin barra horizontal y se vean el
   nombre del cliente y el CUPS completos en monitores anchos. */
.crm-page #contracts-panel,
.crm-page #renewals-panel,
.crm-page #clients-panel {
  width: min(1780px, 100%);
}

.gana-luz-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 14px;
  align-items: start;
}

.gana-luz-form-card,
.gana-luz-list-card,
.gana-luz-detail {
  min-width: 0;
  border: 1px solid #dbe3ec;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.gana-luz-form-card,
.gana-luz-list-card {
  padding: 12px;
}

.gana-luz-form {
  display: grid;
  gap: 12px;
}

.gana-luz-section-title {
  border-left: 5px solid #237b2e;
  border-radius: 8px;
  padding: 8px 10px;
  background: #eef8ef;
  color: #06294a;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.gana-luz-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.gana-luz-form label {
  display: grid;
  gap: 5px;
  color: #41516a;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.gana-luz-form input,
.gana-luz-form select,
.gana-luz-filters input,
.gana-luz-filters select {
  min-height: 38px;
  width: 100%;
  border: 1px solid #b8cce2;
  border-radius: 8px;
  padding: 8px 10px;
  background: #f8fbff;
  color: #071f3a;
  font-weight: 850;
}

.gana-luz-representation {
  border: 1px solid #b9e2c1;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f0fbf2;
  color: #0b5f23;
  font-weight: 950;
}

.gana-webhook-box {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(260px, 1.5fr) auto;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
  border: 1px solid #cfe0f1;
  border-left: 5px solid #1f6fa8;
  border-radius: 10px;
  padding: 10px 12px;
  background: #f7fbff;
}

.gana-webhook-box div {
  display: grid;
  gap: 3px;
}

.gana-webhook-box strong {
  color: #06294a;
  font-size: 13px;
  font-weight: 950;
}

.gana-webhook-box span {
  color: #53647b;
  font-size: 11px;
  font-weight: 750;
}

.gana-webhook-box input {
  min-width: 0;
  min-height: 36px;
  border: 1px solid #b8cce2;
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
  color: #071f3a;
  font-size: 12px;
  font-weight: 850;
}

.gana-webhook-box button {
  min-height: 36px;
  border: 1px solid #0a4a78;
  border-radius: 8px;
  padding: 0 12px;
  background: #0a4a78;
  color: #ffffff;
  cursor: pointer;
  font-weight: 950;
  white-space: nowrap;
}

.gana-luz-warning {
  border: 1px solid #f2b8b8;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff1f1;
  color: #a01d24;
  font-weight: 950;
}

.gana-luz-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.gana-luz-actions button {
  min-height: 40px;
  border: 1px solid #b8cce2;
  border-radius: 8px;
  padding: 0 14px;
  background: #ffffff;
  color: #0a4a78;
  cursor: pointer;
  font-weight: 950;
}

.gana-luz-actions button.is-primary {
  border-color: #0e7f35;
  background: #0e7f35;
  color: #ffffff;
}

.gana-luz-filters {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, minmax(100px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.gana-luz-contract-list {
  display: grid;
  gap: 8px;
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.gana-luz-row {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid #d6e2ef;
  border-left: 5px solid #1f6fa8;
  border-radius: 10px;
  padding: 10px;
  background: #f8fbff;
  cursor: pointer;
}

.gana-luz-row.is-selected {
  border-left-color: #237b2e;
  background: #f0fbf2;
}

.gana-luz-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
  font-size: 12px;
  font-weight: 950;
}

.gana-luz-row span > b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gana-luz-row small {
  min-width: 0;
  overflow: hidden;
  color: #53647b;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gana-luz-status {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  background: #e8f2ff;
  color: #0a4a78;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.gana-luz-status-activado,
.gana-luz-status-enviado_gana_api {
  background: #e4f8e6;
  color: #126326;
}

.gana-luz-status-pendiente_revision_manual,
.gana-luz-status-error_api {
  background: #fff0f0;
  color: #a51d24;
}

.gana-luz-status-tramitacion_manual,
.gana-luz-status-pendiente_enviar_api {
  background: #fff5d6;
  color: #8a5a00;
}

.gana-luz-detail {
  margin-top: 12px;
  padding: 12px;
}

.gana-luz-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 12px;
  margin: 10px 0;
}

.gana-luz-detail-grid > div {
  min-width: 0;
}

.gana-luz-detail-grid > div strong {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.gana-luz-payload {
  margin: 10px 0;
  border: 1px solid #d6e2ef;
  border-radius: 10px;
  background: #f8fbff;
  padding: 8px 10px;
}

.gana-luz-payload > summary {
  cursor: pointer;
  color: #0a4a78;
  font-size: 12px;
  font-weight: 950;
}

.gana-luz-payload-text {
  width: 100%;
  margin-top: 8px;
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid #cdd9e6;
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
  color: #1f2d3d;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre;
}

.gana-luz-copy-payload {
  margin-top: 8px;
  border: 0;
  border-radius: 8px;
  padding: 7px 14px;
  background: #1f6fa8;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.gana-luz-copy-payload:hover {
  background: #185a89;
}

.contracts-list-card,
.contract-detail-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dbe3ec;
  border-radius: 12px;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.contracts-filters {
  display: grid;
  /* Auto-ajuste: los filtros (BUSCAR, ESTADO, COMERCIAL, TIPO, COMPAÑIA, VISTA RAPIDA, MES, AÑO)
     se reparten en las columnas que quepan y se envuelven a la siguiente fila. Asi MES/AÑO nunca
     quedan cortados aunque la tarjeta sea estrecha. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.contracts-table {
  display: grid;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.contract-grid-pro {
  grid-template-columns: 155px 118px 190px 128px 112px 230px 120px 180px 132px 78px 82px 160px 126px 132px 140px 108px 98px 104px 104px 104px 120px 118px 118px 220px 190px;
  min-width: 3248px;
}

/* Vista COMPACTA: columnas esenciales del listado de contratos (Nº·Contrato, Fecha grabado,
   Cliente, CUPS, Compañía, Peaje, Tarifa, Estado compañía, Comercial, Comisión, Activación,
   Acciones). Fluida, sin scroll horizontal. El detalle completo al hacer clic en la fila. */
.contracts-table.is-compact .contract-grid-pro {
  /* Mínimos reducidos (~1616px -> ~1260px) para que quepa en una ventana sin scroll horizontal. */
  grid-template-columns: minmax(98px, 1fr) minmax(66px, 0.75fr) minmax(112px, 1.5fr) minmax(86px, 1fr) minmax(142px, 1.4fr) minmax(74px, 0.85fr) minmax(46px, 0.45fr) minmax(86px, 1.1fr) minmax(80px, 0.95fr) minmax(86px, 1fr) minmax(64px, 0.75fr) minmax(76px, 0.8fr) minmax(64px, 0.75fr) minmax(158px, 1.7fr);
  min-width: 0;
}
.contracts-table.is-compact .contract-grid-pro > span,
.contracts-table.is-compact .contract-grid-pro > * { font-size: 12px; }
/* Botón ✓ Tramitado en la fila (Acciones) */
.contract-row-tramitado {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 8px; margin-right: 4px;
  border: 1px solid #15803d; border-radius: 7px;
  background: #15803d; color: #fff;
  font-size: 11px; font-weight: 800; white-space: nowrap; cursor: pointer;
  transition: background .12s;
}
.contract-row-tramitado:hover { background: #0f5f2c; }
.contract-inline-admin { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
/* Consumo (nth-child 15) AHORA se muestra en compacta (la comision se paga por consumo del CUPS). */
.contracts-table.is-compact .contract-grid-pro > *:nth-child(5),
.contracts-table.is-compact .contract-grid-pro > *:nth-child(6),
.contracts-table.is-compact .contract-grid-pro > *:nth-child(7),
.contracts-table.is-compact .contract-grid-pro > *:nth-child(10),
.contracts-table.is-compact .contract-grid-pro > *:nth-child(13),
.contracts-table.is-compact .contract-grid-pro > *:nth-child(17),
.contracts-table.is-compact .contract-grid-pro > *:nth-child(19),
.contracts-table.is-compact .contract-grid-pro > *:nth-child(20),
.contracts-table.is-compact .contract-grid-pro > *:nth-child(21),
.contracts-table.is-compact .contract-grid-pro > *:nth-child(22),
.contracts-table.is-compact .contract-grid-pro > *:nth-child(24) {
  display: none;
}

/* Comparativa de gas por compania (Gana vs Naturgy) en el estudio de gas */
/* Contenedor cuando se pinta DEBAJO del dashboard (parte visual) */
.gas-compare-below {
  width: min(1240px, 100%);
  margin: 16px auto 10px;
  padding: 0 12px;
  box-sizing: border-box;
}
.gas-compare-below[hidden] { display: none; }
.gas-compare-below .gas-compare-group { margin: 0; padding: 16px 18px; }
.gas-compare-head { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-bottom: 12px; }
/* Conmutador segmentado Vista cliente / Vista asesor (compartido: gas y luz 2.0/3.0) */
.view-switch { display: inline-flex; border: 1px solid #cdd9e5; border-radius: 999px; background: #f4f8fc; padding: 3px; gap: 2px; }
.view-opt { border: 0; background: transparent; padding: 6px 18px; border-radius: 999px; font-weight: 800; font-size: 12px; color: #536070; cursor: pointer; transition: background .12s ease, color .12s ease; }
.view-opt.is-active { background: #0b62c6; color: #fff; box-shadow: 0 1px 2px rgba(11, 98, 198, 0.3); }
.view-opt:not(.is-active):hover { color: #0b62c6; }
.gas-oferta-hint { margin: -2px 0 10px; font-size: 11px; color: #6b7683; font-style: italic; }
.gas-compare-panel { display: grid; gap: 10px; }
/* Compañia crece a la izquierda; las metricas (ahorro/comision) quedan a la DERECHA, alineadas y
   pegadas al boton, en columnas de ancho fijo para que cuadren fila a fila. */
.gas-compare-row { display: grid; grid-template-columns: minmax(200px, 1fr) 170px auto; align-items: center; gap: 28px; padding: 12px 18px; border: 1px solid #d7dee6; border-radius: 10px; background: #fff; }
.gas-compare-row.has-commission { grid-template-columns: minmax(200px, 1fr) 160px 170px auto; }
.gas-compare-commission span { color: #0b62c6; font-weight: 800; font-size: 16px; }
.gas-compare-row.is-best { border-color: #5d973e; background: #f2f8ec; }
.gas-compare-row.is-selected { box-shadow: 0 0 0 2px #0b62c6 inset; }
.gas-compare-company { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; }
.gas-compare-badge { background: #5d973e; color: #fff; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.gas-compare-metric { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; align-items: flex-end; text-align: right; }
.gas-compare-metric small { color: #6b7683; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.gas-compare-metric b { color: #1f7a1f; font-size: 17px; }
.gas-compare-metric > span { font-size: 15px; font-weight: 700; color: #1c2737; }
.gas-compare-pick { padding: 9px 20px; border-radius: 9px; border: 1px solid #0b62c6; background: #0b62c6; color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; }
.gas-compare-pick:hover { filter: brightness(1.05); }
.gas-compare-pick.is-selected { background: #5d973e; border-color: #5d973e; }
@media (max-width: 720px) {
  .gas-compare-row, .gas-compare-row.has-commission { grid-template-columns: 1fr auto; gap: 12px; }
  .gas-compare-company { grid-column: 1 / -1; }
  .gas-compare-metric { align-items: flex-start; text-align: left; }
  .gas-compare-pick { grid-column: 1 / -1; }
}

/* Doble clase (.contract-row.contract-head) para ganar en especificidad a la regla base .contract-row
   (definida mas abajo), que si no le pone fondo claro + texto oscuro y la cabecera "no se ve"
   (textos blancos sobre fondo claro). */
.contract-row.contract-head {
  position: sticky;
  top: 0;
  z-index: 2;
  border-color: #0b2a42;
  background: #0b2a42;
  color: #ffffff;
}

.contract-row.contract-head span {
  color: #ffffff;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.contract-code,
.contract-money,
.contract-state-badge {
  font-weight: 950;
}

.contract-recalc-commission {
  margin-left: 6px;
  border: 1px solid #cfe4c1;
  background: #f1f8ed;
  color: #0f7c2d;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1;
  padding: 2px 6px;
  cursor: pointer;
}

.contract-recalc-commission:hover {
  background: #e2f2d8;
}

.user-pass-cell {
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-pass-cell .user-password {
  flex: 1;
  min-width: 0;
}

.user-pass-toggle {
  border: 1px solid #cfd8e3;
  background: #f4f7fb;
  border-radius: 6px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}

.contract-code {
  color: #085a9c;
}

.contract-money {
  color: #087f2e;
}

.contract-money.is-red {
  color: #bd2525;
}

.contract-state-badge {
  display: inline-grid;
  min-height: 24px;
  align-items: center;
  border-radius: 999px;
  padding: 3px 9px;
  background: #eef4fa;
  color: #123762;
  font-size: 10px;
  text-transform: uppercase;
}

.contract-state-badge.is-active-state,
.contract-row.is-active-state .contract-state-badge {
  background: #e5f7e8;
  color: #087f2e;
}

.contract-state-badge.is-processed,
.contract-row.is-processed .contract-state-badge {
  background: #fff200;
  color: #1f2937;
}

.contract-state-badge.is-sent,
.contract-row.is-sent .contract-state-badge {
  background: #e5f0ff;
  color: #075a9c;
}

.contract-state-badge.is-sign,
.contract-row.is-sign .contract-state-badge {
  background: #efe5ff;
  color: #6a2bbf;
}

.contract-state-badge.is-doc,
.contract-row.is-doc .contract-state-badge {
  background: #f4ead7;
  color: #76530b;
}

.contract-state-badge.is-danger,
.contract-row.is-danger .contract-state-badge {
  background: #ffe5e5;
  color: #b4232b;
}

.contract-row.is-active-state {
  border-left: 4px solid #16843a;
  background: #f4fbf5;
}

.contract-row.is-processed {
  border-left: 4px solid #d8cc00;
  background: #fffde8;
}

.contract-row.is-sent {
  border-left: 4px solid #2477b8;
  background: #f4f9ff;
}

.contract-row.is-sign {
  border-left: 4px solid #7b46d6;
  background: #fbf7ff;
}

.contract-row.is-doc {
  border-left: 4px solid #b89142;
  background: #fffaf0;
}

.contract-row.is-danger {
  border-left: 4px solid #c92a2a;
  background: #fff5f5;
}

/* Renovaciones futuras (placeholders "pendiente de renovacion") en la vista de Contratos por mes */
.contract-row.is-renovacion {
  border-left: 4px solid #8b3ff0;
  background: #f6f0ff;
}
.contract-row.is-renovacion .contract-code {
  color: #6a1fb8;
  font-weight: 700;
}
.contract-state-badge.is-renovacion {
  background: #efe3ff;
  color: #6a1fb8;
}

.contract-inline-admin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
}

.contract-admin-wide {
  grid-column: 1 / -1;
}

.contract-admin-wide textarea {
  min-height: 58px;
  resize: vertical;
}

.contract-readonly-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid #dbe8f4;
  border-radius: 8px;
  background: #f7fbff;
  color: #516278;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.contract-month-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(150px, 1.2fr);
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.contract-month-summary article {
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid #dbe3ec;
  border-radius: 10px;
  background: #fbfdff;
}

.contract-month-summary span {
  display: block;
  color: #536070;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.contract-month-summary strong {
  display: block;
  margin-top: 5px;
  color: #123762;
  font-size: 18px;
  font-weight: 950;
}

.contract-month-summary .is-green {
  color: #087f2e;
}

.contract-month-summary .is-amber {
  color: #b77900;
}

.contract-month-summary .is-red {
  color: #c62828;
}

.contract-month-total {
  background: #f1f8ed;
  border-color: #cfe4c1;
}

.contract-month-total strong {
  color: #0f7c2d;
}

.contract-month-note {
  margin-top: 6px;
  font-size: 12px;
  color: #536070;
}

.history-month-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.history-month-summary article {
  position: relative;
  overflow: hidden;
  min-height: 56px;
  padding: 15px 18px 15px 20px;
  border: 1px solid #e4eaf1;
  border-radius: 14px;
  background: #f6f9fc;
}

.history-month-summary article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.history-month-summary .kpi-ofertas::before { background: #0f5c93; }
.history-month-summary .kpi-ahorro::before { background: #1f8a45; }
.history-month-summary .kpi-comision::before { background: #7b57d6; }

.history-month-summary span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #6b7c8f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.history-month-summary strong {
  display: block;
  margin-top: 6px;
  color: #0f2338;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.history-month-summary .kpi-ahorro strong { color: #126326; }
.history-month-summary .kpi-comision strong { color: #5b39b7; }

.history-month-total {
  background: #f6f9fc;
  border-color: #e4eaf1;
}

.history-month-total strong {
  color: #126326;
}

@media (max-width: 720px) {
  .history-month-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .history-month-summary article:first-child {
    grid-column: 1 / -1;
  }
}

.provider-hero {
  background: linear-gradient(135deg, #f7fbf4, #ffffff);
  border: 1px solid #d7e7cb;
}

.provider-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 12px;
}

.provider-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbe3ec;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.provider-card header {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.provider-card header strong {
  display: block;
  color: #0b2a42;
  font-size: 16px;
  font-weight: 950;
}

.provider-card header span,
.provider-card-grid small {
  display: block;
  color: #64748b;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.provider-card header b {
  min-width: 62px;
  border-radius: 999px;
  background: #eaf7ea;
  color: #13752c;
  padding: 7px 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 950;
}

.provider-manual header b {
  background: #fff7df;
  color: #9a6500;
}

.provider-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.provider-card-grid span {
  min-width: 0;
  padding: 9px;
  border-radius: 8px;
  background: #f8fafc;
}

.provider-card-grid b {
  display: block;
  margin-top: 4px;
  color: #0b2a42;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.manual-hero {
  background: linear-gradient(135deg, #f7fbf4, #ffffff);
}

.manual-kpis {
  grid-template-columns: repeat(5, minmax(120px, 1fr));
}

.manual-period-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #dbe9d2;
  border-radius: 10px;
  background: #fbfef8;
}

.manual-period-bar label {
  display: grid;
  gap: 4px;
  min-width: 150px;
  color: #0b2a42;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.manual-period-bar select {
  min-height: 38px;
  border: 1px solid #b9c9dc;
  border-radius: 8px;
  background: #fff;
  color: #0b2a42;
  font-weight: 850;
}

.manual-period-button,
.manual-period-current {
  min-height: 38px;
  border: 1px solid #c4d2e2;
  border-radius: 8px;
  background: #fff;
  color: #0b2a42;
  font-weight: 950;
  cursor: pointer;
}

.manual-period-button {
  width: 42px;
  font-size: 22px;
  line-height: 1;
}

.manual-period-current {
  padding: 0 14px;
}

.manual-month-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) minmax(160px, 1.2fr);
  gap: 8px;
  margin: 10px 0 12px;
}

.manual-month-summary article {
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid #dbe3ec;
  border-radius: 10px;
  background: #fbfdff;
}

.manual-month-summary span {
  display: block;
  color: #536070;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.manual-month-summary strong {
  display: block;
  margin-top: 5px;
  color: #123762;
  font-size: 18px;
  font-weight: 950;
}

.manual-month-summary .is-green {
  color: #087f2e;
}

.manual-month-summary .is-amber {
  color: #b77900;
}

.manual-month-summary .is-red {
  color: #c62828;
}

.manual-month-total {
  background: #f1f8ed;
  border-color: #b9d7a8;
}

.manual-table-head,
.manual-row {
  grid-template-columns: 150px 150px 150px 150px 90px 90px 190px 125px 105px 105px;
  min-width: 1410px;
}

.manual-table-head {
  background: #0b2a42;
  color: #fff;
}

.manual-table-head span {
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.manual-row {
  cursor: pointer;
}

.manual-row.is-selected {
  border-left: 4px solid #0b7d32;
  background: #f2fbf2;
}

.manual-edit-card button {
  align-self: start;
  background: #0b7d32;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 800;
}

.contract-row {
  display: grid;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid #dbe3ec;
  border-radius: 10px;
  background: #fbfdff;
  color: #1c2737;
  font-size: 11px;
  font-weight: 850;
}

.contract-row > span,
.contract-row > button,
.contract-row > div {
  min-width: 0;
}

.contract-row > span,
.contract-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-row.is-active {
  border-color: #1f6fa8;
  box-shadow: 0 0 0 2px rgba(31, 111, 168, 0.14);
}

.contract-open {
  display: grid;
  gap: 2px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #111827;
  cursor: pointer;
  text-align: left;
}

.contract-client,
.contract-saving {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 900;
}

.contract-meta,
.contract-cups,
.contract-tariff,
.contract-commercial-tag,
.contract-commission,
.contract-status-mini,
.contract-date-mini {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #536070;
  font-size: 11px;
  font-weight: 800;
}

.contract-status-mini,
.contract-date-mini,
.contract-tariff,
.contract-saving,
.contract-commission,
.contract-assigned-commercial {
  display: grid;
  gap: 2px;
}

.contract-status-mini b,
.contract-date-mini b,
.contract-tariff b,
.contract-saving b,
.contract-commission b,
.contract-assigned-commercial b {
  overflow: hidden;
  color: #123762;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 900;
}

.contract-status-mini small,
.contract-date-mini small,
.contract-tariff small,
.contract-saving small,
.contract-commission small,
.contract-assigned-commercial small {
  overflow: hidden;
  color: #64748b;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
}

.contract-status-select,
.contract-commercial-select,
.contract-commission-select,
.contracts-filters select,
.contracts-filters input {
  min-height: 32px;
  width: 100%;
  border: 1px solid #bfd0e1;
  border-radius: 7px;
  background: #ffffff;
  /* Espacio a la derecha para la flecha del desplegable: evita que el texto se solape con ella. */
  padding: 6px 18px 6px 7px;
  color: #1c2737;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.renewals-hero {
  background: linear-gradient(135deg, #0d5f4c, #1f7a68);
}

.renewal-kpis {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.renewal-card {
  overflow: visible;
}

.renewal-filters {
  grid-template-columns: minmax(250px, 1.35fr) repeat(7, minmax(118px, 0.72fr)) minmax(130px, 0.55fr);
  align-items: end;
}

.renewal-status-field {
  position: relative;
}

.multi-filter {
  position: relative;
}

.multi-filter summary {
  display: grid;
  min-height: 32px;
  align-items: center;
  border: 1px solid #bfd0e1;
  border-radius: 7px;
  background: #ffffff;
  padding: 6px 30px 6px 8px;
  color: #1c2737;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.multi-filter summary::-webkit-details-marker {
  display: none;
}

.multi-filter summary::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 11px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #60758c;
  border-bottom: 2px solid #60758c;
  transform: rotate(45deg);
}

.multi-filter[open] summary::after {
  top: 17px;
  transform: rotate(225deg);
}

.multi-filter-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  width: min(280px, 78vw);
  max-height: 310px;
  overflow: auto;
  border: 1px solid #bfd0e1;
  border-radius: 10px;
  background: #ffffff;
  padding: 8px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
  gap: 6px;
}

.multi-filter-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 2px;
}

.multi-filter-actions button {
  min-height: 30px;
  border: 1px solid #bfd0e1;
  border-radius: 7px;
  background: #eef4fa;
  color: #123762;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.multi-filter-actions button:last-child {
  border-color: #1f7a68;
  background: #1f7a68;
  color: #ffffff;
}

.multi-filter-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  border-radius: 7px;
  padding: 7px 8px;
  color: #1c2737;
  font-size: 12px;
  font-weight: 900;
}

.multi-filter-option:hover {
  background: #f1fbf6;
}

.multi-filter-option input {
  width: 15px;
  height: 15px;
  accent-color: #1f7a68;
}

.multi-filter-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-filter-option small {
  min-width: 26px;
  border-radius: 999px;
  background: #eef4fa;
  color: #536070;
  padding: 2px 6px;
  text-align: center;
  font-size: 10px;
  font-weight: 900;
}

.renewal-count {
  display: grid;
  min-height: 32px;
  place-items: center;
  border: 1px solid #cde0d9;
  border-radius: 7px;
  background: #f1fbf6;
  color: #126326;
  font-size: 12px;
  font-weight: 900;
}

.renewal-table {
  display: grid;
  gap: 7px;
  overflow-x: auto;
}

.renewal-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.5fr) minmax(116px, 1.1fr) minmax(80px, 0.9fr) 88px 88px 86px 56px 70px 82px minmax(84px, 0.9fr) minmax(92px, 1fr) 124px;
  min-width: 1120px;
  gap: 6px;
  align-items: center;
  padding: 8px;
  border: 1px solid #dbe3ec;
  border-radius: 10px;
  background: #fbfdff;
  color: #1c2737;
  font-size: 11.5px;
  font-weight: 800;
}

/* Desplegable de estado editable por fila (cambiar estado a mano / marcar renovado) */
.renewal-status-edit {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 6px;
  border: 1px solid #c3d3e2;
  border-radius: 6px;
  background: #fff;
  color: #1c2737;
  cursor: pointer;
}
.renewal-status-edit.is-saving { opacity: 0.5; }
.renewal-status-edit.is-renovado { background: #e7f6ec; border-color: #8fcea8; color: #126c30; }

/* Conmutador Por renovar / Renovados */
.renewal-view-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 10px;
}
.renewal-view-btn {
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #eaf3fb;
  font-weight: 800;
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.renewal-view-btn small {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 900;
}
.renewal-view-btn.is-active {
  background: #ffffff;
  color: #0b243c;
}
.renewal-view-btn.is-active small {
  background: #d8ebfa;
  color: #0b243c;
}

/* Tabla de renovados (9 columnas): Cliente, CUPS, Contacto, Comp. anterior, Nueva, Activacion, Prox. renov, Tarifa, Acciones */
.renewal-row-renovados {
  grid-template-columns: minmax(140px, 1.4fr) minmax(150px, 1.1fr) minmax(104px, 1fr) minmax(78px, 0.8fr) minmax(118px, 1.1fr) 98px minmax(104px, 0.95fr) minmax(92px, 1fr) 122px;
  min-width: 1180px;
}
.renov-activ { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.renewal-row.is-renovado-row {
  background: #f1faf3;
  border-color: #bfe3c9;
}
.renewal-cups {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  word-break: break-all;
  color: #1c2737;
}
.renewal-row.is-renovado-row.renov-alarma {
  background: #fff6e8;
  border-color: #f0c98a;
}
.renewal-row.is-renovado-row.renov-vencido {
  background: #fdecec;
  border-color: #f0a9a9;
}
.renov-next { display: flex; flex-direction: column; gap: 2px; }
.renov-badge { font-weight: 900; }
.renov-badge.is-alarma { color: #a86212; }
.renov-badge.is-vencido { color: #b91c1c; }
.renov-days-ok { color: #6b7787; font-weight: 700; }
.renov-alarm-banner {
  background: #fff6e8;
  border: 1px solid #f0c98a;
  color: #7a4c10;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12.5px;
  font-weight: 800;
  margin-bottom: 8px;
}
.renewal-pop-hint { color: #6b7787; font-size: 10.5px; font-weight: 700; margin-top: -2px; }
.renewal-new-company {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}
.renewal-new-company b { color: #126c30; }
.renewal-new-empty { color: #b0641c; font-weight: 800; }
.renov-gana-num { color: #0b4f85; font-weight: 800; font-size: 10px; }
.renewal-edit-company {
  border: 1px solid #bcd3c4;
  background: #eaf6ee;
  color: #126c30;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  cursor: pointer;
}
.renewal-reopen {
  border: 1px solid #c3d3e2;
  background: #fff;
  color: #1c4c7a;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.renewal-reopen:hover { background: #eef4fa; }

/* Popover de nueva compañia */
.renewal-company-pop {
  position: absolute;
  z-index: 4000;
  width: 250px;
  background: #ffffff;
  border: 1px solid #b8cad8;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(8, 20, 34, 0.28);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.renewal-company-pop label { font-size: 11px; font-weight: 900; color: #123762; text-transform: uppercase; }
.renewal-company-pop input {
  border: 1px solid #c3d3e2;
  border-radius: 7px;
  padding: 7px 9px;
  font-size: 13px;
  font-weight: 700;
}
.renewal-company-pop-actions { display: flex; justify-content: flex-end; gap: 6px; }
.renewal-company-pop-actions button {
  border-radius: 7px;
  border: 1px solid #c3d3e2;
  background: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
}
.renewal-company-pop-actions .primary { background: #1f6fb2; border-color: #1f6fb2; color: #fff; }

.renewal-head {
  border-color: #b8cad8;
  background: #eef4fa;
  color: #123762;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.renewal-client,
.renewal-contact,
.renewal-date {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.renewal-client b,
.renewal-contact b,
.renewal-open-client,
.renewal-date b,
.renewal-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.renewal-open-client {
  display: block;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #123762;
  cursor: pointer;
  padding: 0;
  text-align: left;
  font-size: 12px;
  font-weight: 900;
}

.renewal-open-client:hover {
  color: #0f66a8;
  text-decoration: underline;
}

.renewal-client small,
.renewal-contact small,
.renewal-date small {
  overflow: hidden;
  color: #64748b;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
}

.renewal-days {
  display: inline-grid;
  min-height: 28px;
  place-items: center;
  border-radius: 999px;
  background: #eef4fa;
  color: #123762;
  font-weight: 900;
}

.renewal-commission {
  color: #126326;
  font-weight: 950;
}

.renewal-viability {
  display: inline-grid;
  min-height: 25px;
  place-items: center;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.renewal-viability.is-renovable {
  background: #e7f7ec;
  color: #126326;
}

.renewal-viability.is-revisar {
  background: #fff3d8;
  color: #8a5600;
}

.renewal-viability.is-no-renovable {
  background: #ffe5e5;
  color: #a32020;
}

.renewal-row.is-expired {
  border-color: #f1a4a4;
  background: #fff4f4;
}

.renewal-row.is-expired .renewal-days {
  background: #c52f32;
  color: #ffffff;
}

.renewal-row.is-urgent {
  border-color: #efb15c;
  background: #fff8ec;
}

.renewal-row.is-urgent .renewal-days {
  background: #d88400;
  color: #1d1605;
}

.renewal-row.is-soon {
  border-color: #8cc7a4;
  background: #f4fbf6;
}

.renewal-row.is-soon .renewal-days {
  background: #237b2e;
  color: #ffffff;
}

.client-contracts-box {
  margin-top: 14px;
  border: 1px solid #dbe3ec;
  border-radius: 10px;
  background: #fbfdff;
  padding: 10px;
}

.client-contracts-box h4 {
  margin: 0 0 8px;
  color: #123762;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.client-contracts-list {
  display: grid;
  gap: 7px;
  max-height: 230px;
  overflow: auto;
}

.client-contract-item {
  display: grid;
  gap: 2px;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #ffffff;
  padding: 8px;
}

.client-contract-item strong {
  color: #123762;
  font-size: 12px;
}

.client-contract-item span,
.client-contract-item small {
  overflow: hidden;
  color: #536070;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
}

.contract-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* Buscador de cliente existente en el modal "Crear contrato". */
.manual-client-search {
  grid-column: 1 / -1;
  background: #f2f8ff;
  border: 1px solid #cfe0f0;
  border-radius: 10px;
  padding: 10px 12px;
}
.manual-client-search input {
  border-color: #9dc2e6 !important;
}
.manual-client-search small {
  display: block;
  margin-top: 5px;
  color: #5a6b7c;
  font-size: 11px;
  font-weight: 600;
}

/* Paso 2: banner de conciliacion CRM <-> compañia en la ficha del contrato. */
.contract-reconcile {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 800;
  border: 1px solid;
}
.contract-reconcile-ok { background: #eaf7ed; border-color: #bfe3c8; color: #14732d; }
.contract-reconcile-wait { background: #fff7e7; border-color: #f0d9a8; color: #8a5a00; }
.contract-reconcile-warn { background: #fff2e2; border-color: #f2ce9e; color: #9a5410; }
.contract-reconcile-danger { background: #fdecec; border-color: #f2c1c1; color: #a11d1d; }

.contract-detail-head strong,
.contract-detail-head span {
  display: block;
}

.contract-detail-head strong {
  color: #123762;
  font-size: 18px;
  font-weight: 900;
}

.contract-detail-head span {
  margin-top: 3px;
  color: #536070;
  font-size: 12px;
  font-weight: 800;
}

.contract-status-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 10px;
  background: #eef4fb;
  color: #123762;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.contract-status-pendiente_firma,
.contract-status-presupuesto_aceptado,
.contract-status-firmado {
  background: #fff8e5;
  color: #7a4b00;
}

.contract-status-activado {
  background: #eef8ea;
  color: #126326;
}

.contract-status-incidencia,
.contract-status-scoring,
.contract-status-anulado,
.contract-status-rechazado,
.contract-status-cancelado {
  background: #fff0f0;
  color: #9f1d24;
}

.contract-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.contract-detail-grid div {
  min-width: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px;
  background: #fbfdff;
}

.contract-detail-grid span,
.contract-detail-grid strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contract-detail-grid span {
  color: #536070;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.contract-detail-grid strong {
  margin-top: 4px;
  color: #111827;
  font-size: 12px;
  font-weight: 900;
}

.contract-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}

.contract-detail-commercial {
  display: grid;
  gap: 4px;
  min-width: 180px;
}

.contract-detail-commercial span {
  color: #536070;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.contract-detail-commercial select {
  min-height: 34px;
  border: 1px solid #bfd0e1;
  border-radius: 7px;
  background: #ffffff;
  padding: 6px 8px;
  color: #1c2737;
  font-size: 12px;
  font-weight: 900;
}

.contract-actions button,
.contract-actions a {
  border-color: #c7d1dd;
}

.contract-client-docs {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid #d7e4d2;
  border-radius: 999px;
  padding: 0 10px;
  background: #f3faf0;
  color: #167334;
  font-size: 11px;
  font-weight: 900;
}

.contract-actions .contract-delete {
  color: #9f1d24;
}

.contract-admin-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
  margin-top: 12px;
  padding: 12px;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #bfd0e1;
  border-radius: 10px;
  background: #f8fbff;
}

.contract-admin-editor strong {
  grid-column: 1 / -1;
  color: #123762;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.contract-admin-editor label span {
  display: block;
  margin-bottom: 4px;
  color: #536070;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.contract-admin-editor input,
.contract-admin-editor select {
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  border: 1px solid #bfd0e1;
  border-radius: 7px;
  background: #ffffff;
  padding: 6px 8px;
  color: #123762;
  font-size: 12px;
  font-weight: 900;
}

.contract-admin-save {
  grid-column: 1 / -1;
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  background: #167a2c;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.contract-timeline {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.contract-timeline > strong {
  color: #123762;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.contract-event {
  display: grid;
  gap: 2px;
  border-left: 3px solid #79c143;
  padding: 6px 8px;
  background: #f7fbf4;
  border-radius: 0 8px 8px 0;
}

.contract-event span,
.contract-event small {
  color: #536070;
  font-size: 11px;
  font-weight: 700;
}

.contract-event b {
  color: #111827;
  font-size: 12px;
}

.commercial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.commercial-card {
  border: 1px solid #dbe3ec;
  border-radius: 12px;
  padding: 14px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.commercial-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.commercial-card-head strong {
  color: #123762;
  font-size: 17px;
  font-weight: 900;
}

.commercial-card-head span {
  border-radius: 999px;
  padding: 6px 9px;
  background: #eef8ea;
  color: #126326;
  font-size: 11px;
  font-weight: 900;
}

.commercial-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.commercial-stats div {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px;
  background: #fbfdff;
}

.commercial-stats span,
.commercial-stats strong {
  display: block;
}

.commercial-delete,
.user-delete {
  min-height: 32px;
  border: 1px solid #fecaca;
  border-radius: 7px;
  background: #fff1f2;
  color: #b91c1c;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.commercial-delete {
  width: 100%;
  margin-top: 12px;
}

.commercial-stats span {
  color: #536070;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.commercial-stats strong {
  margin-top: 4px;
  color: #111827;
  font-size: 13px;
  font-weight: 900;
}

.commission-table {
  display: grid;
  gap: 8px;
}

.commission-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 140px 120px 150px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #dbe3ec;
  border-radius: 10px;
  background: #fbfdff;
}

.commission-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1c2737;
  font-size: 12px;
  font-weight: 800;
}

.commission-row strong,
.commission-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commission-row small {
  color: #536070;
  font-size: 11px;
}

.liquidaciones-hero {
  background: linear-gradient(135deg, #f7fbf4, #ffffff);
  border: 1px solid #d7e7cb;
}

.liquidaciones-kpis {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.liquidacion-kpi {
  border: 1px solid #dbe6d2;
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.liquidacion-kpi span {
  display: block;
  color: #566276;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.liquidacion-kpi strong {
  display: block;
  margin-top: 6px;
  color: #0b2a42;
  font-size: 20px;
  font-weight: 950;
}

.liquidacion-kpi.is-danger strong,
.liq-negative {
  color: #c52f32;
}

.liquidacion-kpi.is-success strong {
  color: #13752c;
}

.liquidacion-kpi.is-warning strong {
  color: #b56a00;
}

.liquidaciones-commercial-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 10px;
  margin: 10px 0 12px;
}

.liq-commercial-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dbe6d2;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.liq-commercial-card[role="button"] {
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.liq-commercial-card[role="button"]:hover,
.liq-commercial-card[role="button"]:focus-visible {
  border-color: #86b56b;
  box-shadow: 0 10px 24px rgba(15, 82, 38, 0.13);
  transform: translateY(-1px);
  outline: none;
}

.liq-commercial-card.needs-review {
  border-color: #f1d491;
  background: #fffdf4;
}

.liq-commercial-card header,
.liq-commercial-card footer {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.liq-commercial-card header strong {
  overflow: hidden;
  color: #0b2a42;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 950;
}

.liq-commercial-card header span,
.liq-commercial-card footer span {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.liq-commercial-money {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.liq-commercial-money span {
  min-width: 0;
  padding: 8px;
  border-radius: 8px;
  background: #f8fafc;
}

.liq-commercial-money small {
  display: block;
  color: #64748b;
  font-size: 9px;
  font-weight: 950;
  text-transform: uppercase;
}

.liq-commercial-money b {
  display: block;
  margin-top: 3px;
  color: #0b2a42;
  font-size: 14px;
  font-weight: 950;
}

.liq-positive {
  color: #13752c;
}

.liquidaciones-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #fbfdff;
}

.liquidaciones-toolbar button,
.liq-actions button,
.liq-actions a {
  border: 1px solid #bfd0e1;
  border-radius: 7px;
  padding: 8px 10px;
  background: #ffffff;
  color: #0a4a78;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.liquidaciones-toolbar button.is-active,
.liq-actions button:first-child {
  background: #126326;
  color: #ffffff;
  border-color: #126326;
}

.liquidaciones-toolbar label {
  display: grid;
  gap: 4px;
  color: #536173;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.liquidaciones-toolbar select,
.liquidaciones-toolbar input,
.liq-commission-input {
  min-height: 34px;
  border: 1px solid #bfd0e1;
  border-radius: 7px;
  padding: 6px 8px;
  background: #ffffff;
  font-weight: 800;
}

.liquidaciones-toolbar .liq-search {
  min-width: min(340px, 100%);
  flex: 1 1 240px;
}

.button-like {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #bfd0e1;
  border-radius: 7px;
  padding: 8px 10px;
  background: #ffffff;
  color: #0a4a78;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}

.liquidaciones-table-card {
  border: 1px solid #dbe3ec;
  border-radius: 10px;
  overflow: auto;
  background: #ffffff;
}

.duplicate-list {
  display: grid;
  gap: 10px;
}

.duplicate-summary {
  grid-template-columns: minmax(220px, 1fr) auto auto;
}

.duplicate-records {
  display: grid;
  gap: 8px;
}

.duplicate-record {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(190px, 1fr) minmax(150px, 0.7fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(12, 50, 82, 0.12);
  border-radius: 8px;
  background: #f8fbfe;
}

.duplicate-record b,
.duplicate-summary b {
  display: block;
}

.duplicate-record small,
.duplicate-summary small,
.liq-muted {
  color: #64748b;
}

.danger-link {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.28);
  background: #fff5f5;
}

.liquidaciones-table-head,
.liquidaciones-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.3fr) 150px 135px 125px 90px 95px 105px 100px 120px 90px 270px;
  gap: 8px;
  align-items: center;
  min-width: 1380px;
  padding: 10px 12px;
}

.liquidaciones-table-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #102033;
  color: #ffffff;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.liquidaciones-row {
  border-top: 1px solid #edf1f5;
  color: #0b2a42;
  font-size: 12px;
  font-weight: 800;
}

.liquidaciones-row small {
  display: block;
  margin-top: 3px;
  color: #637083;
  font-size: 10px;
}

.liq-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 9px;
  background: #eef8ea;
  color: #126326;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.liq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.liq-commission-input {
  width: 88px;
}

.decom-head,
.decom-row {
  grid-template-columns: 170px 160px minmax(220px, 1fr) 110px 110px 110px 180px;
  min-width: 960px;
}

.hist-head,
.hist-row {
  grid-template-columns: 160px 160px 150px 90px 120px 120px 120px 120px 300px;
  min-width: 1240px;
}

.liq-monthly-head,
.liq-monthly-row {
  grid-template-columns: 150px 135px 180px 210px 120px 105px 150px 95px 95px 90px 95px 90px 90px 90px 115px 95px 220px;
  min-width: 2150px;
}

.liq-monthly-row.is-negative {
  background: #fff7f7;
}

.liq-positive {
  color: #13752c;
}

.liq-badge.is-red {
  background: #ffe7e7;
  color: #b91c1c;
}

.muted-mini {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.liquidaciones-log {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  padding: 10px;
  background: #fbfdff;
  color: #536173;
  font-size: 11px;
  font-weight: 800;
}

.liquidaciones-log strong {
  color: #0b2a42;
  font-size: 12px;
}

.control-hero {
  border-color: rgba(11, 79, 46, 0.2);
  background: linear-gradient(135deg, rgba(9, 121, 54, 0.14), rgba(255, 255, 255, 0.96)), #fff;
}

.control-toolbar {
  grid-template-columns: repeat(4, minmax(130px, 1fr)) auto;
  align-items: end;
}

.control-toolbar input[type="date"] {
  width: 100%;
  min-width: 155px; /* que el segmento del AÑO (dd/mm/aaaa) siempre quede visible y clicable */
  height: 38px;
  border: 1px solid #b9cfe3;
  border-radius: 7px;
  padding: 0 10px;
  color: #062846;
  font-weight: 900;
  background: #fff;
}

.control-date-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: end;
}

.control-date-actions button {
  min-height: 34px;
  border: 1px solid #b9cfe3;
  border-radius: 7px;
  padding: 0 10px;
  background: #f8fbff;
  color: #07355b;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.control-date-actions button:hover {
  border-color: #16823a;
  color: #0b6d2e;
  background: #f2fbf4;
}

.contract-control-layout {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(360px, 440px);
  gap: 14px;
  align-items: start;
}

.control-list {
  min-width: 0;
  overflow: hidden;
}

.control-row {
  grid-template-columns: minmax(170px, 1fr) minmax(110px, 0.55fr) minmax(120px, 0.65fr);
  min-width: 0;
  gap: 8px;
  padding: 8px 10px;
}

.control-row {
  cursor: pointer;
  border-left: 4px solid transparent;
  font-size: 11px;
}

.control-row-main,
.control-row-meta,
.control-row-status {
  min-width: 0;
  overflow: hidden;
}

.control-row-main b,
.control-row-meta,
.control-row-status small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-row-main b {
  font-size: 11px;
}

.control-row-meta {
  color: #123762;
  font-size: 10px;
  font-weight: 900;
}

.control-row-status {
  display: grid;
  justify-items: start;
  gap: 3px;
}

.control-row:hover,
.control-row.is-selected {
  background: #f4fbf5;
  border-left-color: #16823a;
}

.liq-badge.is-danger {
  color: #a51620;
  background: #fff0f1;
  border-color: #f4b8bf;
}

.contract-control-detail {
  display: grid;
  gap: 12px;
  background: #fff;
  border: 1px solid #cfe0d4;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 12px 28px rgba(21, 48, 75, 0.08);
  min-width: 0;
}

.control-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  border-bottom: 1px solid #e4eef5;
  padding-bottom: 10px;
}

.control-detail-head strong {
  display: block;
  color: #071f3e;
  font-size: 18px;
  line-height: 1.15;
}

.control-detail-head span,
.control-detail-grid span {
  display: block;
  color: #637488;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.control-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.control-detail-grid div {
  border: 1px solid #d9e5ef;
  border-radius: 8px;
  background: #f8fbfe;
  padding: 9px;
  min-width: 0;
}

.control-detail-grid strong {
  display: block;
  margin-top: 4px;
  color: #082448;
  overflow-wrap: anywhere;
}

.control-error {
  display: grid;
  gap: 5px;
  border: 1px solid #f0b8bf;
  border-radius: 8px;
  background: #fff5f5;
  color: #a51620;
  padding: 10px;
}

.control-error span {
  overflow-wrap: anywhere;
}

.control-edit-card {
  border: 1px solid #cfe0d4;
  border-radius: 10px;
  background: #f9fcfa;
  overflow: hidden;
}

.control-edit-card summary {
  cursor: pointer;
  padding: 10px 12px;
  background: #edf8ef;
  color: #07315e;
  font-weight: 900;
}

.contract-control-detail .control-edit-sections {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  padding: 10px;
}

.contract-control-detail .control-edit-section {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  border: 1px solid #d9e6ef;
  border-radius: 9px;
  background: #ffffff;
  padding: 10px;
}

.contract-control-detail .control-edit-section > strong {
  grid-column: 1 / -1;
  color: #07315e;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.contract-control-detail .control-edit-section-wide {
  grid-template-columns: 1fr !important;
}

.contract-control-detail .control-edit-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
  margin: 0 !important;
  align-items: stretch !important;
  float: none !important;
  clear: none !important;
}

.contract-control-detail .control-edit-field span {
  display: block !important;
  color: #637488;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
}

.contract-control-detail .control-edit-field input,
.contract-control-detail .control-edit-field select,
.contract-control-detail .control-edit-field textarea {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid #bdd1e3;
  border-radius: 7px;
  background: #fff;
  color: #06234a;
  font-weight: 800;
  padding: 8px;
  height: 34px;
}

.contract-control-detail .control-edit-field textarea {
  min-height: 58px;
  height: auto;
  resize: vertical;
}

.contract-control-detail .control-edit-wide {
  grid-column: 1 / -1;
}

.contract-control-detail .control-edit-field.has-error input {
  border-color: #d22d3a !important;
  background: #fff4f4 !important;
  box-shadow: 0 0 0 2px rgba(210, 45, 58, 0.12);
}

.contract-control-detail .control-edit-field.has-error span {
  color: #b32632;
}

.control-edit-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px 10px;
}

.control-edit-actions button {
  border: 1px solid #16823a;
  border-radius: 8px;
  background: #16823a;
  color: #fff;
  font-weight: 900;
  padding: 9px 12px;
  cursor: pointer;
}

.control-edit-actions span {
  color: #52677c;
  font-size: 11px;
  font-weight: 800;
}

.control-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.control-actions button {
  border: 1px solid #b9d2e8;
  border-radius: 8px;
  background: #f8fbff;
  color: #07315e;
  font-weight: 900;
  padding: 9px 10px;
  cursor: pointer;
}

.control-actions button:first-child,
.control-actions button:nth-child(2),
.control-actions button:nth-child(7) {
  background: #16823a;
  border-color: #16823a;
  color: #fff;
}

.control-actions button:nth-child(6) {
  background: #b32632;
  border-color: #b32632;
  color: #fff;
}

.control-technical {
  border: 1px solid #d8e6f2;
  border-radius: 8px;
  background: #fbfdff;
  overflow: hidden;
}

.control-technical summary {
  cursor: pointer;
  padding: 9px 10px;
  font-weight: 900;
  color: #07315e;
  background: #edf5fb;
}

.control-technical pre {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  font-size: 11px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.control-history {
  margin-top: 0;
}

.training-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  border-radius: 8px;
  padding: 18px;
  background: linear-gradient(135deg, #0b4f85, #1f6fa8);
  color: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.training-hero p {
  margin: 5px 0 0;
  max-width: 780px;
  font-size: 13px;
  font-weight: 700;
}

.training-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.training-actions button,
.training-upload-button {
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 7px;
  padding: 0 14px;
  background: #fff;
  color: #123257;
  font-weight: 900;
  cursor: pointer;
}

.training-actions .primary {
  background: #56a832;
  color: #fff;
}

.training-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.training-kpi,
.training-card {
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.training-kpi {
  display: grid;
  gap: 8px;
  padding: 15px;
}

.training-kpi span {
  color: #536070;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.training-kpi strong {
  color: #0b4f85;
  font-size: 26px;
  font-weight: 900;
}

.training-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.65fr);
  gap: 14px;
  margin-top: 14px;
}

.training-card {
  padding: 16px;
}

.training-card h3 {
  margin: 0 0 12px;
  color: #123257;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}

.training-company-list,
.training-results {
  display: grid;
  gap: 10px;
}

.training-applied {
  color: #126c30 !important;
  font-weight: 900 !important;
}

/* Corrección de campos (cierra el bucle de aprendizaje) */
.training-correct {
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  background: #ffffff;
  margin: -4px 0 4px;
  padding: 4px 10px;
}
.training-correct > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  color: #0b4f85;
  padding: 6px 2px;
}
.training-correct-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  padding: 8px 2px 10px;
}
.training-correct-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}
.training-correct-row label {
  font-size: 11px;
  font-weight: 800;
  color: #48566a;
}
.training-correct-input {
  border: 1px solid #c3d3e2;
  border-radius: 6px;
  padding: 5px 7px;
  font-size: 12px;
  font-weight: 700;
  min-width: 0;
}
.training-correct-save {
  border: 1px solid #1f6fb2;
  background: #1f6fb2;
  color: #fff;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.training-correct-save:disabled { opacity: 0.7; cursor: default; }
@media (max-width: 900px) {
  .training-correct-grid { grid-template-columns: 1fr; }
}

.training-company,
.training-result,
.training-problem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #dbe3ec;
  border-radius: 8px;
  padding: 11px 12px;
  background: #f8fbfd;
}

.training-company strong,
.training-result strong {
  display: block;
  color: #061b34;
  font-size: 13px;
  font-weight: 900;
}

.training-company span,
.training-result span {
  display: block;
  margin-top: 2px;
  color: #536070;
  font-size: 11px;
  font-weight: 700;
}

.training-company b,
.training-result b,
.training-problem strong {
  color: #0b4f85;
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
}

.training-confidence-high {
  border-color: #bfe2bf;
  background: #f2fbef;
}

.training-confidence-mid {
  border-color: #f2d27a;
  background: #fffaf0;
}

.training-confidence-low {
  border-color: #f0b7b7;
  background: #fff4f4;
}

.training-loading {
  margin-top: 14px;
  border: 1px dashed #c7d1dd;
  border-radius: 8px;
  padding: 18px;
  background: #fff;
  color: #536070;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 900px) {
  .training-hero,
  .training-layout {
    grid-template-columns: 1fr;
    display: grid;
  }

  .training-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.commission-status-select {
  min-height: 32px;
  border: 1px solid #bfd0e1;
  border-radius: 7px;
  background: #ffffff;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 800;
}

.users-hero {
  background: linear-gradient(135deg, #123762, #1f6fa8);
}

.users-table {
  display: grid;
  gap: 6px;
  overflow-x: auto;
}

.users-row {
  display: grid;
  grid-template-columns: 120px 170px 170px 120px 180px 80px 90px 90px 150px 110px;
  min-width: 1300px;
  gap: 8px;
  align-items: center;
  border: 1px solid #dbe3ec;
  border-radius: 9px;
  background: #fbfdff;
  padding: 8px;
}

.users-head {
  background: #123762;
  color: #ffffff;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.users-row input,
.users-row select,
.users-new-grid input,
.users-new-grid select {
  min-height: 32px;
  width: 100%;
  border: 1px solid #bfd0e1;
  border-radius: 7px;
  background: #ffffff;
  padding: 6px 8px;
  color: #1c2737;
  font-size: 12px;
  font-weight: 800;
}

.users-new-card {
  margin-top: 16px;
}

.users-new-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  align-items: end;
}
.users-new-grid #users-create { min-height: 40px; align-self: end; }

/* ===== Panel Usuarios: resumen, buscador, aviso y tarjetas ===== */
.users-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 6px;
}
.users-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 110px;
  padding: 10px 14px;
  border: 1px solid #dbe3ec;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(18, 55, 98, 0.05);
}
.users-kpi b { font-size: 22px; font-weight: 900; color: #123762; line-height: 1; }
.users-kpi small { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #6b7683; }
.users-kpi.is-warn { border-color: #f0b8b0; background: #fff6f4; }
.users-kpi.is-warn b { color: #b4231a; }

.users-toolbar { margin: 10px 0; }
#users-search {
  width: min(420px, 100%);
  min-height: 40px;
  border: 1px solid #bfd0e1;
  border-radius: 10px;
  background: #ffffff;
  padding: 8px 14px;
  font-size: 13px;
  color: #1c2737;
}
#users-search:focus { outline: none; border-color: #1f6fa8; box-shadow: 0 0 0 3px rgba(31, 111, 168, 0.15); }

.users-note {
  display: flex;
  gap: 8px;
  margin: 6px 0 14px;
  padding: 10px 14px;
  border: 1px solid #cfe0f0;
  border-radius: 10px;
  background: #eef6fd;
  color: #234;
  font-size: 12px;
  line-height: 1.5;
}

.users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}
.users-empty {
  padding: 24px;
  text-align: center;
  color: #6b7683;
  font-weight: 700;
}

.user-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #dbe3ec;
  border-radius: 14px;
  background: #ffffff;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(18, 55, 98, 0.06);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.user-card:hover { box-shadow: 0 6px 18px rgba(18, 55, 98, 0.12); transform: translateY(-1px); }
.user-card.is-self { border-color: #1f6fa8; box-shadow: 0 0 0 1px #1f6fa8 inset, 0 1px 3px rgba(18, 55, 98, 0.06); }

.user-card-head { display: flex; align-items: center; gap: 12px; }
.user-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 15px;
  color: #ffffff;
  background: hsl(var(--uc-hue, 210), 55%, 28%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.user-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.user-id strong { font-size: 15px; color: #123762; font-weight: 900; }
.user-card-sub { font-size: 12px; color: #6b7683; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-badges { margin-left: auto; display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.user-badge {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef2f7;
  color: #536070;
  white-space: nowrap;
}
.user-badge.role-admin { background: #efe6fd; color: #6b28c9; }
.user-badge.role-commercial { background: #e3f0ff; color: #0b62c6; }
.user-badge.role-readonly { background: #eef2f7; color: #6b7683; }
.user-badge.is-2fa { background: #e6f7ef; color: #17794a; }
.user-badge.is-ok { background: #e6f7ef; color: #17794a; }
.user-badge.is-warn { background: #fdecea; color: #b4231a; }
.user-badge.is-you { background: #fff3d6; color: #7a5200; }

.user-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.uc-field { display: flex; flex-direction: column; gap: 4px; }
.uc-field > span {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7683;
}
.uc-field input, .uc-field select {
  min-height: 36px;
  width: 100%;
  border: 1px solid #cdd9e5;
  border-radius: 8px;
  background: #ffffff;
  padding: 6px 10px;
  color: #1c2737;
  font-size: 13px;
  font-weight: 600;
}
.uc-field input:focus, .uc-field select:focus { outline: none; border-color: #1f6fa8; box-shadow: 0 0 0 3px rgba(31, 111, 168, 0.12); }
.uc-pass { grid-column: 1 / -1; }
.uc-pass-row { display: flex; gap: 6px; align-items: center; }
.uc-pass-row .user-password, .uc-pass-row #new-user-password { flex: 1 1 auto; min-width: 0; }
.uc-icon-btn {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid #cdd9e5;
  border-radius: 8px;
  background: #f4f8fc;
  color: #234;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.uc-icon-btn:hover { background: #e6eef7; border-color: #1f6fa8; }

.user-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #eef2f7;
  padding-top: 10px;
}
.user-stats { display: flex; flex-wrap: wrap; gap: 14px; }
.user-stat { display: flex; flex-direction: column; line-height: 1.1; }
.user-stat b { font-size: 14px; font-weight: 900; color: #123762; }
.user-stat small { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #5f6b7a; }
.user-card-actions .user-delete {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #f0b8b0;
  border-radius: 8px;
  background: #fff6f4;
  color: #b4231a;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}
.user-card-actions .user-delete:hover { background: #fdecea; }
.uc-self-note { font-size: 11px; font-weight: 800; color: #1f6fa8; }

@media (max-width: 640px) {
  .user-card-grid { grid-template-columns: 1fr; }
}

.users-new-grid label span {
  display: block;
  margin-bottom: 4px;
  color: #536070;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.crm-page {
  min-width: 0;
  overflow: auto;
  padding: 24px;
}

.crm-page .crm-panel {
  width: min(1280px, 100%);
  margin: 0 auto;
}

.crm-page .crm-title {
  font-size: 18px;
  text-align: left;
}

.crm-page .history-list {
  max-height: none;
}

.crm-mode .editor {
  margin-top: 24px;
}

.preview {
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior: auto;
  padding: 24px 24px 14px;
}

.dashboard-frame {
  position: relative;
  width: min(1260px, 100%);
  min-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #c6d0dc;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 22px 52px rgba(34, 45, 63, 0.18);
}

.print-fab {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid rgba(15, 77, 125, 0.22);
  border-radius: 10px;
  background: linear-gradient(135deg, #0a4a78, #1f7db8);
  color: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 24px rgba(15, 77, 125, 0.24);
}

.print-fab svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.print-fab:hover {
  background: linear-gradient(135deg, #073d6b, #166da5);
}

.crm-fab {
  top: 62px;
  background: linear-gradient(135deg, #237b2e, #63a92f);
}

.crm-fab:hover {
  background: linear-gradient(135deg, #176827, #4f9826);
}

.screenclip-fab {
  top: 112px;
  background: linear-gradient(135deg, #5d2f8d, #8c5ac7);
}

.screenclip-fab:hover {
  background: linear-gradient(135deg, #4b2477, #7547b4);
}

.history-screenclip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  background: #eef2ff;
  color: #4b2477;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid #c7d2fe;
}

.history-screenclip:hover {
  background: #e0e7ff;
}

.accept-fab {
  top: 112px;
  background: linear-gradient(135deg, #d68a00, #f6b62e);
}

.accept-fab:hover {
  background: linear-gradient(135deg, #bd7800, #e5a71e);
}

#dashboard-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  background: #e9eef4;
  visibility: visible;
  opacity: 1;
}

@media (max-width: 980px) {
  .editor {
    width: calc(100% - 24px);
    margin-bottom: 12px;
  }

  .editor-header {
    grid-template-columns: 1fr;
  }

  .page-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .action-group-primary,
  .action-group-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .module-mode .editor-header {
    grid-template-columns: 1fr;
  }

  .preview {
    padding: 12px;
  }

  .tariff-selector-layout {
    grid-template-columns: 1fr;
  }

  #data-form.luz30-compact-form,
  #data-form.luz20-compact-form {
    grid-template-columns: 1fr;
  }

  .luz30-compact-form .tariff-selector-layout,
  .luz20-compact-form .tariff-selector-layout,
  .luz30-compact-grid,
  .luz20-compact-form .luz30-client-card .luz30-compact-grid,
  .gas-compact-form .luz30-client-card .luz30-compact-grid {
    grid-template-columns: 1fr;
  }

  .luz30-client-card,
  .luz30-compact-field.wide,
  .luz30-compact-field.cups-wide,
  .luz30-compact-field.field-span2,
  .luz30-compact-field.field-span5 {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  body {
    background: #f4f7fb;
    overflow-x: hidden;
  }

  .login-screen {
    padding: 14px;
    align-items: start;
    overflow: auto;
  }

  .login-screen::after {
    inset: 8px;
    border-radius: 18px;
  }

  .login-card {
    width: 100%;
    margin-top: 10px;
    border-radius: 18px;
    padding: 14px;
  }

  .login-card img {
    height: 118px;
    border-radius: 12px;
  }

  .login-brand {
    margin: 12px 0;
    padding: 13px;
    border-radius: 13px;
  }

  .login-brand strong {
    font-size: 22px;
  }

  .app-shell {
    display: flex;
    flex-direction: column;
  }

  .preview {
    order: 1;
    display: block;
    padding: 8px 8px 0;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-frame {
    width: 760px;
    min-width: 760px;
    border-radius: 9px;
    box-shadow: 0 10px 26px rgba(34, 45, 63, 0.14);
  }

  #dashboard-svg {
    width: 100%;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .print-fab {
    display: none;
  }

  .editor {
    order: 2;
    width: 100%;
    margin: 0;
    border-width: 0 0 1px;
    border-radius: 0;
    padding: 10px;
    box-shadow: none;
  }

  .editor-header {
    gap: 10px;
    padding: 8px;
    margin-bottom: 10px;
    border-radius: 10px;
  }

  .page-tabs {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  .page-tab {
    flex: 0 0 auto;
    min-width: 106px;
    min-height: 40px;
    padding: 8px 10px;
    font-size: 11px;
    white-space: nowrap;
  }

  .editor-actions {
    gap: 7px;
  }

  .action-group-primary,
  .action-group-secondary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .editor-actions button,
  .action-button,
  .language-toggle button {
    min-height: 44px;
    padding: 8px 7px;
    font-size: 11px;
  }

  .language-toggle {
    grid-column: span 2;
    min-height: 44px;
  }

  #data-form {
    gap: 10px;
  }

  #data-form.luz20-compact-form,
  #data-form.luz30-compact-form {
    grid-template-columns: 1fr;
  }

  .study-transfer-card {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 9px;
  }

  .study-transfer-title strong {
    font-size: 12px;
  }

  .study-transfer-title span,
  .study-transfer-note {
    font-size: 10px;
    text-align: left;
  }

  .study-transfer-note {
    justify-self: stretch;
  }

  .study-transfer-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
  }

  .study-transfer-btn {
    min-height: 36px;
    padding: 7px 8px;
    font-size: 11px;
    white-space: normal;
  }

  .luz30-compact-card {
    padding: 10px;
    border-radius: 10px;
  }

  .luz30-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .luz30-compact-field.wide,
  .penalty-preview-field {
    grid-column: 1 / -1;
  }

  .luz30-compact-form .field-row label,
  .luz30-table-field span {
    font-size: 10px;
  }

  .luz30-compact-form .field-row input,
  .luz30-compact-form .field-row select,
  .luz30-table-field input,
  .field-row input,
  .field-row select {
    min-height: 42px;
    padding: 8px 9px;
    font-size: 16px;
  }

  .luz30-period-head,
  .luz30-period-row {
    grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr);
    gap: 5px;
  }

  .luz30-period-row strong {
    min-height: 42px;
    font-size: 12px;
  }

  .luz30-period-head {
    font-size: 9px;
  }

  .tariff-selector-layout,
  .luz20-compact-form .tariff-selector-layout,
  .luz30-compact-form .tariff-selector-layout {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .luz20-compact-form .summary-vertical,
  .luz30-compact-form .summary-vertical {
    max-height: 170px;
  }

  .luz20-compact-form .offer-results-panel,
  .luz30-compact-form .offer-results-panel,
  .offer-results-panel {
    max-height: none;
    overflow: visible;
    padding: 10px;
  }

  .offer-results-top {
    display: grid;
    gap: 8px;
  }

  .offer-client-toggle {
    width: 100%;
    min-height: 38px;
  }

  .offer-results-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .offer-kpi strong {
    font-size: 13px;
  }

  .offer-results-table {
    min-width: 0;
  }

  .offer-results-head {
    display: none;
  }

  .offer-result-row,
  .offer-results-panel.is-client-view .offer-result-row {
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
    padding: 11px;
  }

  .offer-company-cell {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .offer-product-cell small,
  .offer-product-cell em,
  .offer-company-cell strong,
  .offer-product-cell strong {
    white-space: normal;
  }

  .offer-money-cell {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #eef2f7;
    padding-top: 7px;
    text-align: left;
  }

  .offer-money-cell::before {
    content: attr(data-label);
    color: #64748b;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .offer-money-cell.is-commission {
    display: flex;
    justify-content: space-between;
    background: #e9fbe9;
  }

  .offer-actions-cell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .offer-actions-cell button {
    min-height: 40px;
    font-size: 10.5px;
  }

  .sips-panel,
  .tariff-summary {
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
  }

  .sips-button {
    min-height: 44px;
    font-size: 12px;
  }

  .crm-page {
    padding: 10px;
    overflow: visible;
  }

  .crm-page .crm-panel {
    width: 100%;
    padding: 10px;
    border-radius: 12px;
  }

  .crm-title {
    font-size: 17px;
  }

  .crm-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .crm-header-actions {
    flex-wrap: wrap;
  }

  .crm-header-actions .crm-btn {
    flex: 1;
    min-height: 44px;
  }

  .crm-controls-grid {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }

  .crm-controls .field-row input,
  .crm-controls .field-row select {
    min-height: 44px;
    font-size: 14px;
  }

  .crm-current {
    gap: 6px 14px;
    padding: 11px 13px;
  }

  .history-list {
    max-height: none;
    overflow: visible;
    gap: 11px;
    padding-right: 0;
  }

  .history-record {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 13px 14px 13px 18px;
  }

  .rec-side {
    min-width: 0;
  }

  .history-name {
    font-size: 15px;
  }

  .history-row-actions {
    flex-wrap: wrap;
  }

  .history-status {
    flex-basis: 100%;
    min-height: 44px;
    font-size: 14px;
  }

  .history-pdf,
  .history-email,
  .history-whatsapp,
  .history-accept {
    flex: 1;
    min-height: 44px;
  }

  .history-row-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .history-commercial {
    justify-content: space-between;
  }

  .history-commercial-select {
    min-height: 44px;
    font-size: 14px;
  }

  .contracts-hero {
    display: grid;
    gap: 10px;
    padding: 13px;
  }

  .contracts-hero .crm-title {
    font-size: 18px;
  }

  .contracts-hero p {
    font-size: 12px;
  }

  .contracts-hero-actions {
    justify-content: stretch;
  }

  .contracts-hero button {
    width: 100%;
  }

  .contract-control-layout {
    grid-template-columns: 1fr;
  }

  .control-row {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .contract-control-detail {
    padding: 11px;
  }

  .control-actions,
  .control-detail-grid {
    grid-template-columns: 1fr;
  }

  .contract-kpis,
  .renewal-kpis,
  .training-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .contract-kpi {
    padding: 10px;
  }

  .contract-kpi strong {
    font-size: 20px;
  }

  .contracts-layout,
  .gana-luz-layout,
  .training-layout,
  .training-hero {
    grid-template-columns: 1fr;
  }

  .contracts-filters,
  .gana-luz-filters,
  .gana-luz-form-grid,
  .gana-luz-detail-grid,
  .gana-webhook-box,
  .renewal-filters {
    grid-template-columns: 1fr;
  }

  .gana-luz-actions {
    grid-template-columns: 1fr;
  }

  .gana-luz-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .contract-month-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .provider-kpis,
  .provider-card-grid {
    grid-template-columns: 1fr;
  }

  .provider-grid {
    grid-template-columns: 1fr;
  }

  .manual-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manual-period-bar {
    display: grid;
    grid-template-columns: 42px 1fr 1fr 42px;
    align-items: end;
  }

  .manual-period-current {
    grid-column: 1 / -1;
    width: 100%;
  }

  .manual-period-bar label {
    min-width: 0;
  }

  .manual-month-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manual-month-total {
    grid-column: 1 / -1;
  }

  .manual-row {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .manual-table-head {
    display: none;
  }

  .manual-row > span {
    display: grid;
    grid-template-columns: 108px 1fr;
    gap: 8px;
    align-items: start;
  }

  .manual-row > span::before {
    color: #637083;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .manual-row > span:nth-child(1)::before { content: "Contrato"; }
  .manual-row > span:nth-child(2)::before { content: "Estado"; }
  .manual-row > span:nth-child(3)::before { content: "Compañía"; }
  .manual-row > span:nth-child(4)::before { content: "Tarifa"; }
  .manual-row > span:nth-child(5)::before { content: "Consumo"; }
  .manual-row > span:nth-child(6)::before { content: "Potencia"; }
  .manual-row > span:nth-child(7)::before { content: "CUPS / IBAN"; }
  .manual-row > span:nth-child(8)::before { content: "Comisión"; }
  .manual-row > span:nth-child(9)::before { content: "Grabado"; }
  .manual-row > span:nth-child(10)::before { content: "Activación"; }

  .manual-export-link {
    width: 100%;
    justify-content: center;
  }

  .contract-month-total {
    grid-column: 1 / -1;
  }

  .multi-filter-panel {
    position: static;
    width: 100%;
    margin-top: 6px;
    max-height: 260px;
  }

  .renewal-count {
    min-height: 38px;
  }

  .client-form-card,
  .contracts-list-card,
  .contract-detail-card,
  .tariff-card {
    border-radius: 10px;
    padding: 10px;
  }

  .clients-grid,
  .client-field-grid,
  .clients-grid .client-field-grid,
  .tariff-field-grid,
  .tariff-field-grid-30,
  .gana-form,
  .manual-contract-grid,
  .commission-grid,
  .training-upload-card,
  .training-results {
    grid-template-columns: 1fr;
  }

  .client-actions,
  .gana-actions,
  .contract-actions,
  .training-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .client-actions button,
  .contract-actions button,
  .contract-actions a,
  .training-actions button {
    width: 100%;
    min-height: 40px;
  }

  .client-list,
  .contracts-table,
  .renewal-table {
    overflow: visible;
  }

  .client-table {
    min-width: 0;
    border: 0;
    background: transparent;
    display: grid;
    gap: 9px;
  }

  .client-table-head {
    display: none;
  }

  .client-table-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    min-height: 0;
    border: 1px solid #dbe3ec;
    border-radius: 10px;
    padding: 10px;
    background: #ffffff;
  }

  .client-table-row > span {
    padding: 0;
    white-space: normal;
    font-size: 12px;
  }

  .client-row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .client-row-actions button {
    min-height: 34px;
  }

  .contract-row,
  .renewal-row {
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 11px;
  }

  .contract-row > *,
  .renewal-row > span {
    min-width: 0;
    white-space: normal;
  }

  .contract-row:not(.contract-head) > *,
  .renewal-row:not(.renewal-head) > span {
    display: grid;
    gap: 2px;
  }

  .contract-row:not(.contract-head) > *::before,
  .renewal-row:not(.renewal-head) > span::before {
    color: #64748b;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
  }

  .contract-head,
  .renewal-head {
    display: none;
  }

  .renewal-row:not(.renewal-head) > span:nth-child(2)::before { content: "Contacto"; }
  .renewal-row:not(.renewal-head) > span:nth-child(3)::before { content: "Compañía"; }
  .renewal-row:not(.renewal-head) > span:nth-child(4)::before { content: "Oportunidad"; }
  .renewal-row:not(.renewal-head) > span:nth-child(5)::before { content: "Activación"; }
  .renewal-row:not(.renewal-head) > span:nth-child(6)::before { content: "Renovación"; }
  .renewal-row:not(.renewal-head) > span:nth-child(7)::before { content: "Días"; }
  .renewal-row:not(.renewal-head) > span:nth-child(8)::before { content: "Cartera"; }
  .renewal-row:not(.renewal-head) > span:nth-child(9)::before { content: "Comisión"; }
  .renewal-row:not(.renewal-head) > span:nth-child(10)::before { content: "Consumo / Potencia"; }
  .renewal-row:not(.renewal-head) > span:nth-child(11)::before { content: "Tarifa"; }
  .renewal-row:not(.renewal-head) > span:nth-child(12)::before { content: "Estado"; }

  .renewal-open-client,
  .contract-client,
  .contract-saving,
  .renewal-client b,
  .renewal-contact b,
  .renewal-date b,
  .renewal-row span,
  .renewal-client small,
  .renewal-contact small,
  .renewal-date small,
  .client-card strong,
  .client-card span {
    white-space: normal;
  }

  .renewal-days,
  .renewal-viability {
    justify-self: start;
  }

  .crm-title {
    margin-bottom: 6px;
    font-size: 16px;
  }

  .crm-controls-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .crm-btn,
  .history-pdf,
  .history-email,
  .history-whatsapp,
  .history-accept {
    min-height: 38px;
    font-size: 11px;
  }

  .crm-controls .field-row label {
    font-size: 9px;
  }

  .crm-controls .field-row input,
  .crm-controls .field-row select {
    min-height: 38px;
    padding: 7px 8px;
    font-size: 13px;
  }

  .crm-current {
    display: none;
  }

  .history-list {
    gap: 8px;
  }

  .history-record {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 12px 12px 16px;
    border-radius: 11px;
  }

  .history-open {
    min-height: auto;
    padding: 0;
  }

  .history-name {
    font-size: 14px;
  }

  .history-meta {
    font-size: 10px;
  }

  .history-saving {
    padding: 4px 7px;
    font-size: 12px;
  }

  .history-open-action {
    min-height: 30px;
    font-size: 11px;
  }

  .history-status {
    min-height: 38px;
    font-size: 13px;
  }

  .history-permanence {
    min-height: 38px;
    padding: 6px 7px;
  }

  .history-accept {
    grid-column: 1 / -1;
  }

  .history-cups,
  .history-commission,
  .history-commercial {
    padding: 5px 7px;
    font-size: 10px;
  }

  .history-commercial-select {
    min-height: 38px;
    font-size: 13px;
  }

  .contract-detail-card {
    display: none;
  }

  .contract-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 9px;
    border-radius: 11px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 44, 77, 0.07);
  }

  .contract-open {
    grid-column: 1 / -1;
    padding: 8px;
    border: 1px solid #d6e2ef;
    border-radius: 9px;
    background: #f8fbff;
  }

  .contract-client {
    color: #062b4f;
    font-size: 14px;
  }

  .contract-meta,
  .contract-cups {
    font-size: 10px;
  }

  .contract-tariff {
    grid-column: 1 / -1;
  }

  .contract-date-mini {
    display: none !important;
  }

  .contract-tariff,
  .contract-status-mini,
  .contract-saving,
  .contract-commission,
  .contract-assigned-commercial {
    padding: 6px 7px;
    border-radius: 8px;
    background: #f8fafc;
  }

  .contract-status-mini b,
  .contract-tariff b,
  .contract-saving b,
  .contract-commission b,
  .contract-assigned-commercial b {
    font-size: 12px;
  }

  .contract-status-mini small,
  .contract-tariff small,
  .contract-saving small,
  .contract-commission small,
  .contract-assigned-commercial small {
    font-size: 9px;
  }

  .contract-commercial-select,
  .contract-status-select,
  .contract-commission-select {
    min-height: 38px;
    font-size: 12px;
  }

  .contract-commercial-select {
    grid-column: 1 / -1;
  }

  .contract-row:not(.contract-head) > .contract-tariff::before,
  .contract-row:not(.contract-head) > .contract-status-mini::before,
  .contract-row:not(.contract-head) > .contract-saving::before,
  .contract-row:not(.contract-head) > .contract-commission::before,
  .contract-row:not(.contract-head) > .contract-commercial-select::before,
  .contract-row:not(.contract-head) > .contract-status-select::before,
  .contract-row:not(.contract-head) > .contract-commission-select::before {
    content: none;
  }

  .gana-modal,
  .send-modal {
    padding: 8px;
    place-items: stretch;
  }

  .gana-dialog,
  .send-dialog {
    width: 100%;
    max-height: calc(100vh - 16px);
    border-radius: 12px;
  }

  .gana-head,
  .send-head {
    padding: 13px;
  }
}

@media (max-width: 640px) {
  .crm-page {
    width: 100%;
    box-sizing: border-box;
  }

  .duplicate-summary,
  .duplicate-record {
    grid-template-columns: 1fr;
  }

  .duplicate-record {
    align-items: stretch;
  }

  .contracts-hero,
  .liquidaciones-hero {
    border-radius: 12px;
    background: linear-gradient(135deg, #0c4f82, #0a6a36);
    color: #ffffff;
  }

  .contracts-hero .crm-title,
  .liquidaciones-hero .crm-title,
  .contracts-hero p,
  .liquidaciones-hero p {
    color: #ffffff;
  }

  .contracts-hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .contracts-hero-actions button {
    min-height: 40px;
    padding: 7px 8px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.96);
    color: #0b3158;
    font-size: 11px;
    line-height: 1.1;
    white-space: normal;
  }

  .contract-kpis,
  .liquidaciones-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin: 9px 0;
  }

  .liquidaciones-commercial-breakdown {
    grid-template-columns: 1fr;
  }

  .liquidacion-kpi,
  .contract-kpi {
    min-width: 0;
    padding: 9px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(15, 44, 77, 0.07);
  }

  .liquidacion-kpi span,
  .contract-kpi span {
    font-size: 9px;
  }

  .liquidacion-kpi strong,
  .contract-kpi strong {
    font-size: 18px;
  }

  .contracts-list-card,
  .contract-detail-card,
  .client-form-card,
  .liquidaciones-table-card,
  .liquidaciones-log {
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 8px 22px rgba(15, 44, 77, 0.06);
  }

  .contracts-filters,
  .liquidaciones-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 9px;
    border-radius: 11px;
  }

  .liquidaciones-toolbar button {
    min-height: 38px;
    width: 100%;
  }

  .liquidaciones-toolbar label,
  .liquidaciones-toolbar select {
    width: 100%;
  }

  .contracts-table,
  .client-list,
  .liquidaciones-table-card {
    overflow: visible;
  }

  .contract-detail-card {
    display: block;
  }

  .contract-detail-head {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
  }

  .contract-status-pill {
    justify-self: start;
  }

  .contract-detail-grid,
  .contract-admin-editor {
    grid-template-columns: 1fr;
  }

  .contract-detail-grid strong {
    white-space: normal;
    word-break: break-word;
  }

  .contract-actions,
  .client-actions {
    grid-template-columns: 1fr;
  }

  .contract-client-docs {
    justify-content: center;
    width: 100%;
    border-radius: 9px;
  }

  .client-form-card h3 {
    font-size: 13px;
  }

  .client-table-row {
    gap: 7px;
  }

  .client-table-row > span {
    display: grid;
    gap: 2px;
    padding: 7px 8px;
    border-radius: 8px;
    background: #f8fafc;
    word-break: break-word;
  }

  .client-table-row > span::before {
    color: #64748b;
    font-size: 9px;
    font-weight: 950;
    text-transform: uppercase;
  }

  .client-table-row > span:nth-child(1) {
    background: #eef5fb;
    color: #062b4f;
    font-size: 14px;
    font-weight: 950;
  }

  .client-table-row > span:nth-child(1)::before { content: "Cliente"; }
  .client-table-row > span:nth-child(2)::before { content: "Estado"; }
  .client-table-row > span:nth-child(3)::before { content: "DNI/NIE"; }
  .client-table-row > span:nth-child(4)::before { content: "Contacto"; }
  .client-table-row > span:nth-child(5)::before { content: "Direccion / CUPS"; }
  .client-table-row > span:nth-child(6)::before { content: "Compania"; }
  .client-table-row > span:nth-child(7)::before { content: "Cuenta"; }
  .client-table-row > span:nth-child(8)::before { content: "Docs"; }
  .client-table-row > span:nth-child(9)::before { content: "Acciones"; }

  .client-row-actions {
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .client-row-actions button {
    min-height: 38px;
    border-radius: 8px;
  }

  .liquidaciones-table-head {
    display: none;
  }

  .liquidaciones-row,
  .decom-row,
  .hist-row {
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 7px;
    margin-bottom: 9px;
    padding: 10px;
    border: 1px solid #dbe3ec;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 44, 77, 0.07);
  }

  .liquidaciones-row > span,
  .liquidaciones-row > div {
    min-width: 0;
    display: grid;
    gap: 2px;
    padding: 7px 8px;
    border-radius: 8px;
    background: #f8fafc;
    white-space: normal;
    word-break: break-word;
  }

  .liquidaciones-row > span::before,
  .liquidaciones-row > div::before {
    color: #64748b;
    font-size: 9px;
    font-weight: 950;
    text-transform: uppercase;
  }

  .liquidaciones-row > span:first-child,
  .liquidaciones-row > div:first-child {
    background: #eef5fb;
    color: #062b4f;
    font-size: 13px;
    font-weight: 950;
  }

  .liquidaciones-row:not(.decom-row):not(.hist-row) > span:nth-child(1)::before { content: "Cliente"; }
  .liquidaciones-row:not(.decom-row):not(.hist-row) > span:nth-child(2)::before { content: "CUPS"; }
  .liquidaciones-row:not(.decom-row):not(.hist-row) > span:nth-child(3)::before { content: "Comercial"; }
  .liquidaciones-row:not(.decom-row):not(.hist-row) > span:nth-child(4)::before { content: "Comercializadora"; }
  .liquidaciones-row:not(.decom-row):not(.hist-row) > span:nth-child(5)::before { content: "Firma"; }
  .liquidaciones-row:not(.decom-row):not(.hist-row) > span:nth-child(6)::before { content: "Activacion"; }
  .liquidaciones-row:not(.decom-row):not(.hist-row) > span:nth-child(7)::before { content: "Comision"; }
  .liquidaciones-row:not(.decom-row):not(.hist-row) > span:nth-child(8)::before { content: "Decomision"; }
  .liquidaciones-row:not(.decom-row):not(.hist-row) > span:nth-child(9)::before { content: "Estado"; }
  .liquidaciones-row:not(.decom-row):not(.hist-row) > span:nth-child(10)::before { content: "Proxima"; }
  .liquidaciones-row:not(.decom-row):not(.hist-row) > .liq-actions::before { content: "Acciones"; }

  .liq-monthly-row > span:nth-child(1)::before { content: "Contrato"; }
  .liq-monthly-row > span:nth-child(2)::before { content: "Comercial"; }
  .liq-monthly-row > span:nth-child(3)::before { content: "Cliente"; }
  .liq-monthly-row > span:nth-child(4)::before { content: "Direccion"; }
  .liq-monthly-row > span:nth-child(5)::before { content: "Compania"; }
  .liq-monthly-row > span:nth-child(6)::before { content: "Producto"; }
  .liq-monthly-row > span:nth-child(7)::before { content: "CUPS"; }
  .liq-monthly-row > span:nth-child(8)::before { content: "Comision"; }
  .liq-monthly-row > span:nth-child(9)::before { content: "Decomision"; }
  .liq-monthly-row > span:nth-child(10)::before { content: "Ajuste"; }
  .liq-monthly-row > span:nth-child(11)::before { content: "Total"; }
  .liq-monthly-row > span:nth-child(12)::before { content: "Grabado"; }
  .liq-monthly-row > span:nth-child(13)::before { content: "Activacion"; }
  .liq-monthly-row > span:nth-child(14)::before { content: "Baja"; }
  .liq-monthly-row > span:nth-child(15)::before { content: "Estado"; }
  .liq-monthly-row > span:nth-child(16)::before { content: "Origen"; }
  .liq-monthly-row > .liq-actions::before { content: "Acciones"; }

  .decom-row > span:nth-child(1)::before { content: "Comercial"; }
  .decom-row > span:nth-child(2)::before { content: "Contrato"; }
  .decom-row > span:nth-child(3)::before { content: "Motivo"; }
  .decom-row > span:nth-child(4)::before { content: "Fecha"; }
  .decom-row > span:nth-child(5)::before { content: "Importe"; }
  .decom-row > span:nth-child(6)::before { content: "Estado"; }
  .decom-row > .liq-actions::before { content: "Acciones"; }

  .hist-row > span:nth-child(1)::before { content: "Liquidacion"; }
  .hist-row > span:nth-child(2)::before { content: "Periodo"; }
  .hist-row > span:nth-child(3)::before { content: "Comercial"; }
  .hist-row > span:nth-child(4)::before { content: "Contratos"; }
  .hist-row > span:nth-child(5)::before { content: "Comisiones"; }
  .hist-row > span:nth-child(6)::before { content: "Decomisiones"; }
  .hist-row > span:nth-child(7)::before { content: "Total neto"; }
  .hist-row > span:nth-child(8)::before { content: "Estado"; }
  .hist-row > .liq-actions::before { content: "Acciones"; }

  .liq-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .liq-actions button,
  .liq-actions a,
  .liq-commission-input {
    width: 100%;
    min-height: 38px;
    text-align: center;
  }

  .liquidaciones-log {
    font-size: 10px;
  }
}

@media print {
  body {
    background: #fff;
  }

  .app-shell {
    display: block;
  }

  .editor {
    display: none;
  }

  .print-fab {
    display: none;
  }

  .preview {
    padding: 0;
    overflow: visible;
  }

  .dashboard-frame {
    width: 100%;
    min-width: 0;
    border: 0;
    box-shadow: none;
  }
}

/* ===== Pestana RGPD (consentimientos) ===== */
.rgpd-summary {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 14px 2px;
  font-size: 14px;
  color: #33414f;
}
.rgpd-summary span strong { font-size: 18px; }
.rgpd-summary .ok strong { color: #1b7a3d; }
.rgpd-summary .pend strong { color: #b6862c; }
.rgpd-summary .no strong { color: #b23b3b; }
.rgpd-feedback { margin-top: 10px; font-size: 14px; min-height: 18px; }
.rgpd-feedback.ok { color: #1b7a3d; }
.rgpd-feedback.err { color: #b23b3b; }
.rgpd-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.rgpd-form-grid label span { display: block; font-size: 12px; color: #5a738c; margin-bottom: 3px; }
.rgpd-form-grid input { width: 100%; box-sizing: border-box; padding: 9px; border: 1px solid #cfd8e3; border-radius: 8px; font-size: 14px; }
.rgpd-form-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.rgpd-secondary { background: #eef2f6 !important; color: #33414f !important; }
.rgpd-doc { background: #062b4f; color: #fff; }
.rgpd-sign { background: #1b7a3d; color: #fff; }
@media (max-width: 720px) { .rgpd-form-grid { grid-template-columns: 1fr; } }
.rgpd-table .users-row { grid-template-columns: 1.4fr 1fr 1fr 0.9fr 1.1fr 0.9fr 1.6fr; }
.rgpd-badge { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.rgpd-badge.ok { background: #e4f4ea; color: #1b7a3d; }
.rgpd-badge.pend { background: #fbf1da; color: #9a6f1f; }
.rgpd-badge.no { background: #f8e2e2; color: #b23b3b; }
.rgpd-row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.rgpd-cert { background: #062b4f; color: #fff; }
.rgpd-legal-note { margin: 14px 2px; font-size: 12.5px; color: #7a5a12; background: #fdf6e3; border: 1px solid #f0e0b0; border-radius: 8px; padding: 8px 12px; }
.consent-toast { position: fixed; bottom: 20px; right: 20px; z-index: 9999; max-width: 360px; padding: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 28px rgba(0,0,0,.18); display: none; }
.consent-toast.ok { background: #1b7a3d; color: #fff; }
.consent-toast.err { background: #b23b3b; color: #fff; }
.screenclip-hint { font-size: 12px; color: #6b7a89; }
.screenclip-reopen { background: #eef2f6; color: #33414f; }

/* Licencia de prueba y "Mi tienda" (empresas externas) */
.license-banner {
  position: fixed; left: 12px; bottom: 12px; z-index: 5500;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #123762; color: #fff; border-radius: 12px; padding: 8px 12px;
  box-shadow: 0 10px 30px rgba(8, 20, 34, 0.35); font-size: 12.5px; font-weight: 700; max-width: calc(100vw - 24px);
}
.license-banner.is-urgent { background: #a32626; }
.license-banner button, .license-actions button, .tienda-form .secondary, .tienda-images button {
  border: 0; border-radius: 9px; padding: 7px 12px; font-weight: 800; font-size: 12.5px; cursor: pointer;
  background: #e6edf4; color: #123762;
}
.license-banner button.primary, .license-actions button:not(.secondary) { background: #56a832; color: #fff; }
.license-blocker {
  position: fixed; inset: 0; z-index: 7000; background: rgba(8, 20, 34, 0.78);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.license-blocker-card { width: min(460px, 100%); background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 24px 60px rgba(8, 20, 34, 0.5); }
.license-blocker-card h2 { margin: 0 0 8px; color: #0b243c; font-size: 20px; }
.license-blocker-card p { margin: 0 0 16px; color: #2a3646; line-height: 1.45; }
.license-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.tienda-form label { display: grid; gap: 4px; margin: 9px 0; font-size: 12.5px; font-weight: 800; color: #123762; }
.tienda-form input[type="text"], .tienda-form input[type="password"] { font: inherit; font-weight: 600; padding: 8px 10px; border: 1px solid #cfd9e4; border-radius: 8px; color: #0b243c; }
.tienda-help { margin: 0 0 4px; color: #4a5a6d; font-size: 12.5px; }
.tienda-images { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.tienda-images > div { display: grid; gap: 6px; align-content: start; font-size: 12.5px; font-weight: 800; color: #123762; }
.tienda-preview { height: 110px; border: 1px dashed #b9c8d8; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f6f9fc; color: #6b7787; }
.tienda-preview img { width: 100%; height: 100%; object-fit: contain; }
.tienda-msg { min-height: 18px; margin: 8px 0 0; font-size: 12.5px; font-weight: 800; }
.tienda-msg.ok { color: #237b2e; } .tienda-msg.bad { color: #a32626; }
#open-store-profile { margin-right: 6px; }
@media (max-width: 560px) { .tienda-images { grid-template-columns: 1fr; } }

/* Estudio mensual (luz 2.0) */
.mensual-help { margin: 0 0 8px; color: #4a5a6d; font-size: 12px; line-height: 1.35; }
.mensual-activo { border-color: #f2b51d !important; box-shadow: 0 0 0 2px rgba(242, 181, 29, 0.35); background: #fffdf3; }

/* Selector de modo ANUAL | MENSUAL (luz 2.0), arriba del formulario */
.modo-estudio { grid-column: 1 / -1; display: grid; gap: 10px; }
.modo-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; max-width: 620px;
  background: linear-gradient(180deg, #e6eef6, #dde8f2); border-radius: 16px; box-shadow: inset 0 1px 3px rgba(18, 55, 98, 0.14);
}
.modo-opt {
  display: flex; align-items: center; gap: 12px; border: 0; border-radius: 12px; padding: 11px 16px; cursor: pointer; text-align: left;
  background: transparent; color: #28425f; font-family: inherit; transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.modo-opt:hover:not(.is-active) { background: rgba(255, 255, 255, 0.65); }
.modo-opt:active { transform: scale(0.985); }
.modo-opt svg { width: 28px; height: 28px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.modo-opt svg .dia { fill: currentColor; stroke: none; }
.modo-opt b { display: block; font-size: 13.5px; font-weight: 900; letter-spacing: 0.4px; }
.modo-opt small { display: block; margin-top: 1px; font-size: 11px; font-weight: 700; opacity: 0.75; }
.modo-opt.is-active { color: #fff; background: linear-gradient(135deg, #0c4f84, #052844); box-shadow: 0 8px 18px rgba(5, 40, 68, 0.32); }
.modo-opt.is-active small { opacity: 0.85; }
.modo-opt.modo-mensual.is-active { color: #2b1b00; background: linear-gradient(135deg, #ffd04d, #f0a500); box-shadow: 0 8px 18px rgba(214, 140, 0, 0.38); }
.modo-opt:focus-visible { outline: 3px solid rgba(12, 79, 132, 0.45); outline-offset: 2px; }
@media (max-width: 560px) { .modo-switch { grid-template-columns: 1fr; } }

/* Barra del selector ANUAL | MENSUAL encima de la lamina */
.modo-bar { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 0 auto 12px; max-width: 1000px; padding: 0 4px; }
.modo-bar[hidden] { display: none; }
.modo-bar .modo-switch { max-width: 560px; flex: 0 1 560px; }
.modo-caption { flex: 1 1 260px; font-size: 12.5px; line-height: 1.35; color: #4a5a6d; font-weight: 600; }
.modo-caption.is-mensual { color: #7a4b00; background: #fff4d6; border: 1px solid #f2d27a; border-radius: 10px; padding: 8px 12px; }
.modo-caption b { font-weight: 900; }

/* Panel de licencias (admin de la casa) */
.lic-wrap { padding: 4px 2px 24px; }
.lic-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.lic-title { margin: 0; font-size: 22px; color: #0b243c; }
.lic-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lic-tools input[type="search"] { font: inherit; padding: 8px 12px; border: 1px solid #cfd9e4; border-radius: 10px; min-width: 260px; }
.lic-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.lic-kpi { background: #fff; border: 1px solid #dbe5ee; border-radius: 12px; padding: 12px 14px; box-shadow: 0 2px 8px rgba(18, 55, 98, 0.06); }
.lic-kpi b { display: block; font-size: 24px; color: #0b243c; line-height: 1.1; }
.lic-kpi span { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700; color: #5b6b7f; }
.lic-kpi.azul { border-left: 4px solid #1f7db8; } .lic-kpi.verde { border-left: 4px solid #2f9e44; } .lic-kpi.rojo { border-left: 4px solid #d64545; }
.lic-kpi.naranja { border-left: 4px solid #f08c00; } .lic-kpi.gris { border-left: 4px solid #8a97a6; }
.lic-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.lic-chip { border: 1px solid #cfd9e4; background: #fff; color: #28425f; border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.lic-chip i { font-style: normal; opacity: 0.65; margin-left: 4px; }
.lic-chip.is-active { background: #0c4f84; color: #fff; border-color: #0c4f84; }
.lic-scroll { overflow-x: auto; background: #fff; border: 1px solid #dbe5ee; border-radius: 12px; }
.lic-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lic-table th { text-align: left; padding: 10px 12px; background: #f1f6fb; color: #28425f; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; }
.lic-table td { padding: 10px 12px; border-top: 1px solid #edf1f6; vertical-align: top; color: #1b2b3d; }
.lic-table small, .lic-mini small { display: block; color: #6b7a8c; font-size: 11.5px; margin-top: 2px; }
.lic-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 900; white-space: nowrap; }
.lic-badge.azul { background: #e1f0fb; color: #0c4f84; } .lic-badge.verde { background: #dff5e4; color: #1f7a32; } .lic-badge.rojo { background: #fde3e3; color: #a32626; }
.lic-badge.naranja { background: #fff0d6; color: #8a5200; } .lic-badge.gris { background: #e8ecf1; color: #4b5a6b; }
.lic-nopago { color: #a32626; font-weight: 800; }
.lic-acciones { min-width: 250px; }
.lic-btn { border: 1px solid #cfd9e4; background: #fff; color: #123762; border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 800; cursor: pointer; margin: 0 4px 4px 0; }
.lic-btn:hover { background: #eef4fa; }
.lic-btn.pago { background: #2f9e44; border-color: #2f9e44; color: #fff; } .lic-btn.pago:hover { background: #278a3a; }
.lic-btn.peligro { color: #a32626; border-color: #efc3c3; }
.lic-vacio { text-align: center; color: #6b7a8c; padding: 22px; }
.lic-pie { color: #6b7a8c; font-size: 12px; margin: 10px 2px 0; }
.lic-mini { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 4px; }
.lic-mini th { text-align: left; font-size: 11px; color: #5b6b7f; padding: 4px 6px; } .lic-mini td { padding: 5px 6px; border-top: 1px solid #edf1f6; }
.tienda-form select { font: inherit; font-weight: 600; padding: 8px 10px; border: 1px solid #cfd9e4; border-radius: 8px; color: #0b243c; background: #fff; }
.tienda-form input[type="number"] { font: inherit; font-weight: 600; padding: 8px 10px; border: 1px solid #cfd9e4; border-radius: 8px; color: #0b243c; }

/* Una pestaña con el atributo hidden debe OCULTARSE siempre (el boton OTROS tenia display:flex y se veia aunque estuviera oculto) */
.page-tabs .page-tab[hidden] { display: none !important; }
.lic-table td:nth-child(1) { min-width: 160px; } .lic-table td:nth-child(2) { min-width: 150px; } .lic-table td:nth-child(4) { min-width: 120px; } .lic-table td:nth-child(7) { min-width: 130px; }

/* =============================================================================
   MENU LATERAL AGRUPADO (build 460) — idea tomada de la estructura de EnergyCRM (secciones con titulo + icono por entrada + tarjeta de usuario),
   con nuestra paleta. Solo presentacion: los botones conservan sus id y app.js los sigue enlazando y ocultando igual.
   ========================================================================== */
.page-tabs { gap: 0; padding: 8px 10px 92px; }          /* hueco abajo para la tarjeta de usuario fija */
.nav-group { display: flex; flex-direction: column; gap: 0; margin-top: 9px; }
.nav-group:not(:has(.page-tab:not([hidden]))) { display: none; }   /* un grupo sin ninguna pestaña visible para este rol/empresa desaparece */
.nav-group-title { margin: 0 0 4px; padding: 0 10px; font-size: 10px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; color: #6c88a5; }
.page-tabs .page-tab { display: flex; align-items: center; gap: 9px; min-height: 30px; padding: 5px 9px; border-left: 0; border-radius: 8px; font-size: 11.8px; letter-spacing: 0; white-space: nowrap; }
.page-tabs .page-tab::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; opacity: 0.8; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.page-tabs .page-tab:hover::before, .page-tabs .page-tab.is-active::before { opacity: 1; }
.page-tabs .page-tab.is-active { background: linear-gradient(90deg, rgba(53, 167, 230, 0.30), rgba(53, 167, 230, 0.08)); box-shadow: inset 3px 0 0 #35a7e6; }
.page-tabs .page-tab-config { margin-top: 0; border-top: 0; padding-top: 6px; }

/* Tarjeta de usuario fija al pie del menu (antes: pildora flotante). */
.session-pill { z-index: 65; left: 0; bottom: 0; width: 216px; box-sizing: border-box; display: grid; grid-template-columns: 36px 1fr 1fr; grid-template-areas: "av info info" "tf tf out"; gap: 8px 10px; align-items: center;
  padding: 11px 12px 12px; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0; background: #07182a; box-shadow: 0 -8px 22px rgba(4, 12, 22, 0.35); }
.session-avatar { grid-area: av; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #2a8ac9, #1f6fa8); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.02em; }
.session-pill .session-pill-info { grid-area: info; min-width: 0; }
.session-pill .session-pill-info span { max-width: 100%; color: #e8f0f8; font-size: 12.5px; font-weight: 700; }
.session-pill .session-version { color: #7fa6c8; text-decoration: none; font-size: 10px; }
.session-pill .session-version:hover { color: #cfe6f8; text-decoration: underline; }
.session-pill #twofa-open { grid-area: tf; min-height: 30px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: #cfe0f0; font-size: 11px; font-weight: 700; }
.session-pill #twofa-open:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.session-pill #logout-crm-global { grid-area: out; min-height: 30px; border-radius: 8px; background: rgba(224, 82, 82, 0.2); color: #ffb9b9; font-size: 11px; font-weight: 700; }
.session-pill #logout-crm-global:hover { background: rgba(224, 82, 82, 0.34); color: #fff; }
#tab-comparison { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M13%202%203%2014h9l-1%208%2010-12h-9l1-8z'%2F%3E%3C%2Fsvg%3E"); }
#tab-luz30 { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M13%202%203%2014h9l-1%208%2010-12h-9l1-8z'%2F%3E%3C%2Fsvg%3E"); }
#tab-gas { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%202c1%204%205%206%205%2011a5%205%200%200%201-10%200c0-2%201-3%202-4%200%202%201%203%202%203%200-4-1-6%201-10z'%2F%3E%3C%2Fsvg%3E"); }
#tab-tariffs { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20.6%2013.4%2013.4%2020.6a2%202%200%200%201-2.8%200L3%2013V3h10l7.6%207.6a2%202%200%200%201%200%202.8z%20M7.5%207.5h.01'%2F%3E%3C%2Fsvg%3E"); }
#tab-clients { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%20M9%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208%20M22%2021v-2a4%204%200%200%200-3-3.9%20M16%203.1a4%204%200%200%201%200%207.8'%2F%3E%3C%2Fsvg%3E"); }
#tab-leads { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%20M9%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208%20M19%208v6%20M22%2011h-6%27%2F%3E%3C%2Fsvg%3E"); }
#tab-repsol { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202.7l5.7%205.6a8%208%200%201%201-11.4%200z%27%2F%3E%3C%2Fsvg%3E"); }
#tab-crm { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%20M14%202v6h6%20M8%2013h8%20M8%2017h8'%2F%3E%3C%2Fsvg%3E"); }
#tab-create-contract { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2022a10%2010%200%201%200%200-20%2010%2010%200%200%200%200%2020z%20M12%208v8%20M8%2012h8'%2F%3E%3C%2Fsvg%3E"); }
#tab-contracts { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%20M14%202v6h6%20M9%2015l2%202%204-4'%2F%3E%3C%2Fsvg%3E"); }
#tab-pending-contracts { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2022a10%2010%200%201%200%200-20%2010%2010%200%200%200%200%2020z%20M12%206v6l4%202'%2F%3E%3C%2Fsvg%3E"); }
#tab-gana-luz-contracts { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2020h9%20M16.5%203.5a2.1%202.1%200%200%201%203%203L7%2019l-4%201%201-4z'%2F%3E%3C%2Fsvg%3E"); }
#tab-manual-tramitacion { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M22%202%2011%2013%20M22%202l-7%2020-4-9-9-4z'%2F%3E%3C%2Fsvg%3E"); }
#tab-renewals { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M21%2012a9%209%200%200%200-15-6.7L3%208%20M3%203v5h5%20M3%2012a9%209%200%200%200%2015%206.7L21%2016%20M16%2016h5v5'%2F%3E%3C%2Fsvg%3E"); }
#tab-contract-control { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%202h6v4H9z%20M7%204H6a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2h-1%20M9%2014l2%202%204-4'%2F%3E%3C%2Fsvg%3E"); }
#tab-contract-duplicates { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%209h11v11H9z%20M5%2015H4a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1h10a1%201%200%200%201%201%201v1'%2F%3E%3C%2Fsvg%3E"); }
#tab-sips-incidents { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M10.3%203.9%201.8%2018a2%202%200%200%200%201.7%203h17a2%202%200%200%200%201.7-3L13.7%203.9a2%202%200%200%200-3.4%200z%20M12%209v4%20M12%2017h.01'%2F%3E%3C%2Fsvg%3E"); }
#tab-liquidaciones { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%201v22%20M17%205H9.5a3.5%203.5%200%200%200%200%207h5a3.5%203.5%200%200%201%200%207H6'%2F%3E%3C%2Fsvg%3E"); }
#tab-commissions { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M19%205%205%2019%20M6.5%209a2.5%202.5%200%201%200%200-5%202.5%202.5%200%200%200%200%205z%20M17.5%2020a2.5%202.5%200%201%200%200-5%202.5%202.5%200%200%200%200%205z'%2F%3E%3C%2Fsvg%3E"); }
#tab-commercials { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%207H4a2%202%200%200%200-2%202v10a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V9a2%202%200%200%200-2-2z%20M16%2021V5a2%202%200%200%200-2-2h-4a2%202%200%200%200-2%202v16'%2F%3E%3C%2Fsvg%3E"); }
#tab-provider-config { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%2021h18%20M5%2021V7l7-4%207%204v14%20M9%209h.01%20M9%2013h.01%20M9%2017h.01%20M15%209h.01%20M15%2013h.01%20M15%2017h.01'%2F%3E%3C%2Fsvg%3E"); }
#tab-users { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M20%2021v-2a4%204%200%200%200-4-4H8a4%204%200%200%200-4%204v2%20M12%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208'%2F%3E%3C%2Fsvg%3E"); }
#tab-rgpd { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%20M9%2012l2%202%204-4'%2F%3E%3C%2Fsvg%3E"); }
#tab-training { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%204h16v16H4z%20M9%209h6v6H9z%20M9%201v3%20M15%201v3%20M9%2020v3%20M15%2020v3%20M20%209h3%20M20%2014h3%20M1%209h3%20M1%2014h3'%2F%3E%3C%2Fsvg%3E"); }
#tab-obsidian { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%2018h6%20M10%2022h4%20M12%202a7%207%200%200%200-4%2012.7c.7.6%201%201.4%201%202.3h6c0-.9.3-1.7%201-2.3A7%207%200%200%200%2012%202z'%2F%3E%3C%2Fsvg%3E"); }
#tab-licenses { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M2%205h20v14H2z%20M2%2010h20'%2F%3E%3C%2Fsvg%3E"); }
#tab-config { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%2015a3%203%200%201%200%200-6%203%203%200%200%200%200%206z%20M19.4%2015a1.7%201.7%200%200%200%20.3%201.8l.1.1a2%202%200%201%201-2.8%202.8l-.1-.1a1.7%201.7%200%200%200-1.8-.3%201.7%201.7%200%200%200-1%201.5V21a2%202%200%201%201-4%200v-.1a1.7%201.7%200%200%200-1-1.5%201.7%201.7%200%200%200-1.8.3l-.1.1a2%202%200%201%201-2.8-2.8l.1-.1a1.7%201.7%200%200%200%20.3-1.8%201.7%201.7%200%200%200-1.5-1H3a2%202%200%201%201%200-4h.1a1.7%201.7%200%200%200%201.5-1%201.7%201.7%200%200%200-.3-1.8l-.1-.1a2%202%200%201%201%202.8-2.8l.1.1a1.7%201.7%200%200%200%201.8.3%201.7%201.7%200%200%200%201-1.5V3a2%202%200%201%201%204%200v.1a1.7%201.7%200%200%200%201%201.5%201.7%201.7%200%200%200%201.8-.3l.1-.1a2%202%200%201%201%202.8%202.8l-.1.1a1.7%201.7%200%200%200-.3%201.8%201.7%201.7%200%200%200%201.5%201H21a2%202%200%201%201%200%204h-.1a1.7%201.7%200%200%200-1.5%201z'%2F%3E%3C%2Fsvg%3E"); }

/* Movil/tablet: la barra vuelve arriba (sin grupos con titulo) y la sesion vuelve a ser la pildora flotante de siempre. */
@media (max-width: 900px) {
  .page-tabs { padding: 8px; gap: 1px; }
  .nav-group { display: contents; }
  .nav-group-title { display: none; }
  .page-tabs .page-tab { justify-content: center; }
  .page-tabs .page-tab::before { display: none; }
  .session-pill { left: 12px; bottom: 10px; width: auto; display: flex; gap: 8px; padding: 7px; border: 1px solid #c7d1dd; border-radius: 999px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12); z-index: 50; }
  .session-avatar { display: none; }
  .session-pill .session-pill-info span { color: #123762; max-width: 190px; }
  .session-pill .session-version { color: #2a6aa0; }
  .session-pill #twofa-open, .session-pill #logout-crm-global { border-radius: 999px; background: #123762; color: #fff; padding: 0 10px; }
}

/* ===== Mis companias y tarifas (empresas externas) ===== */
.tariff-custom { margin: 12px 0 16px; padding: 14px 16px; border: 1px solid #cfe0ef; border-radius: 12px; background: #f6fbff; }
.tariff-custom h3 { margin: 0 0 4px; font-size: 15px; color: #0b2f4f; }
.tariff-custom p { margin: 0 0 10px; font-size: 12.5px; color: #3b4f63; line-height: 1.4; }
.tariff-custom small { display: block; margin-top: 8px; color: #5b6b7f; font-size: 11.5px; }
.custom-tariff-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 12px; align-items: end; }
.custom-tariff-field { display: grid; gap: 4px; font-size: 11.5px; font-weight: 700; color: #28425f; }
.custom-tariff-field input, .custom-tariff-field select { font: inherit; font-weight: 600; padding: 8px 10px; border: 1px solid #c7d5e3; border-radius: 8px; background: #fff; color: #0b243c; min-width: 0; }
.custom-tariff-form button[type="submit"] { min-height: 38px; border: 0; border-radius: 8px; background: #0c4f84; color: #fff; font-weight: 800; cursor: pointer; padding: 0 16px; }
.custom-tariff-form button[type="submit"]:hover { background: #0a4270; }
.custom-tariff-msg { grid-column: 1 / -1; margin: 0; min-height: 1.2em; font-size: 12.5px; font-weight: 700; }
.custom-tariff-msg.is-error { color: #a32626; }
.custom-tariff-msg.is-ok { color: #1f7a32; }
.tariff-del-custom { border: 1px solid #efc3c3; background: #fff; color: #a32626; border-radius: 8px; padding: 6px 12px; font-weight: 800; font-size: 12px; cursor: pointer; }
.tariff-del-custom:hover { background: #fde8e8; }

/* La barra de prueba gratuita no debe tapar la tarjeta de usuario del menu lateral (solo escritorio). */
@media (min-width: 901px) {
  .license-banner { left: 232px; max-width: calc(100vw - 248px); }
}

/* Conexion con Gana (Configuracion de una empresa externa) */
.tienda-gana-estado { margin: 6px 0 10px; padding: 9px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.tienda-gana-estado.is-on { background: #e7f6ea; color: #1f6b30; border: 1px solid #bfe3c7; }
.tienda-gana-estado.is-off { background: #fff5e0; color: #7a5200; border: 1px solid #f0d9a4; }

/* Enlace del webhook de Gana de la empresa (perfil de tienda) */
.tienda-webhook input{width:100%;font-family:ui-monospace,Consolas,monospace;font-size:12px;padding:8px 10px;border:1px solid #cfd8e3;border-radius:8px;background:#f6f8fb;color:#1f2937;box-sizing:border-box}
.tienda-webhook .license-actions{margin-top:8px}

/* Planes de suscripcion (elegir plan) */
.plan-cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:10px}
.plan-card{display:flex;flex-direction:column;gap:6px;padding:16px;border:2px solid #cfd8e3;border-radius:14px;background:#fff}
.plan-card.is-elegido{border-color:#168a45;box-shadow:0 0 0 3px rgba(22,138,69,.12)}
.plan-card h4{margin:0;font-size:18px}
.plan-precio{font-size:30px;font-weight:800;color:#0d6b36}.plan-precio small{font-size:14px;font-weight:600;color:#475569}
.plan-resumen{margin:0;color:#334155;font-weight:600}
.plan-card ul{margin:4px 0 8px;padding-left:18px;color:#334155;font-size:13px;line-height:1.5;flex:1}
.plan-elegir{border:0;border-radius:10px;padding:11px 12px;background:#168a45;color:#fff;font-weight:800;cursor:pointer}
.plan-elegir:disabled{opacity:.6;cursor:wait}
/* Plan Basico: sin contratos ni tramitacion (solo comparadores) */
body.plan-sin-crm #accept-budget,body.plan-sin-crm #accept-budget-top,body.plan-sin-crm .history-accept,body.plan-sin-crm .history-dual-pick-label,body.plan-sin-crm #naturgy-dual-bar{display:none !important}

/* Estudio mensual 3.0: referencia OMIE */
.omie-card{margin-top:12px;padding:12px 14px;border:1px solid #cfd8e3;border-radius:12px;background:#f7faf7}
.omie-card h5{margin:0 0 4px;font-size:14px;color:#0d4f2b}

/* El pago/eleccion de plan debe verse POR ENCIMA de la pantalla de bloqueo de licencia (si no, no se podria pulsar nada) */
.tienda-modal-backdrop{z-index:7600 !important}
#condiciones-blocker{z-index:7800}

/* ======================================================================================================================
   MOVIL (10-oct-2026). Antes: el menu quedaba AL FINAL de la pagina (bajo la lamina), varias filas tenian anchos fijos que ensanchaban la pagina (el navegador la
   encogia o la desplazaba: "todo descuadrado"), la tarjeta de usuario tapaba el contenido y la lamina iba a 760 px con scroll. Ahora: boton de menu + cajon lateral,
   nada se sale de la pantalla, la lamina cabe en el ancho (se puede ampliar con los dedos) y los controles son comodos de tocar. Solo afecta a pantallas estrechas.
   ====================================================================================================================== */
.mobile-menu-toggle, .mobile-topbar, .mobile-menu-backdrop { display: none; }
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  body { padding-top: 66px; }
  .app-shell, .editor, .preview, .crm-page, .crm-panel, .editor-header { max-width: 100%; min-width: 0; }

  /* barra superior con el boton del menu y el nombre de la pantalla */
  .mobile-menu-toggle { display: flex; position: fixed; top: 10px; left: 10px; z-index: 8000; width: 46px; height: 46px; border: 1px solid #c7d1dd; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .16); flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; cursor: pointer; }
  .mobile-menu-toggle span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: #123762; }
  .mobile-topbar { display: flex; align-items: center; position: fixed; top: 10px; left: 64px; right: 10px; height: 46px; z-index: 7999; padding: 0 14px; border: 1px solid #c7d1dd; border-radius: 12px; background: #fff; color: #123762; font-weight: 800; font-size: 15px; box-shadow: 0 6px 18px rgba(15, 23, 42, .12); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .mobile-menu-backdrop { position: fixed; inset: 0; z-index: 8050; background: rgba(8, 20, 34, .55); }
  body:not(.menu-abierto) .mobile-menu-backdrop { display: none; }
  body.menu-abierto .mobile-menu-backdrop { display: block; }
  body.menu-abierto { overflow: hidden; }

  /* el menu pasa a ser un cajon lateral (antes: al final de la pagina) */
  .page-tabs { position: fixed !important; top: 0; left: 0; bottom: 0; width: min(86vw, 330px) !important; z-index: 8100; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(-108%); transition: transform .22s ease; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch; background: #fff !important; border: 0 !important; border-radius: 0 18px 18px 0 !important; padding: 12px 10px 110px !important; box-shadow: none; }
  body.menu-abierto .page-tabs { transform: none; box-shadow: 0 0 40px rgba(8, 20, 34, .45); }
  .page-tabs .sidebar-brand { display: block !important; padding: 4px 8px 10px; }
  .page-tabs .sidebar-brand img { max-width: 170px; height: auto; }
  .page-tabs .page-tab { flex: 0 0 auto !important; text-align: left; justify-content: flex-start !important; min-height: 46px; font-size: 15px; }
  .nav-group { display: block !important; }
  .nav-group-title { display: block !important; margin: 12px 8px 4px; }
  .session-pill { display: none !important; }
  body.menu-abierto .session-pill:not([hidden]) { display: grid !important; position: fixed; z-index: 8200; left: 0; bottom: 0; width: min(86vw, 330px); border-radius: 0 18px 0 0; }

  /* avisos: ya no se salen ni tapan la barra superior */
  .ops-alert-banner { position: relative !important; flex-wrap: wrap; white-space: normal; padding: 8px 12px; margin-top: -4px; }
  .license-banner { left: 8px; right: 8px; bottom: 8px; max-width: none; }
}

@media (max-width: 720px) {
  /* la lamina cabe en el ancho de la pantalla (antes 760 px con scroll lateral); se amplia con los dedos */
  .preview { padding: 4px 0 0; overflow-x: hidden; }
  .dashboard-frame { width: 100% !important; min-width: 0 !important; border-radius: 8px; }
  .modo-bar { padding: 6px 8px; }

  /* filas con anchos fijos -> tarjetas */
  .offer-results-head { display: none; }
  .offer-result-row { grid-template-columns: 1fr 1fr; }
  .offer-result-row > * { min-width: 0; }
  .offer-product-cell { grid-column: 1 / -1; }
  .study-transfer-card { grid-template-columns: 1fr; }
  .tariff-filter-controls { grid-template-columns: 1fr 1fr; }
  .tariff-filter-controls-compact { grid-template-columns: 1fr; }
  #data-form, #data-form.luz30-compact-form, #data-form.luz20-compact-form, #data-form.gas-compact-form { grid-template-columns: 1fr; }
  .luz20-compact-form .luz30-client-card .luz30-compact-grid, .gas-compact-form .luz30-client-card .luz30-compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .luz30-compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .action-group-primary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .action-group-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .users-summary, .users-new-grid { grid-template-columns: 1fr 1fr; }
  .contracts-hero { flex-direction: column; align-items: stretch; }
  .contracts-hero-actions { display: grid; grid-template-columns: 1fr 1fr; }

  /* tocar con comodidad y que iOS no haga zoom al escribir */
  select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { font-size: 16px !important; min-height: 44px; }
  .action-button, .page-tab, .contracts-hero-actions button, .tienda-form button, .license-actions button { min-height: 44px; }
  .changelog-modal { width: calc(100vw - 16px) !important; max-height: calc(100vh - 24px); }
  .changelog-modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 900px) { body.login-locked { padding-top: 0; } body.login-locked .mobile-menu-toggle, body.login-locked .mobile-topbar, body.login-locked .mobile-menu-backdrop { display: none !important; } }
@media (max-width: 720px) {
  /* las reglas de la lamina 2.0/3.0 tienen mas especificidad: se repiten aqui para que la lista de tarifas sea una tarjeta por fila */
  .offer-results-head, .luz20-compact-form .offer-results-head, .luz30-compact-form .offer-results-head { display: none !important; }
  .offer-result-row, .luz20-compact-form .offer-result-row, .luz30-compact-form .offer-result-row,
  .offer-results-panel.is-client-view .offer-result-row, .luz20-compact-form .offer-results-panel.is-client-view .offer-result-row, .luz30-compact-form .offer-results-panel.is-client-view .offer-result-row { grid-template-columns: minmax(0, 1fr) !important; }
  .offer-result-row > * { min-width: 0; max-width: 100%; }
  .tariff-filter-controls, .tariff-filter-controls-compact { grid-template-columns: minmax(0, 1fr) !important; }
  .tariff-filter-controls label, .tariff-filter-controls input, .tariff-filter-controls select { min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; }
  input[type="date"], input[type="month"], input[type="time"] { min-width: 0; max-width: 100%; box-sizing: border-box; }
  label, .field-row, .luz30-compact-grid > * { min-width: 0; }
  .crm-panel p, .crm-panel em, .crm-panel small, .users-note, .users-toolbar { overflow-wrap: anywhere; white-space: normal; }
  .users-table, .users-list, .rgpd-table { overflow-x: auto; max-width: 100%; }
}
@media (max-width: 720px) {
  .tariff-company-switches { grid-template-columns: minmax(0, 1fr); }
  .tariff-company-switch-list { min-width: 0; }
  .tariff-bulk-actions { flex-wrap: wrap; }
  .tariff-company-switch { max-width: 100%; }
}
@media (max-width: 720px) {
  .tariff-visible-actions { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
  .tariff-visible-actions button { flex: 1 1 140px; min-width: 0; }
}
@media (max-width: 720px) {
  .tariff-filter-panel { grid-template-columns: minmax(0, 1fr) !important; }
  .tariff-filter-panel > * { min-width: 0; }
}
@media (max-width: 900px) {
  .page-tabs .page-tab { width: 100%; box-sizing: border-box; margin: 3px 0; }
  .page-tabs .page-tab.is-active { background: linear-gradient(180deg, #1a6db0, #0c4f84) !important; color: #fff !important; border-color: #0c4f84 !important; }
  .page-tabs { padding-bottom: 150px !important; }
}
@media (max-width: 900px) { .nav-group:not(:has(.page-tab:not([hidden]))) { display: none !important; } }


/* ==========================================================================================================================
   COMPARATIVA COMPACTA (14-oct-2026): una linea por tarifa, barra de ahorro, iconos de linea, filtros por tipo y compania,
   detalle desplegable con los precios de potencia y energia. Estilo "premium": Inter fina, cifras tabulares, filetes de 1 px.
   Clases nuevas "og-*": no dependen de las reglas antiguas .offer-result-row (que ya no se usan).
   ========================================================================================================================== */
.offer-results-panel {
  --og-ink: #0f172a;
  --og-text: #334155;
  --og-muted: #7b8798;
  --og-line: #e6ebf2;
  --og-soft: #f4f6fa;
  --og-blue: #2563eb;
  --og-green: #059669;
  --og-green-soft: #e8f7f0;
  --og-red: #dc2626;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-feature-settings: "tnum" 1, "cv11" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
}

.offer-results-panel,
.luz20-compact-form .offer-results-panel,
.luz30-compact-form .offer-results-panel {
  max-height: min(86vh, 940px);
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--og-line);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -12px rgba(15, 23, 42, 0.12);
}

.offer-results-panel .summary-vertical-title {
  text-transform: none;
  color: var(--og-ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.offer-results-panel .offer-results-subtitle {
  margin-top: 1px;
  color: var(--og-muted);
  font-size: 11.5px;
  font-weight: 400;
}

/* selector de vista (cliente / asesor) y boton NUEVAS: pastilla fina, activo en blanco sobre pista gris */
.offer-results-panel .view-switch {
  display: inline-flex;
  gap: 0;
  border: 0;
  border-radius: 10px;
  padding: 3px;
  background: var(--og-soft);
  box-shadow: inset 0 0 0 1px var(--og-line);
}

.offer-results-panel .view-opt {
  border-radius: 8px;
  padding: 6px 14px;
  background: transparent;
  color: var(--og-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.offer-results-panel .view-opt:not(.is-active):hover { color: var(--og-ink); }

.offer-results-panel .view-opt.is-active {
  background: #ffffff;
  color: var(--og-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.05);
}

/* recuadros de resumen: sin franja gruesa de color, solo un filete fino y cifra grande y ligera */
.offer-results-panel .offer-results-kpis {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.offer-results-panel .offer-kpi {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 1px;
  padding: 9px 12px 9px 14px;
  border: 1px solid var(--og-line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
}

.offer-results-panel .offer-kpi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  bottom: 11px;
  width: 2px;
  border-radius: 2px;
  background: var(--og-green);
}

.offer-results-panel .offer-kpi:nth-child(2)::before { background: var(--og-blue); }
.offer-results-panel .offer-kpi:nth-child(3)::before { background: #0891b2; }
.offer-results-panel .offer-kpi:nth-child(4)::before { background: #d97706; }
.offer-results-panel .offer-kpi:nth-child(5)::before { background: #94a3b8; }

.offer-results-panel .offer-kpi span {
  color: var(--og-muted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.offer-results-panel .offer-kpi strong {
  margin-top: 1px;
  color: var(--og-ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.offer-results-panel .offer-kpi small { color: var(--og-muted); font-size: 10px; font-weight: 400; }

/* filtros: tipo (fija / indexada) + compania */
.og-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.og-seg {
  display: inline-flex;
  border-radius: 10px;
  padding: 3px;
  background: var(--og-soft);
  box-shadow: inset 0 0 0 1px var(--og-line);
}

.og-seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 8px;
  padding: 5px 12px;
  background: transparent;
  color: var(--og-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.og-seg-btn b {
  color: #a3adbb;
  font-size: 10px;
  font-weight: 500;
}

.og-seg-btn:hover { color: var(--og-ink); }

.og-seg-btn.is-active {
  background: #ffffff;
  color: var(--og-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.og-seg-btn.is-active b { color: var(--og-blue); }

.og-chips {
  display: flex;
  flex: 1 1 320px;
  flex-wrap: wrap;
  gap: 6px;
}

.og-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  border: 1px solid var(--og-line);
  border-radius: 999px;
  padding: 2px 10px 2px 3px;
  background: #ffffff;
  color: var(--og-text);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.og-chip:first-child { padding-left: 11px; }

.og-chip b {
  color: #a3adbb;
  font-size: 9.5px;
  font-weight: 500;
}

.og-chip:hover { border-color: #b6c2d2; }

.og-chip.is-active {
  border-color: var(--og-ink);
  background: var(--og-ink);
  color: #ffffff;
}

.og-chip.is-active b { color: rgba(255, 255, 255, 0.6); }

.og-chip .offer-company-logo {
  width: 30px;
  height: 20px;
  border-radius: 999px;
  border-color: transparent;
}

.og-chip .offer-company-logo img { max-width: 26px; max-height: 15px; }
.og-chip .offer-company-logo.is-text { font-size: 8px; }

/* tabla */
.offer-results-panel .og-table {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.og-head,
.og-line {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 84px minmax(150px, 210px) 78px 112px;
  align-items: center;
  gap: 10px;
}

.offer-results-panel.is-client-view .og-head,
.offer-results-panel.is-client-view .og-line {
  grid-template-columns: 34px minmax(0, 1fr) 84px minmax(150px, 210px) 112px;
}

.og-head {
  position: sticky;
  top: -17px;
  z-index: 2;
  padding: 8px 12px 8px 8px;
  border-bottom: 1px solid var(--og-line);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  color: var(--og-muted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.og-head span:first-child { text-align: center; }
.og-head span:nth-child(4),
.og-head span:nth-child(5) { text-align: right; }

.og-row {
  position: relative;
  border: 1px solid var(--og-line);
  border-radius: 12px;
  background: #ffffff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.og-line {
  min-height: 52px;
  padding: 6px 12px 6px 8px;
}

.og-row:hover {
  border-color: #c5d0de;
  box-shadow: 0 6px 20px -10px rgba(15, 23, 42, 0.22);
}

.og-row.is-recommended::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--og-green);
}

.og-row.is-selected {
  border-color: var(--og-blue);
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.045), #ffffff 55%);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* puesto en el ranking */
.og-rank {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--og-soft);
  color: var(--og-muted);
  font-size: 11px;
  font-weight: 500;
}


.og-name {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.og-name .offer-company-logo { width: 40px; height: 30px; border-radius: 9px; border-color: var(--og-line); }
.og-name .offer-company-logo img { max-width: 36px; max-height: 24px; }
.og-name .offer-company-logo.is-text { font-size: 10px; }

.og-name-text { min-width: 0; line-height: 1.25; }

.og-name-text strong {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  color: var(--og-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.og-name-text small {
  display: block;
  overflow: hidden;
  color: var(--og-muted);
  font-size: 10px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.og-tag {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: 15px;
  height: 15px;
  border-radius: 999px;
  background: var(--og-green-soft);
  color: var(--og-green);
  font-size: 8.5px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
}

.og-tag.is-rec { background: #fef3c7; color: #b45309; }
.og-tag.is-com { background: #e0e9ff; color: var(--og-blue); }
.og-tag.is-warn { background: #ffedd5; color: #c2410c; }

.og-type { display: grid; justify-items: start; }

.og-type-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 9px;
  background: #eff4ff;
  color: #1d4ed8;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.og-type-badge.is-index { background: #fff4e0; color: #b45309; }

/* ahorro con barra fina proporcional al mejor ahorro */
.og-save {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--og-green);
}

.og-save-top {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 7px;
  line-height: 1.1;
}

.og-save-top strong { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.og-save-top small { color: var(--og-muted); font-size: 10px; font-weight: 400; white-space: nowrap; }

.og-bar {
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--og-soft);
}

.og-bar b {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #34d399, #059669);
}

.og-save.is-neg { color: var(--og-red); }
.og-save.is-neg .og-bar b { background: linear-gradient(90deg, #fca5a5, #dc2626); }

.og-com {
  color: var(--og-ink);
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

/* acciones: iconos de linea fina */
.og-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.og-actions button {
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 0;
  background: transparent;
  color: var(--og-muted);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.og-ic {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.og-actions button:hover { border-color: var(--og-line); background: var(--og-soft); color: var(--og-ink); }
.og-actions button.is-on { background: var(--og-blue); color: #ffffff; }
.og-actions button[aria-expanded="true"] { background: var(--og-ink); color: #ffffff; }

/* detalle desplegable: se abre con una transicion suave (la fila no se vuelve a pintar) */
.og-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}

.og-row.is-open .og-detail { grid-template-rows: 1fr; }

.og-detail-in {
  min-height: 0;
  overflow: hidden;
  margin: 0 12px;
  border-top: 1px solid transparent;
  opacity: 0;
  transition: opacity 0.22s ease 0.05s, border-color 0.2s ease;
}

.og-row.is-open .og-detail-in {
  margin-bottom: 12px;
  border-top-color: var(--og-line);
  opacity: 1;
}

.og-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: 14px 28px;
  padding: 14px 4px 4px 42px;
}

.og-detail h6 {
  margin: 0 0 8px;
  color: var(--og-ink);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.og-detail h6 em {
  margin-left: 6px;
  color: var(--og-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
}

.og-prices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.og-prices li {
  display: grid;
  gap: 1px;
  min-width: 62px;
  border: 1px solid var(--og-line);
  border-radius: 9px;
  padding: 5px 10px 6px;
  background: var(--og-soft);
}

.og-prices li span {
  color: var(--og-muted);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.og-prices li b {
  color: var(--og-ink);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.og-detail-empty { margin: 0; color: var(--og-muted); font-size: 11px; }

.og-detail-sum dl { display: grid; gap: 4px; margin: 0; }

.og-detail-sum dl div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 11.5px;
}

.og-detail-sum dt { color: var(--og-muted); font-weight: 400; }
.og-detail-sum dd { margin: 0; color: var(--og-ink); font-weight: 500; }

.og-detail-sum dl .is-total {
  margin-top: 3px;
  border-top: 1px dashed var(--og-line);
  padding-top: 6px;
}

.og-detail-sum dl .is-total dt { color: var(--og-text); font-weight: 500; }
.og-detail-sum dl .is-total dd { color: var(--og-green); font-size: 13px; font-weight: 600; }

.og-detail-note {
  margin: 10px 0 0;
  padding-left: 46px;
  color: var(--og-muted);
  font-size: 10px;
  font-weight: 400;
}

.og-detail-note strong { color: #c2410c; font-weight: 500; }

.offer-results-panel.is-client-view .offer-advisor-only { display: none; }
/* la Vista cliente NUNCA ensena la comision, tampoco el recuadro "Mejor comision": quedan 4 recuadros */
.offer-results-panel.is-client-view .offer-results-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (prefers-reduced-motion: reduce) {
  .og-detail, .og-detail-in, .og-row, .og-chip, .og-seg-btn { transition: none; }
}

/* pantallas estrechas: puesto + nombre arriba, tipo/ahorro/comision y acciones debajo */
@media (max-width: 860px) {
  .og-head { display: none; }

  .og-line,
  .offer-results-panel.is-client-view .og-line {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    grid-template-areas:
      "rank name name"
      "type type save"
      "com com actions";
    gap: 6px 8px;
    padding: 10px;
  }

  .offer-results-panel.is-client-view .og-line {
    grid-template-areas:
      "rank name name"
      "type type save"
      "actions actions actions";
  }

  .og-rank { grid-area: rank; }
  .og-name { grid-area: name; }
  .og-type { grid-area: type; }
  .og-save { grid-area: save; min-width: 130px; }
  .og-com { grid-area: com; justify-self: start; text-align: left; }
  .og-actions { grid-area: actions; }
  .og-detail-grid { grid-template-columns: 1fr; padding-left: 4px; }
  .og-detail-note { padding-left: 4px; }
  .offer-results-panel .offer-results-kpis,
  .offer-results-panel.is-client-view .offer-results-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .og-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .og-chip { flex: none; }
}

/* OBSIDIAN: tres secciones (Marketing / Agentes / Chat IA) con aviso de lo pendiente */
.obs-tabs { margin: 4px 0 12px; max-width: 100%; overflow-x: auto; }
.obs-tabs .obs-tab { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 8px 20px; font-size: 13px; }
.obs-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1; }

/* ==========================================================================================================================
   COMPARATIVA CON IMPACTO (14-oct-2026): tarjeta "MEJOR OPCION" con barras comparadas, podio de color (corona / estrella / medalla),
   importes desglosados en cada fila y el ahorro en grande. Se apoya en las clases og-* de arriba.
   ========================================================================================================================== */
/* recuadros de resumen con tinte de color */
.offer-results-panel .offer-kpi:nth-child(1) { background: linear-gradient(135deg, #ecfdf5, #ffffff 70%); }
.offer-results-panel .offer-kpi:nth-child(2) { background: linear-gradient(135deg, #eff6ff, #ffffff 70%); }
.offer-results-panel .offer-kpi:nth-child(3) { background: linear-gradient(135deg, #ecfeff, #ffffff 70%); }
.offer-results-panel .offer-kpi:nth-child(4) { background: linear-gradient(135deg, #fffbeb, #ffffff 70%); }
.offer-results-panel .offer-kpi:nth-child(5) { background: linear-gradient(135deg, #f1f5f9, #ffffff 70%); }

/* tarjeta MEJOR OPCION */
.og-hero {
  border: 1px solid #6fd9b6;
  border-radius: 18px;
  padding: 18px 22px 18px;
  background: linear-gradient(135deg, #d4f9e8 0%, #a4efd3 55%, #86e6c7 100%);
  color: #064e3b;
  box-shadow: 0 20px 44px -24px rgba(5, 150, 105, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.og-hero-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.og-hero-corona {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 20px -10px rgba(5, 120, 85, 0.6);
}

.og-hero-corona .og-star { width: 34px; height: 34px; filter: drop-shadow(0 3px 5px rgba(37, 99, 235, 0.35)); }

.og-hero-tit { display: grid; gap: 1px; min-width: 0; flex: 1 1 200px; }
.og-hero-tit small { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #047857; }
.og-hero-tit strong { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; }
.og-hero-tit em { font-style: normal; font-size: 12px; font-weight: 500; color: #0f766e; }

.og-hero-save { display: grid; justify-items: end; gap: 0; line-height: 1.05; text-align: right; }
.og-hero-save small { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #047857; }
.og-hero-save b { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; color: #065f46; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.45); }
.og-hero-save i { font-style: normal; font-size: 13px; font-weight: 600; color: #047857; }

.og-hero-bars { display: grid; gap: 10px; margin-top: 16px; }
.og-hb { display: grid; gap: 5px; }
.og-hb span { display: flex; justify-content: space-between; font-size: 12px; }
.og-hb span b { font-weight: 600; }
.og-hb span em { font-style: normal; font-weight: 700; }

.og-hbar { display: block; height: 22px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.68); box-shadow: inset 0 1px 3px rgba(6, 78, 59, 0.14); }
.og-hbar u { display: block; height: 100%; border-radius: 999px; text-decoration: none; }
.og-hbar.is-actual u { background: linear-gradient(90deg, #9ea3b5, #6b7186); }
.og-hbar.is-offer u { background: linear-gradient(90deg, #059669, #10b981 60%, #34d399); box-shadow: 0 0 14px rgba(16, 185, 129, 0.55); }

.og-row.is-recommended::before { display: none; }

.og-line { min-height: 70px; padding-top: 9px; padding-bottom: 9px; }

.og-rank.has-star { width: 38px; height: 38px; background: transparent; box-shadow: none; }
.og-star { width: 32px; height: 32px; filter: drop-shadow(0 3px 4px rgba(37, 99, 235, 0.3)); }

/* desglose de importes dentro de la fila */
.og-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }

.og-mini span {
  display: inline-grid;
  gap: 0;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 9px;
  padding: 3px 10px 4px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--og-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.og-mini small { font-size: 8.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--og-muted); overflow: visible; }
.og-mini .is-total { background: #a7f3d0; border-color: #6ee7b7; color: #064e3b; }
.og-mini .is-total small { color: inherit; opacity: 0.75; }

/* etiqueta de tipo con icono y color */
.og-type-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px 4px 9px; background: #e0e7ff; color: #3730a3; font-weight: 600; }
.og-type-badge .og-ic { width: 12px; height: 12px; stroke-width: 1.8; }
.og-type-badge.is-index { background: #ffedd5; color: #9a3412; }

/* ahorro en grande */
.og-save-top { display: grid; justify-items: end; gap: 1px; }
.og-save-lbl { font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--og-muted); }
.og-save-top strong { font-size: 23px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: #059669; }
.og-save.is-neg .og-save-top strong { color: #dc2626; }
.og-save-top small { font-size: 11px; font-weight: 600; color: #10b981; }
.og-save.is-neg .og-save-top small { color: #f87171; }
.og-bar { height: 5px; background: rgba(15, 23, 42, 0.07); }
.og-bar b { background: linear-gradient(90deg, #34d399, #059669); box-shadow: 0 0 8px rgba(16, 185, 129, 0.45); }

.og-com { font-weight: 700; }

@media (max-width: 860px) {
  .og-hero-save { justify-items: start; text-align: left; }
  .og-hero-save b { font-size: 34px; }
  .og-mini span { padding: 2px 8px 3px; }
  .og-save-top { justify-items: end; }
}

/* filas teñidas por el ahorro: VERDE si ahorra, ROJO si no, con sombra de color */
.og-row.og-pos {
  border-color: #34c38b;
  background: linear-gradient(100deg, #d6f7e4 0%, #eefcf5 55%, #ffffff 100%);
  box-shadow: 0 10px 26px -14px rgba(5, 150, 105, 0.6), 0 0 0 1px rgba(52, 195, 139, 0.1);
}

.og-row.og-neg {
  border-color: #f19a9a;
  background: linear-gradient(100deg, #ffdcdc 0%, #ffeeee 55%, #ffffff 100%);
  box-shadow: 0 10px 26px -14px rgba(220, 38, 38, 0.55), 0 0 0 1px rgba(241, 154, 154, 0.1);
}

.og-row.og-pos:hover { box-shadow: 0 14px 30px -12px rgba(5, 150, 105, 0.75); }
.og-row.og-neg:hover { box-shadow: 0 14px 30px -12px rgba(220, 38, 38, 0.65); }
.og-neg .og-mini .is-total { background: #fecaca; border-color: #fca5a5; color: #7f1d1d; }
.og-neg .og-bar b { background: linear-gradient(90deg, #fca5a5, #dc2626); box-shadow: 0 0 8px rgba(220, 38, 38, 0.4); }

/* la tarjeta grande enseña la tarifa ELEGIDA: con el icono de check y, si no ahorra, en tono rojo */
.og-hero-corona .og-ic { width: 30px; height: 30px; stroke: #047857; stroke-width: 2.2; }
.og-hero.is-neg { border-color: #f3a3a3; background: linear-gradient(135deg, #ffe4e4 0%, #fecaca 55%, #fca5a5 100%); color: #7f1d1d; box-shadow: 0 20px 44px -24px rgba(220, 38, 38, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.og-hero.is-neg .og-hero-tit small, .og-hero.is-neg .og-hero-save small, .og-hero.is-neg .og-hero-save i, .og-hero.is-neg .og-hero-tit em { color: #b91c1c; }
.og-hero.is-neg .og-hero-save b { color: #991b1b; }
.og-hero.is-neg .og-hero-corona .og-ic { stroke: #b91c1c; }

/* sin ahorro que medir (0 EUR, p. ej. estudio sin datos): fila neutra, no roja */
.og-row.og-cero { border-color: #dbe3ec; background: #ffffff; box-shadow: 0 6px 18px -14px rgba(15, 23, 42, 0.25); }
.og-row.og-cero:hover { box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.3); }
.og-cero .og-save, .og-cero .og-save-top strong, .og-cero .og-save-top small { color: #64748b; }
.og-cero .og-bar b { background: #cbd5e1; box-shadow: none; }

/* ===== CONFIGURACION (tienda / lamina): vista previa de la cabecera de la lamina (fondo claro, como el resto del CRM) ===== */
.tienda-modal-backdrop .changelog-modal { width: min(640px, 100%); }
.tienda-lamina-prev { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; margin: 10px 0 6px; border-radius: 12px; overflow: hidden; border: 1px solid #d9e4ef; background: #fff; min-height: 128px; box-shadow: 0 6px 18px rgba(15, 55, 98, 0.12); }
.tlp-foto { background: #eef5ec; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #0b2545; font-weight: 900; text-align: center; padding: 6px; }
.tlp-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tlp-datos { padding: 10px 12px; display: grid; align-content: center; gap: 3px; color: #0b2545; min-width: 0; }
.tlp-datos p, .tlp-datos em { margin: 0; font-size: 11.5px; font-style: normal; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlp-datos em { color: #237b2e; }
.tlp-logo { height: 38px; display: flex; align-items: center; margin-bottom: 2px; }
.tlp-logo img { max-height: 100%; max-width: 100%; object-fit: contain; }
.tlp-logo b { font-size: 15px; color: #0f5688; }
@media (max-width: 560px) { .tienda-lamina-prev { grid-template-columns: 1fr; } .tlp-foto { min-height: 96px; } }


/* ======================================================================================================================
   TEMA CORPORATIVO + CABECERA DE LA EMPRESA + FOTO DE PERFIL (15-oct-2026)
   Los colores de la empresa llegan como variables CSS que pone app.js en <html> (marcaAplicarTema): --brand, --brand-ink, --brand-hover, --brand-grad,
   --brand-soft, --brand-deep, --brand-head, --brand-text, --brand-light, --brand-nav-*, --brand-avatar, --accent, --accent-ink. TODAS las reglas de este bloque
   llevan como respaldo el color de siempre: si la empresa no elige colores, no hay variables y el CRM se ve EXACTAMENTE igual. Solo se tocan el menu lateral,
   los botones principales, los chips activos, las cabeceras de tabla, los enlaces de las ventanas de configuracion y la barra superior. NO se recolorea el
   verde/rojo semanticos (ahorro/perdida), ni la lamina, ni los comparadores. El fondo es siempre blanco/gris claro: no hay modo oscuro.
   ====================================================================================================================== */

/* Menu lateral: elemento activo y hover */
.page-tabs .page-tab:hover { background: var(--brand-nav-hover, rgba(255, 255, 255, 0.06)); }
.page-tabs .page-tab.is-active { background: var(--brand-nav-active, linear-gradient(90deg, rgba(53, 167, 230, 0.30), rgba(53, 167, 230, 0.08))); box-shadow: inset 3px 0 0 var(--brand-light, #35a7e6); }
@media (max-width: 900px) {
  .page-tabs .page-tab.is-active { background: var(--brand-grad, linear-gradient(180deg, #1a6db0, #0c4f84)) !important; color: var(--brand-ink, #fff) !important; border-color: var(--brand-hover, #0c4f84) !important; box-shadow: none; }
}

/* Botones principales de accion */
.crm-btn-primary, .crm-btn-primary:hover { background: var(--brand-grad, linear-gradient(180deg, #1f8a45, #126326)); border-color: var(--brand-hover, #126326); color: var(--brand-ink, #ffffff); }
.client-actions button.primary, .tariff-actions button.primary, .client-doc-button.primary { background: var(--brand, var(--blue)); border-color: var(--brand, var(--blue)); color: var(--brand-ink, #fff); }
.client-list-toolbar-right button.primary { background: var(--brand, #123762); border-color: var(--brand, #123762); color: var(--brand-ink, #fff); }
.client-list-toolbar-right button.primary:hover { background: var(--brand-hover, #0f3054); }
.tienda-form .license-actions button:not(.secondary), .license-blocker-card .license-actions button:not(.secondary) { background: var(--brand, #56a832); color: var(--brand-ink, #fff); }
.tienda-form .license-actions button:not(.secondary):hover, .license-blocker-card .license-actions button:not(.secondary):hover { background: var(--brand-hover, #56a832); }
.custom-tariff-form button[type="submit"] { background: var(--brand, #0c4f84); color: var(--brand-ink, #fff); }
.custom-tariff-form button[type="submit"]:hover { background: var(--brand-hover, #0a4270); }

/* Chips activos y cabeceras de tabla */
.lic-chip.is-active { background: var(--brand, #0c4f84); color: var(--brand-ink, #fff); border-color: var(--brand, #0c4f84); }
.lic-table th { background: var(--brand-soft, #f1f6fb); box-shadow: inset 0 -2px 0 var(--accent, transparent); }
.client-table-head { background: var(--brand-head, linear-gradient(180deg, #17436f 0%, #123762 100%)); box-shadow: inset 0 -2px 0 var(--accent, transparent); }
.contract-row.contract-head { background: var(--brand-deep, #0b2a42); border-color: var(--brand-deep, #0b2a42); box-shadow: inset 0 -2px 0 var(--accent, transparent); }
.manual-table-head { background: var(--brand-deep, #0b2a42); box-shadow: inset 0 -2px 0 var(--accent, transparent); }
/* Cabeceras de panel (barra oscura con titulo en blanco): clientes, contratos, equipo y renovaciones */
/* (solo con tema: en movil el CRM de siempre repinta .contracts-hero con otro degradado y no debe cambiar si no hay colores propios) */
body.tema-marca .clients-hero, body.tema-marca .contracts-hero, body.tema-marca .users-hero, body.tema-marca .renewals-hero { background: var(--brand-hero); }

/* Enlaces de las ventanas de configuracion (solo con tema: sin tema se queda el azul del navegador de siempre) */
body.tema-marca .tienda-form a, body.tema-marca .license-blocker-card a { color: var(--brand-text); }

/* Tarjeta de usuario del menu: foto de perfil o iniciales */
.session-avatar { background: var(--brand-avatar, linear-gradient(135deg, #2a8ac9, #1f6fa8)); overflow: hidden; }
.session-avatar.con-foto { cursor: pointer; }
.session-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.session-avatar[title] { cursor: pointer; }

/* Barra superior con la marca de la empresa (empresas externas siempre; la casa solo si elige un color) */
.brand-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; margin: 0 0 12px; padding: 6px 24px;
  background: #ffffff; border-bottom: 2px solid var(--accent, var(--line)); color: var(--ink); }
.brand-bar-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-bar-logo { height: 30px; max-width: 150px; object-fit: contain; flex: none; }
.brand-bar-name { font-size: 15px; font-weight: 800; color: var(--brand-text, var(--ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-bar-user { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.brand-bar-uname { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.brand-bar-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden; background: var(--brand-avatar, #123762); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; }
.brand-bar-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .brand-bar { padding: 6px 12px; margin: 0 0 8px; min-height: 42px; }
  .brand-bar-logo { height: 26px; max-width: 110px; }
  .brand-bar-uname { display: none; }
}

/* Ventana de Configuracion: secciones, rejilla, colores, foto de perfil y barra de guardar */
.tienda-modal { width: min(720px, 100%); }
.tienda-modal .tienda-form { padding-bottom: 0; overflow: visible; }   /* (en movil el cuerpo se hacia desplazable y la barra de guardar dejaba de quedarse abajo) */
.tienda-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.tienda-grid > label { min-width: 0; }
.tienda-form input[type="text"] { min-width: 0; }
.tienda-images > div { min-width: 0; }
.tienda-images input[type="file"] { max-width: 100%; min-width: 0; }
.tienda-color { margin: 12px 0 4px; display: grid; gap: 6px; justify-items: start; }
.tienda-color-label { font-size: 12.5px; font-weight: 800; color: #123762; }
.tienda-color-ctl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tienda-color-ctl input[type="color"] { width: 44px; height: 36px; padding: 2px; border: 1px solid #cfd9e4; border-radius: 8px; background: #fff; cursor: pointer; }
.tienda-color-ctl input[type="text"] { width: 110px; font-family: ui-monospace, Consolas, monospace; text-transform: lowercase; }
.tienda-color-aviso { margin: 0; font-size: 12.5px; font-weight: 700; color: #4a5a6d; line-height: 1.35; }
.tienda-color-aviso.ok { color: #1f6b30; } .tienda-color-aviso.warn { color: #8a5a00; } .tienda-color-aviso.bad { color: #a32626; }
.tienda-avatar-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 4px; }
.tienda-avatar-prev { display: grid; place-items: center; width: 72px; height: 72px; flex: none; border-radius: 50%; overflow: hidden; background: #e8eef5; color: #123762; font-size: 22px; font-weight: 800; border: 1px solid #cfd9e4; }
.tienda-avatar-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tienda-avatar-ctl { display: grid; gap: 8px; justify-items: start; font-size: 12.5px; }
.tienda-avatar-ctl .secondary { border: 0; border-radius: 9px; padding: 7px 12px; font-weight: 800; font-size: 12.5px; cursor: pointer; background: #e6edf4; color: #123762; }
.tienda-guardar-bar { position: sticky; bottom: 0; z-index: 2; margin: 14px -16px 0; padding: 8px 16px 12px; background: #ffffff; border-top: 1px solid #e2e9f0; }
.tienda-guardar-bar .tienda-msg { margin: 0 0 6px; min-height: 16px; }
.tienda-guardar-bar .license-actions { margin-top: 0; }
.mi-foto-modal { width: min(420px, 100%); }
@media (max-width: 560px) { .tienda-grid { grid-template-columns: 1fr; } .tienda-images { grid-template-columns: 1fr; } }
/* Movil: el boton de menu y la barra del titulo (z-index 8000) quedan por encima de las ventanas; se deja su hueco para no taparles la cabecera. */
@media (max-width: 900px) { .tienda-modal-backdrop { align-items: flex-start; padding-top: 72px; } .tienda-modal, .mi-foto-modal { max-height: calc(100vh - 88px); } }

/* Vista previa en vivo de los colores (mismos tokens y mismos respaldos que el CRM real) */
.ttp { display: grid; grid-template-columns: 112px 1fr; margin: 12px 0 6px; border: 1px solid #d9e4ef; border-radius: 12px; overflow: hidden; background: #ffffff; font-size: 11.5px; box-shadow: 0 6px 18px rgba(15, 55, 98, 0.10); }
.ttp-side { display: grid; align-content: start; gap: 2px; padding: 8px 6px; background: #0b243c; }
.ttp-item { padding: 5px 8px; border-radius: 6px; color: #aebfd2; font-weight: 700; }
.ttp-item.is-active { color: #ffffff; background: var(--brand-nav-active, linear-gradient(90deg, rgba(53, 167, 230, 0.30), rgba(53, 167, 230, 0.08))); box-shadow: inset 3px 0 0 var(--brand-light, #35a7e6); }
.ttp-main { display: grid; align-content: start; gap: 8px; min-width: 0; padding-bottom: 10px; }
.ttp-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-bottom: 2px solid var(--accent, var(--line)); background: #fff; }
.ttp-bar b { color: var(--brand-text, var(--ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttp-av { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-avatar, #123762); color: #fff; font-size: 9px; font-weight: 800; flex: none; }
.ttp-th, .ttp-row { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr; gap: 6px; margin: 0 10px; padding: 6px 8px; }
.ttp-th { background: var(--brand-head, linear-gradient(180deg, #17436f 0%, #123762 100%)); color: #eaf3fb; font-weight: 800; text-transform: uppercase; font-size: 10px; border-radius: 6px; box-shadow: inset 0 -2px 0 var(--accent, transparent); }
.ttp-row { color: var(--ink); font-weight: 600; }
.ttp-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 10px; }
.ttp-btn { border: 0; border-radius: 8px; padding: 6px 12px; font-weight: 800; font-size: 11.5px; background: var(--brand, #123762); color: var(--brand-ink, #fff); pointer-events: none; }
.ttp-chip { padding: 4px 10px; border-radius: 999px; border: 1px solid #cfd9e4; background: #fff; color: #28425f; font-weight: 800; }
.ttp-chip.is-active { background: var(--brand, #0c4f84); color: var(--brand-ink, #fff); border-color: var(--brand, #0c4f84); }
.ttp-link { color: var(--brand-text, #0c4f84); font-weight: 800; text-decoration: underline; pointer-events: none; }
@media (max-width: 560px) { .ttp { grid-template-columns: 84px 1fr; } }

/* ===== Liquidaciones: albaranes de comercializadora y estados de autofactura ===== */
.alb-wrap { display: grid; gap: 14px; margin-top: 12px; }
.alb-card { background: #fff; border: 1px solid #d9e4ef; border-radius: 12px; padding: 14px 16px; box-shadow: 0 2px 10px rgba(15, 55, 98, 0.06); }
.alb-card h4 { margin: 0 0 6px; font-size: 14px; color: #0b2545; }
.alb-sub { margin: 14px 0 6px; font-size: 12.5px; color: #4a5a6d; }
.alb-help { margin: 0 0 10px; font-size: 12.5px; color: #4a5a6d; line-height: 1.45; }
.alb-error { margin: 8px 0 0; color: #a32626; font-weight: 800; font-size: 12.5px; }
.alb-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; align-items: end; }
.alb-form label, .alb-listhead label { display: grid; gap: 3px; font-size: 11.5px; font-weight: 800; color: #536070; }
.alb-form input, .alb-listhead select { font: inherit; padding: 7px 9px; border: 1px solid #cfd9e4; border-radius: 8px; background: #fff; color: #0b243c; }
.alb-form button, .alb-actions button, .alb-bulk button { font: inherit; font-weight: 800; font-size: 12.5px; padding: 8px 12px; border: 1px solid #b9c8d8; border-radius: 8px; background: #f4f8fc; color: #123762; cursor: pointer; }
.alb-actions .is-primary { background: #0b62c6; border-color: #0b62c6; color: #fff; }
.alb-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.alb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 8px 0; }
.alb-kpis span { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid #e1e9f1; border-radius: 10px; background: #f8fbfe; }
.alb-kpis small { font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #6b7787; }
.alb-kpis b { font-size: 15px; color: #0b2545; }
.alb-kpis .is-bad b { color: #a32626; } .alb-kpis .is-warn b { color: #8a5a00; }
.alb-listhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 8px; }
.alb-listhead h4 { margin: 0; flex: 1 1 auto; }
.alb-bulk { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.alb-table { overflow-x: auto; border: 1px solid #e1e9f1; border-radius: 10px; }
.alb-head, .alb-row { display: grid; grid-template-columns: 110px 180px minmax(120px, 1fr) minmax(100px, 1fr) 90px 90px 90px minmax(90px, 1fr); gap: 8px; align-items: center; padding: 7px 10px; font-size: 12px; min-width: 860px; }
.alb-lista .alb-head, .alb-lista .alb-row { grid-template-columns: 28px 130px minmax(110px, 1fr) minmax(90px, 1fr) 60px 90px 90px 90px 100px 110px; min-width: 980px; }
.alb-head { background: #eef4fa; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #536070; }
.alb-row { border-top: 1px solid #edf2f7; }
.alb-row small { display: block; color: #6b7787; font-size: 10.5px; }
.alb-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; background: #eef4fa; color: #123762; }
.alb-badge.is-ok { background: #e7f6ea; color: #1f6b30; } .alb-badge.is-warn { background: #fff3d6; color: #7a5200; } .alb-badge.is-bad { background: #fde8e8; color: #a32626; }
.alb-badge.is-estado-validada, .alb-badge.is-estado-abonada { background: #e7f6ea; color: #1f6b30; } .alb-badge.is-estado-cancelada { background: #eceff3; color: #6b7787; }
.alb-acciones { display: inline-flex; gap: 8px; align-items: center; }
.alb-acciones button { font: inherit; font-size: 11.5px; font-weight: 800; padding: 4px 9px; border: 1px solid #b9c8d8; border-radius: 7px; background: #f4f8fc; color: #123762; cursor: pointer; }
.liq-af-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; font-size: 12.5px; font-weight: 800; color: #536070; }
.liq-af-bulk button { font: inherit; font-weight: 800; font-size: 12px; padding: 6px 10px; border: 1px solid #b9c8d8; border-radius: 8px; background: #f4f8fc; color: #123762; cursor: pointer; }
.liq-af-estado { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700; color: #536070; }
@media (max-width: 560px) { .alb-card { padding: 12px; } }

/* ==========================================================================================================================
   INICIO: panel de mercado. TODO sobre fondo blanco: tarjetas blancas con borde fino y sombra suave, texto oscuro, una sola tipografia (la del CRM) y UN acento:
   el color de la marca (--brand; en la casa, el azul del CRM). Solo la franja superior (titulo, fecha y accesos) lleva el degradado de marca (--brand-hero).
   Cifras clave con mini-grafico, una tarjeta ancha de MERCADO DIARIO en bandas (cifras del dia, grafico de 24 h a todo el ancho, tramos + lectura, mapa de
   calor + media del mes) y tarjetas de futuros, gas y costes regulados. Rojo = caro/sube, verde = barato/baja (siempre con texto o flecha, nunca solo color).
   Los cortes de diseño usan @container sobre .im (900 / 1000 / 560 px de ANCHO DEL PANEL): son los mismos que usa mercadoMedidas() en app.js.
   Clases "im-*" (generales), "tm-*" (mercado diario) y "hm-*" (mapa de calor). Animaciones solo CSS salvo contadores y transicion Hoy/Mañana (app.js), todas
   apagadas con prefers-reduced-motion. Sin modo oscuro: el CRM es de fondo blanco.
   ========================================================================================================================== */
#tab-inicio { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M3%2011l9-8%209%208v9a1%201%200%200%201-1%201h-5v-6H9v6H4a1%201%200%200%201-1-1z'%2F%3E%3C%2Fsvg%3E"); }
.nav-group-inicio { padding-bottom: 2px; }
#inicio-page { background: #ffffff; }
.im {
  color-scheme: light;
  --im-ink: #0f1b2d; --im-text: #3b4a5f; --im-muted: #5d6c80; --im-line: #e6ebf2; --im-line-2: #d5dde8; --im-soft: #f5f8fb;
  --im-accent: var(--brand, var(--blue, #1f6fa8)); --im-accent-ink: var(--brand-ink, #ffffff);
  --im-accent-t: color-mix(in oklab, var(--im-accent) 86%, #000000);          /* acento para TEXTO sobre blanco */
  --im-tint: color-mix(in oklab, var(--im-accent) 9%, #ffffff);
  --im-tint-2: color-mix(in oklab, var(--im-accent) 16%, #ffffff);
  --im-up: #b42327; --im-down: #17703a; --im-s1: #6b7f99; --im-s2: #b98a2e;
  --im-cruz: rgba(15, 27, 45, 0.45);
  --tm-valle: #1fa05a; --tm-llano: #e0a40f; --tm-punta: #e5486a;
  --tm-valle-t: #14612f; --tm-llano-t: #7a4f00; --tm-punta-t: #9f1239;
  --hm-lo: color-mix(in oklab, var(--im-accent) 7%, #ffffff); --hm-hi: color-mix(in oklab, var(--im-accent) 92%, #08182b);
  --im-sombra: 0 1px 2px rgba(15, 27, 45, 0.05), 0 18px 34px -26px rgba(15, 27, 45, 0.30);
  width: min(1280px, 100%); margin: 0 auto; color: var(--im-ink); font-family: inherit; line-height: 1.35;
  font-variant-numeric: tabular-nums; container-type: inline-size; container-name: im;
  position: relative; overflow-x: clip;   /* las tablas solo para lectores de pantalla (.im-sr) miden lo que su contenido y no deben ensanchar la pagina */
}
.im * { box-sizing: border-box; }
.im button { font-family: inherit; }
.im :is(button, a, summary, .im-ch, .im-hb):focus-visible { outline: 3px solid var(--focus, rgba(31, 111, 168, 0.45)); outline-offset: 2px; }
.im-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.im-st0 { stop-color: var(--im-accent); stop-opacity: 0.30; } .im-st1 { stop-color: var(--im-accent); stop-opacity: 0; }
.im-sb0 { stop-color: color-mix(in oklab, var(--im-accent) 62%, #ffffff); } .im-sb1 { stop-color: var(--im-accent); }
.im-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- Cabecera: la unica franja con el degradado de marca ---- */
.im-hero {
  position: relative; overflow: hidden; border-radius: 24px; padding: 26px 30px 82px; color: #ffffff;
  background: var(--brand-hero, linear-gradient(135deg, #082c4d 0%, #0e4372 55%, #1b6598 100%));
  box-shadow: 0 22px 40px -28px rgba(8, 44, 77, 0.6);
}
.im-hero-deco { position: absolute; right: 0; top: 0; width: 62%; height: 62%; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.im-deco-rejilla line { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; }
.im-deco-area { fill: rgba(255, 255, 255, 0.08); }
.im-deco-linea { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.im-hero-top, .im-accesos { position: relative; z-index: 1; }
.im-hero-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 24px; }
.im-eyebrow { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.82; }
.im-hero h1 { margin: 4px 0 0; font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #ffffff; }
.im-fecha { margin: 6px 0 0; font-size: 14.5px; opacity: 0.9; }
.im-fecha::first-letter { text-transform: uppercase; }
.im-fuentes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.im-fuente { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.2); font-size: 12px; font-weight: 700; color: #ffffff; }
.im-fuente i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25); }
.im-fuente.is-carga i { background: #cbd5e1; box-shadow: 0 0 0 3px rgba(203, 213, 225, 0.2); }
.im-fuente.is-aviso i { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.25); }

.im-accesos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.im-acceso:last-child:nth-child(odd) { grid-column: 1 / -1; }
.im-acceso {
  display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 11px 16px 11px 11px; border-radius: 16px; cursor: pointer; text-align: left; color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.26); background: rgba(255, 255, 255, 0.12);
  transition: transform 0.16s ease-out, background-color 0.16s ease-out, box-shadow 0.16s ease-out;
}
.im-acceso-ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: rgba(255, 255, 255, 0.2); }
.im-acceso-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.im-acceso-t { display: grid; gap: 1px; min-width: 0; flex: 1; }
.im-acceso small { font-size: 12px; font-weight: 600; opacity: 0.86; }
.im-acceso strong { font-size: 18px; font-weight: 800; line-height: 1.15; }
.im-acceso-flecha { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.65; transition: transform 0.16s ease-out, opacity 0.16s ease-out; }
.im-acceso[data-ir="crm"] { background: #ffffff; color: var(--brand-deep, #0e4372); border-color: #ffffff; }
.im-acceso[data-ir="crm"] .im-acceso-ico { background: var(--im-tint-2); }
@media (hover: hover) {
  .im-acceso:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.22); box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.5); }
  .im-acceso[data-ir="crm"]:hover { background: #ffffff; }
  .im-acceso:hover .im-acceso-flecha { transform: translateX(3px); opacity: 1; }
}
.im-acceso:active { transform: translateY(0) scale(0.985); }

/* ---- Cifras clave ---- */
.im-kpis { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: -46px 20px 0; }
.im-kpi { grid-column: span 2; }
.im-kpi:nth-child(n+4) { grid-column: span 3; }
.im-kpi {
  position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 16px 18px 12px; overflow: hidden;
  background: #ffffff; border: 1px solid var(--im-line); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.05), 0 18px 32px -20px rgba(15, 27, 45, 0.42);
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}
@media (hover: hover) { .im-kpi:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(15, 27, 45, 0.05), 0 24px 36px -20px rgba(15, 27, 45, 0.5); } }
.im-kpi-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.im-kpi-ico { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; background: var(--im-tint); color: var(--im-accent-t); }
.im-kpi-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.im-kpi-l { font-size: 11px; font-weight: 800; letter-spacing: 0.035em; color: var(--im-muted); text-transform: uppercase; line-height: 1.2; overflow-wrap: anywhere; }
.im-kpi-v { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.im-kpi-v strong { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--im-ink); }
.im-kpi.is-vacio .im-kpi-v strong { color: #8a97aa; }
.im-kpi.is-stale .im-kpi-v strong { color: var(--im-text); }
.im-kpi-d { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-height: 22px; }
.im-kpi .im-spark-box, .im-kpi > .im-spark { margin-top: auto; }
.im-spark-box { position: relative; padding-top: 8px; }
.im-spark { display: block; width: 100%; height: 44px; overflow: visible; }
.im-spark-line { fill: none; stroke: var(--im-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.im-spark-area { fill: url(#im-ga); }
.im-spark-dot { position: absolute; width: 9px; height: 9px; margin: 4px 0 0 -4.5px; border-radius: 50%; background: var(--im-accent); box-shadow: 0 0 0 2px #ffffff; }
.im-spark-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--im-accent); opacity: 0; }
.im-spark-vacio { height: auto; font-size: 11px; color: var(--im-muted); line-height: 1.2; }

/* ---- Tarjetas ---- */
.im-bloque, .im-grid { margin-top: 20px; }
.im-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: stretch; }
.im-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 22px 24px 16px; background: #ffffff; border: 1px solid var(--im-line); border-radius: 22px; box-shadow: var(--im-sombra); }
.im-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.im-card-head h2 { display: flex; align-items: center; gap: 11px; margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.005em; color: var(--im-ink); }
.im-card-ico { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; background: var(--im-tint); color: var(--im-accent-t); }
.im-card-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.im-chip { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: var(--im-soft); border: 1px solid var(--im-line); color: var(--im-text); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.im-chip i { width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.im-chip-aviso { background: #ffffff; border: 1px dashed #94a3b8; color: var(--im-ink); }
.im-chip-cargando { color: var(--im-muted); }
.im-card.is-stale .im-card-body { opacity: 0.74; }
.im-card-body { display: block; min-width: 0; }
.im-sub-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 16px 0 6px; font-size: 13.5px; font-weight: 800; color: var(--im-ink); }
.im-card-body > .im-sub-h:first-child { margin-top: 0; }

/* ---- Textos y variaciones ---- */
.im-lbl { font-size: 14px; font-weight: 800; color: var(--im-ink); }
.im-sub { font-size: 12px; color: var(--im-muted); }
.im-unit { font-size: 11.5px; font-weight: 600; color: var(--im-muted); }
.im-ref { font-size: 11.5px; color: var(--im-muted); }
.im-var { display: inline-block; padding: 1px 8px; border-radius: 7px; font-size: 12px; font-weight: 800; }
.im-var-up { color: var(--im-up); background: rgba(180, 35, 39, 0.08); }
.im-var-down { color: var(--im-down); background: rgba(23, 112, 58, 0.09); }
.im-var-flat { color: var(--im-text); background: var(--im-soft); }
.im-var-nd { color: var(--im-muted); background: transparent; padding-left: 0; font-weight: 600; font-size: 11.5px; }

/* ---- Graficos SVG ---- */
.im-svg { display: block; width: 100%; height: auto; overflow: visible; }
.im-ch { position: relative; touch-action: pan-y; cursor: crosshair; -webkit-tap-highlight-color: transparent; border-radius: 12px; }
.im-ax { font-size: 11.5px; fill: var(--im-muted); }
.im-ax-u { font-weight: 700; }
.im-g { stroke: #e8edf4; stroke-width: 1; shape-rendering: crispEdges; }
.im-g0 { stroke: #aab6c6; }
.im-bar-cal { fill: url(#im-gb); transition: opacity 0.14s ease-out, filter 0.14s ease-out; }
.im-bar-cal.s1 { opacity: 0.68; } .im-bar-cal.s2 { opacity: 0.46; }
.im-bar-cal.is-hot { opacity: 1; filter: saturate(1.15) brightness(1.04); }
.im-media { stroke: var(--im-ink); stroke-opacity: 0.5; stroke-width: 1.3; stroke-dasharray: 5 4; pointer-events: none; }
.im-media.is-2 { stroke-dasharray: 2 4; }
.im-media-t, .im-val-s { font-size: 11.5px; font-weight: 800; fill: var(--im-ink); paint-order: stroke; stroke: #ffffff; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.im-val { font-size: 24px; font-weight: 800; fill: var(--im-ink); letter-spacing: -0.01em; }
.im-cal { font-size: 14px; font-weight: 800; fill: var(--im-ink); }
.im-vt { font-size: 12.5px; font-weight: 800; }
.im-vt.is-up { fill: var(--im-up); } .im-vt.is-down { fill: var(--im-down); } .im-vt.is-flat { fill: var(--im-text); }
.im-line { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.im-line.s0, .im-pt.s0, .im-pulso.s0 { stroke: var(--im-accent); } .im-line.s1, .im-pt.s1, .im-pulso.s1 { stroke: var(--im-s1); } .im-line.s2, .im-pt.s2, .im-pulso.s2 { stroke: var(--im-s2); }
.im-area { stroke: none; }
.im-area.s0 { fill: url(#im-ga); } .im-area.s1 { fill: var(--im-s1); opacity: 0.1; } .im-area.s2 { fill: var(--im-s2); opacity: 0.1; }
.im-pt { fill: #ffffff; stroke-width: 2.4; pointer-events: none; }
.im-pt.is-last.s0 { fill: var(--im-accent); } .im-pt.is-last.s1 { fill: var(--im-s1); } .im-pt.is-last.s2 { fill: var(--im-s2); }
.im-pulso { fill: none; stroke-width: 2; opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; }
.im-val-s.s0 { fill: var(--im-accent-t); } .im-val-s.s1 { fill: #4e617b; } .im-val-s.s2 { fill: #8a6410; }
.im-banda { fill: var(--im-accent); opacity: 0.09; pointer-events: none; }

/* Cruz y tooltip (los pone app.js al pasar el raton, tocar o usar las flechas) */
.tm-cross { opacity: 0; transition: opacity 0.12s ease-out; pointer-events: none; }
.im-ch.is-on .tm-cross { opacity: 1; }
.tm-vl { stroke: var(--im-cruz); stroke-width: 1.2; stroke-dasharray: 3 4; }
.tm-hl { fill: var(--im-accent); opacity: 0.09; }
.tm-dot { fill: #ffffff; stroke: var(--im-accent); stroke-width: 3; }
.tm-dot.s1 { stroke: var(--im-s1); } .tm-dot.s2 { stroke: var(--im-s2); }
.im-tt {
  position: absolute; left: 0; top: 0; z-index: 6; display: grid; gap: 3px; min-width: 160px; max-width: 270px; padding: 11px 14px 12px; pointer-events: none;
  border-radius: 14px; background: #ffffff; border: 1px solid var(--im-line-2); color: var(--im-text); font-size: 12px; line-height: 1.3;
  box-shadow: 0 2px 6px rgba(15, 27, 45, 0.08), 0 22px 40px -14px rgba(15, 27, 45, 0.38); transition: transform 0.08s ease-out;
}
.im-tt[hidden] { display: none; }
.im-tt .tt-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-weight: 700; color: var(--im-muted); }
.im-tt strong { font-size: 22px; font-weight: 800; letter-spacing: -0.015em; color: var(--im-ink); line-height: 1.15; }
.im-tt strong small { font-size: 11.5px; font-weight: 600; color: var(--im-muted); letter-spacing: 0; }
.im-tt .tt-s { color: var(--im-text); }
.im-tt .tt-s b { color: var(--im-ink); }
.im-tt .tt-s i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--im-accent); }
.im-tt .tt-s.s1 i { background: var(--im-s1); } .im-tt .tt-s.s2 i { background: var(--im-s2); }
.im-tt .tt-d { font-weight: 800; }
.im-tt .tt-d em { font-style: normal; font-weight: 600; color: var(--im-muted); }
.im-tt .tt-d.up { color: var(--im-up); } .im-tt .tt-d.down { color: var(--im-down); } .im-tt .tt-d.flat { color: var(--im-text); }
.im-tt .tt-tr { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 1px 8px; border-radius: 999px; letter-spacing: 0.04em; text-transform: uppercase; }
.tt-tr.p1 { background: #ffe3e8; color: var(--tm-punta-t); } .tt-tr.p2 { background: #fdf0c7; color: var(--tm-llano-t); } .tt-tr.p3 { background: #d9f5e3; color: var(--tm-valle-t); }

/* ---- Leyendas, selectores ---- */
.im-leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; font-weight: 600; color: var(--im-text); }
.im-leyenda-dia { margin-top: 10px; }
.im-ley { display: inline-flex; align-items: center; white-space: nowrap; }
.im-sw { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; }
.im-sw.s0 { background: var(--im-accent); } .im-sw.s1 { background: var(--im-s1); } .im-sw.s2 { background: var(--im-s2); }
.sw-linea { height: 3px; border-radius: 2px; background: var(--im-accent); vertical-align: 3px; width: 18px; }
.sw-now { background: var(--im-accent); box-shadow: 0 0 0 2px #ffffff, 0 0 0 3.5px var(--im-accent); width: 8px; height: 8px; margin-right: 9px; margin-left: 2px; border-radius: 50%; }
.sw-med, .sw-otro { height: 0; width: 18px; border-radius: 0; border-top: 2px dashed var(--im-ink); background: none; vertical-align: 3px; opacity: 0.55; }
.sw-otro { border-top-style: dotted; border-top-color: #64748b; opacity: 1; }
.sw-banda { background: var(--im-accent); opacity: 0.2; width: 18px; }
.sw-peaje { background: var(--im-accent); } .sw-cargo { background: var(--im-accent); opacity: 0.38; }
.im-seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 3px; border-radius: 999px; background: var(--im-soft); border: 1px solid var(--im-line); isolation: isolate; }
.im-seg-ind { position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n, 1)); border-radius: 999px; background: var(--im-accent); box-shadow: 0 5px 12px -6px color-mix(in oklab, var(--im-accent) 70%, #000); transform: translateX(calc(var(--idx, 0) * 100%)); transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); }
.im-seg-ind.is-slide { animation: im-slide 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.im-seg button { min-height: 34px; padding: 5px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--im-text); font-size: 12.5px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: color 0.18s ease-out; }
.im-seg button[aria-pressed="true"], .im-seg button[aria-selected="true"] { color: var(--im-accent-ink); }
@media (hover: hover) { .im-seg button:not([aria-pressed="true"]):not([aria-selected="true"]):hover { color: var(--im-ink); } }
.im-seg-nd { padding: 8px 12px; font-size: 12px; color: var(--im-muted); }

/* ---- MERCADO DIARIO (tarjeta ancha en bandas, sin cajas dentro de cajas) ---- */
.im-term { position: relative; }
.im-term .im-st0 { stop-opacity: 0.2; } .im-term .im-st1 { stop-opacity: 0.045; }
.tm-head { align-items: flex-start; }
.tm-head h2 { align-items: center; }
.tm-titulo { display: grid; gap: 2px; line-height: 1.15; font-size: 18px; }
.tm-titulo small { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--im-muted); }
.tm-head-der { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.tm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.tm-a, .tm-b, .tm-c, .tm-d, .tm-e, .tm-f { min-width: 0; }
.tm-b { margin-top: 24px; }
.tm-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 18px; margin: 0 0 10px; }
.tm-cab .tm-h { margin: 0; }
.tm-cab .im-leyenda-dia { margin: 0; }
.tm-guia { margin: 8px 0 0; text-align: right; font-size: 12px; color: var(--im-muted); }
.tm-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--im-line); }
.tm-fila > :only-child { grid-column: 1 / -1; }
.tm-izq { display: contents; }   /* en pantallas estrechas: tramos, lectura y media del mes se apilan en ese orden */
.tm-d { order: 1; } .tm-e { order: 2; } .tm-f { order: 3; padding-top: 24px; border-top: 1px solid var(--im-line); }
.tm-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--im-muted); }
.tm-h-ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--im-tint-2); color: var(--im-accent-t); }
.tm-h-ico svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tm-nota { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--im-muted); }
.tm-nota strong { color: var(--im-text); }
.tm-nota-pie { font-style: italic; }
/* Cifras del dia: UNA franja con divisores finos (no cuatro cajitas) */
.tm-stats { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--im-line); border-radius: 18px; background: var(--im-line); }
.tm-stat { display: grid; gap: 4px; align-content: start; min-width: 0; padding: 16px 20px 14px; background: #ffffff; }
.tm-stat.is-ahora { background: linear-gradient(180deg, var(--im-tint-2), var(--im-tint)); }
.tm-stat-l { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--im-muted); }
.tm-stat.is-ahora .tm-stat-l { color: var(--im-accent-t); }
.tm-stat-v { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.tm-stat-v strong { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; color: var(--im-ink); }
.tm-stat-v small { font-size: 11.5px; font-weight: 600; color: var(--im-muted); }
.tm-stat.is-ahora .tm-stat-v strong { color: var(--im-accent-t); }
.tm-stat.is-min .tm-stat-v strong { color: var(--tm-valle-t); } .tm-stat.is-max .tm-stat-v strong { color: var(--tm-punta-t); }
.tm-stat-d { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-height: 20px; }
.tm-svg .im-ax { fill: var(--im-muted); }
.tm-band.p1 { fill: rgba(244, 63, 94, 0.06); } .tm-band.p2 { fill: rgba(245, 170, 11, 0.075); } .tm-band.p3 { fill: rgba(34, 197, 94, 0.075); }
.tm-strip { stroke-width: 1; } .tm-strip.p1 { fill: #ffe3e8; stroke: #f7b3c1; } .tm-strip.p2 { fill: #fdf0c7; stroke: #efd07a; } .tm-strip.p3 { fill: #d9f5e3; stroke: #98d9b0; }
.tm-strip-t { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; pointer-events: none; } .tm-strip-t.p1 { fill: var(--tm-punta-t); } .tm-strip-t.p2 { fill: var(--tm-llano-t); } .tm-strip-t.p3 { fill: var(--tm-valle-t); }
.tm-area { fill: url(#im-gat); }
.tm-linea { fill: none; stroke: var(--im-accent); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.tm-otro { fill: none; stroke: #8b9bb0; stroke-width: 1.8; stroke-dasharray: 2 5; stroke-linecap: round; pointer-events: none; }
.tm-mm { fill: #ffffff; stroke-width: 2.6; } .tm-mm.is-min { stroke: var(--tm-valle); } .tm-mm.is-max { stroke: var(--tm-punta); }
.tm-pill { fill: #ffffff; stroke: var(--im-line-2); stroke-width: 1; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(15, 27, 45, 0.12)); }
.tm-pill.is-min { stroke: #7fd0a1; } .tm-pill.is-max { stroke: #f19ab0; } .tm-pill.is-ahora { fill: var(--im-accent); stroke: none; } .tm-pill.is-media { stroke: var(--im-line-2); }
.tm-pill-t { font-size: 11.5px; font-weight: 800; fill: var(--im-ink); pointer-events: none; } .tm-pill-t.is-min { fill: var(--tm-valle-t); } .tm-pill-t.is-max { fill: var(--tm-punta-t); } .tm-pill-t.is-ahora { fill: var(--im-accent-ink); }
.tm-ahora-l { stroke: var(--im-accent); stroke-width: 1.5; pointer-events: none; }
.tm-ahora-p { fill: #ffffff; stroke: var(--im-accent); stroke-width: 2.5; pointer-events: none; }
.tm-tramo { display: grid; grid-template-columns: minmax(112px, 132px) minmax(0, 1fr) 58px; align-items: center; gap: 12px; padding: 7px 0; }
.tm-tramo-l { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 9px; font-size: 13.5px; font-weight: 800; color: var(--im-ink); line-height: 1.1; }
.tm-tramo-l i { grid-row: span 2; width: 10px; height: 10px; border-radius: 3px; }
.tm-tramo-l small { grid-column: 2; white-space: nowrap; font-size: 11px; font-weight: 600; color: var(--im-muted); }
.tm-tramo.p1 i, .tm-tramo.p1 .tm-tramo-b span { background: var(--tm-punta); } .tm-tramo.p2 i, .tm-tramo.p2 .tm-tramo-b span { background: var(--tm-llano); } .tm-tramo.p3 i, .tm-tramo.p3 .tm-tramo-b span { background: var(--tm-valle); }
.tm-tramo-b { height: 10px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.tm-tramo-b span { display: block; height: 100%; border-radius: 999px; transform-origin: left center; }
.tm-tramo strong { font-size: 16px; font-weight: 800; text-align: right; color: var(--im-ink); }
.tm-e { padding: 18px 22px 16px; border-radius: 18px; background: color-mix(in oklab, var(--im-accent) 5%, #ffffff); border: 1px solid color-mix(in oklab, var(--im-accent) 15%, #ffffff); }
.tm-lectura ul { list-style: none; display: grid; gap: 14px; margin: 0; padding: 0; }
.tm-lectura li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.5; color: var(--im-text); }
.tm-lectura li i { position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--im-accent); }
.tm-l-up i { background: var(--tm-punta) !important; } .tm-l-down i { background: var(--tm-valle) !important; } .tm-l-flat i { background: #8a97aa !important; }
.tm-mes .tm-stat-v { margin: 2px 0; } .tm-mes .im-svg { margin: 10px 0 2px; }
.tm-mapa-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin: 0 0 10px; }
.tm-mapa-cab .tm-h { margin: 0; }
.hm-ley { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--im-muted); }
.hm-escala { display: inline-block; width: 120px; height: 10px; border-radius: 5px; background: linear-gradient(to right in oklab, var(--hm-lo), var(--hm-hi)); box-shadow: 0 0 0 1px rgba(15, 27, 45, 0.1) inset; }
.hm-u { margin-left: 2px; }
.hm-c { fill: color-mix(in oklab, var(--hm-lo) calc((1 - var(--t, 0)) * 100%), var(--hm-hi)); }
@supports not (color: color-mix(in oklab, red, blue)) { .hm-c { fill: var(--im-accent); fill-opacity: calc(0.1 + var(--t, 0) * 0.9); } .hm-escala { background: linear-gradient(to right, rgba(31, 111, 168, 0.1), var(--im-accent)); } }
.hm-sel { fill: none; stroke: var(--im-ink); stroke-width: 1.8; opacity: 0; pointer-events: none; }
.im-ch.is-on .hm-sel { opacity: 1; }
.hm-hoy { fill: none; stroke: var(--im-ink); stroke-width: 1.3; pointer-events: none; }
.hm-vacio { fill: #fafbfd; stroke: var(--im-line-2); stroke-dasharray: 3 4; }
.hm-dia { font-size: 11px; fill: var(--im-text); } .hm-dia.is-fin { fill: #66758a; } .hm-dia.is-hoy { fill: var(--im-ink); font-weight: 800; }
.hm-esp { font-size: 11px; fill: var(--im-muted); }

/* ---- Futuros y gas ---- */
.im-hist-nota { margin: 10px 0 0; padding: 9px 12px; border-radius: 12px; background: var(--im-soft); border: 1px solid var(--im-line); font-size: 12.5px; color: var(--im-text); }
.im-gsels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 4px; }
.im-gsel { display: grid; gap: 3px; align-content: start; padding: 12px 14px; text-align: left; border: 1px solid var(--im-line); border-radius: 14px; background: #ffffff; color: var(--im-ink); cursor: pointer; transition: border-color 0.14s ease-out, box-shadow 0.14s ease-out, background-color 0.14s ease-out; }
.im-gsel-l { font-size: 12px; font-weight: 700; color: var(--im-muted); }
.im-gsel strong { font-size: 22px; font-weight: 800; letter-spacing: -0.015em; }
.im-gsel strong small { font-size: 11px; font-weight: 600; color: var(--im-muted); }
.im-gsel-d { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; }
.im-gsel.is-on { border-color: var(--im-accent); background: var(--im-tint); box-shadow: 0 0 0 1px var(--im-accent); }
@media (hover: hover) { .im-gsel:not(.is-on):hover { border-color: #b8c5d6; box-shadow: 0 8px 18px -14px rgba(15, 27, 45, 0.5); } }
.im-gstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.im-gstat { display: grid; gap: 1px; padding: 10px 12px; border-radius: 12px; background: var(--im-soft); border: 1px solid var(--im-line); min-width: 0; }
.im-gstat strong { font-size: 18px; font-weight: 800; color: var(--im-ink); }
.im-medidor { margin-top: 12px; }
.im-medidor-t { position: relative; height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--im-tint-2), color-mix(in oklab, var(--im-accent) 70%, #ffffff)); box-shadow: 0 0 0 1px rgba(15, 27, 45, 0.06) inset; }
.im-medidor-t span { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #ffffff; border: 3px solid var(--im-accent); box-shadow: 0 3px 8px -2px rgba(15, 27, 45, 0.5); }
.im-medidor-l { display: flex; justify-content: space-between; gap: 10px; margin-top: 5px; font-size: 11.5px; color: var(--im-muted); }
.im-medidor-l small { font-size: 11.5px; } .im-medidor-l small:nth-child(2) { text-align: center; flex: 1; }
.im-medidor-l b { color: var(--im-ink); }
.im-fantasma { display: flex; align-items: flex-end; gap: 14px; height: 150px; padding: 0 8%; }
.im-fantasma span { flex: 1; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, #eef2f7, #f8fafc); }

/* ---- Costes regulados ---- */
.im-reg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.im-reg-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 8px; }
.im-reg-cab .im-sub-h { margin: 0; }
.im-hbs { display: grid; gap: 2px; }
.im-hb { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr) 62px; align-items: center; gap: 2px 12px; padding: 5px 0; border-radius: 10px; }
.im-hb-l { font-size: 13px; font-weight: 800; color: var(--im-ink); display: grid; line-height: 1.1; }
.im-hb-l small { font-size: 10.5px; font-weight: 600; color: var(--im-muted); }
.im-hb-t { height: 22px; border-radius: 999px; background: var(--im-soft); overflow: hidden; box-shadow: 0 0 0 1px rgba(15, 27, 45, 0.04) inset; }
.im-hb-fill { display: flex; height: 100%; min-width: 3px; border-radius: 999px; overflow: hidden; transform-origin: left center; gap: 2px; }
.im-hb-a { display: block; height: 100%; background: linear-gradient(90deg, color-mix(in oklab, var(--im-accent) 82%, #000), var(--im-accent)); border-radius: 999px 0 0 999px; }
.im-hb-b { display: block; flex: 1; height: 100%; background: color-mix(in oklab, var(--im-accent) 40%, #ffffff); border-radius: 0 999px 999px 0; }
.im-hb-gas .im-hb-a { border-radius: 999px; }
.im-hb-v { font-size: 15px; font-weight: 800; text-align: right; color: var(--im-ink); }
.im-hb-sub { grid-column: 2 / -1; font-size: 12px; color: var(--im-muted); }
.im-hb-sub .im-var { margin-left: 4px; }
.im-hb[data-tip]::after { content: attr(data-tip); position: absolute; z-index: 6; left: 66px; bottom: calc(100% - 4px); max-width: min(320px, 80%); padding: 8px 12px; border-radius: 11px; background: #ffffff; border: 1px solid var(--im-line-2); color: var(--im-ink); font-size: 12px; font-weight: 700; line-height: 1.3; box-shadow: 0 2px 6px rgba(15, 27, 45, 0.08), 0 18px 30px -12px rgba(15, 27, 45, 0.38); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 0.12s ease-out, transform 0.12s ease-out; }
.im-hb[data-tip]:hover::after, .im-hb[data-tip]:focus-visible::after { opacity: 1; transform: none; }
.im-nota { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--im-accent); background: var(--im-soft); border-radius: 0 10px 10px 0; font-size: 12.5px; color: var(--im-text); }
.im-nota-suave { border-left-color: var(--im-line-2); color: var(--im-muted); }
.im-vacio { margin: 8px 0; padding: 14px; border: 1px dashed #c3cedc; border-radius: 12px; color: var(--im-text); font-size: 13px; text-align: center; }
.im-tabla-scroll { overflow-x: auto; }
.im-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.im-tabla th, .im-tabla td { padding: 7px 6px; text-align: right; border-top: 1px solid var(--im-line); white-space: nowrap; }
.im-tabla thead th { border-top: 0; color: var(--im-muted); font-weight: 700; font-size: 12px; }
.im-tabla tbody th { text-align: left; font-weight: 800; color: var(--im-ink); }
.im-tabla td { font-weight: 700; color: var(--im-ink); }
.im-nd { color: var(--im-muted); }
.im-desglose { margin-top: 14px; font-size: 12px; color: var(--im-text); }
.im-desglose summary { cursor: pointer; color: var(--im-accent-t); font-weight: 700; padding: 6px 0; }
.im-tabla-desglose td { white-space: normal; text-align: left; font-weight: 600; font-size: 11.5px; color: var(--im-text); }

/* ---- Pie y estados ---- */
.im-pie { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--im-line); display: grid; gap: 2px; font-size: 11.5px; color: var(--im-muted); }
.im-pie a { color: var(--im-accent-t); text-decoration: underline; text-underline-offset: 2px; }
.im-pie-aviso { color: var(--im-ink); font-weight: 700; }
.im-legal-card { font-style: italic; }
.im-legal { margin: 18px 2px 4px; font-size: 12px; color: var(--im-muted); }
.im-error { margin: 18px 0 0; padding: 26px; border: 1px dashed #c3cedc; border-radius: 16px; text-align: center; color: var(--im-text); }
.im-reintentar { margin-left: 8px; padding: 6px 14px; border: 1px solid var(--im-accent); border-radius: 8px; background: #fff; color: var(--im-accent-t); font-weight: 800; cursor: pointer; }
/* Esqueleto de carga */
.im-esq { margin-top: 20px; }
.im-esq-txt { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--im-muted); }
.im-esq-card { gap: 18px; min-height: 360px; }
.im-esq-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.im-esq-stats .im-sk { height: 74px; border-radius: 16px; }
.im-esq-graf { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding: 0 4px; }
.im-esq-graf span { flex: 1; border-radius: 6px 6px 0 0; background: #eef2f7; }
.im-sk { position: relative; display: block; height: 12px; overflow: hidden; border-radius: 6px; background: #edf1f6; }
.im-sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent); animation: im-barrido 1.5s ease-in-out infinite; }
.im-sk.w30 { width: 30%; } .im-sk.w40 { width: 40%; } .im-sk.w55 { width: 55%; } .im-sk.w70 { width: 70%; } .im-sk.w100 { width: 100%; } .im-sk.alto { height: 30px; border-radius: 9px; } .im-sk.fino { height: 40px; border-radius: 10px; }
.im-esq-kpi { gap: 10px; min-height: 150px; }

/* ---- Cortes por ancho del panel ---- */
@container im (min-width: 900px) {
  .im-accesos { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .im-acceso:last-child:nth-child(odd) { grid-column: auto; }
  .tm-fila-2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; }
  .tm-fila-2 > .tm-e { align-self: start; }
  .tm-izq { display: grid; gap: 24px; align-content: start; min-width: 0; }
  .tm-d, .tm-e, .tm-f { order: 0; }
  .im-reg { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
@container im (min-width: 1000px) {
  .im-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .im-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .im-kpi, .im-kpi:nth-child(n+4) { grid-column: auto; }
}
@container im (max-width: 899px) {
  .tm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container im (max-width: 560px) {
  .im-hero { border-radius: 20px; padding: 20px 16px 72px; }
  .im-hero h1 { font-size: 28px; }
  .im-fecha { font-size: 13.5px; }
  .im-hero-deco { top: auto; bottom: 0; width: 100%; height: 52%; opacity: 0.7; -webkit-mask-image: linear-gradient(0deg, #000 40%, transparent); mask-image: linear-gradient(0deg, #000 40%, transparent); }
  .im-fuentes { justify-content: flex-start; }
  .im-accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
  .im-acceso { gap: 10px; padding: 10px; min-height: 64px; }
  .im-acceso:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .im-acceso-ico { width: 38px; height: 38px; border-radius: 11px; }
  .im-acceso-ico svg { width: 20px; height: 20px; }
  .im-acceso strong { font-size: 15px; }
  .im-acceso-flecha { display: none; }
  .im-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: -44px 8px 0; }
  .im-kpi, .im-kpi:nth-child(n+4) { grid-column: auto; }
  .im-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .im-kpi { padding: 12px 12px 10px; border-radius: 16px; }
  .im-kpi-v strong { font-size: 27px; }
  .im-kpi-l { font-size: 10.5px; }
  .im-card { padding: 16px 14px 14px; border-radius: 20px; }
  .im-card-head h2 { font-size: 15px; }
  .tm-titulo { font-size: 16px; }
  .tm-head-der { width: 100%; justify-content: space-between; }
  .tm-head-der .im-seg { flex: 1; } .tm-head-der .im-seg button { padding: 5px 8px; }
  .tm-stat { padding: 12px 13px 11px; } .tm-stat-v strong { font-size: 26px; }
  .tm-fila { gap: 22px; margin-top: 22px; padding-top: 22px; }
  .tm-e { padding: 15px 15px 13px; }
  .tm-tramo { grid-template-columns: 124px minmax(0, 1fr) 54px; gap: 8px; }
  .im-seg button { min-height: 40px; padding: 6px 14px; }
  .im-gsel { padding: 10px 11px; }
  .im-hb { grid-template-columns: 46px minmax(0, 1fr) 56px; gap: 2px 8px; }
  .im-hb[data-tip]::after { left: 0; }
  .im-grid, .im-bloque { margin-top: 14px; }
  .im-grid { gap: 14px; }
  .im-tt { min-width: 140px; max-width: 220px; }
}

/* ---- Movimiento: solo transform/opacity, una vez al entrar ---- */
@keyframes im-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes im-grow { from { transform: scaleY(0.03); opacity: 0; } }
@keyframes im-growx { from { transform: scaleX(0.02); } }
@keyframes im-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes im-fade { from { opacity: 0; } }
@keyframes im-slide { from { transform: translateX(calc(var(--from, 0) * 100%)); } }
@keyframes im-pulso { 0% { opacity: 0.8; transform: scale(0.6); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes im-barrido { to { transform: translateX(100%); } }
.im-anim .im-kpi { animation: im-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
.im-anim .im-card { animation: im-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: 0.3s; }
.im-anim .im-grid > .im-card:nth-child(2) { animation-delay: 0.4s; }
.im-anim .im-bloque:last-of-type .im-card { animation-delay: 0.5s; }
.im-anim .im-bar-cal { transform-box: fill-box; transform-origin: 50% 100%; animation: im-grow 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 60ms + 0.5s); }
.im-anim .tm-area, .im-anim .im-area { animation: im-fade 0.9s ease-out 0.5s both; }
.im-anim .tm-linea { animation: im-fade 0.7s ease-out 0.35s both; }
.im-anim .hm-c { animation: im-fade 0.6s ease-out both; animation-delay: 0.7s; }
.im-anim .tm-tramo-b span, .im-anim .im-hb-fill, .im-cambia .im-hb-fill { animation: im-growx 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 0.6s); }
.im-cambia .im-hb-fill { animation-delay: calc(var(--i, 0) * 50ms); animation-duration: 0.45s; }
.im-anim .im-line { stroke-dasharray: 1; stroke-dashoffset: 0; animation: im-draw 1s ease-out 0.6s both; }
.im-cambia .im-line { stroke-dasharray: 1; animation: im-draw 0.6s ease-out both; }
.im-anim .im-spark-line { animation: im-fade 0.8s ease-out 0.5s both; }
.im-anim .im-spark-dot::after, .im-anim .im-pulso { animation: im-pulso 1.7s ease-out 1s 3; }
@media (prefers-reduced-motion: reduce) {
  .im-anim *, .im-anim *::before, .im-anim *::after, .im-cambia *, .im-sk::after { animation: none !important; }
  .im-acceso, .im-acceso-flecha, .im-kpi, .im-bar-cal, .im-tt, .im-gsel, .im-seg button, .im-seg-ind, .tm-cross, .im-hb::after { transition: none; }
  .im-acceso:hover, .im-kpi:hover { transform: none; }
}
@media (max-width: 720px) { #inicio-page { padding: 14px 14px 28px; } }

/* ===== TARIFAS DE LA EMPRESA (empresas externas): asistente, tarjetas, formulario «Nueva tarifa» e importacion ===== */
.tpe-asistente { margin: 12px 0 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.tpe-asistente-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.tpe-asistente h3 { margin: 0 0 4px; font-size: 17px; color: var(--ink); }
/* Tarifas propias de la casa: barra «Crear tarifa» y comision pendiente en el ranking */
.tpe-casa { padding: 12px 16px; }
.tpe-casa .tpe-acciones { margin-top: 10px; }
.og-com .og-com-pendiente { font-weight: 600; font-style: italic; color: #8a5a00; }
.tpe-lead { margin: 0 0 4px; font-size: 14px; color: var(--ink); line-height: 1.4; }
.tpe-sub { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.tpe-guardado { font-size: 12px; font-weight: 700; color: var(--muted); min-height: 1.2em; }
.tpe-guardado.is-error { color: #a32626; }
.tpe-guardado:empty { display: none; }
.tpe-pasos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.tpe-paso { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.tpe-paso.is-hecho { background: #f4faf5; border-color: #cfe6d3; }
.tpe-marca { width: 22px; height: 22px; border: 2px solid #b6c2d0; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #fff; }
.tpe-paso.is-hecho .tpe-marca { background: var(--green); border-color: var(--green); }
.tpe-paso-texto { display: grid; gap: 2px; min-width: 0; }
.tpe-paso-texto strong { font-size: 13.5px; color: var(--ink); }
.tpe-paso-texto span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.tpe-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tpe-btn { font: inherit; font-weight: 700; font-size: 13px; min-height: 36px; padding: 0 14px; border: 1px solid #b9c8d8; border-radius: 8px; background: #fff; color: #123762; cursor: pointer; }
.tpe-btn:hover { background: #f1f6fb; }
.tpe-btn:focus-visible, .tpe-cerrar:focus-visible, .tpe-switch input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tpe-btn.is-primary { background: var(--brand, var(--blue)); border-color: var(--brand, var(--blue)); color: var(--brand-ink, #fff); }
.tpe-btn.is-primary:hover { background: var(--brand-hover, #185a8a); }
.tpe-btn.is-primary[disabled] { opacity: 0.55; cursor: default; }
.tpe-btn.is-suave { color: #4b5b6e; border-color: #d4dce7; }
.tpe-btn.is-chico { min-height: 30px; padding: 0 10px; font-size: 12px; }
.tpe-btn.is-peligro { color: #a32626; border-color: #e3b8b8; }
.tpe-btn.is-peligro:hover { background: #fdf0f0; }
.tpe-companias { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.tpe-companias summary { cursor: pointer; font-weight: 800; font-size: 13.5px; color: var(--ink); padding: 4px 0; }
.tpe-lista-companias { display: grid; gap: 4px; margin-top: 8px; max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.tpe-compania { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(90px, auto) minmax(0, 1.5fr); gap: 8px 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid #edf1f6; background: #fff; }
.tpe-compania:last-child { border-bottom: 0; }
.tpe-compania:not(.is-on) { background: #fafbfd; }
.tpe-cuentas { font-size: 12px; color: var(--muted); }
.tpe-bloque { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }
.tpe-bloque input { width: 150px; min-width: 0; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid #c7d5e3; border-radius: 8px; }
.tpe-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink); }
.tpe-switch input { width: 18px; height: 18px; accent-color: var(--brand, var(--blue)); }
.tpe-switch-chico { font-size: 12px; font-weight: 800; color: var(--muted); }
.tpe-card { position: relative; }
.tpe-card-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tpe-card-cab h3 { margin: 0; }
.tpe-card.is-disabled { opacity: 0.62; }
.tpe-comision input { border-color: #9fb9d0; }
.tpe-nota-comision { display: block; margin-top: 4px; font-size: 11px; line-height: 1.35; font-weight: 600; color: var(--muted); }
.tpe-card-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tpe-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; background: #eef4fa; color: #123762; border: 1px solid #d4dce7; }
.tpe-pill.is-ok { background: #f4faf5; color: #1f6b30; border-color: #cfe6d3; }
.tpe-pill.is-pronto { background: #fff6e0; color: #7a5200; border-color: #f0d9a0; }
.tpe-pill.is-caducada { background: #fdecec; color: #a32626; border-color: #efc2c2; }
/* Ventana emergente */
body.tpe-sin-scroll { overflow: hidden; }
.tpe-fondo { position: fixed; inset: 0; z-index: 9000; background: rgba(15, 28, 45, 0.5); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 12px; overflow-y: auto; }
.tpe-modal { background: #fff; width: min(720px, 100%); border-radius: 14px; box-shadow: 0 24px 60px rgba(10, 25, 45, 0.3); display: flex; flex-direction: column; max-height: 92vh; }
.tpe-modal.is-ancho { width: min(980px, 100%); }
.tpe-modal-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--line); }
.tpe-modal-cab h3 { margin: 0; font-size: 18px; color: var(--ink); }
.tpe-cerrar { border: 0; background: transparent; font-size: 26px; line-height: 1; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; color: #536070; }
.tpe-cerrar:hover { background: #f1f4f8; }
.tpe-modal-cuerpo { padding: 14px 20px 18px; overflow-y: auto; }
.tpe-seg { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tpe-seg legend { font-size: 12.5px; font-weight: 800; color: #28425f; padding: 0; margin-bottom: 6px; }
.tpe-seg label { cursor: pointer; }
.tpe-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tpe-seg span { display: inline-block; padding: 8px 16px; border: 1px solid #b9c8d8; border-radius: 999px; font-weight: 800; font-size: 13px; color: #123762; background: #fff; }
.tpe-seg input:checked + span { background: var(--brand, var(--blue)); border-color: var(--brand, var(--blue)); color: var(--brand-ink, #fff); }
.tpe-seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.tpe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 14px; margin-bottom: 10px; }
.tpe-grid-precios { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-bottom: 0; }
.tpe-campo { display: grid; gap: 4px; align-content: start; min-width: 0; }
.tpe-campo label { font-size: 12.5px; font-weight: 800; color: #28425f; }
.tpe-campo input, .tpe-campo select { font: inherit; font-size: 14px; padding: 9px 10px; border: 1px solid #c7d5e3; border-radius: 8px; background: #fff; color: #0b243c; min-width: 0; width: 100%; }
.tpe-campo input:focus, .tpe-campo select:focus { outline: 3px solid var(--focus); border-color: var(--blue); }
.tpe-campo.is-invalido input { border-color: #c52f32; background: #fff8f8; }
.tpe-ayuda-campo { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.tpe-error { font-size: 12px; font-weight: 700; color: #a32626; min-height: 0; margin: 0; line-height: 1.35; }
.tpe-error:empty { display: none; }
.tpe-error-gral { font-size: 13px; margin: 8px 0 0; }
.tpe-ayuda { margin: 4px 0 10px; font-size: 12.5px; color: #3b4f63; line-height: 1.45; padding: 8px 10px; background: #f6f9fc; border-left: 3px solid #9fb9d0; border-radius: 4px; }
.tpe-grupo { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 12px; margin: 0 0 10px; }
.tpe-grupo legend { font-size: 12.5px; font-weight: 800; color: #28425f; padding: 0 6px; }
.tpe-preview { margin-top: 6px; padding: 10px 12px; border: 1px dashed #9fb9d0; border-radius: 10px; background: #fbfdff; font-size: 13px; }
.tpe-preview ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.tpe-preview .is-aviso { color: #7a5200; }
.tpe-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; position: sticky; bottom: -18px; background: #fff; padding: 10px 0 4px; border-top: 1px solid var(--line); }
.tpe-pasos-imp { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 12px; font-size: 13.5px; color: var(--ink); }
.tpe-subida { margin-top: 8px; }
.tpe-subida input[type=file] { font: inherit; font-size: 13px; max-width: 100%; }
.tpe-resumen-imp { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; font-size: 13.5px; }
.tpe-estado { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; border: 1px solid transparent; }
.tpe-estado.is-crear { background: #f4faf5; color: #1f6b30; border-color: #cfe6d3; }
.tpe-estado.is-actualizar { background: #eef4fa; color: #123762; border-color: #d4dce7; }
.tpe-estado.is-error { background: #fdecec; color: #a32626; border-color: #efc2c2; }
.tpe-tabla-envoltura { max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.tpe-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 640px; }
.tpe-tabla th { position: sticky; top: 0; background: #eef4fa; text-align: left; padding: 7px 10px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #536070; }
.tpe-tabla td { padding: 7px 10px; border-top: 1px solid #edf1f6; vertical-align: top; }
.tpe-tabla tr.is-error td { background: #fffafa; }
@media (max-width: 640px) {
  .tpe-asistente { padding: 12px; }
  .tpe-paso { grid-template-columns: 22px minmax(0, 1fr); }
  .tpe-paso .tpe-btn { grid-column: 1 / -1; justify-self: start; }
  .tpe-compania { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tpe-bloque { justify-content: flex-start; flex-wrap: wrap; }
  .tpe-bloque input { width: 140px; }
  .tpe-fondo { padding: 0; align-items: stretch; }
  .tpe-modal, .tpe-modal.is-ancho { width: 100%; max-height: none; min-height: 100%; border-radius: 0; }
  .tpe-modal-cuerpo { padding: 12px 14px 18px; }
  .tpe-grid, .tpe-grid-precios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tpe-pie .tpe-btn { flex: 1 1 140px; }
}

/* Hueco del boton «Consultar SIPS»: ocupa todo el ancho del formulario compacto, justo debajo de los datos del estudio. */
.sips-slot { grid-column: 1 / -1; }
.sips-slot .sips-panel { margin: 0; }

/* Pestaña DECOMISIONES */
#tab-decomisiones { --ico: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%201v22%20M17%205H9.5a3.5%203.5%200%200%200%200%207h5a3.5%203.5%200%200%201%200%207H6'%2F%3E%3C%2Fsvg%3E"); }
.dc-head,
.dc-row { grid-template-columns: 130px minmax(190px, 1.2fr) minmax(170px, 1fr) 100px 130px 120px 100px; min-width: 900px; }
.dc-head.dc-admin, .dc-row.dc-admin { grid-template-columns: 130px minmax(190px, 1.2fr) minmax(170px, 1fr) 100px 120px 130px 120px 100px; min-width: 1020px; }
.liq-commercial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
#decomisiones-panel .contracts-hero .crm-title { color: #0b2a42; }
#decomisiones-panel .contracts-hero p { color: #536070; }
#decomisiones-panel .contracts-hero button { color: #0b2a42; background: #ffffff; border: 1px solid #c9d6e2; }

/* Pestaña REPSOL */
.repsol-form { display: grid; gap: 14px; max-width: 640px; margin: 14px 0; }
.repsol-campo { display: grid; gap: 5px; font-weight: 700; font-size: 13px; color: #28425f; }
.repsol-campo input[type="email"], .repsol-campo input[type="text"] { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-weight: 400; }
.repsol-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.repsol-tipo { display: grid; gap: 2px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; background: #fff; }
.repsol-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.repsol-tipo.is-on { border-color: #f28a1a; background: #fff6ea; }
.repsol-tipo:focus-within { outline: 2px solid #0057a8; outline-offset: 2px; }
.repsol-tipo-t { font-weight: 800; font-size: 15px; color: #0b2545; }
.repsol-tipo-w { font-weight: 700; color: #9a4a00; }
.repsol-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; }
.repsol-acciones { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#repsol-estado.is-ok { color: #1a7f37; font-weight: 700; }
#repsol-estado.is-error { color: #b42318; font-weight: 700; }
.repsol-nota { max-width: 640px; font-size: 12px; color: #55657a; }
.repsol-lista { padding-left: 18px; font-size: 13px; }
.repsol-historico { margin-top: 22px; }
.repsol-historico-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.repsol-historico-cab h3 { margin: 0; }
.repsol-tabla-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin-top: 8px; }
.repsol-tabla { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.repsol-tabla th, .repsol-tabla td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.repsol-tabla th { background: #f4f7fb; color: #28425f; font-size: 12px; }
.repsol-tabla tr:last-child td { border-bottom: 0; }
.repsol-historico-acc { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.repsol-historico-acc select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 13px; }
.repsol-pendientes { display: inline-block; margin-left: 10px; padding: 3px 10px; border-radius: 12px; background: #fff1dd; color: #a85a05; font-size: 12px; font-weight: 700; vertical-align: middle; }
.repsol-tabla .repsol-col-check { text-align: center; width: 1%; }
.repsol-tabla input[type="checkbox"] { width: 18px; height: 18px; accent-color: #f28a1a; cursor: pointer; }
.repsol-tabla tr.is-pendiente td { background: #fffaf2; }
.repsol-tabla tr.is-hecho td { color: #6b7a8c; }
.repsol-tabla tr.is-altabaja td { background: #eef5fc; }
.repsol-tabla tr.is-altabaja td:nth-child(3) { box-shadow: inset 3px 0 0 #0057a8; }
.og-ssaa { display: block; margin-top: 2px; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; color: #a85a05; white-space: nowrap; }
.og-ssaa::before { content: "● "; color: #f28a1a; }

/* LEADS (22-oct-2026): personas con oferta y sin contrato */
.leads-toolbar { margin: 12px 0; }
.leads-toolbar input { width: 100%; max-width: 420px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; }
.lead-actions { display: flex; gap: 6px; }
.lead-btn { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #28425f; font-size: 12px; cursor: pointer; }
.lead-btn:hover { background: #f4f7fb; }
.lead-btn.is-danger { color: #b3261e; }