/* ------------------------------------------------------------------------------------------------
   ALTA PUBLICA DE CLIENTE NUEVO (14-09-2026).
   Estilos de la maqueta que aprobo Enrique. Se cargan SOLO en esa pagina: no comparte plantilla con
   el resto del software porque es una pagina publica, sin menu ni sesion.
   ------------------------------------------------------------------------------------------------ */

  :root{
    --navy:#0d1b3e;
    --ink:#1e293b;
    --muted:#5b6b85;
    --blue:#2f6bed;
    --blue-dark:#1f56d6;
    --blue-soft:#eaf1fe;
    --blue-line:#bcd3fb;
    --bg:#f6f9fe;
    --card:#ffffff;
    --border:#e2e9f4;
    --green:#0d9f6e;
    --red:#d64545;
    --radius:16px;
    --shadow:0 1px 2px rgba(13,27,62,.04), 0 8px 24px rgba(13,27,62,.06);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  [hidden]{display:none !important}
  html{scroll-behavior:smooth}
  body{
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    background:
      radial-gradient(900px 500px at 110% -10%, #dcebfd 0%, rgba(220,235,253,0) 60%),
      radial-gradient(700px 400px at -10% 110%, #e7f0fd 0%, rgba(231,240,253,0) 55%),
      var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }

  /* ---------- Header ---------- */
  header{
    background:#fff;
    border-bottom:1px solid var(--border);
    position:sticky;top:0;z-index:50;
  }
  .header-inner{
    max-width:1160px;margin:0 auto;padding:14px 24px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
  }
  .logo{display:flex;align-items:center;gap:10px;text-decoration:none}
  .logo svg{flex:none}
  .logo-name{font-size:21px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
  .logo-name span{color:var(--blue)}
  .header-secure{
    display:flex;align-items:center;gap:8px;
    font-size:13.5px;font-weight:600;color:var(--muted);
  }
  .header-secure svg{flex:none}
  @media (max-width:560px){.header-secure .hs-text{display:none}}

  /* ---------- Layout ---------- */
  .page{max-width:1160px;margin:0 auto;padding:26px 24px 48px}
  .page-head{max-width:760px;margin-bottom:20px}
  h1{
    font-size:clamp(23px,2.6vw,29px);line-height:1.15;font-weight:800;
    color:var(--navy);letter-spacing:-.02em;margin-bottom:6px;
  }
  h1 em{
    font-style:normal;
    background:linear-gradient(transparent 62%, #cfe1fc 62%);
  }
  .page-sub{font-size:14.5px;line-height:1.55;color:var(--muted)}

  .grid{
    display:grid;grid-template-columns:minmax(0,1fr) 380px;
    gap:32px;align-items:start;
  }
  @media (max-width:980px){
    .grid{grid-template-columns:1fr}
    .summary{position:static !important}
  }

  /* ---------- Steps / cards ---------- */
  .card{
    background:var(--card);border:1px solid var(--border);
    border-radius:var(--radius);box-shadow:var(--shadow);
    padding:20px 22px;margin-bottom:14px;
  }
  .step-head{display:flex;align-items:center;gap:12px;margin-bottom:3px}
  .step-num{
    flex:none;width:29px;height:29px;border-radius:50%;
    background:var(--blue-soft);color:var(--blue-dark);
    font-size:14px;font-weight:800;
    display:flex;align-items:center;justify-content:center;
  }
  .step-title{font-size:17px;font-weight:700;color:var(--navy);letter-spacing:-.01em}
  .step-sub{font-size:13px;color:var(--muted);margin:0 0 14px 41px;line-height:1.5}

  .fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
  .fields.cols3{grid-template-columns:1fr 1fr 1fr}
  .fields .full{grid-column:1 / -1}
  @media (max-width:640px){.fields,.fields.cols3{grid-template-columns:1fr}}

  .field label{
    display:block;font-size:13px;font-weight:600;color:var(--ink);
    margin-bottom:5px;
  }
  .field label .opt{font-weight:500;color:var(--muted);font-size:12px}
  .control{position:relative}
  .field input,.field select{
    width:100%;height:44px;padding:0 14px;
    font:inherit;font-size:14.5px;color:var(--ink);
    background:#fff;border:1.5px solid var(--border);border-radius:10px;
    transition:border-color .15s, box-shadow .15s;
    appearance:none;
  }
  .field.invalid input,.field.invalid select{border-color:var(--red)}
  .field.ok input{border-color:var(--green)}
  .field-error{
    display:flex;align-items:flex-start;gap:6px;
    font-size:12.5px;font-weight:600;color:var(--red);
    margin-top:6px;line-height:1.45;
  }
  .field-error::before{content:'⚠';font-size:12px;line-height:1.5}
  .field select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235b6b85' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 16px center;
    padding-right:40px;cursor:pointer;
  }
  .field input::placeholder{color:#9aa7bd}
  .field input:focus,.field select:focus{
    outline:none;border-color:var(--blue);
    box-shadow:0 0 0 4px rgba(47,107,237,.12);
  }
  .hint{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5}
  .hint.error{color:var(--red);font-weight:600}

  .toggle-pass{
    position:absolute;right:6px;top:50%;transform:translateY(-50%);
    border:0;background:none;cursor:pointer;padding:8px;
    color:var(--muted);display:flex;align-items:center;
  }
  .toggle-pass:hover{color:var(--ink)}

  /* URL preview under username */
  .url-preview{
    display:none;margin-top:8px;font-size:13px;color:var(--muted);
    background:var(--blue-soft);border-radius:8px;padding:8px 12px;
  }
  .url-preview b{color:var(--blue-dark);font-weight:700;word-break:break-all}
  .url-preview.show{display:block}

  /* ---------- Payment ---------- */
  .pay-frame{
    border:1.5px solid var(--border);border-radius:14px;
    padding:20px;background:#fbfcff;
  }
  .pay-frame-head{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;margin-bottom:16px;flex-wrap:wrap;
  }
  .pay-lock{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--navy)}
  .pay-lock svg{color:var(--green)}
  .stripe-badge{
    display:inline-flex;align-items:center;gap:6px;
    font-size:12.5px;font-weight:600;color:var(--muted);
  }
  .stripe-badge .stripe-logo{
    font-weight:800;font-size:15px;color:#635bff;letter-spacing:-.02em;
  }
  /* Placeholder que imita el Payment Element hasta que se monte el real */
  #payment-element{min-height:0}
  /* Pestañas de método de pago: tarjeta / SEPA */
  .met-tabs{display:flex;gap:9px;margin-bottom:14px}
  .met-tab{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:11px 8px;border:1.5px solid var(--border);border-radius:11px;background:#fff;
    font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;
    transition:border-color .12s, box-shadow .12s, color .12s;
  }
  .met-tab .lab{display:flex;align-items:center;gap:7px}
  .met-tab small{font-size:11px;font-weight:500;opacity:.85}
  .met-tab.on{border-color:var(--blue);color:var(--blue-dark);box-shadow:0 0 0 3px rgba(47,107,237,.10)}

  .met-tab .tag{
    display:inline-block;background:var(--blue-soft);color:var(--blue-dark);
    font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    padding:2px 7px;border-radius:999px;margin-left:6px;vertical-align:middle;
  }
  .mandato-mas{
    background:none;border:0;padding:0;margin-left:4px;
    font:inherit;font-size:11.5px;font-weight:700;color:var(--blue);
    cursor:pointer;text-decoration:underline;
  }

  .iban-ok{
    display:none;align-items:center;gap:7px;
    font-size:12.5px;font-weight:600;color:var(--green);margin-top:6px;
  }
  .field.ok .iban-ok{display:flex}

  .mandato{
    background:#f6f9fe;border:1px solid var(--border);border-radius:10px;
    padding:12px 14px;margin-top:13px;
    font-size:11.5px;color:var(--muted);line-height:1.6;
    max-height:118px;overflow-y:auto;
  }
  .mandato b{color:var(--ink);font-weight:700}

  .pe-tabs{display:flex;gap:8px;margin-bottom:14px}
  .pe-tab{
    flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
    height:44px;border:1.5px solid var(--border);border-radius:10px;background:#fff;
    font-size:13.5px;font-weight:600;color:var(--muted);
  }
  .pe-tab.active{border-color:var(--blue);color:var(--blue-dark);box-shadow:0 0 0 3px rgba(47,107,237,.10)}
  .pe-tab .ap,.pe-tab .gp{font-weight:700;color:var(--ink)}
  @media (max-width:520px){.pe-tabs{flex-wrap:wrap}.pe-tab{min-width:46%}}
  .pe-placeholder .pe-row{display:grid;grid-template-columns:1fr;gap:12px}
  .pe-placeholder .pe-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .pe-placeholder .pe-input{
    height:46px;border:1.5px solid var(--border);border-radius:10px;background:#fff;
    display:flex;align-items:center;padding:0 14px;color:#9aa7bd;font-size:14.5px;gap:10px;
  }
  .pe-placeholder .pe-label{font-size:13px;font-weight:600;color:var(--ink);margin:10px 0 6px}
  .card-brands{display:flex;gap:6px;margin-left:auto}
  .card-brands img,.card-brands svg{height:22px;border-radius:4px}

  .pay-reassure{
    display:flex;gap:10px;align-items:flex-start;
    margin-top:16px;font-size:13px;color:var(--muted);line-height:1.55;
  }
  .pay-reassure svg{flex:none;margin-top:1px;color:var(--green)}

  .existing-client{
    margin-top:18px;padding-top:18px;border-top:1px dashed var(--border);
  }
  .check-row{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14px;color:var(--ink)}
  .check-row input[type=checkbox]{
    appearance:none;flex:none;width:20px;height:20px;margin-top:1px;
    border:1.5px solid var(--border);border-radius:6px;background:#fff;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    transition:background .12s,border-color .12s;
  }
  .check-row input[type=checkbox]:checked{
    background:var(--blue);border-color:var(--blue);
  }
  .check-row input[type=checkbox]:checked::after{
    content:'';width:11px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;
    transform:rotate(-45deg) translate(1px,-1px);
  }
  .check-row a{color:var(--blue);font-weight:600;text-decoration:none}
  .check-row a:hover{text-decoration:underline}
  #codigo-wrap{display:none;margin-top:12px;max-width:320px}
  #codigo-wrap.show{display:block}

  /* ---------- Summary (right column) ---------- */
  .summary{position:sticky;top:84px}
  .summary .card{padding:22px;margin-bottom:12px}
  .summary-title{font-size:15.5px;font-weight:700;color:var(--navy);margin-bottom:12px}
  .plan-price{
    display:flex;align-items:baseline;gap:6px;margin:12px 0 2px;
  }
  .plan-price .amount{font-size:32px;font-weight:800;color:var(--navy);letter-spacing:-.03em}
  .plan-price .period{font-size:15px;font-weight:600;color:var(--muted)}
  .plan-note{font-size:13px;color:var(--muted);margin-bottom:18px}
  .summary-lines{border-top:1px solid var(--border);padding-top:16px;margin-top:4px}
  .sum-line{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);padding:5px 0}
  .sum-line.total{
    border-top:1px solid var(--border);margin-top:10px;padding-top:14px;
    font-size:15.5px;font-weight:700;color:var(--navy);
  }
  .sum-line.total .sum-val{font-weight:800}

  .btn-primary{
    width:100%;border:0;cursor:pointer;
    background:linear-gradient(180deg,#3b78f2 0%,var(--blue-dark) 100%);
    color:#fff;font:inherit;font-size:16.5px;font-weight:700;
    padding:17px 28px;border-radius:999px;
    box-shadow:0 6px 18px rgba(47,107,237,.35);
    transition:transform .12s, box-shadow .12s, filter .12s;
    display:flex;align-items:center;justify-content:center;gap:10px;
    margin-top:20px;
  }
  .btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 9px 24px rgba(47,107,237,.4)}
  .btn-primary:active{transform:translateY(0)}
  .btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none}
  .btn-under{
    text-align:center;font-size:12.5px;color:var(--muted);
    margin-top:12px;line-height:1.6;
  }

  .trust-list{list-style:none;display:grid;gap:12px}
  .trust-list li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--ink);line-height:1.5}
  .trust-list li b{font-weight:700;color:var(--navy)}
  .trust-list svg{flex:none;margin-top:1px}
  .trust-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
  .pill{
    display:inline-flex;align-items:center;gap:7px;
    background:#fff;border:1px solid var(--border);border-radius:999px;
    font-size:12.5px;font-weight:600;color:var(--ink);
    padding:8px 14px;
  }
  .pill svg{color:var(--blue)}

  .help-box{
    display:flex;gap:12px;align-items:center;
    font-size:13.5px;color:var(--muted);line-height:1.55;
    padding:16px 20px;background:transparent;
  }
  .help-box a{color:var(--blue);font-weight:600;text-decoration:none}
  .help-box a:hover{text-decoration:underline}

  footer{
    border-top:1px solid var(--border);background:#fff;
    padding:22px 24px;text-align:center;
    font-size:12.5px;color:var(--muted);
  }
  footer a{color:var(--muted);text-decoration:none;margin:0 8px}
  footer a:hover{color:var(--blue)}

  /* Muestra del formulario de pago: las pestañas se pueden pulsar y un aviso explica cuándo sale el de verdad. */
  .pe-tab[data-abre-pago]{cursor:pointer}
  .pe-tab[data-abre-pago]:hover{border-color:var(--blue-dark)}
  .pe-aviso{margin:4px 0 12px;font-size:12.5px;line-height:1.45;color:#5b6b85}

  /* P350: pantalla final del alta */
  .alta-fin{max-width:560px;margin:10px auto 30px;background:#fff;border-radius:20px;padding:36px 32px 30px;
            box-shadow:0 18px 50px rgba(20,33,61,.10);text-align:center}
  .alta-fin-icono{display:flex;justify-content:center;margin-bottom:14px}
  .alta-fin-icono svg{animation:altaFinEntra .5s ease-out}
  @keyframes altaFinEntra{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
  .alta-fin h2{font-size:26px;line-height:1.2;color:#14213d;margin:0 0 10px;font-weight:800}
  .alta-fin-sub{font-size:15.5px;color:#4a5872;line-height:1.55;margin:0 0 18px}
  .alta-fin-correo{display:inline-flex;flex-direction:column;gap:2px;background:#f2f7fe;border:1px solid #d6e4f7;
                   border-radius:12px;padding:10px 18px;margin-bottom:22px;max-width:100%}
  .alta-fin-correo span{font-size:12.5px;color:#5b6b85}
  .alta-fin-correo b{font-size:15px;color:#1e4e8c;word-break:break-all}
  .alta-fin-pasos{list-style:none;padding:0;margin:0 0 20px;text-align:left;display:flex;flex-direction:column;gap:10px}
  .alta-fin-pasos li{display:flex;gap:12px;align-items:flex-start;background:#fafbfd;border:1px solid #e6eaf2;border-radius:12px;padding:12px 14px}
  .alta-fin-pasos li b{flex:none;width:26px;height:26px;border-radius:50%;background:#2f9e6b;color:#fff;font-size:13px;
                       display:grid;place-items:center}
  .alta-fin-pasos li span{font-size:14.5px;color:#333f52;line-height:1.45}
  .alta-fin-ayuda{font-size:13.5px;color:#6b778c;margin:0}
  @media (max-width:560px){ .alta-fin{padding:28px 18px 22px;border-radius:16px} .alta-fin h2{font-size:22px} }

  /* P354: al terminar, todo centrado (el formulario deja de tener la columna del resumen). */
  body.alta-terminada .grid{grid-template-columns:1fr;justify-items:center}
  body.alta-terminada .summary{display:none}
  body.alta-terminada .page-head{text-align:center;margin-left:auto;margin-right:auto}
  body.alta-terminada .alta-fin{width:100%}

  /* ---------- P763: «Agreements» del alta de DrinCloud (Terms + BAA de HIPAA) ---------- */
  .baa-bloque{margin:4px 0 16px}
  .baa-caja{border:1px solid var(--border);border-radius:12px;background:var(--bg);padding:14px 16px;margin:0 0 16px}
  .baa-cabecera{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px;color:var(--navy);font-size:14.5px}
  .baa-version{font-size:12px;color:var(--muted)}
  .baa-partes{font-size:13px;color:var(--muted);margin:6px 0 10px;line-height:1.55}
  .baa-partes b{color:var(--ink)}
  .baa-detalle summary{cursor:pointer;color:var(--blue);font-weight:600;font-size:14px}
  .baa-detalle summary:hover{text-decoration:underline}
  .baa-texto{margin-top:10px;max-height:420px;overflow:auto;background:#fff;border:1px solid var(--border);border-radius:10px;padding:16px 18px}
  .baa-texto p{margin:0 0 10px}
  .baa-nota{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:4px}
  .baa-resumen{margin-top:14px}
  .baa-resumen a{color:var(--blue);font-weight:600;text-decoration:none}

  /* P912: el plan, destacado en el paso 2 (azul fuerte, como el botón de pagar) para que se elija. */
  /* P923b (Enrique, 09-10-2026): «el botón de tu plan está muy feo, ponlo más suave: solo el marco del campo en
     azul, como el botón». Sin recuadro de fondo: el campo como los demás, con el marco azul. */
  .plan-destacado{border:0;background:transparent;padding:0}
  .plan-destacado .field select{border:2px solid var(--blue);background-color:#fff}

/* ------------------------------------------------------------------------------------------------
   P923 (09-10-2026): ALTA DE XDENTALCLOUD (app.xdentalcloud.com/alta y /alta-xdental).
   P923b (Enrique, 09-10-2026): «tiene que ser idéntico a DriCloud»: mismos colores y mismo botón de pagar.
   Lo único que cambia es el logotipo y el nombre (lo pone la vista), así que aquí no hay nada propio.
   ------------------------------------------------------------------------------------------------ */

  /* ---------- Aviso de cookies (Google Ads / GA4, solo el alta de DriCloud) ---------- */
  .aviso-cookies{
    position:fixed;left:16px;right:16px;bottom:16px;z-index:50;max-width:720px;margin:0 auto;
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
    padding:14px 18px;font-size:14px;color:var(--muted);line-height:1.45;
  }
  .aviso-cookies p{flex:1 1 280px}
  .aviso-cookies a{color:var(--blue);font-weight:600;text-decoration:none}
  .aviso-cookies-botones{display:flex;gap:8px;margin-left:auto}
  .aviso-cookies button{height:38px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer}
  .aviso-cookies .ac-no{background:#fff;border:1px solid var(--border);color:var(--ink)}
  .aviso-cookies .ac-si{background:var(--blue);border:1px solid var(--blue);color:#fff}
  .aviso-cookies .ac-si:hover{background:var(--blue-dark)}