:root {
  --bg: #fbfaf8;
  --panel: #ffffff;
  --borde: #e6e2db;
  --texto: #1c1a17;
  --suave: #6b655c;
  --tenue: #9a938a;
  --acento: #1f6f5c;
  --acento-suave: #e8f2ef;
  --aviso: #9a6b1f;
  --aviso-suave: #fbf3e2;
  --error: #a33a2a;
  --radio: 10px;
  --sombra: 0 1px 2px rgba(28,26,23,.05), 0 4px 14px rgba(28,26,23,.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161513; --panel: #1f1e1b; --borde: #33312c; --texto: #eeebe5;
    --suave: #a8a196; --tenue: #7a7369; --acento: #5cc0a4; --acento-suave: #1b3830;
    --aviso: #d9a441; --aviso-suave: #33290f; --error: #e0705c;
    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--texto);
  font: 15px/1.55 ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--acento); }
button, input, select, textarea { font: inherit; color: inherit; }

.contenedor { max-width: 1120px; margin: 0 auto; padding: 0 20px 80px; }

/* ------------------------------------------------------------- cabecera */
header.top {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--borde);
  background: var(--panel); margin-bottom: 28px;
}
header.top .marca { font-weight: 640; letter-spacing: -.01em; }
header.top .marca span { color: var(--tenue); font-weight: 400; }
header.top .hueco { flex: 1; }
header.top .quien { color: var(--tenue); font-size: 13px; }

/* --------------------------------------------------------------- basicos */
h1 { font-size: 25px; letter-spacing: -.02em; margin: 0 0 6px; }
h2 { font-size: 17px; letter-spacing: -.01em; margin: 0 0 12px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--tenue); margin: 0 0 10px; font-weight: 600; }
p.sub { color: var(--suave); margin: 0 0 22px; }

.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra); }

button {
  background: var(--acento); color: #fff; border: 0; border-radius: 8px;
  padding: 9px 16px; font-weight: 550; cursor: pointer;
}
button:hover { filter: brightness(1.07); }
button:disabled { opacity: .45; cursor: default; filter: none; }
button.plano { background: transparent; color: var(--suave); border: 1px solid var(--borde); }
button.plano:hover { color: var(--texto); border-color: var(--tenue); filter: none; }
button.enlace { background: none; border: 0; color: var(--tenue); padding: 4px 6px; }
button.enlace:hover { color: var(--error); filter: none; }

label.campo { display: block; margin-bottom: 16px; }
label.campo > span { display: block; font-size: 13px; font-weight: 550; margin-bottom: 6px; }
input[type=text], input[type=number], textarea, select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--borde);
  border-radius: 8px; background: var(--bg);
}
textarea { min-height: 110px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--acento); outline-offset: -1px; border-color: transparent; }

