/* ============================================================
   Sistema de diseño — App FISU Padel 2026 · UPO
   Identidad: azul cobalto UPO + dorado · tipografía Archivo
   Importa este archivo globalmente y usa SIEMPRE las variables.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap');

:root{
  /* Marca */
  --upo-blue:        #1c5099;  /* primario: cabeceras, botones, iconos, foco */
  --upo-blue-dark:   #16407d;  /* hover/active de primario */
  --upo-blue-soft:   #eaf1fb;  /* fondo seleccionado / tint suave */
  --gold:            #efa81e;  /* acento (detalles, CTA secundaria, progreso) */
  --gold-light:      #f6c659;
  --gold-on-blue:    #f4b63c;  /* dorado legible SOBRE azul (eyebrows) */

  /* Texto */
  --text:            #252e4d;  /* texto principal / títulos */
  --ink:             #1c2440;  /* texto fuerte */
  --muted:           #5b6485;  /* secundario, descripciones */

  /* Superficies */
  --surface:         #ffffff;  /* tarjetas, panel, inputs */
  --bg:              #f5f6fa;  /* lienzo de la app */
  --bg-alt:          #eef0f5;  /* fondo body / secciones alternas */
  --border:          #dde0ec;  /* bordes neutros */
  --border-hover:    #8aa9da;  /* borde al hover */
  --divider:         #e7e9f0;  /* líneas finas */

  /* Semánticos (armonía UPO) */
  --success:         #1f8a5b;
  --warning:         #efa81e;
  --danger:          #d23b3b;
  --info:            #1c5099;

  /* Tipografía */
  --font: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radios */
  --r-sm: 8px;
  --r-md: 10px;   /* botones, inputs */
  --r-lg: 16px;   /* tarjetas */
  --r-xl: 20px;   /* panel grande */
  --r-pill: 999px;

  /* Sombras */
  --shadow-card:  0 6px 24px rgba(27,42,110,.07);
  --shadow-hover: 0 4px 14px rgba(28,80,153,.10);

  /* Foco accesible */
  --focus-ring: 0 0 0 3px rgba(28,80,153,.30);

  /* Espaciado */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:22px;
  --s-6:24px; --s-7:32px; --s-8:44px; --s-9:56px;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:var(--bg-alt);
  -webkit-font-smoothing:antialiased;
}

/* ---------- Tipografía ---------- */
.display { font-size:47px; font-weight:800; line-height:1.06; letter-spacing:-.015em; }
.h1      { font-size:30px; font-weight:800; line-height:1.15; letter-spacing:-.01em; color:var(--upo-blue); }
.h2      { font-size:22px; font-weight:700; line-height:1.2; }
.lead    { font-size:20px; font-weight:400; line-height:1.45; }
.body    { font-size:16px; line-height:1.55; }
.small   { font-size:14px; }
.muted   { color:var(--muted); }
.eyebrow { font-size:14px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }

@media(max-width:540px){
  .display{ font-size:32px; }
  .h1{ font-size:24px; }
  .lead{ font-size:18px; }
}

/* ---------- Cabecera co-branding ---------- */
.topbar{ display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px 40px; background:var(--surface); border-bottom:1px solid var(--divider); }
.topbar .logo-fisu{ height:50px; width:auto; display:block; }
.topbar .logo-upo { height:58px; width:auto; display:block; }

