/* ==========================================================================
   billeteras.io — panel de empresas y administración
   Solo la cargan las páginas privadas. Mismo lenguaje que el resto del sitio:
   esquinas vivas, líneas de 1px, rótulos en mono y realce de sello desplazado.
   ========================================================================== */

/* --- Maquetación ------------------------------------------------------- */

.panel {
  display: grid;
  gap: var(--e6);
  padding-block: var(--e5) var(--e8);
}
.panel__principal { display: grid; gap: var(--e6); align-content: start; min-width: 0; }
.panel__rail { display: grid; gap: var(--e5); align-content: start; min-width: 0; }

@media (min-width: 62em) {
  .panel { grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); gap: var(--e8); }
  .panel--ancho { grid-template-columns: minmax(0, 1fr); }
  .panel__rail { position: sticky; top: calc(var(--alto-cabecera) + var(--e5)); }
  .panel--formulario .panel__rail { position: static; }
}

.bloque { display: grid; gap: var(--e4); align-content: start; }
.bloque__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  padding-bottom: var(--e2);
  border-bottom: var(--borde) solid var(--linea-fuerte);
}

/* --- Navegación del panel ---------------------------------------------- */

.subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2) var(--e5);
  padding-block: var(--e3);
  border-bottom: var(--borde) solid var(--linea);
}
.subnav--admin { border-bottom-color: var(--linea-fuerte); }
.subnav__enlace {
  position: relative;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-2);
  padding-block: 0.25rem;
  transition: color var(--t-rapida);
}
.subnav__enlace:hover,
.subnav__enlace[aria-current="page"] { color: var(--tinta); }
.subnav__enlace[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--acento);
}
.subnav__n {
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0.05rem 0.35rem;
  background: var(--acento);
  color: #FFF;
  font-size: 0.625rem;
  letter-spacing: 0.04em;
}
.subnav__quien { margin-left: auto; text-transform: none; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.subnav__salir { margin: 0; }
.subnav__boton {
  padding: 0.35rem 0.6rem;
  border: var(--borde) solid var(--linea);
  background: transparent;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-2);
  cursor: pointer;
  transition: border-color var(--t-rapida), color var(--t-rapida);
}
.subnav__boton:hover { border-color: var(--tinta); color: var(--tinta); }

/* --- Formularios ------------------------------------------------------- */

.formulario { display: grid; gap: var(--e6); min-width: 0; }
.formulario--estrecho { max-width: 32rem; gap: var(--e4); }
.formulario--rail { gap: var(--e3); }

.formulario__seccion {
  display: grid;
  gap: var(--e4);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
/* La leyenda de un fieldset no es un elemento de la rejilla —no le llega el
   gap—: la separación del primer campo va como margen. */
.formulario__leyenda {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  width: 100%;
  margin-bottom: var(--e2);
  padding: 0 0 var(--e2);
  border-bottom: var(--borde) solid var(--linea-fuerte);
}
.formulario__titulo {
  font-family: var(--f-display);
  font-size: var(--d3);
  font-weight: var(--peso-display);
  letter-spacing: -0.025em;
}
.formulario__grupo { display: grid; gap: var(--e3); }
.formulario__grupo + .formulario__grupo { margin-top: var(--e3); }
.formulario__subtitulo { padding-bottom: var(--e2); border-bottom: var(--borde) solid var(--linea); color: var(--acento); }

.formulario__rejilla { display: grid; gap: var(--e4); }
@media (min-width: 48em) {
  .formulario__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4) var(--e5); }
  .formulario__rejilla > .campo--ancho { grid-column: 1 / -1; }
}

.formulario__casillas { display: grid; gap: var(--e3); }

.formulario__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3) var(--e4);
  padding-top: var(--e4);
  border-top: var(--borde) solid var(--linea);
}
/* En los formularios largos, el botón de guardar se queda a la vista. */
.formulario__acciones--fijas {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding-block: var(--e3);
  background: var(--papel);
  border-top-color: var(--linea-fuerte);
}

