@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --sp-color:      #1E3A5F;
  --sp-color-dark: #16304f;
  --sp-shadow:     0 0 0 3px rgba(30,58,95,.18);
  --sinpe-success: #10B981;
  --sinpe-error:   #EF4444;
  --sinpe-card:    #FFFFFF;
  --sinpe-border:  #E2E8F0;
  --sinpe-text:    #1A202C;
  --sinpe-soft:    #64748B;
  --sinpe-muted:   #94A3B8;
  --sinpe-r:       6px;
  --sinpe-shadow:  0 4px 24px rgba(30,58,95,.10);
  --sinpe-font:    'Plus Jakarta Sans', system-ui, sans-serif;
  --sinpe-t:       .18s cubic-bezier(.4,0,.2,1);
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.sinpe-form-wrapper {
  font-family: var(--sinpe-font);
  display: flex;
  justify-content: center;
  padding: 2rem 1rem;
  animation: sinpe-in .4s ease both;
}
@keyframes sinpe-in {
  from { opacity:0; transform:translateY(14px); }
  to   { opacity:1; transform:translateY(0); }
}
.sinpe-form-inner {
  background: var(--sinpe-card);
  border-radius: 16px;
  box-shadow: var(--sinpe-shadow);
  padding: 2.5rem 2.25rem;
  width: 100%;
  max-width: 500px;
  border: 1px solid var(--sinpe-border);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.sinpe-form-header     { text-align:center; margin-bottom:2rem; }
.sinpe-form-header-icon{ font-size:2rem; margin-bottom:.5rem; display:block; }
.sinpe-form-title      { font-size:1.5rem; font-weight:700; margin:0 0 .5rem; }
.sinpe-form-subtitle   { font-size:.875rem; color:var(--sinpe-soft); margin:0; }
.sinpe-plan-badge {
  display:inline-block; color:#fff;
  font-size:.7rem; font-weight:700; padding:.25rem .75rem;
  border-radius:20px; letter-spacing:.05em; text-transform:uppercase;
  vertical-align:middle; margin-left:.25rem;
}

/* ── Alertas ─────────────────────────────────────────────────────────────── */
.sinpe-alert     { padding:.85rem 1rem; border-radius:var(--sinpe-r); font-size:.875rem; margin-bottom:1.25rem; font-weight:500; line-height:1.5; }
.sinpe-alert-error   { background:#FEF2F2; color:#B91C1C; border:1px solid #FECACA; }
.sinpe-alert-success { background:#ECFDF5; color:#065F46; border:1px solid #A7F3D0; }

/* ── Avatar ──────────────────────────────────────────────────────────────── */
.sinpe-avatar-section {
  display:flex; align-items:center; gap:1.25rem;
  margin-bottom:1.5rem; padding:1rem 1.1rem;
  background:#F8FAFC; border:1.5px dashed var(--sinpe-border);
  border-radius:10px; transition:border-color var(--sinpe-t);
}
.sinpe-avatar-section:hover { border-color:var(--sp-color); }

.sinpe-avatar-wrap {
  position:relative; width:90px; height:90px; flex-shrink:0;
  border-radius:50%; background:#E8EDF4; border:2.5px solid var(--sinpe-border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; overflow:hidden;
  transition:border-color var(--sinpe-t), transform var(--sinpe-t);
}
.sinpe-avatar-wrap:hover { transform:scale(1.04); }
.sinpe-avatar-placeholder { display:flex; flex-direction:column; align-items:center; pointer-events:none; color:var(--sinpe-muted); }
.sinpe-avatar-overlay {
  position:absolute; inset:0; border-radius:50%;
  background:rgba(30,58,95,.55); display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity var(--sinpe-t); pointer-events:none;
}
.sinpe-avatar-wrap:hover .sinpe-avatar-overlay { opacity:1; }
.sinpe-avatar-info  { flex:1; }
.sinpe-avatar-title { font-size:.875rem; font-weight:600; color:var(--sinpe-text); margin:0 0 .3rem; }
.sinpe-avatar-opt   { font-size:.75rem; font-weight:400; color:var(--sinpe-muted); }
.sinpe-avatar-hint  { font-size:.74rem; color:var(--sinpe-muted); line-height:1.5; margin:0 0 .5rem; }
.sinpe-avatar-remove-btn {
  background:none; border:1px solid #FECACA; color:var(--sinpe-error);
  font-size:.72rem; font-weight:600; padding:.2rem .6rem; border-radius:4px;
  cursor:pointer;
}
.sinpe-avatar-remove-btn:hover { background:#FEF2F2; }

/* ── Campos ──────────────────────────────────────────────────────────────── */
.sinpe-field        { margin-bottom:1.1rem; }
.sinpe-field-group  { display:flex; flex-direction:column; }
.sinpe-group-two    { display:grid; grid-template-columns:1fr 1fr; gap:0 .875rem; }

.sinpe-field label {
  display:block; font-size:.8rem; font-weight:600;
  color:var(--sinpe-text); margin-bottom:.35rem; letter-spacing:.02em;
}
.sinpe-field input,
.sinpe-field select,
.sinpe-field textarea {
  width:100%; box-sizing:border-box;
  border:1.5px solid var(--sinpe-border); border-radius:var(--sinpe-r);
  padding:.7rem .9rem; font-size:.9rem; font-family:var(--sinpe-font);
  color:var(--sinpe-text); background:#FAFBFC;
  transition:border-color var(--sinpe-t), box-shadow var(--sinpe-t), background var(--sinpe-t);
  outline:none;
}
.sinpe-field select {
  appearance:none;
  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='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .75rem center; padding-right:2.25rem;
}
.sinpe-field textarea { resize:vertical; min-height:80px; }
.sinpe-field input::placeholder,
.sinpe-field textarea::placeholder { color:var(--sinpe-muted); }
.sinpe-field input:focus,
.sinpe-field select:focus,
.sinpe-field textarea:focus { background:#fff; }
.sinpe-field input.sinpe-valid   { border-color:var(--sinpe-success); }
.sinpe-field input.sinpe-invalid { border-color:var(--sinpe-error); }
.sinpe-field-hint { display:block; font-size:.72rem; color:var(--sinpe-muted); margin-top:.25rem; }

.sinpe-checkbox-label { display:flex; align-items:center; gap:.5rem; cursor:pointer; font-size:.875rem; }
.sinpe-checkbox-label input[type="checkbox"] { width:16px; height:16px; flex-shrink:0; accent-color:var(--sp-color); }

/* ── Password ────────────────────────────────────────────────────────────── */
.sinpe-password-wrap { position:relative; }
.sinpe-password-wrap input { padding-right:3rem; }

/* El botón del ojo toma el color del plan como fondo sólido */
.sinpe-toggle-pw {
  position:absolute; right:0; top:0; bottom:0;
  width:44px;
  background: var(--sp-color);   /* fondo sólido = color del plan */
  color: #ffffff;
  border:none; border-radius:0 var(--sinpe-r) var(--sinpe-r) 0;
  cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  transition:opacity var(--sinpe-t);
}
.sinpe-toggle-pw:hover { opacity:.88; }
.sinpe-toggle-pw svg   { width:16px; height:16px; }

.sinpe-pw-strength { display:flex; align-items:center; gap:.6rem; margin-top:.45rem; }
.sinpe-pw-bar { flex:1; height:4px; background:var(--sinpe-border); border-radius:4px; overflow:hidden; }
.sinpe-pw-bar span { display:block; height:100%; width:0; border-radius:4px; transition:width .3s, background .3s; }
#sinpe-pw-label { font-size:.72rem; font-weight:600; color:var(--sinpe-muted); min-width:60px; text-align:right; }

/* ── Divider ─────────────────────────────────────────────────────────────── */
.sinpe-divider { display:flex; align-items:center; gap:.75rem; margin:1.5rem 0 1.25rem; }
.sinpe-divider::before,.sinpe-divider::after { content:''; flex:1; height:1px; background:var(--sinpe-border); }
.sinpe-divider span { font-size:.72rem; font-weight:600; color:var(--sinpe-muted); letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }

/* ── Submit ──────────────────────────────────────────────────────────────── */
.sinpe-submit-btn {
  width:100%; color:#fff; border:none; border-radius:var(--sinpe-r);
  padding:.9rem 1.5rem; font-size:.95rem; font-weight:700;
  font-family:var(--sinpe-font); cursor:pointer; margin-top:.5rem;
  transition:filter var(--sinpe-t), transform var(--sinpe-t), box-shadow var(--sinpe-t);
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.sinpe-submit-btn:hover:not(:disabled) { filter:brightness(1.1); transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,.2); }
.sinpe-submit-btn:disabled { opacity:.65; cursor:not-allowed; }

.sinpe-spinner { width:20px; height:20px; animation:sinpe-spin .8s linear infinite; }
@keyframes sinpe-spin { to { transform:rotate(360deg); } }

.sinpe-login-link { text-align:center; font-size:.8rem; color:var(--sinpe-soft); margin:1rem 0 0; }
.sinpe-login-link a { font-weight:600; text-decoration:none; }
.sinpe-login-link a:hover { text-decoration:underline; }

@media (max-width:520px) {
  .sinpe-form-wrapper { padding:0; }
  .sinpe-form-inner { padding:1.25rem .65rem; border-radius:0; width:100%; max-width:100%; box-shadow:none; border:none; }
  .sinpe-group-two { grid-template-columns:1fr; }
  .sinpe-avatar-section { flex-direction:column; text-align:center; }
  .sinpe-avatar-info { text-align:center; }
}