/* ═══ Portal Operativo Pure Golf Resorts ═══
   Sistema visual del rediseño "Pure Golf Premium" (8-ago-2026).
   Reglas del sistema:
     · Sin sombras. La jerarquía se construye con filetes finos y contraste
       de fondo, nunca con elevación.
     · Serif (Kudryashev) solo en títulos, peso 400, SIEMPRE en versalitas con
       tracking amplio: el impacto viene de la escala, no del grosor.
     · Radios: 8px en superficies, 999px en chips y botones. Nada intermedio.
     · Mobile-first: el móvil es la base, el escritorio se adapta hacia arriba. */

:root{
  /* Marca */
  --verde:#1D340D; --verde2:#2C4A17; --verde-grad-claro:#24400F; --verde-grad-oscuro:#0F1D07;
  --dorado:#ECC276; --dorado-oscuro:#A9803A; --dorado-texto:#8A6A30;
  /* Superficies */
  --crema:#F7F5EA; --papel:#FFFDF6;
  /* Texto */
  --tinta:#20291A; --tinta-suave:#3C4433; --gris:#4A5140; --gris2:#6B7261; --gris-tenue:#9A9585;
  /* Filetes */
  --linea:#DDD5BD; --linea-media:#E4DDC8; --linea-suave:#EDE6D2; --borde-btn:#C9C0A6;
  /* Estados */
  --ok:#48731F; --alerta:#A93226; --alerta-fondo:#FAECEA; --codigo-fondo:#EFEADA;

  --serif:"kudryashev-d-contrast","Playfair Display",Georgia,serif;
  --sans:'Montserrat',system-ui,-apple-system,sans-serif;
  --header-h:58px;
  font-synthesis:none;
}
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--crema); color:var(--tinta); font-family:var(--sans);
  font-size:15.5px; line-height:1.7; -webkit-font-smoothing:antialiased; text-wrap:pretty}
[hidden]{display:none !important}

/* ─── LOGIN ─── */
#login{min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(120% 90% at 72% 8%, var(--verde-grad-claro), var(--verde) 55%, var(--verde-grad-oscuro))}
.login-caja{width:100%; max-width:390px; background:var(--papel); border-radius:8px;
  border-top:1px solid var(--dorado); padding:38px 30px 32px}
.login-caja h1{font-family:var(--serif); font-weight:400; font-size:28px; line-height:1.1;
  letter-spacing:.06em; text-transform:uppercase; color:var(--verde); margin-bottom:10px}
.login-caja .sub{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gris-tenue); margin-bottom:30px}

