/* ==========================================================================
   misgp.cl — espacio de dueños: ingreso, registro y perfil
   Depende de styles.css (variables y clases base). Acá solo lo propio
   de estas pantallas.
   ========================================================================== */

/* ------------------------------------------------------------- utilidades */

.oculto { display: none !important; }

.cargando {
  min-height: 60vh;
  display: grid;
  place-items: center;
  color: var(--tinta-suave);
  font-size: .9375rem;
}

/* -------------------------------------------------------- ingreso partido */

.acceso {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 980px) { .acceso { grid-template-columns: 620px 1fr; } }

.acceso__marca {
  background: var(--negro);
  color: var(--crema);
  padding: clamp(22px, 4vw, 48px) var(--gutter) clamp(34px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 26px);
}
@media (min-width: 980px) { .acceso__marca { justify-content: space-between; } }

.acceso__marca h1 {
  font-size: clamp(2.375rem, 4.4vw, 3.375rem);
  line-height: 1.02;
  letter-spacing: -2.2px;
}
.acceso__marca h1 .acento { color: var(--naranja); }
.acceso__marca > p { margin: 0; font-size: clamp(.9375rem, 1.4vw, 1.0625rem); line-height: 1.6; color: var(--sobre-oscuro); max-width: 44ch; }

.acceso__ventajas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.acceso__ventajas li { display: flex; gap: 12px; font-size: .9375rem; color: var(--sobre-oscuro); }
.acceso__ventajas li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px; height: 7px;
  margin-top: 9px;
  background: var(--verde);
  border-radius: 50%;
}

.acceso__sesion { display: flex; align-items: center; gap: 10px; font-size: .8125rem; color: var(--tenue); }

.acceso__panel {
  padding: clamp(28px, 4vw, 48px) var(--gutter) clamp(40px, 6vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.acceso__caja { width: min(452px, 100%); display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 26px); }

/* ---------------------------------------------------------------- pestañas */

.pestanas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--borde); }
.pestanas button {
  font-family: var(--display);
  font-size: .9375rem;
  font-weight: 500;
  padding: 14px;
  background: transparent;
  color: var(--tinta-media);
  border: 0;
  cursor: pointer;
}
.pestanas button[aria-selected="true"] { background: var(--negro); color: var(--crema); font-weight: 700; }

/* -------------------------------------------------------------- formulario */

.titulo-caja { display: flex; flex-direction: column; gap: 6px; }
.titulo-caja h2 { font-size: clamp(1.625rem, 2.6vw, 2rem); letter-spacing: -1.1px; }
.titulo-caja p { margin: 0; font-size: .9375rem; color: var(--tinta-media); }

.boton-proveedor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 16px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  font-family: var(--display);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--tinta);
  cursor: pointer;
  transition: border-color .15s ease;
}
.boton-proveedor:hover { border-color: var(--tinta-suave); }
.boton-proveedor svg { flex-shrink: 0; }

.separador { display: flex; align-items: center; gap: 16px; }
.separador::before, .separador::after { content: ""; flex-grow: 1; height: 1px; background: var(--borde); }
.separador span { font-size: .8125rem; color: var(--tinta-suave); }

.campos { display: flex; flex-direction: column; gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo__etiqueta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.campo label { font-family: var(--display); font-size: .8125rem; font-weight: 500; color: var(--tinta-media); }
.campo input, .campo select {
  width: 100%;
  min-height: 52px;
  padding: 15px 16px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 0;
  font-family: var(--texto);
  font-size: 1rem;
  color: var(--tinta);
  appearance: none;
}
.campo input:focus, .campo select:focus { outline: 2px solid var(--naranja); outline-offset: -2px; }
.campo select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A817B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
}
.campo__ayuda { font-size: .8125rem; color: var(--tinta-suave); }

.enlace-texto { background: none; border: 0; padding: 0; font-family: var(--texto); font-size: .8125rem; color: var(--naranja); cursor: pointer; }
.enlace-texto:hover { color: var(--naranja-oscuro); }