.campo { display: grid; gap: var(--e2); align-content: start; min-width: 0; }
.campo--compacto { gap: var(--e1); }
.campo__etiqueta {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-2);
}
.campo--compacto .campo__etiqueta { letter-spacing: 0.08em; color: var(--tinta-3); }
.campo__ayuda { font-size: var(--fs-sm); line-height: 1.45; color: var(--tinta-3); max-width: 60ch; }
.campo__ayuda a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.campo__error { font-size: var(--fs-sm); line-height: 1.4; color: var(--no); }
.campo__error::before { content: "▲\00a0"; font-size: 0.7em; vertical-align: 0.1em; }

.entrada {
  width: 100%;
  min-width: 0;
  padding: 0.6875rem 0.8125rem;
  border: var(--borde) solid var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--fs-base);
  line-height: 1.4;
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.entrada:hover { border-color: var(--tinta); }
.entrada:focus { outline: none; border-color: var(--acento); box-shadow: var(--desplazo) var(--desplazo) 0 var(--acento); }
.entrada::placeholder { color: var(--tinta-3); }
.entrada--area { resize: vertical; min-height: 5.5rem; line-height: 1.5; }
.entrada--mono { font-family: var(--f-mono); font-size: var(--fs-sm); letter-spacing: var(--ls-mono); }
.entrada--chica { padding: 0.4rem 0.55rem; font-size: var(--fs-sm); width: auto; min-width: 9rem; }
.entrada--select {
  appearance: none;
  padding-right: 2.25rem;
  background: var(--papel)
    linear-gradient(45deg, transparent 50%, currentColor 50%) calc(100% - 1rem) 55% / 5px 5px no-repeat;
  cursor: pointer;
}
.campo--error .entrada { border-color: var(--no); }

/* Casillas: un cuadro de verdad, en el color del acento al marcarse. */
.casilla {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--tinta);
}
.casilla input { width: 1rem; height: 1rem; margin: 0; flex: none; accent-color: var(--acento); }

.casillas { display: flex; flex-wrap: wrap; gap: var(--e2); }
.casilla--chip {
  gap: 0.5rem;
  padding: 0.375rem 0.625rem;
  border: var(--borde) solid var(--linea);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-2);
  transition: border-color var(--t-rapida), color var(--t-rapida), background var(--t-rapida);
}
.casilla--chip:hover { border-color: var(--tinta); color: var(--tinta); }
.casilla--chip:has(input:checked) { border-color: var(--tinta); background: var(--papel-2); color: var(--tinta); }
.casilla--chip input { width: 0.875rem; height: 0.875rem; }

/* Trampa para robots: fuera de la vista, no fuera del formulario. */
.trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* --- Filas repetibles (comisiones, fuentes, métodos) ------------------- */

.repetible { display: grid; gap: var(--e3); }
.repetible__filas { display: grid; gap: var(--e3); }
.repetible__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e2);
  padding: var(--e3);
  border: var(--borde) solid var(--linea);
  background: color-mix(in srgb, var(--papel-2) 55%, transparent);
}
.repetible__celdas { display: grid; gap: var(--e2) var(--e3); min-width: 0; }
@media (min-width: 48em) {
  .repetible__fila { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .repetible__celdas--2 { grid-template-columns: minmax(10rem, 0.9fr) minmax(0, 1.3fr); }
  .repetible__celdas--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); }
}
.repetible__quitar,
.repetible__anadir {
  justify-self: start;
  padding: 0.45rem 0.7rem;
  border: var(--borde) solid var(--linea);
  background: transparent;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-2);
  cursor: pointer;
  transition: border-color var(--t-rapida), color var(--t-rapida);
}
.repetible__quitar:hover { border-color: var(--no); color: var(--no); }
.repetible__anadir { border-style: dashed; }
.repetible__anadir:hover { border-color: var(--tinta); color: var(--tinta); }

/* --- Botones extra ----------------------------------------------------- */

