:root {
  --pink: #EC168C; --pink-2: #FDE3F1; --teal: #08ACC5; --teal-2: #DDF6FA; --navy: #062B4F;
  --ink: #062B4F; --muted: #5B7088; --line: #E3EAF1; --bg: #F5F9FC; --card: #fff;
  --ok: #0E9F6E; --ok-2: #DEF7EC; --warn: #B45309; --warn-2: #FEF3C7; --bad: #C81E1E;
  --r: 16px; --shadow: 0 1px 2px rgba(6,43,79,.06), 0 8px 24px rgba(6,43,79,.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Nunito Sans', system-ui, sans-serif; color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .fred { font-family: Fredoka, 'Nunito Sans', sans-serif; font-weight: 600; letter-spacing: -.01em; margin: 0; }
h1 { font-size: 26px; } h2 { font-size: 20px; } h3 { font-size: 16px; }
a { color: var(--teal); }
button, input, select, textarea { font: inherit; color: inherit; }
.muted { color: var(--muted); } .small { font-size: 13px; } .center { text-align: center; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; } .right { margin-left: auto; }
.stack > * + * { margin-top: 12px; }
.hidden { display: none !important; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: #fff; color: var(--ink); padding: 9px 14px; border-radius: 12px; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: #c9d6e2; }
.btn.pink { background: var(--pink); border-color: var(--pink); color: #fff; }
.btn.teal { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn.navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.sm { padding: 6px 10px; font-size: 13px; border-radius: 10px; }
.btn.big { padding: 14px 18px; font-size: 17px; border-radius: 14px; width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--shadow); }
.field { display: grid; gap: 5px; }
.field > span { font-size: 13px; font-weight: 700; color: var(--muted); }
.input, input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date], select, textarea {
  width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 12px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-2); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 640px) { .grid2, .grid3 { grid-template-columns: 1fr; } }

.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--bg); color: var(--muted); }
.badge.pink { background: var(--pink-2); color: #B0106A; }
.badge.teal { background: var(--teal-2); color: #05788A; }
.badge.ok { background: var(--ok-2); color: var(--ok); }
.badge.warn { background: var(--warn-2); color: var(--warn); }

/* Editor de recorte */
.crop-wrap { display: flex; justify-content: center; background: repeating-conic-gradient(#eef3f7 0 25%, #fff 0 50%) 0 0/18px 18px; border-radius: 14px; padding: 14px; }
.crop-cv { max-width: 100%; max-height: 52vh; touch-action: none; cursor: grab; border-radius: 6px; box-shadow: 0 6px 20px rgba(6,43,79,.18); }
.crop-zoom { width: 100%; margin-top: 12px; accent-color: var(--pink); }

/* Ventana modal */
.modal { position: fixed; inset: 0; background: rgba(6,43,79,.5); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.modal > .sheet { background: #fff; width: 100%; max-width: 560px; max-height: 94vh; overflow: auto; border-radius: 22px 22px 0 0; padding: 18px 16px 22px; }
@media (min-width: 700px) { .modal { align-items: center; } .modal > .sheet { border-radius: 22px; } }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 12px; font-weight: 700; z-index: 99; box-shadow: var(--shadow); }
.thumb { width: 60px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: #fff; }
.thumb.round { border-radius: 50%; width: 60px; height: 60px; }

/* Botones segmentados */
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { flex: 1; min-width: 110px; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 8px; font-weight: 700; cursor: pointer; }
.seg button.on { border-color: var(--pink); background: var(--pink-2); color: #B0106A; }
.seg button:disabled { opacity: .5; cursor: not-allowed; }

/* Contraseña con ojito */
.pw { position: relative; }
.pw input { padding-right: 46px; }
.pw .eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; border-radius: 10px; }
.pw .eye:hover { color: var(--ink); }
/* Crédito */
.credit { color: var(--muted); font-size: 12px; text-decoration: none; }
.credit b { color: var(--teal); font-weight: 700; }
.side .credit { color: #8FA9C4; display: inline-block; margin-top: 8px; }
.side .credit b { color: #fff; }