/* Portal de clientes BIGOLD — misma paleta que la página de gracias de la API. */
:root {
  --fondo: #171310;
  --tarjeta: #201B16;
  --borde: #3A3128;
  --dorado: #F0A93B;
  --texto: #EDE7DD;
  --tenue: #B8AC9C;
  --apagado: #7A7164;
  --rojo: #E05C4B;
}

* { box-sizing: border-box; }

body {
  margin: 0; min-height: 100vh;
  background: var(--fondo); color: var(--texto);
  font-family: Arial, sans-serif; font-size: 16px;
}

.oculto { display: none !important; }

.centrada {
  min-height: 100vh; display: flex;
  align-items: center; justify-content: center;
}

.marca {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2em; letter-spacing: .18em; color: var(--dorado);
}
.marca.chica { font-size: 1.25em; }
.lema {
  font-size: .62em; letter-spacing: .32em; color: var(--tenue);
  margin-top: .6em;
}

.tarjeta {
  background: var(--tarjeta); border: 1px solid var(--borde);
  border-radius: 14px; padding: 1.8em;
}

/* ===== Login ===== */
.tarjeta.login { max-width: 24em; width: 100%; margin: 1em; text-align: center; padding: 3em 2.5em; }
.tarjeta.login h1 {
  font-family: Georgia, serif; font-weight: normal;
  font-size: 1.15em; color: var(--tenue); margin: 1.6em 0 1.2em;
}
form { text-align: left; }
label { display: block; font-size: .82em; color: var(--tenue); margin-bottom: 1em; }
input {
  display: block; width: 100%; margin-top: .4em; padding: .7em .8em;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px;
  color: var(--texto); font-size: 1rem;
}
input:focus { outline: none; border-color: var(--dorado); }
.pie { font-size: .78em; color: var(--apagado); margin-top: 1.6em; }

/* ===== Botones ===== */
button {
  font-size: .95rem; padding: .7em 1.4em; border-radius: 8px;
  cursor: pointer; border: none; font-family: Arial, sans-serif;
}
button:disabled { opacity: .5; cursor: default; }
.dorado { background: var(--dorado); color: #171310; font-weight: bold; width: 100%; }
.dorado:hover:not(:disabled) { filter: brightness(1.08); }
.borde { background: none; border: 1px solid var(--dorado); color: var(--dorado); }
.borde:hover:not(:disabled) { background: rgba(240, 169, 59, .08); }
.liga { background: none; color: var(--apagado); padding: .4em; }
.liga:hover { color: var(--tenue); }
.peligro { background: none; border: 1px solid var(--borde); color: var(--rojo); font-size: .8rem; padding: .45em .9em; }
.peligro:hover:not(:disabled) { border-color: var(--rojo); }

.error { color: var(--rojo); font-size: .85em; margin: .8em 0; }

/* ===== Panel ===== */
header {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 46em; margin: 0 auto; padding: 1.6em 1em .4em;
}
.negocio { color: var(--tenue); font-size: .85em; margin-top: .3em; }
main { max-width: 46em; margin: 0 auto; padding: 0 1em; }
main .tarjeta { margin-top: 1.2em; }
h2 {
  font-family: Georgia, serif; font-weight: normal;
  font-size: 1.1em; margin: 0 0 1em; color: var(--texto);
}
.encabezado-seccion { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1em; }
.encabezado-seccion h2 { margin: 0; }
footer {
  max-width: 46em; margin: 0 auto; padding: 1.6em 1em 2.4em;
  font-size: .75em; color: var(--apagado); text-align: center;
}

/* Licencia */
.fila-licencia { display: flex; align-items: center; gap: .9em; flex-wrap: wrap; }
.chip {
  font-size: .78em; letter-spacing: .08em; font-weight: bold;
  padding: .35em .9em; border-radius: 99px; border: 1px solid;
}
.chip.prueba   { color: var(--dorado); border-color: var(--dorado); }
.chip.activa   { color: #7FC97F; border-color: #7FC97F; }
.chip.gracia   { color: #E8A33D; border-color: #E8A33D; }
.chip.bloqueada{ color: var(--rojo); border-color: var(--rojo); }
.detalle { color: var(--tenue); font-size: .88em; line-height: 1.6; }
.acciones { display: flex; gap: .8em; margin-top: 1.3em; flex-wrap: wrap; }
.acciones .dorado { width: auto; }

/* Selector de dispositivos a pagar */
.pago-cantidad {
  display: flex; align-items: center; gap: .9em;
  margin-top: 1.3em; flex-wrap: wrap;
}
.stepper { display: flex; align-items: center; gap: .55em; }
.stepper button {
  width: 2em; height: 2em; padding: 0; line-height: 1;
  background: none; border: 1px solid var(--dorado); color: var(--dorado);
  border-radius: 8px; font-size: 1rem;
}
.stepper button:hover:not(:disabled) { background: rgba(240, 169, 59, .08); }
#disp-n {
  font-family: Georgia, serif; font-size: 1.2em; color: var(--texto);
  min-width: 1.6em; text-align: center;
}
.nota-pago {
  flex-basis: 100%; font-size: .78em; color: var(--apagado);
  line-height: 1.5; margin-top: .8em;
}
.pago-cantidad .nota-pago { margin-top: 0; }

/* Dispositivos */
.disp {
  display: flex; align-items: center; gap: 1em;
  padding: .9em 0; border-top: 1px solid var(--borde);
}
.disp:first-child { border-top: none; }
.disp .prefijo {
  font-family: Georgia, serif; font-size: 1.05em; color: var(--dorado);
  border: 1px solid var(--borde); border-radius: 8px;
  min-width: 2.2em; text-align: center; padding: .35em 0;
}
.disp .datos { flex: 1; min-width: 0; }
.disp .nombre { font-size: .95em; }
.disp .nombre .plataforma { color: var(--apagado); font-size: .82em; }
.disp .meta { color: var(--apagado); font-size: .78em; margin-top: .25em; }
.disp.revocado .nombre, .disp.revocado .prefijo { color: var(--apagado); }
.disp .revocado-txt { color: var(--apagado); font-size: .8em; }

/* Código de vinculación */
.codigo-caja {
  text-align: center; border: 1px dashed var(--borde); border-radius: 10px;
  padding: 1.2em; margin-bottom: 1.2em; color: var(--tenue); font-size: .88em;
}
.codigo {
  font-family: Georgia, serif; font-size: 2.2em; letter-spacing: .35em;
  color: var(--dorado); margin: .5em 0 .3em; padding-left: .35em;
}

@media (max-width: 480px) {
  .disp { flex-wrap: wrap; }
}