.btn--chico { padding: 0.5rem 0.75rem; }
.btn--peligro { background: transparent; border-color: var(--no); color: var(--no); }
.btn--peligro:hover { box-shadow: var(--desplazo) var(--desplazo) 0 var(--no); }
.btn--azul { background: var(--verificado); border-color: var(--verificado); color: #FFF; }
.btn--azul:hover { box-shadow: var(--desplazo) var(--desplazo) 0 var(--tinta); }

.accion-en-linea { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin: 0; }

/* --- Avisos ------------------------------------------------------------- */

.aviso--ok { border-left-color: var(--si); }
.aviso--ok .aviso__marca { color: var(--si); }
.aviso--error { border-left-color: var(--no); color: var(--tinta); }
.aviso--error .aviso__marca { color: var(--no); }

.nota {
  display: grid;
  gap: var(--e2);
  padding: var(--e3) var(--e4);
  border-left: 3px solid var(--linea-fuerte);
  background: var(--papel-2);
  font-size: var(--fs-sm);
  color: var(--tinta-2);
}
.nota p { overflow-wrap: anywhere; }

/* --- Verificación de dominio ------------------------------------------- */

.instruccion {
  display: grid;
  gap: var(--e3);
  padding: var(--e4);
  border: var(--borde) solid var(--linea-fuerte);
  background: var(--papel);
}
.instruccion__cab {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e2) var(--e4);
  padding-bottom: var(--e2);
  border-bottom: var(--borde) solid var(--linea);
}

.pares { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e1) var(--e4); }
.pares dt {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-3);
  padding-top: var(--e2);
}
.pares dd { display: grid; gap: var(--e2); min-width: 0; }
@media (min-width: 40em) {
  .pares { grid-template-columns: 7rem minmax(0, 1fr); row-gap: var(--e3); }
  .pares dt { padding-top: 0.65rem; }
  .pares__texto { padding-top: 0.55rem; }
}
.pares--grande dd { font-size: var(--fs-lg); padding-top: 0.4rem; }

.dato-copiable {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  border: var(--borde) solid var(--linea);
  background: var(--papel-2);
}
.dato-copiable code {
  padding: 0.625rem 0.75rem;
  font-family: var(--f-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-mono);
  overflow-wrap: anywhere;
  user-select: all;
}
.dato-copiable button {
  padding-inline: 0.875rem;
  border: 0;
  border-left: var(--borde) solid var(--linea);
  background: var(--papel);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--tinta-2);
  cursor: pointer;
  transition: color var(--t-rapida), background var(--t-rapida);
}
.dato-copiable button:hover { color: var(--tinta); background: var(--papel-2); }

.ficha-propia { display: flex; align-items: center; gap: var(--e4); }
.ficha-propia__texto { display: grid; gap: var(--e2); }
.ficha-propia__nombre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5ch;
  font-family: var(--f-display);
  font-size: var(--d3);
  font-weight: var(--peso-display);
  letter-spacing: -0.03em;
}

.valor--azul { color: var(--verificado-texto); }
.valor--azul::before { background: var(--verificado); }

/* --- Lateral: cómo funciona y listas cortas ---------------------------- */

.como-funciona { display: grid; gap: var(--e3); }
.como-funciona .pasos b { color: var(--tinta); font-weight: 500; }

.lista-simple { list-style: none; padding: 0; display: grid; gap: var(--e2); font-size: var(--fs-sm); color: var(--tinta-2); }
.lista-simple li { display: flex; gap: var(--e2); }
.lista-simple li::before { content: "—"; color: var(--tinta-3); flex: none; }

.lista-panel { list-style: none; padding: 0; display: grid; margin-top: var(--e2); border-top: var(--borde) solid var(--linea); }
.lista-panel li {
  display: grid;
  gap: 0.2rem;
  padding-block: 0.55rem;
  border-bottom: var(--borde) solid var(--linea);
  font-size: var(--fs-sm);
}
.lista-panel a { color: var(--tinta); transition: color var(--t-rapida); }
.lista-panel a:hover { color: var(--acento); }
.lista-panel__nota { color: var(--tinta-3); font-size: var(--fs-mini); }

/* --- Diferencias -------------------------------------------------------- */