.btn--ancho { width: 100%; }
.btn[disabled] { opacity: .55; cursor: progress; }

.pie-caja { margin: 0; font-size: .8125rem; line-height: 1.6; color: var(--tinta-suave); text-align: center; }

/* ------------------------------------------------------------------ avisos */

.aviso {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-left: 3px solid var(--naranja);
  background: #FFF4E8;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--tinta-media);
}
.aviso svg { flex-shrink: 0; margin-top: 2px; }
.aviso b { color: var(--tinta); }
.aviso--error { border-left-color: var(--rojo); background: #FDECEA; }
.aviso--ok { border-left-color: var(--verde); background: #EEF7EF; }
.aviso__cuerpo { display: flex; flex-direction: column; gap: 4px; }

/* ------------------------------------------------------------------- pasos */

.pasos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.paso { display: flex; align-items: center; gap: 10px; }
.paso__n {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-family: var(--display); font-size: .8125rem; font-weight: 700;
  border: 1px solid var(--borde);
  color: var(--tinta-suave);
}
.paso__n--activo { background: var(--naranja); border-color: var(--naranja); color: var(--negro); }
.paso__n--listo { background: var(--verde); border-color: var(--verde); color: var(--blanco); }
.paso span { font-family: var(--display); font-size: .875rem; font-weight: 500; color: var(--tinta-suave); }
.paso--activo span { color: var(--tinta); font-weight: 700; }
.pasos__linea { width: 48px; height: 1px; background: var(--borde); }

/* --------------------------------------------------------- formulario largo */

.forma { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 32px); }
.forma__titulo { display: flex; flex-direction: column; gap: 10px; }
.forma__titulo h1 { font-size: clamp(2rem, 4vw, 2.875rem); line-height: 1.04; letter-spacing: -1.8px; }
.forma__titulo p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--tinta-media); max-width: 56ch; }

.rejilla-campos { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 700px) { .rejilla-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.casillas { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--borde); padding-top: 26px; }
.casilla { display: flex; gap: 12px; align-items: flex-start; font-size: .875rem; line-height: 1.6; color: var(--tinta-media); cursor: pointer; }
.casilla input { flex: 0 0 auto; width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--naranja); }

.acciones-forma { display: flex; flex-wrap: wrap; gap: 12px; }

.columna-apoyo { background: var(--negro); color: var(--crema); padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; gap: 22px; }
.columna-apoyo > span:first-child { font-family: var(--display); font-size: .75rem; letter-spacing: 1.8px; color: var(--naranja); }
.apoyo { display: flex; flex-direction: column; gap: 6px; }
.apoyo b { font-family: var(--display); font-size: 1rem; }
.apoyo span { font-size: .875rem; line-height: 1.6; color: var(--sobre-oscuro); }
.columna-apoyo__pie { border-top: 1px solid var(--chip-oscuro); padding-top: 20px; display: flex; gap: 11px; align-items: flex-start; font-size: .8125rem; line-height: 1.6; color: var(--tenue); }
.columna-apoyo__pie svg { flex-shrink: 0; margin-top: 2px; }

.duo-forma { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 1000px) { .duo-forma { grid-template-columns: 1fr 380px; } }

/* ------------------------------------------------------------ código de 6 */

.dos-caminos { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 1000px) { .dos-caminos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tarjeta { background: var(--blanco); border: 1px solid var(--borde); padding: clamp(26px, 3.4vw, 40px); display: flex; flex-direction: column; gap: 24px; }
.tarjeta--oscura { background: var(--negro); color: var(--crema); border-color: var(--negro); }
.tarjeta h2 { font-size: clamp(1.4375rem, 2.4vw, 1.75rem); letter-spacing: -.9px; }
.tarjeta > p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--tinta-media); }
.tarjeta--oscura > p { color: var(--sobre-oscuro); }