/* -------------------------------------------------------------- selector */
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.fichas { display: flex; flex-wrap: wrap; gap: 7px; }
.ficha {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 11px; border: 1px solid var(--borde); border-radius: 999px;
  font-size: 13px; user-select: none; background: var(--bg);
}
.ficha input { display: none; }
.ficha.on { background: var(--acento-suave); border-color: var(--acento); color: var(--acento); font-weight: 550; }
.ficha .orden { font-size: 11px; opacity: .75; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- proyecto */
.cols { display: grid; grid-template-columns: 1fr 300px; gap: 26px; align-items: start; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 22px; }
.pestanas button {
  background: none; color: var(--suave); border: 0; border-bottom: 2px solid transparent;
  border-radius: 0; padding: 9px 14px; font-weight: 550;
}
.pestanas button.on { color: var(--texto); border-bottom-color: var(--acento); }

/* -------------------------------------------------------------- nombres */
.nombres { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.nombre {
  position: relative; background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 15px 16px; cursor: pointer; transition: border-color .12s, background .12s;
}
.nombre:hover { border-color: var(--tenue); }
.nombre.on { border-color: var(--acento); background: var(--acento-suave); }
.nombre .dom { font-size: 18px; font-weight: 620; letter-spacing: -.02em; word-break: break-all; }
.nombre .dom .ext { color: var(--tenue); font-weight: 400; }
.nombre.on .dom .ext { color: var(--acento); }
.nombre .porque { color: var(--suave); font-size: 13px; margin: 7px 0 11px; }
.nombre .marca-sel {
  position: absolute; top: 13px; right: 13px; width: 19px; height: 19px;
  border: 1.5px solid var(--borde); border-radius: 50%; background: var(--bg);
}
.nombre.on .marca-sel { background: var(--acento); border-color: var(--acento); }
.nombre.on .marca-sel::after {
  content: ''; position: absolute; left: 5.5px; top: 2.5px; width: 4px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.insignias { display: flex; flex-wrap: wrap; gap: 5px; }
.insignia {
  font-size: 11px; padding: 2.5px 7px; border-radius: 5px;
  background: var(--bg); border: 1px solid var(--borde); color: var(--suave);
}
.nombre.on .insignia { background: var(--panel); }
.insignia.ok { color: var(--acento); border-color: color-mix(in srgb, var(--acento) 35%, transparent); }
.insignia.duda { color: var(--aviso); background: var(--aviso-suave); border-color: color-mix(in srgb, var(--aviso) 30%, transparent); }

/* ------------------------------------------------------------ pie fijo */
.barra {
  position: sticky; bottom: 0; margin-top: 22px; padding: 14px 0 18px;
  background: linear-gradient(to top, var(--bg) 72%, transparent);
  display: flex; align-items: center; gap: 14px;
}
.barra .cuenta { color: var(--suave); font-size: 14px; }

/* -------------------------------------------------------------- guardados */
table.guardados { width: 100%; border-collapse: collapse; }
table.guardados th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tenue); padding: 0 12px 9px; font-weight: 600;
}
table.guardados td { padding: 12px; border-top: 1px solid var(--borde); vertical-align: middle; }
table.guardados td.dom { font-weight: 600; font-size: 15.5px; }
table.guardados td.acciones { text-align: right; white-space: nowrap; }
table.guardados a.comprar { font-size: 13px; margin-right: 12px; }

/* --------------------------------------------------------------- perfil */
.perfil-linea { margin-bottom: 12px; }
.perfil-linea .et { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); }
.perfil-resumen { font-size: 14px; color: var(--suave); font-style: italic; line-height: 1.5; }

/* --------------------------------------------------------------- estados */
.vacio { text-align: center; padding: 52px 20px; color: var(--tenue); }
.cargando { display: flex; align-items: center; gap: 11px; color: var(--suave); padding: 44px 0; justify-content: center; }
.giro {
  width: 16px; height: 16px; border: 2px solid var(--borde);
  border-top-color: var(--acento); border-radius: 50%; animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
.aviso { background: var(--aviso-suave); border: 1px solid color-mix(in srgb, var(--aviso) 30%, transparent); color: var(--aviso); padding: 11px 14px; border-radius: 8px; font-size: 13.5px; margin-bottom: 18px; }
.malo { background: color-mix(in srgb, var(--error) 10%, transparent); border: 1px solid color-mix(in srgb, var(--error) 35%, transparent); color: var(--error); padding: 11px 14px; border-radius: 8px; font-size: 13.5px; margin-bottom: 18px; }

/* ---------------------------------------------------------------- login */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login .caja { max-width: 380px; width: 100%; text-align: center; }
.login .caja h1 { font-size: 27px; }
.boton-google {
  display: inline-flex; align-items: center; gap: 11px; margin-top: 22px;
  background: var(--panel); color: var(--texto); border: 1px solid var(--borde);
  padding: 11px 20px; border-radius: 8px; text-decoration: none; font-weight: 550;
}
.boton-google:hover { border-color: var(--tenue); }