:root{
  /* ---- Paleta NEBO (derivada del logo #00345C) ---- */
  --nebo-950:#001528;
  --nebo-900:#002240;
  --nebo-800:#00345C;   /* color de marca */
  --nebo-700:#0A4B7C;
  --nebo-600:#0F6099;
  --nebo-500:#2183C4;
  --nebo-100:#E6EEF5;
  --nebo-50:#F2F6FA;
  --aqua:#00BCD4;       /* acento vital, uso puntual */
  --aqua-soft:#D8F5F8;

  --ink:#0E1A26;
  --muted:#5C6E7E;
  --line:#DFE6ED;
  --surface:#FFFFFF;
  --canvas:#F6F8FB;

  --r-sm:10px; --r-md:14px; --r-lg:20px;
  --shadow-sm:0 1px 2px rgba(0,34,64,.06);
  --shadow-md:0 10px 30px -12px rgba(0,34,64,.18);
}
/* ---- Base autónoma: replica las clases de Bootstrap 5 que usa esta vista,
       para que el archivo se vea igual con o sin el CSS de Bootstrap cargado ---- */
*,*::before,*::after{box-sizing:border-box}
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));margin:0}
.row.g-3{gap:1.3rem 1.4rem}
/* Neutraliza el grid flex de Bootstrap: aqui las columnas son celdas de CSS Grid,
   por eso hay que anular su width/padding o los campos quedan a media anchura. */
