/* ============ TOKENS ============ */
:root{
  --color-primary:#d81b60;   /* magenta CuidApp */
  --color-accent:#24c6dc;    /* celeste CuidApp */
  --color-bg:#fff8f9;
  --color-surface:#ffffff;
  --color-text:#333;
  --color-muted:#666;
  --color-ok:#2e7d32;
  --color-warn:#c62828;

  --radius:12px;
  --shadow:0 4px 12px rgba(0,0,0,.08);

  --space-1:.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2rem;

  --font: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font);
  line-height:1.45;
}

/* ============ NAVBAR ============ */
.navbar{
  background:linear-gradient(90deg, var(--color-primary), #f06292);
  color:#fff; padding: .75rem var(--space-3);
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:1000;
}
.logo-navbar{height:40px}
.navbar-right a{
  color:#fff; text-decoration:none; margin-left:1rem; font-weight:600;
  padding:.4rem .7rem; border-radius:999px; transition:opacity .2s ease;
}
.navbar-right a:hover{opacity:.9}

/* ============ LAYOUT ============ */
.container{max-width:1100px; margin:0 auto; padding:0 var(--space-2)}
.section{padding: var(--space-4) 0}

/* ============ COMPs ============ */
.card{
  background:var(--color-surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--space-3);
}
.card--tight{padding:var(--space-2)}

.btn{
  display:inline-block; border:none; cursor:pointer; text-decoration:none;
  padding:.6rem 1.1rem; border-radius:8px; font-weight:600;
}
.btn-primary{ background:var(--color-accent); color:#fff }
.btn-danger{ background:var(--color-warn); color:#fff }
.btn-ghost{ background:transparent; color:var(--color-primary); border:1px solid currentColor }
.btn-block{ width:100% }

.input, .select, .textarea{
  width:100%; padding:.6rem .8rem; border:1px solid #ddd; border-radius:8px;
  background:#fff; font:inherit;
}
.label{display:block; font-weight:600; margin-bottom:.25rem}
.field{margin-bottom:1rem}

.badge{
  display:inline-block; padding:.15rem .5rem; border-radius:999px;
  background:#eee; color:#444; font-size:.8rem; margin-right:.4rem;
}
.badge-ok{ background:#e8f5e9; color:var(--color-ok) }
.badge-warn{ background:#ffebee; color:var(--color-warn) }

.tag{display:inline-block; background:#eef7fb; color:#0f6a80; padding:.15rem .5rem; border-radius:6px; font-size:.85rem; margin:.15rem}

/* ============ HERO ============ */
.hero{
  text-align:center; padding: var(--space-4) 0 var(--space-3);
}
.hero h1{color:var(--color-primary); margin:.5rem 0}
.hero p{max-width:700px; margin: .25rem auto 1rem; color:var(--color-muted)}

/* ============ GRID ============ */
.grid{display:grid; gap:var(--space-2)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .grid-3,.grid-2{grid-template-columns:1fr} }

/* ============ MEDIA ============ */
.profile-photo{ width:120px;height:120px;border-radius:50%;object-fit:cover }
.result-photo{ width:60px;height:60px;border-radius:50%;object-fit:cover }

/* mensajes */
.alert-ok{background:#e8f5e9;color:var(--color-ok); padding:1rem; border-radius:8px}
.alert-err{background:#ffebee;color:var(--color-warn); padding:1rem; border-radius:8px}