.codigo { display: flex; gap: clamp(7px, 1.4vw, 12px); }
.codigo input {
  flex: 1 1 0;
  min-width: 0;
  height: clamp(62px, 9vw, 76px);
  padding: 0;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700;
  background: var(--blanco);
  border: 1px solid var(--borde);
  color: var(--tinta);
}
.codigo input:focus { outline: 0; border: 2px solid var(--naranja); }
.codigo input:not(:placeholder-shown) { border-color: var(--negro); background: var(--crema); }

.instrucciones { background: var(--chip-claro); padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.instrucciones > span:first-child { font-family: var(--display); font-size: .75rem; letter-spacing: 1.6px; color: var(--tinta-suave); }
.instrucciones ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; counter-reset: paso; }
.instrucciones li { display: flex; gap: 12px; font-size: .875rem; line-height: 1.6; color: var(--tinta-media); counter-increment: paso; }
.instrucciones li::before { content: counter(paso); font-family: var(--display); font-size: .8125rem; font-weight: 700; color: var(--naranja); flex-shrink: 0; }

.nota-seguridad { display: flex; gap: 11px; align-items: flex-start; border-top: 1px solid var(--borde); padding-top: 20px; font-size: .8125rem; line-height: 1.6; color: var(--tinta-suave); }
.tarjeta--oscura .nota-seguridad { border-top-color: var(--chip-oscuro); color: var(--tenue); }
.nota-seguridad svg { flex-shrink: 0; margin-top: 2px; }

.lista-estado { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--chip-oscuro); padding-top: 20px; }
.lista-estado li { display: flex; gap: 12px; font-size: .875rem; color: var(--sobre-oscuro); }
.lista-estado li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 8px; background: var(--verde); border-radius: 50%; }
.lista-estado li.apagado { color: var(--tenue); }
.lista-estado li.apagado::before { background: #5C5650; }

/* ----------------------------------------------------------------- perfil */

.barra-cuenta { background: var(--negro); color: var(--crema); }
.barra-cuenta__fila { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 16px; }
.barra-cuenta__izq { display: flex; align-items: center; gap: clamp(20px, 4vw, 40px); }
.barra-cuenta__nav { display: none; align-items: center; gap: 30px; font-size: .9375rem; }
@media (min-width: 900px) { .barra-cuenta__nav { display: flex; } }
.barra-cuenta__nav a { color: var(--sobre-oscuro); }
.barra-cuenta__nav a[aria-current="page"] { color: var(--naranja); }
.barra-cuenta__der { display: flex; align-items: center; gap: 16px; }

.reloj-sesion { display: flex; align-items: center; gap: 8px; border: 1px solid var(--chip-oscuro); padding: 8px 14px; font-size: .8125rem; color: var(--sobre-oscuro); }
.reloj-sesion::before { content: ""; width: 7px; height: 7px; background: var(--verde); border-radius: 50%; flex-shrink: 0; }
.reloj-sesion--alerta { border-color: var(--naranja); color: var(--naranja); }
.reloj-sesion--alerta::before { background: var(--naranja); }

.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--naranja);
  color: var(--negro);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: .875rem;
  flex-shrink: 0;
}
.avatar--grande { width: 78px; height: 78px; font-size: 1.6875rem; background: var(--negro); color: var(--naranja); }

.perfil { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 32px); padding-block: clamp(28px, 4vw, 44px) clamp(40px, 6vw, 64px); }

.perfil__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.perfil__quien { display: flex; align-items: center; gap: 22px; }
.perfil__quien h1 { font-size: clamp(1.75rem, 3.6vw, 2.375rem); letter-spacing: -1.4px; }
.perfil__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: .9375rem; color: var(--tinta-media); margin-top: 7px; }

.marbete {
  font-family: var(--display);
  font-size: .625rem;
  letter-spacing: 1.2px;
  font-weight: 500;
  padding: 4px 9px;
  white-space: nowrap;
}
.marbete--verde { background: var(--verde); color: var(--blanco); }
.marbete--naranja { background: var(--naranja); color: var(--negro); }
.marbete--borde { border: 1px solid var(--naranja); color: var(--naranja); }
.marbete--gris { border: 1px solid var(--borde); color: var(--tinta-suave); }