.row > [class*="col-"]{
  flex:none;width:auto;max-width:none;
  padding-left:0;padding-right:0;margin-top:0;min-width:0
}
.col-12{grid-column:span 12}
.col-md-6{grid-column:span 12}
@media (min-width:768px){
  .row > [class*="col-md-6"]{grid-column:span 6;width:auto}
}
.form-label{display:block}
.form-control,.form-select{display:block;width:100%;font-family:inherit;line-height:1.5;appearance:none}
.form-select{
  padding-right:2.5rem;background-repeat:no-repeat;background-size:15px 11px;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3e%3cpath fill='none' stroke='%235C6E7E' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 2 6 6 6-6'/%3e%3c/svg%3e")
}
.form-check-input{appearance:none;background:#fff;background-repeat:no-repeat;background-position:center;background-size:64%}
.form-check-input:checked{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")}
.invalid-feedback{display:none;color:#E0645B;margin-top:6px}
.was-validated :invalid ~ .invalid-feedback,
.was-validated .phone-group:has(:invalid) ~ .invalid-feedback{display:block}
.btn{display:inline-block;font-family:inherit;cursor:pointer;text-align:center}
*{-webkit-font-smoothing:antialiased}
body{
  font-family:'Manrope',system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink); background:var(--canvas); margin:0;
}
.layout{min-height:100vh;display:grid;grid-template-columns:1fr}
@media (min-width:992px){.layout{grid-template-columns:minmax(420px,44%) 1fr}}

/* ============ Panel de marca ============ */
.brand-panel{
  position:relative;overflow:hidden;color:#fff;padding:48px 40px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(33,131,196,.45) 0%, rgba(0,52,92,0) 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(0,188,212,.28) 0%, rgba(0,52,92,0) 60%),
    linear-gradient(160deg, var(--nebo-800) 0%, var(--nebo-900) 55%, var(--nebo-950) 100%);
}
@media (min-width:992px){
  .brand-panel{position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;padding:48px 52px 36px}
  .brand-panel .brand-mid{flex:1;display:flex;flex-direction:column;justify-content:center;padding:32px 0}
}
.brand-panel > *{position:relative;z-index:1}

.brand-logo{height:74px;width:auto;display:block}

/* Logo compacto que sustituye al panel de marca en móvil */
.mobile-brand{display:none}

@media (max-width:991.98px){
  .brand-panel{display:none}
  .mobile-brand{display:flex;justify-content:center;margin-bottom:24px}
  .mobile-brand img{height:58px;width:auto}
}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:#BFE9F0;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--aqua);display:block}
.brand-title{
  font-size:clamp(1.9rem,2.8vw,2.5rem);line-height:1.12;font-weight:800;letter-spacing:-.02em;margin:16px 0 12px
}
.brand-title em{font-style:normal;color:#8FE3EE}
.brand-copy{color:rgba(255,255,255,.72);font-size:.98rem;line-height:1.6;max-width:44ch;margin:0}

.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pill{
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  border-radius:999px;padding:7px 14px;font-size:.78rem;font-weight:600;letter-spacing:.04em;
  color:rgba(255,255,255,.9);backdrop-filter:blur(4px)
}
.pill.is-accent{border-color:rgba(0,188,212,.5);background:rgba(0,188,212,.14);color:#B6EFF6}

.perks{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:13px}
.perks li{display:flex;gap:11px;align-items:flex-start;color:rgba(255,255,255,.75);font-size:.88rem;line-height:1.5}
.perks svg{flex:0 0 auto;margin-top:2px}
.brand-foot{margin-top:24px;font-size:.76rem;color:rgba(255,255,255,.42);letter-spacing:.02em}

/* ============ Panel de formulario ============ */
.form-panel{background:var(--surface);display:flex;justify-content:center;padding:44px 20px 56px}
@media (min-width:992px){.form-panel{padding:64px 48px}}
.form-wrap{width:100%;max-width:720px}

.form-head{margin-bottom:32px}
.form-head h2{font-size:2rem;font-weight:800;letter-spacing:-.02em;margin:0 0 6px}
.form-head p{color:var(--muted);margin:0;font-size:.95rem}

.form-label{
  font-size:.85rem;font-weight:700;color:var(--nebo-900);letter-spacing:.01em;margin-bottom:8px
}
.form-label .req{color:var(--aqua);font-weight:800}
.form-control,.form-select{
  height:56px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:.75rem 1.05rem;font-size:1rem;color:var(--ink);background-color:#fff;
  box-shadow:none;transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease
}
.form-control::placeholder{color:#A9B6C2}
.form-control:hover,.form-select:hover{border-color:#C6D2DE}
.form-control:focus,.form-select:focus{
  border-color:var(--nebo-600);box-shadow:0 0 0 4px rgba(15,96,153,.12);background-color:#fff
}
.form-select{background-position:right .85rem center}
.form-text{font-size:.82rem;color:var(--muted);margin-top:6px}

/* Teléfono */
.phone-group{display:flex;border:1.5px solid var(--line);border-radius:var(--r-sm);overflow:hidden;transition:border-color .16s ease, box-shadow .16s ease}
.phone-group:focus-within{border-color:var(--nebo-600);box-shadow:0 0 0 4px rgba(15,96,153,.12)}
.phone-code{
  display:flex;align-items:center;justify-content:center;min-width:90px;height:54px;
  background:var(--nebo-50);border-right:1.5px solid var(--line);
  font-weight:700;font-size:.95rem;color:var(--nebo-800);font-variant-numeric:tabular-nums
}
.phone-group .form-control{border:0;border-radius:0;height:54px}
.phone-group .form-control:focus{box-shadow:none}

/* Contraseña */
.pass-wrap{position:relative}
.pass-wrap .form-control{padding-right:3.3rem}
.pass-toggle{
  position:absolute;top:50%;right:8px;transform:translateY(-50%);
  width:42px;height:42px;display:grid;place-items:center;border:0;background:transparent;
  color:#8496A5;border-radius:9px;cursor:pointer;transition:color .15s, background-color .15s
}
.pass-toggle:hover{color:var(--nebo-700);background:var(--nebo-50)}
.pass-toggle:focus-visible{outline:2px solid var(--nebo-600);outline-offset:2px}
.meter{display:flex;gap:5px;margin-top:9px}
.meter span{height:4px;flex:1;border-radius:99px;background:#E7ECF2;transition:background-color .25s}
.meter[data-level="1"] span:nth-child(-n+1){background:#E0645B}
.meter[data-level="2"] span:nth-child(-n+2){background:#E8A33D}
.meter[data-level="3"] span:nth-child(-n+3){background:#2BB673}
.meter[data-level="4"] span{background:#17A05F}
.meter-label{font-size:.79rem;color:var(--muted);margin-top:5px;min-height:1em}

/* Patrocinador */
.sponsor{position:relative}
.sponsor .form-control{padding-left:2.6rem}
.sponsor .sponsor-icon{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--nebo-500);pointer-events:none}

/* Términos */
.terms{
  display:flex;gap:12px;align-items:flex-start;margin-top:28px;padding:16px;
  background:var(--nebo-50);border:1px solid var(--nebo-100);border-radius:var(--r-md)
}
.terms .form-check-input{width:20px;height:20px;margin:0;flex:0 0 auto;border:1.5px solid #B9C7D4;border-radius:6px;cursor:pointer}
.terms .form-check-input:checked{background-color:var(--nebo-800);border-color:var(--nebo-800)}
.terms .form-check-input:focus{box-shadow:0 0 0 4px rgba(15,96,153,.14);border-color:var(--nebo-600)}
.terms label{font-size:.9rem;color:#415261;line-height:1.5;cursor:pointer;margin:0}
.terms a{color:var(--nebo-700);font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(10,75,124,.28)}
.terms a:hover{color:var(--nebo-600);border-bottom-color:var(--nebo-600)}

/* Botón */
.btn-nebo{
  width:100%;height:58px;border:0;border-radius:var(--r-sm);margin-top:26px;
  background:linear-gradient(180deg,var(--nebo-700) 0%,var(--nebo-800) 100%);
  color:#fff;font-weight:700;font-size:1.05rem;letter-spacing:.01em;
  box-shadow:0 10px 22px -12px rgba(0,52,92,.75);
  transition:transform .14s ease, box-shadow .18s ease, filter .18s ease
}
.btn-nebo:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 16px 28px -14px rgba(0,52,92,.8);color:#fff}
.btn-nebo:active{transform:translateY(0)}
.btn-nebo:focus-visible{outline:3px solid rgba(0,188,212,.55);outline-offset:2px}

.alt-action{text-align:center;margin-top:22px;font-size:.93rem;color:var(--muted)}
.alt-action a{color:var(--nebo-700);font-weight:700;text-decoration:none}
.alt-action a:hover{text-decoration:underline}
.secure-note{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  font-size:.78rem;color:#8496A5
}
.was-validated .form-control:invalid,.was-validated .form-select:invalid{border-color:#E0645B;background-image:none}
.was-validated .form-control:invalid:focus{box-shadow:0 0 0 4px rgba(224,100,91,.14)}
.invalid-feedback{font-size:.78rem;font-weight:600}

@media (max-width:991.98px){
  .form-panel{padding:38px 20px 48px}
  .form-head{text-align:center;margin-bottom:26px}
  .form-head h2{font-size:1.75rem}
}



 /* ---- Datepicker con la paleta NEBO ---- */
.datepicker{
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px;box-shadow:var(--shadow-md);font-family:inherit;
  min-width:290px
}
.datepicker table{width:100%}

/* El tamaño fijo SOLO en la vista de días */
.datepicker .datepicker-days table tr td,
.datepicker .datepicker-days table tr th{
  border-radius:8px;width:34px;height:34px;font-size:.86rem
}
.datepicker table tr th{color:var(--muted);font-weight:700}
.datepicker table tr td.day:hover{background:var(--nebo-50);color:var(--nebo-800)}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active{
  background:var(--nebo-800) !important;background-image:none !important;
  color:#fff !important;text-shadow:none
}
.datepicker table tr td.today{background:var(--aqua-soft);color:var(--nebo-800)}
.datepicker table tr td.old,
.datepicker table tr td.new{color:#B9C7D4}

/* Vistas de meses / años / décadas: celdas en rejilla de 4 columnas */
.datepicker table tr td span{
  display:block;float:left;
  width:23%;height:44px;line-height:44px;margin:1%;
  border-radius:8px;cursor:pointer;font-size:.86rem;text-align:center
}
.datepicker table tr td span:hover{background:var(--nebo-50);color:var(--nebo-800)}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover{
  background:var(--nebo-800) !important;background-image:none !important;
  color:#fff !important;text-shadow:none
}
.datepicker table tr td span.old,
.datepicker table tr td span.new{color:#B9C7D4}
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover{background:none;color:#C6D2DE;cursor:default}

/* Cabecera */
.datepicker .datepicker-switch,
.datepicker .prev,.datepicker .next{
  color:var(--nebo-800);font-weight:700;border-radius:8px
}
.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,.datepicker .next:hover{background:var(--nebo-50)}


/* ============ Login ============ */
.form-panel.is-center{align-items:center}
.form-wrap.is-narrow{max-width:440px}
.check-line{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;flex-wrap:wrap}
.check-line .form-check{display:flex;align-items:center;gap:9px;margin:0}
.check-line .form-check-input{width:19px;height:19px;margin:0;border:1.5px solid #B9C7D4;border-radius:6px;cursor:pointer}
.check-line .form-check-input:checked{background-color:var(--nebo-800);border-color:var(--nebo-800)}
.check-line .form-check-input:focus{box-shadow:0 0 0 4px rgba(15,96,153,.14);border-color:var(--nebo-600)}
.check-line label{font-size:.9rem;color:#415261;cursor:pointer;margin:0}
.link-muted{font-size:.88rem;font-weight:700;color:var(--nebo-700);text-decoration:none}
.link-muted:hover{color:var(--nebo-600);text-decoration:underline}


/* ============ Modal NEBO ============ */
.modal-nebo .modal-content{
  border:0;border-radius:var(--r-lg);
  box-shadow:0 30px 60px -20px rgba(0,34,64,.35)
}
.modal-nebo .modal-header{border:0;padding:26px 28px 0;align-items:flex-start}
.modal-nebo .modal-title{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.modal-nebo .modal-body{padding:16px 28px 28px}
.modal-nebo .modal-sub{color:var(--muted);font-size:.92rem;line-height:1.6;margin:8px 0 20px}
.modal-nebo .btn-close{box-shadow:none;opacity:.45;margin:0}
.modal-nebo .btn-close:hover{opacity:1}
.modal-nebo .btn-nebo{margin-top:22px;height:52px}
.modal-nebo .invalid-feedback{margin-top:8px}

.modal-icon{
  width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:var(--nebo-50);color:var(--nebo-700);font-size:1.35rem;margin-bottom:14px
}
.modal-ok{text-align:center;padding:6px 0 2px}
.modal-ok .modal-icon{margin:0 auto 16px;background:#ECFAF1;color:#17A05F}
.modal-ok h6{color:var(--ink);font-size:1.05rem}

.modal-nebo .modal-dialog{max-width:460px}
.modal-nebo .modal-header{
  border:0;display:block;position:relative;
  padding:26px 28px 0
}
.modal-nebo .modal-title{
  font-size:1.35rem;font-weight:800;letter-spacing:-.02em;
  color:var(--ink);margin:0
}
.modal-nebo .btn-close{
  position:absolute;top:18px;right:18px;margin:0;padding:.5rem;
  box-shadow:none;opacity:.45;z-index:2
}
.modal-nebo .btn-close:hover{opacity:1}