.diff { display: grid; gap: var(--e5); }
.diff__campo { display: grid; gap: var(--e2); padding-bottom: var(--e4); border-bottom: var(--borde) solid var(--linea); }
.diff__cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e2) var(--e4); }
.diff__titulo { font-size: var(--fs-base); font-weight: var(--peso-medio); letter-spacing: -0.01em; }
.diff__aviso { font-size: var(--fs-sm); color: var(--medio); }
.diff__lineas { list-style: none; padding: 0; display: grid; gap: 2px; }
.diff__linea {
  position: relative;
  padding: 0.4rem 0.75rem 0.4rem 1.85rem;
  border-left: 3px solid transparent;
  font-size: var(--fs-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.diff__linea::before {
  position: absolute;
  left: 0.65rem;
  top: 0.4rem;
  font-family: var(--f-mono);
}
.diff__linea--igual { color: var(--tinta-3); }
.diff__linea--sale { border-left-color: var(--no); background: color-mix(in srgb, var(--no) 6%, transparent); color: var(--tinta-2); }
.diff__linea--sale::before { content: "−"; color: var(--no); }
.diff__linea--entra { border-left-color: var(--si); background: color-mix(in srgb, var(--si) 7%, transparent); color: var(--tinta); }
.diff__linea--entra::before { content: "+"; color: var(--si); }
.diff del { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--no); background: color-mix(in srgb, var(--no) 12%, transparent); }
.diff ins { text-decoration: none; color: var(--si); background: color-mix(in srgb, var(--si) 15%, transparent); }

/* --- Administración ----------------------------------------------------- */

.cifras-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--borde) solid var(--linea-fuerte);
}
@media (min-width: 48em) { .cifras-panel { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cifra--enlace {
  padding: var(--e4) var(--e3) var(--e4) 0;
  border-bottom: var(--borde) solid var(--linea);
  transition: background var(--t-rapida), padding-inline var(--t-media);
}
.cifra--enlace:hover { background: var(--papel-2); padding-inline: var(--e3); }

.tabla-envoltura { overflow-x: auto; }
.tabla--panel { min-width: 40rem; }
.tabla--panel td { vertical-align: top; }
.tabla--panel td:last-child, .tabla--panel th:last-child { font-family: var(--f-texto); }
.tabla--panel a:not(.btn):not(.enlace-lateral) { color: var(--tinta); text-decoration: underline; text-decoration-color: var(--linea-fuerte); text-underline-offset: 3px; }
.tabla--panel a:not(.btn):not(.enlace-lateral):hover { color: var(--acento); }
.celda-larga { max-width: 26rem; font-size: var(--fs-mini); color: var(--tinta-3); overflow-wrap: anywhere; }
.celda-acciones { white-space: nowrap; }
.celda-acciones .accion-en-linea + .accion-en-linea { margin-top: var(--e2); }
.matiz-suelto { color: var(--tinta-3); }

.registro { list-style: none; padding: 0; display: grid; border-top: var(--borde) solid var(--linea); }
.registro__entrada {
  display: grid;
  gap: 0.25rem var(--e4);
  padding-block: 0.6rem;
  border-bottom: var(--borde) solid var(--linea);
  font-size: var(--fs-sm);
}
@media (min-width: 56em) {
  .registro__entrada { grid-template-columns: 12rem minmax(0, 1fr) auto; align-items: baseline; }
}
.registro__cuando { font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--tinta-3); letter-spacing: 0.04em; }
.registro__que { color: var(--tinta-2); overflow-wrap: anywhere; }
.registro__que b { color: var(--tinta); font-weight: 500; }
.registro__objeto { margin-left: 0.5ch; color: var(--tinta-3); }
.registro__detalle { display: block; margin-top: 0.15rem; font-family: var(--f-mono); font-size: var(--fs-micro); color: var(--tinta-3); }
.registro__ip { font-size: var(--fs-micro); color: var(--tinta-3); }

/* reCAPTCHA v2 trae su propio marco: que no desborde en teléfonos estrechos. */
.g-recaptcha { max-width: 100%; overflow: hidden; }