/* =====================================================================
   PERFILES — piel visual por perfil de Seix/Energy (capa compartida)
   Orden del dueño 2026-10-17 16:00 ET: «un buen visual para todos los
   perfiles». Cada portal declara su perfil en <body data-perfil="…"> y
   esta hoja le da su identidad: su color en transparente (tintes suaves,
   texto siempre en contraste pleno), cabecera, botones y acentos.
   Colores asignados (frente de color 2026-10-17):
     cliente celeste · instalador naranja · reseller violeta ·
     partner teal · casa verde casa.
   No cambia estructura ni comportamiento: solo la piel.
   ===================================================================== */

body[data-perfil]{
  --pf:#166534; --pfd:#14532d;
}
body[data-perfil="cliente"]{ --pf:#0284c7; --pfd:#0369a1; }
body[data-perfil="instalador"]{ --pf:#ea580c; --pfd:#9a3412; }
body[data-perfil="reseller"]{ --pf:#7c3aed; --pfd:#6d28d9; }
body[data-perfil="partner"]{ --pf:#0d9488; --pfd:#0f766e; }
body[data-perfil="casa"]{ --pf:#166534; --pfd:#14532d; }
body[data-perfil="oficina"]{ --pf:#166534; --pfd:#14532d; }

/* Franja de identidad sobre la cabecera */
body[data-perfil]::before{
  content:""; display:block; height:4px;
  background:linear-gradient(90deg, var(--pf), var(--pfd));
}

/* Fondo de la página: el mismo aire de la casa, teñido del perfil */
body[data-perfil]{
  background-color:#f4f8f4;
  background-image:
    radial-gradient(900px 480px at 85% -80px, rgba(120,180,140,.16), rgba(245,197,66,0) 60%),
    linear-gradient(180deg,#fbfefb 0%, #f4f8f4 45%, #edf4ed 100%);
  background-image:
    radial-gradient(900px 480px at 85% -80px, color-mix(in srgb, var(--pf) 18%, transparent), transparent 60%),
    linear-gradient(180deg,#fbfefb 0%, #f4f8f4 45%, #edf4ed 100%);
}

/* Cabecera compartida (menu-energy.js): borde y rótulo del perfil */
body[data-perfil] .barra-e{ border-bottom:2px solid var(--pf); }
body[data-perfil] .barra-e .linea{ color:var(--pfd); }
body[data-perfil] .barra-e nav.menu-e a.activo{ background:var(--pfd); }
body[data-perfil] .barra-e .chip-sesion{
  background:rgba(22,101,52,.12); color:var(--pfd);
  background:color-mix(in srgb, var(--pf) 14%, #ffffff);
}
body[data-perfil] .barra-e .btn-salir{ color:var(--pfd); border-color:var(--pf); }
body[data-perfil] .barra-e .btn-salir:hover{
  background:rgba(22,101,52,.10);
  background:color-mix(in srgb, var(--pf) 12%, #ffffff);
}

/* Titulares y enlaces con el acento del perfil */
body[data-perfil] h1 .sol{ color:var(--pfd); }
body[data-perfil] a{ color:var(--pfd); }

/* Botones primarios sólidos en la variante oscura del perfil
   (blanco sobre ella: contraste ≥ 4,9:1 en los cinco perfiles).
   Los botones suaves y de peligro conservan su semántica. */
body[data-perfil] .btn:not(.suave):not(.peligro){ background:var(--pfd); }
body[data-perfil] .btn:not(.suave):not(.peligro):hover{ background:var(--pf); }
body[data-perfil] .btn.suave{ color:var(--pfd); border-color:var(--pf); }
body[data-perfil] button.enviar,
body[data-perfil] .enviar{
  background:var(--pfd); border-color:var(--pfd);
}
body[data-perfil] button.enviar:hover,
body[data-perfil] .enviar:hover{ background:var(--pf); border-color:var(--pf); }

/* Tarjetas: borde teñido del perfil (transparente, nunca sólido pesado) */
body[data-perfil] .tarjeta{
  border-color:#cfe0d2;
  border-color:color-mix(in srgb, var(--pf) 34%, #ffffff);
}

/* Foco visible con el color del perfil */
body[data-perfil] :focus-visible{ outline:2px solid var(--pf); outline-offset:2px; }