.local { display: grid; grid-template-columns: 1fr; background: var(--negro); color: var(--crema); }
@media (min-width: 1000px) { .local { grid-template-columns: 1fr 380px; } }

.local__cuerpo { padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; gap: 28px; }
.local__titulo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.local__titulo > span:first-child { font-family: var(--display); font-size: .75rem; letter-spacing: 1.8px; color: var(--naranja); }
.local__nombre { display: flex; align-items: center; gap: 20px; }
.local__logo {
  width: 62px; height: 62px;
  background: var(--superficie);
  border: 1px solid var(--naranja);
  color: var(--naranja);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 1.25rem; font-weight: 700;
  flex-shrink: 0;
  object-fit: cover;
}
.local__nombre h2 { font-size: clamp(1.4375rem, 2.6vw, 1.75rem); letter-spacing: -.9px; }
.local__nombre small { display: block; font-size: .875rem; color: var(--tenue); margin-top: 5px; }

.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--chip-oscuro); border: 1px solid var(--chip-oscuro); }
.cifra { background: var(--negro); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.cifra span { font-family: var(--display); font-size: .6875rem; letter-spacing: 1.3px; color: var(--tenue); }
.cifra b { font-family: var(--display); font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 700; letter-spacing: -.8px; }
.cifra b small { font-size: .9375rem; color: var(--tenue); font-weight: 400; }

.local__carta { background: var(--superficie); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.local__carta h3 { font-family: var(--display); font-size: .75rem; letter-spacing: 1.6px; color: var(--verde); display: flex; align-items: center; gap: 9px; }
.local__carta h3::before { content: ""; width: 8px; height: 8px; background: var(--verde); border-radius: 50%; }
.local__carta h3.apagada { color: var(--tenue); }
.local__carta h3.apagada::before { background: var(--tenue); }
.local__enlace { display: flex; flex-direction: column; gap: 8px; }
.local__enlace span { font-family: var(--display); font-size: .6875rem; letter-spacing: 1.3px; color: var(--tenue); }
.local__enlace b { font-family: var(--display); font-size: 1.1875rem; color: var(--naranja); word-break: break-all; }
.local__botones { display: flex; gap: 10px; }
.local__botones .btn { flex: 1 1 0; padding: 13px; font-size: .875rem; }
.local__carta small { font-size: .8125rem; line-height: 1.6; color: var(--tenue); }

.accesos { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--borde); border: 1px solid var(--borde); }
@media (min-width: 700px)  { .accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .accesos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.acceso-modulo { background: var(--blanco); padding: clamp(24px, 2.8vw, 32px); display: flex; flex-direction: column; gap: 12px; min-height: 178px; }
.acceso-modulo__fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acceso-modulo__n { font-family: var(--display); font-size: .875rem; color: var(--naranja); font-weight: 700; }
.acceso-modulo h3 { font-size: 1.4375rem; letter-spacing: -.5px; }
.acceso-modulo p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--tinta-media); }
.acceso-modulo .enlace-flecha { margin-top: auto; }
.acceso-modulo .enlace-flecha--gris { color: var(--tinta-suave); }

.duo-cuenta { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 1000px) { .duo-cuenta { grid-template-columns: 1fr 420px; } }

.tarjeta__titulo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tarjeta h3 { font-size: 1.4375rem; letter-spacing: -.5px; }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 22px; }
.dato { display: flex; flex-direction: column; gap: 5px; }
.dato span { font-family: var(--display); font-size: .6875rem; letter-spacing: 1.3px; color: var(--tinta-suave); }
.dato b { font-size: 1rem; font-weight: 400; word-break: break-word; }

.btn--peligro { background: transparent; border-color: var(--rojo); color: var(--rojo); font-weight: 500; }
.btn--peligro:hover { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }