/* ============================================================
   SAR auth pages (Login / Recuperar / Envío) shared styles.
   Loaded via snippets/Styles.html -> applies to all Main.html
   auth templates. Bootstrap 5 handles grid/alert/utils; this
   file only adds what BS does not: gradient art, inputs, chips.
   ============================================================ */

/* Full-viewport split shell */
.sar-shell {
    overflow: hidden;
    min-height: 100vh;
    border-radius: 0;
}

/* ---------- LEFT: gradient art panel ---------- */
.sar-art {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    background: linear-gradient(135deg, #2a2a2e 0%, #4a0d17 58%, #7d1524 100%);
}
.sar-art .blob { position: absolute; border-radius: 22px; opacity: 0.9; transform: rotate(35deg); }
.sar-art .b1 { width: 190px; height: 190px; top: -40px; left: -30px; background: linear-gradient(135deg, #d1252a, #7d1524); }
.sar-art .b2 { width: 120px; height: 120px; top: 120px; left: 150px; background: linear-gradient(135deg, #f0663f, #b11f34); opacity: 0.75; }
.sar-art .b3 { width: 150px; height: 150px; bottom: -30px; right: -20px; background: linear-gradient(135deg, #4a0d17, #d1252a); opacity: 0.8; }
.sar-art .b4 { width: 90px; height: 90px; bottom: 140px; right: 120px; background: linear-gradient(135deg, #ff8a5b, #d1252a); opacity: 0.65; }
.sar-art .glow { position: absolute; width: 340px; height: 340px; border-radius: 50%; top: 40%; left: 30%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255,138,91,0.35) 0%, rgba(255,138,91,0) 70%); }
.sar-art-text { position: absolute; left: 40px; bottom: 44px; right: 40px; z-index: 3; color: #fff; }
.sar-art-text h1 { font-weight: 800; font-size: 34px; margin: 0 0 6px; }
.sar-art-text p { font-weight: 500; font-size: 14px; opacity: 0.85; margin: 0; }

/* ---------- RIGHT: form column ---------- */
.sar-form-col { display: flex; flex-direction: column; justify-content: center; max-height: 100vh; overflow-y: auto; }
.sar-form-col::-webkit-scrollbar { width: 6px; }
.sar-form-col::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; }
.sar-form-inner { padding: 40px; }

/* Brand logo + tenant-driven ring */
.sar-brand { text-align: center; margin-bottom: 22px; }
.sar-logo-ring {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px; border-radius: 20px; min-width: 96px; min-height: 84px;
}
/* single static logo (recuperar / envío pages, no tenant switch) */
.sar-logo-static { width: auto; max-width: 190px; max-height: 88px; object-fit: contain; }
/* logo swap: stack all, show only checked tenant's via :has() */
.sar-logo-ring .lg { display: none; width: auto; max-width: 190px; max-height: 88px; object-fit: contain; }
.sar-form-inner:has(#t-ibm:checked)  .lg-ibm  { display: block; }
.sar-form-inner:has(#t-r2a:checked)  .lg-r2a  { display: block; }
.sar-form-inner:has(#t-corp:checked) .lg-corp { display: block; }
.sar-form-inner:has(#t-s3m:checked)  .lg-s3m  { display: block; }
.sar-form-inner:has(#t-g4w:checked)  .lg-g4w  { display: block; }
.sar-tenant-name {
    margin-top: 10px; font-size: 11px; font-weight: 800; letter-spacing: 2px;
    text-transform: uppercase; color: #9b1c2e; transition: color 0.25s;
}
.sar-tenant-name::after { content: "SAR"; }

/* Headings */
.sar-welcome { font-size: 27px; font-weight: 800; color: #1f2937; line-height: 1.15; margin: 4px 0 24px; text-align: center; }
.sar-welcome b { color: #9b1c2e; transition: color 0.25s; }
.sar-heading { font-size: 22px; font-weight: 800; color: #1f2937; text-align: center; margin: 4px 0 8px; }
.sar-subheading { font-size: 13px; color: #6b7280; text-align: center; margin: 0 0 24px; }

/* Inputs. input.sar-input specificity beats global input[type=text]{border:none}. */
.sar-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.3px; color: #6b7280; margin-bottom: 6px; }
.sar-field { position: relative; margin-bottom: 16px; }
.sar-field .far, .sar-field .fas { position: absolute; top: 50%; left: 16px; transform: translateY(-50%); font-size: 15px !important; color: #9ca3af !important; z-index: 2; }
input.sar-input {
    width: 100%; border: 1.5px solid #e5e7eb; background: #f7f7f8; border-radius: 12px;
    padding: 13px 16px 13px 44px; font-size: 14px; font-weight: 600; color: #111827;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
input.sar-input::placeholder { color: #9ca3af; font-weight: 500; }
input.sar-input:focus { outline: none; border-color: #9b1c2e; background: #fff; box-shadow: 0 0 0 3px rgba(155, 28, 46, 0.12); }
input.sar-input:-webkit-autofill, input.sar-input:-webkit-autofill:hover, input.sar-input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #f7f7f8 inset; -webkit-text-fill-color: #111827 !important;
}

.sar-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 20px; }
.sar-remember { font-size: 12.5px; color: #6b7280; display: flex; align-items: center; gap: 7px; }
.sar-remember input { accent-color: #9b1c2e; width: 15px; height: 15px; }
.sar-forgot { font-size: 12.5px; font-weight: 600; color: #9b1c2e; text-decoration: none; }
.sar-forgot:hover { text-decoration: underline; }

/* Buttons */
.sar-btn { width: 100%; border: none; border-radius: 12px; padding: 13px; background: #9b1c2e; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: background 0.15s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.sar-btn:hover { background: #831626; color: #fff; }
.sar-btn .fas { color: #fff !important; font-size: 14px !important; }
.sar-btn--ghost { background: #f3f4f6; color: #6b7280; }
.sar-btn--ghost:hover { background: #e5e7eb; color: #374151; }
.sar-btn--ghost .fas { color: #6b7280 !important; }

/* Confirmation note (envío de recuperación) */
.sar-note {
    background: #f7f7f8; border: 1px solid #e5e7eb; border-left: 4px solid #9b1c2e;
    border-radius: 12px; padding: 18px 20px; font-size: 14px; color: #374151; line-height: 1.55;
}
.sar-note b { color: #9b1c2e; }

/* Footer + tenant chips */
.sar-footer { margin-top: 26px; padding-top: 18px; border-top: 1px solid #f0f0f1; text-align: center; }
.sar-org { font-size: 11px; letter-spacing: 0.5px; color: #9ca3af; }
.sar-org b { color: #9b1c2e; font-weight: 800; }
.sar-tenants { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.sar-tenant-radio { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.sar-chip {
    cursor: pointer; user-select: none; font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px;
    color: #6b7280; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 999px;
    padding: 4px 11px; transition: all 0.15s;
}
.sar-chip:hover { border-color: #cbd5e1; }

/* Per-tenant accent (name / welcome / active chip) — logo ring border removed */
.sar-form-inner:has(#t-ibm:checked)  .sar-tenant-name { color: #9b1c2e; }
.sar-form-inner:has(#t-ibm:checked)  .sar-tenant-name::after { content: "IBM"; }
.sar-form-inner:has(#t-ibm:checked)  .sar-welcome b { color: #9b1c2e; }
.sar-form-inner:has(#t-ibm:checked)  label[for="t-ibm"] { background: #9b1c2e; border-color: #9b1c2e; color: #fff; }
.sar-form-inner:has(#t-r2a:checked)  .sar-tenant-name { color: #001d49; }
.sar-form-inner:has(#t-r2a:checked)  .sar-tenant-name::after { content: "R2A"; }
.sar-form-inner:has(#t-r2a:checked)  .sar-welcome b { color: #001d49; }
.sar-form-inner:has(#t-r2a:checked)  label[for="t-r2a"] { background: #001d49; border-color: #001d49; color: #fff; }
.sar-form-inner:has(#t-corp:checked) .sar-tenant-name { color: #9b1c2e; }
.sar-form-inner:has(#t-corp:checked) .sar-tenant-name::after { content: "CORP-MX"; }
.sar-form-inner:has(#t-corp:checked) .sar-welcome b { color: #9b1c2e; }
.sar-form-inner:has(#t-corp:checked) label[for="t-corp"] { background: #9b1c2e; border-color: #9b1c2e; color: #fff; }
.sar-form-inner:has(#t-s3m:checked)  .sar-tenant-name { color: #ff6a34; }
.sar-form-inner:has(#t-s3m:checked)  .sar-tenant-name::after { content: "S3M"; }
.sar-form-inner:has(#t-s3m:checked)  .sar-welcome b { color: #ff6a34; }
.sar-form-inner:has(#t-s3m:checked)  label[for="t-s3m"] { background: #ff6a34; border-color: #ff6a34; color: #fff; }
.sar-form-inner:has(#t-g4w:checked)  .sar-tenant-name { color: #57e557; }
.sar-form-inner:has(#t-g4w:checked)  .sar-tenant-name::after { content: "G4W"; }
.sar-form-inner:has(#t-g4w:checked)  .sar-welcome b { color: #57e557; }
.sar-form-inner:has(#t-g4w:checked)  label[for="t-g4w"] { background: #57e557; border-color: #57e557; color: #fff; }

@media (max-width: 767px) {
    .sar-art { display: none; }
    .sar-form-inner { padding: 32px 24px; }
}