/* Tema del login de la marca GROW (recuperado del sitio desplegado grow.check035.com).
   SCOPED: solo afecta elementos dentro de .grow-auth; se carga solo cuando Site:Brand=GROW. */
.grow-auth {
    --grow-primary: var(--secundario-color, #0094A6); /* turquesa */
    --grow-dark:    var(--primario-color,   #2A2A2A); /* texto */
    --grow-accent:  var(--terciario-color,  #76E2E0); /* acentos */
    --grow-bg:      var(--cuaternario-color,#F2F2F2); /* fondo claro */
    --grow-deep:    var(--quinario-color,   #005A63); /* petroleo */
    --g-radius: 20px;
    --g-shadow: 0 10px 30px rgba(0,0,0,.12);
    position: relative;
}

/* Layout */
.grow-auth .g-grid {
    min-height: 72vh;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 24px;
}
@media (max-width: 980px) {
    .grow-auth .g-grid { grid-template-columns: 1fr; }
    .grow-auth .g-brand { display: none; }
}

/* Lado marca (degradado con variables del layout) */
.grow-auth .g-brand {
    padding: 32px 36px;
    background:
      linear-gradient(135deg,
        color-mix(in srgb, var(--grow-primary), transparent 88%) 0%,
        color-mix(in srgb, var(--grow-deep),    transparent 88%) 100%);
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.06);
    backdrop-filter: blur(2px);
}
.grow-auth .g-title { font-weight: 800; color: var(--grow-deep); font-size: 22px; margin: 0 0 16px; }
.grow-auth .g-h1 { margin: 0 0 10px; color: var(--grow-primary); font-size: 36px; line-height: 1.15; font-weight: 800; }
.grow-auth .g-p { margin: 0 0 18px; color: color-mix(in srgb, var(--grow-dark), transparent 35%); }

.grow-auth .g-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.grow-auth .g-chip {
    background: #fff; border-radius: 999px; padding: 8px 12px;
    box-shadow: var(--g-shadow); border: 1px solid rgba(0,0,0,.06);
    font-weight: 600; font-size: 12px; color: var(--grow-primary);
}

/* Lado formulario */
.grow-auth .g-side { display: flex; align-items: center; justify-content: center; padding: 8px; }
.grow-auth .g-card {
    width: min(520px, 100%);
    background: rgba(255,255,255,.92);
    border-radius: var(--g-radius);
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: var(--g-shadow);
    overflow: hidden;
}
.grow-auth .g-card-h { padding: 24px 28px 0; text-align: center; }
.grow-auth .g-card-h h2 { margin: 8px 0 2px; font-size: 22px; font-weight: 800; color: var(--grow-deep); }
.grow-auth .g-card-h p { margin: 0 0 18px; color: color-mix(in srgb, var(--grow-dark), transparent 30%); }
.grow-auth .g-card-b { padding: 0 24px 24px; }

.grow-auth .g-form-group { margin-bottom: 16px; }
.grow-auth .g-label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 12px; color: var(--grow-dark); }
.grow-auth .g-row { position: relative; display: flex; align-items: center; }
.grow-auth .g-icon { position: absolute; left: 10px; font-size: 18px; color: var(--grow-deep); opacity: .85; }

.grow-auth .g-input {
    width: 100%; border: 1px solid rgba(0,0,0,.12); border-radius: 12px;
    padding: 11px 12px 11px 36px; font-size: 14px; background: #fff; outline: none;
    transition: box-shadow .15s ease, border-color .15s ease; color: var(--grow-dark);
}
.grow-auth .g-input::placeholder { color: color-mix(in srgb, var(--grow-dark), transparent 50%); }
.grow-auth .g-input:focus {
    border-color: var(--grow-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--grow-primary), transparent 82%);
}

.grow-auth .g-toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: transparent; border: 0; cursor: pointer; padding: 6px; border-radius: 8px; color: var(--grow-deep);
}
.grow-auth .g-toggle:focus { outline: 2px solid color-mix(in srgb, var(--grow-primary), transparent 65%); }

.grow-auth .g-btn {
    width: 100%; border: 0; border-radius: 12px; padding: 12px 16px; font-weight: 800; font-size: 15px; letter-spacing: .2px; color: #fff;
    background: linear-gradient(180deg, var(--grow-primary), var(--grow-deep));
    box-shadow: 0 8px 16px color-mix(in srgb, var(--grow-primary), transparent 75%);
    transition: transform .05s ease, box-shadow .15s ease, filter .15s ease;
}
.grow-auth .g-btn:hover { filter: saturate(1.04) brightness(1.02); box-shadow: 0 10px 22px color-mix(in srgb, var(--grow-deep), transparent 70%); }
.grow-auth .g-btn:active { transform: translateY(1px); }

.grow-auth .g-links { margin-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.grow-auth .g-link { color: var(--grow-primary); font-weight: 600; text-decoration: none; font-size: 12px; }
.grow-auth .g-link:hover { text-decoration: underline; }

.grow-auth .g-note { margin-top: 12px; text-align: center; font-size: 11px; color: color-mix(in srgb, var(--grow-dark), transparent 40%); }
.grow-auth .g-error { color: #c62828; font-weight: 600; margin: 6px 0 0; }