label{display:block; font-size:9.5px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gris2); margin-bottom:8px}
input,select,textarea{width:100%; padding:12px 14px; border:1px solid var(--linea);
  border-radius:8px; font-family:var(--sans); font-size:16px; background:#fff; color:var(--tinta)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--dorado-oscuro)}
.campo{margin-bottom:18px}

/* ─── BOTONES (pill, versalitas) ─── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border:none; border-radius:999px; font-family:var(--sans);
  font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; background:var(--verde); color:var(--dorado); transition:opacity .15s}
.btn:hover:not(:disabled){opacity:.86}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.full{width:100%}
.btn.sec{background:transparent; color:var(--verde); border:1px solid var(--borde-btn); font-weight:500}
.btn.sec:hover:not(:disabled){background:var(--codigo-fondo); opacity:1}
.btn.chico{padding:9px 18px; font-size:10.5px; font-weight:500}
.btn.peligro{background:var(--alerta); color:var(--papel)}

.error{background:var(--alerta-fondo); color:var(--alerta); padding:13px 16px;
  border-radius:8px; font-size:13px; margin-bottom:18px}

/* ─── ESTRUCTURA ─── */
header{position:sticky; top:0; z-index:40; height:var(--header-h); background:var(--verde);
  display:flex; align-items:center; padding:0 14px; gap:10px}
header .marca{flex:1; min-width:0; font-family:var(--serif); font-size:16px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dorado);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* En pantalla chica no entra el nombre: quedan la marca y el botón de salir. */
header .yo{display:none}
header #btn-salir{flex:0 0 auto; color:var(--dorado); border-color:rgba(236,194,118,.4)}
header #btn-salir:hover{background:rgba(236,194,118,.12)}

/* El menú tiene ocho secciones y en el teléfono no entran. Sin una pista de que
   hay más, la gente no descubre que se desliza: el degradado del borde derecho
   es esa pista. */
.nav-envoltorio{position:sticky; top:var(--header-h); z-index:39}
.nav-envoltorio::after{content:''; position:absolute; top:0; right:0; bottom:0; width:34px;
  pointer-events:none; background:linear-gradient(90deg, rgba(44,74,23,0), var(--verde2))}
nav{background:var(--verde2); display:flex; overflow-x:auto; scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav button{flex:0 0 auto; background:none; border:none; border-bottom:2px solid transparent;
  color:rgba(247,245,234,.62); font-family:var(--sans); font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; padding:15px 16px; cursor:pointer; white-space:nowrap}
nav button.on{color:var(--dorado); border-bottom-color:var(--dorado)}

main{padding:28px 20px 70px; max-width:1100px; margin:0 auto}
h2.titulo{font-family:var(--serif); font-weight:400; font-size:clamp(26px,6vw,34px);
  line-height:1.1; letter-spacing:.05em; text-transform:uppercase; color:var(--verde);
  margin-bottom:12px}
p.bajada{font-size:14px; font-weight:300; line-height:1.7; color:var(--gris); margin-bottom:26px}

/* ─── SUPERFICIES ─── */
.tarjeta{background:var(--papel); border:1px solid var(--linea-media); border-radius:8px;
  padding:20px; margin-bottom:16px}
.tarjeta .card-t, .seccion-t{font-size:9.5px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--dorado-oscuro); margin-bottom:16px}

.fila{display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:15px 0; border-bottom:1px solid var(--linea-suave); cursor:pointer}
.fila:last-child{border-bottom:none}
.fila:hover{background:rgba(239,234,218,.4)}
.fila .txt{min-width:0; flex:1}
.fila .txt b{display:block; font-size:15px; font-weight:600; color:var(--verde);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fila .txt span{font-size:12.5px; font-weight:300; color:var(--gris2)}
.fila .txt code{font-family:var(--sans); font-size:11px; letter-spacing:.1em;
  color:var(--gris-tenue); white-space:nowrap}

/* ─── CHIPS DE ESTADO ─── */
.chip{display:inline-block; font-size:9.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; padding:6px 13px; border-radius:999px; white-space:nowrap}
.c-nuevo{background:#E3E9DB; color:var(--verde2)}
.c-revision{background:#F3E7CC; color:var(--dorado-texto)}
.c-calificado{background:#DDE9E5; color:#2C7C64}
.c-ideals{background:#D6E4EA; color:#2C5C6B}
.c-firmado{background:var(--verde); color:var(--dorado)}
.c-pagado{background:var(--dorado); color:var(--verde)}
.c-rechazado{background:#F0DEDC; color:var(--alerta)}
.c-neutro{background:#E8E4D6; color:var(--gris2)}

/* ─── VACÍO Y CARGA ─── */
.vacio{text-align:center; padding:44px 24px; color:var(--gris2); font-size:14px; font-weight:300}
.vacio b{display:block; font-family:var(--serif); font-weight:400; font-size:24px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--verde); margin-bottom:10px}
.cargando{text-align:center; padding:44px; color:var(--gris-tenue);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase}

/* ─── PANEL DEL PARTNER ─── */
.tarjeta.destacada{border-top:1px solid var(--dorado); background:var(--papel)}
.grande{font-family:var(--serif); font-weight:400; font-size:clamp(30px,9vw,42px);
  line-height:1.05; letter-spacing:.04em; color:var(--verde)}
.barra{height:5px; background:var(--linea-suave); border-radius:999px; overflow:hidden; margin-top:16px}
.barra-llena{height:100%; background:linear-gradient(90deg, var(--dorado-oscuro), var(--dorado));
  border-radius:999px; transition:width .5s cubic-bezier(.2,.8,.2,1)}
.codigo-grande{font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:.14em;
  background:var(--codigo-fondo); color:var(--verde); padding:9px 15px; border-radius:8px}

/* ─── CONFIRMACIÓN ─── */
.modal-fondo{position:fixed; inset:0; z-index:200; display:flex; align-items:center;
  justify-content:center; padding:24px; background:rgba(15,29,7,.55);
  opacity:0; transition:opacity .18s}
.modal-fondo.ver{opacity:1}
.modal{width:100%; max-width:420px; background:var(--papel); border-radius:8px;
  border-top:1px solid var(--dorado); padding:28px 26px;
  transform:translateY(10px); transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.modal-fondo.ver .modal{transform:translateY(0)}
.modal h3{font-family:var(--serif); font-weight:400; font-size:22px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--verde); margin-bottom:14px}
.modal-detalle{font-size:14px; font-weight:300; line-height:1.65; color:var(--gris)}
.modal-detalle b{display:block; font-weight:600; color:var(--verde); font-size:15px; margin:10px 0 2px}
.modal-aviso{margin-top:16px; padding:12px 14px; background:#FBF3E2; border-radius:8px;
  font-size:12.5px; line-height:1.55; color:var(--dorado-texto)}
.modal-botones{display:flex; gap:9px; justify-content:flex-end; margin-top:24px; flex-wrap:wrap}

/* ─── TOAST ─── */
#toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(90px);
  background:var(--verde); color:var(--crema); padding:13px 22px; border-radius:999px;
  font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  z-index:100; opacity:0; max-width:90vw; text-align:center;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), opacity .25s}
#toast.ver{transform:translateX(-50%) translateY(0); opacity:1}
#toast.mal{background:var(--alerta)}

@media(min-width:760px){
  .nav-envoltorio::after{display:none}
  header{padding:0 26px; gap:14px}
  header .yo{display:block; text-align:right; line-height:1.4; white-space:nowrap;
    font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(247,245,234,.5)}
  header .yo b{display:block; color:var(--crema); font-size:11.5px; font-weight:500; letter-spacing:.06em}
  nav button{font-size:11px; padding:15px 20px}
  main{padding:44px 26px 90px}
  .tarjeta{padding:28px}
}