/* ---------- Hero / banner de sección ---------- */
.hero{ position:relative; overflow:hidden; background:var(--upo-blue); color:#fff; padding:52px 56px 44px; }
.hero .dotgrid{ position:absolute; inset:0; left:auto; width:46%;
  background-image:radial-gradient(circle, rgba(239,168,30,.55) 2px, transparent 2.6px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 65%);
          mask-image:linear-gradient(90deg,transparent,#000 65%);
  pointer-events:none; }
.hero .eyebrow{ color:var(--gold-on-blue); margin:0 0 18px; position:relative; }
.hero h1{ position:relative; max-width:760px; margin:0 0 18px; color:#fff; }
.hero p { position:relative; color:#cfddf2; max-width:600px; margin:0; }
.rule{ height:6px; background:linear-gradient(90deg,var(--gold),var(--gold-light)); }

/* ---------- Panel ---------- */
.panel{ background:var(--surface); border-radius:var(--r-xl); padding:44px 46px 50px; box-shadow:var(--shadow-card); }

/* ---------- Tarjeta seleccionable + rejilla ---------- */
.card{ position:relative; display:flex; flex-direction:column; align-items:center;
  gap:18px; text-align:center; padding:30px 18px 26px; cursor:pointer;
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg);
  transition:border-color .15s, background .15s, box-shadow .15s; }
.card:hover{ border-color:var(--border-hover); box-shadow:var(--shadow-hover); }
.card.is-selected{ border:2px solid var(--upo-blue); background:var(--upo-blue-soft); }
.card:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.card .name{ font-size:19px; font-weight:700; color:var(--text); line-height:1.25; }
.card .ico{ width:46px; height:46px; color:var(--upo-blue); display:block; }

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:840px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:540px){ .grid{ grid-template-columns:1fr; } }

/* ---------- Botones ---------- */
.btn{ font-family:var(--font); font-weight:700; font-size:16px; cursor:pointer;
  border-radius:var(--r-md); padding:14px 22px; border:2px solid transparent;
  transition:background .15s, border-color .15s, color .15s; }
.btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.btn-primary{ background:var(--upo-blue); color:#fff; }
.btn-primary:hover{ background:var(--upo-blue-dark); }
.btn-secondary{ background:var(--surface); color:var(--upo-blue); border-color:var(--upo-blue); }
.btn-secondary:hover{ background:var(--upo-blue-soft); }
.btn-gold{ background:var(--gold); color:#3a2a00; }
.btn-gold:hover{ background:var(--gold-light); }
.btn-ghost{ background:transparent; color:var(--upo-blue); }
.btn-ghost:hover{ background:var(--upo-blue-soft); }

/* ---------- Formularios ---------- */
.field-label{ font-size:14px; font-weight:700; color:var(--text); margin-bottom:8px; display:block; }
.input, .select, .textarea{
  width:100%; font-family:var(--font); font-size:16px; color:var(--text);
  background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-md);
  padding:12px 14px; transition:border-color .15s, box-shadow .15s; }
.input:focus, .select:focus, .textarea:focus{
  outline:none; border-color:var(--upo-blue); box-shadow:var(--focus-ring); }
.input::placeholder{ color:#9aa1bd; }
.input.is-error, .select.is-error, .textarea.is-error{ border-color:var(--danger); }
.field-error{ color:var(--danger); font-size:13px; margin-top:6px; }

.choice{ display:flex; align-items:center; gap:12px; padding:14px 16px;
  border:1.5px solid var(--border); border-radius:var(--r-md); cursor:pointer; }
.choice:hover{ border-color:var(--border-hover); }
.choice input{ accent-color:var(--upo-blue); width:18px; height:18px; }
.choice.is-selected{ border-color:var(--upo-blue); background:var(--upo-blue-soft); }

/* ---------- Progreso ---------- */
.progress{ height:8px; border-radius:var(--r-pill); background:var(--divider); overflow:hidden; }
.progress > span{ display:block; height:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-light)); transition:width .3s; }

/* ---------- Enlaces / badges ---------- */
a{ color:var(--upo-blue); text-decoration:none; }
a:hover{ text-decoration:underline; }
.badge{ display:inline-flex; align-items:center; padding:4px 10px; border-radius:var(--r-pill);
  font-size:13px; font-weight:700; background:var(--upo-blue-soft); color:var(--upo-blue); }
.badge-gold{ background:#fff3dd; color:#8a6310; }