/* =============================================================================
   Brand refresh 2b — paleta azul + logo casa/plug
   -----------------------------------------------------------------------------
   Cargar DESPUÉS de app.css y public.css en _PublicLayout.cshtml y _AppLayout.cshtml:
       <link rel="stylesheet" href="~/css/brand.css" asp-append-version="true" />

   Alternativa (preferible a mediano plazo): mover estos valores a los :root de
   app.css y borrar este archivo. Nada aquí cambia estructura, sólo tokens y las
   tres superficies que traían el degradado verde escrito a mano.
   ========================================================================== */

:root {
    /* Brand — el verde wallbox sale, entra el azul de la referencia del cliente */
    --navy: #0B1226;
    --navy-2: #16224A;
    --green: #3D6BFF;        /* acento primario  (botones, meters, chart) */
    --green-dark: #2947C9;    /* hover / texto de acento sobre claro */
    --green-soft: #8EE3F5;    /* cian de apoyo: eyebrows, bordes de chip */
    --green-tint: #EAF1FF;    /* fondo de chip / feature-mark */

    /* Neutrales — el gris se enfría para acompañar al azul */
    --ink: #0B1226;
    --muted: #626B84;
    --faint: #8A93AC;
    --canvas: #F6F7FA;
    --line: #E5E8F0;
    --line-soft: #F1F3F9;

    /* Sidebar */
    --side: #0B1226;
    --side-hover: #16224A;
    --side-line: #232F52;
    --side-text: #9AA3BF;

    /* Bootstrap hereda de aquí */
    --bs-primary: #3D6BFF;
    --bs-primary-rgb: 61, 107, 255;
    --bs-body-color: #0B1226;
    --bs-body-bg: #F6F7FA;
    --bs-border-color: #E5E8F0;
    --bs-link-color: #2947C9;
    --bs-link-hover-color: #3D6BFF;
}

/* El foco de formulario seguía en rgba verde. */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(61, 107, 255, .14);
}

/* Sombras: el tinte navy cambió de hue. */
:root {
    --shadow-sm: 0 1px 2px rgba(11, 18, 38, .05);
    --shadow: 0 1px 3px rgba(11, 18, 38, .06), 0 8px 24px -12px rgba(11, 18, 38, .14);
}

.modal-backdrop-custom { background: rgba(11, 18, 38, .55); }
.modal-card { box-shadow: 0 1.5rem 3rem rgba(11, 18, 38, .28); }

/* ---------- Hero: mismo tratamiento, gama azul ---------- */

.hero { background: linear-gradient(135deg, #0B1226 0%, #16224A 55%, #2947C9 100%); }

.hero::after {
    background: radial-gradient(circle, rgba(142, 227, 245, .18) 0%, rgba(142, 227, 245, 0) 62%);
}

/* Sobre el navy nuevo el mint queda algo bajo; el cian de marca da 4.5:1. */
.hero-eyebrow { color: var(--green-soft); }

/* ---------- Botón CTA: el degradado de la referencia ---------- */

.btn-primary, .btn-success {
    --bs-btn-bg: linear-gradient(90deg, #5A8CFF, #3D6BFF);
    --bs-btn-hover-bg: linear-gradient(90deg, #3D6BFF, #2947C9);
    --bs-btn-active-bg: #2947C9;
    background-image: var(--bs-btn-bg);
}

/* Bootstrap only ever feeds --bs-btn-*-bg to background-color, where a gradient
   is invalid and drops to transparent. So the fill has to be restated as
   background-image on each state, or hover and active paint nothing and the
   rest-state gradient just sits there. Active and disabled are flat on purpose:
   pressed wants a single darker tone, and disabled must not read as live. */
.btn-primary:hover, .btn-success:hover { background-image: var(--bs-btn-hover-bg); }

.btn-primary:active, .btn-primary.active, .btn-primary:first-child:active,
.btn-success:active, .btn-success.active, .btn-success:first-child:active,
.btn-primary:disabled, .btn-primary.disabled,
.btn-success:disabled, .btn-success.disabled { background-image: none; }

/* ---------- Marca ---------- */

/* .sidebar-mark ya no lleva las letras "EV": ahora contiene el SVG. */
.sidebar-mark {
    background: transparent;
    width: 30px;
    height: 30px;
    border-radius: 0;
}

.sidebar-mark svg { width: 100%; height: 100%; display: block; }

.site-header .navbar-brand .sidebar-mark { width: 32px; height: 32px; }
.site-header .nav-link:hover,
.site-header .nav-link.active { color: var(--green-dark); }