/* ==========================================================================
   CeooPay · layouts de página (portada, registro, panel)
   ========================================================================== */

.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }

/* ── Marca (emblema oficial + nombre) ── */
.marca { display: inline-flex; align-items: center; gap: .6rem; color: var(--texto); text-decoration: none; }
.marca svg { width: 2.15rem; height: auto; }
.marca .nombre { font-weight: 600; font-size: 1.2rem; letter-spacing: -.02em; }
.marca .por { display: block; font: 500 .6rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--oro-texto); margin-top: .2rem; }

/* ── Cabecera pública ── */
.cabecera { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--fondo) 92%, transparent); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--linea); }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 4.25rem; }
.nav-publica { display: flex; align-items: center; gap: var(--e-1); }
.nav-publica a:not(.boton) { color: var(--texto-2); text-decoration: none; font-size: var(--t-s); font-weight: 500; padding: var(--e-2) var(--e-3); border-radius: var(--r-2); }
.nav-publica a:not(.boton):hover { color: var(--texto); background: var(--superficie-2); }
.cabecera .acciones { display: flex; align-items: center; gap: var(--e-2); }
@media (max-width: 900px) { .nav-publica { display: none; } }
@media (max-width: 420px) { .cabecera .entrar { display: none; } .marca .por { display: none; } }

/* ── Portada: hero asimétrico ── */
.hero { padding-block: clamp(3rem, 2rem + 5vw, 6.5rem) var(--seccion); }
.hero .contenedor { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.hero h1 { font-size: var(--t-display); line-height: var(--interlinea-titulo); letter-spacing: var(--tracking-display); font-weight: 600; max-width: 12ch; }
.hero h1 em { font-style: normal; color: var(--mando); }
.hero .campana { margin-top: var(--e-5); font-size: var(--t-xl); font-weight: 500; letter-spacing: -.01em; display: flex; align-items: center; gap: var(--e-3); }
.hero .campana::before { content: ""; width: 2.5rem; height: 2px; background: var(--oro); }
.hero .bajada { margin-top: var(--e-4); max-width: var(--ancho-texto); color: var(--texto-2); font-size: var(--t-l); }
.hero .cta { margin-top: var(--e-6); display: flex; gap: var(--e-3); flex-wrap: wrap; align-items: center; }
.hero .cta .boton { min-height: 3.25rem; padding-inline: var(--e-6); font-size: var(--t-l); }
.hero .letra-chica { margin-top: var(--e-4); font-size: var(--t-s); color: var(--texto-3); display: flex; gap: var(--e-2); align-items: center; }
@media (max-width: 960px) { .hero .contenedor { grid-template-columns: 1fr; } .hero h1 { max-width: 14ch; } }

/* Instrumento: vista previa del producto hecha en HTML real, rotulada como ejemplo */
.instrumento { position: relative; background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--r-3); box-shadow: var(--sombra-2); overflow: hidden; }
.instrumento .barra { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-5); border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.instrumento .resumen { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--linea); }
.instrumento .resumen > div { padding: var(--e-4) var(--e-5); display: grid; gap: var(--e-1); }
.instrumento .resumen > div + div { border-left: 1px solid var(--linea); }
.instrumento .pie { padding: var(--e-3) var(--e-5); border-top: 1px solid var(--linea); background: var(--superficie-2); }
@media (max-width: 480px) {
  .instrumento .movimiento .detalle .metodo { display: none; }
  .instrumento .importe-grande { font-size: var(--t-xl); }
  .instrumento .resumen > div { padding-inline: var(--e-4); }
  .instrumento .movimiento { padding-inline: var(--e-4); }
}

/* ── Secciones de portada ── */
.seccion { padding-block: var(--seccion); border-top: 1px solid var(--linea); }
.seccion-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--e-6); align-items: end; margin-bottom: var(--e-8); }
.seccion-cabeza h2 { font-size: var(--t-3xl); letter-spacing: -.028em; line-height: 1.06; }
.seccion-cabeza p { color: var(--texto-2); font-size: var(--t-l); max-width: var(--ancho-texto); }
@media (max-width: 860px) { .seccion-cabeza { grid-template-columns: 1fr; margin-bottom: var(--e-6); } }

/* Cuatro verbos: lista con regla, no tarjetas */
.verbos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--texto); }
.verbos li { padding: var(--e-5) var(--e-5) var(--e-2) 0; display: grid; gap: var(--e-3); align-content: start; }
.verbos li + li { padding-left: var(--e-5); border-left: 1px solid var(--linea); }
.verbos .n { font: 500 var(--t-xs)/1 var(--f-mono); color: var(--texto-3); letter-spacing: .1em; }
.verbos h3 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); letter-spacing: -.03em; font-weight: 600; }
.verbos p { color: var(--texto-2); font-size: var(--t-m); }
.verbos .icono { color: var(--mando); width: 1.5rem; height: 1.5rem; }
@media (max-width: 900px) {
  .verbos { grid-template-columns: 1fr 1fr; }
  .verbos li:nth-child(3) { padding-left: 0; border-left: 0; }
  .verbos li:nth-child(n+3) { border-top: 1px solid var(--linea); }
}
@media (max-width: 520px) {
  .verbos { grid-template-columns: 1fr; }
  .verbos li, .verbos li + li { padding-left: 0; border-left: 0; }
  .verbos li + li { border-top: 1px solid var(--linea); }
}

/* Dos perfiles */
.perfiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--linea); border-radius: var(--r-3); overflow: hidden; background: var(--superficie); }
.perfiles > article { padding: clamp(1.5rem, 1rem + 2vw, 3rem); display: grid; gap: var(--e-4); align-content: start; }
.perfiles > article + article { border-left: 1px solid var(--linea); }
.perfiles h3 { font-size: var(--t-2xl); letter-spacing: -.025em; }
.perfiles .regla { width: 3rem; height: 3px; border-radius: 2px; background: var(--mando); }
.perfiles .negocio .regla { background: var(--oro); }
.perfiles ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-2); color: var(--texto-2); }
.perfiles li { display: flex; gap: var(--e-3); align-items: flex-start; }
.perfiles li::before { content: "—"; color: var(--texto-3); }
@media (max-width: 760px) { .perfiles { grid-template-columns: 1fr; } .perfiles > article + article { border-left: 0; border-top: 1px solid var(--linea); } }

/* Glosario de estados */
.glosario { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linea); }
.glosario > div { padding: var(--e-5) var(--e-5) var(--e-5) 0; border-bottom: 1px solid var(--linea); display: grid; gap: var(--e-2); align-content: start; }
.glosario > div:not(:nth-child(3n+1)) { padding-left: var(--e-5); border-left: 1px solid var(--linea); }
.glosario p { color: var(--texto-2); font-size: var(--t-s); }
@media (max-width: 860px) {
  .glosario { grid-template-columns: 1fr 1fr; }
  .glosario > div:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .glosario > div:nth-child(even) { padding-left: var(--e-5); border-left: 1px solid var(--linea); }
}
@media (max-width: 520px) { .glosario { grid-template-columns: 1fr; } .glosario > div:nth-child(even) { padding-left: 0; border-left: 0; } }

/* Preguntas */
.preguntas { display: grid; border-top: 1px solid var(--linea); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--e-4); align-items: center; padding: var(--e-5) 0; font-size: var(--t-l); font-weight: 500; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary .icono { transition: transform var(--dur-2) var(--curva-salida); color: var(--texto-3); }
.preguntas details[open] summary .icono { transform: rotate(180deg); }
.preguntas details > div { padding: 0 0 var(--e-5); color: var(--texto-2); max-width: 46rem; }

/* Cierre con CTA */
.cierre { background: var(--superficie-invertida); color: var(--texto-invertido); padding-block: var(--seccion); }
.cierre .contenedor { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: var(--e-6); align-items: end; }
.cierre h2 { font-size: var(--t-display); letter-spacing: var(--tracking-display); line-height: var(--interlinea-titulo); }
.cierre p { color: color-mix(in srgb, var(--texto-invertido) 78%, transparent); font-size: var(--t-l); margin-bottom: var(--e-5); }
.cierre .boton-primario { --b-fondo: var(--marca-crema); --b-texto: var(--marca-tinta); --b-borde: var(--marca-crema); min-height: 3.25rem; padding-inline: var(--e-6); font-size: var(--t-l); }
.cierre .boton-primario:hover { --b-fondo: #ffffff; --b-borde: #ffffff; }
:root[data-tema="oscuro"] .cierre .boton-primario { --b-fondo: var(--marca-tinta); --b-texto: var(--marca-crema); --b-borde: var(--marca-tinta); }
:root[data-tema="oscuro"] .cierre .boton-primario:hover { --b-fondo: #24212c; --b-borde: #24212c; }
@media (max-width: 860px) { .cierre .contenedor { grid-template-columns: 1fr; } }

/* Pie */
.pie-sitio { background: var(--marca-tinta); color: #c7c3cd; padding-block: var(--e-8) var(--e-6); font-size: var(--t-s); }
.pie-sitio .contenedor { display: grid; gap: var(--e-6); }
.pie-sitio .arriba { display: flex; justify-content: space-between; gap: var(--e-6); flex-wrap: wrap; align-items: flex-start; }
.pie-sitio .logo-oficial { width: min(100%, 17rem); }
.pie-sitio nav { display: flex; gap: var(--e-6); flex-wrap: wrap; }
.pie-sitio nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.pie-sitio a { color: #faf7f2; }
.pie-sitio .legal { border-top: 1px solid #2a2733; padding-top: var(--e-5); display: grid; gap: var(--e-2); color: #a29eab; max-width: 60rem; }
.pie-sitio .etiqueta { color: #a29eab; }

/* ── Registro ── */
.registro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100dvh - 2.25rem); }
.registro .formulario-lado { padding: var(--e-6) var(--margen) var(--e-8); display: grid; align-content: start; justify-items: center; }
.registro .formulario-marco { width: min(100%, 28rem); display: grid; gap: var(--e-6); }
.registro form { display: grid; gap: var(--e-5); }
.registro h1 { font-size: var(--t-3xl); letter-spacing: -.03em; line-height: 1.05; }
.registro .sub { color: var(--texto-2); margin-top: var(--e-2); }
.registro .contexto { background: var(--superficie-invertida); color: var(--texto-invertido); padding: var(--e-8) clamp(1.5rem, 1rem + 3vw, 4rem); display: grid; align-content: space-between; gap: var(--e-7); }
.registro .contexto h2 { font-size: var(--t-3xl); letter-spacing: -.03em; line-height: 1.06; max-width: 16ch; }
.registro .contexto ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-5); max-width: 30rem; }
.registro .contexto li { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); color: color-mix(in srgb, var(--texto-invertido) 80%, transparent); font-size: var(--t-s); }
.registro .contexto li strong { display: block; color: var(--texto-invertido); font-size: var(--t-m); font-weight: 500; }
.registro .contexto li .icono { color: var(--marca-oro); margin-top: .15rem; }
:root[data-tema="oscuro"] .registro .contexto li .icono { color: #7a5a26; }
.registro .contexto .etiqueta { color: color-mix(in srgb, var(--texto-invertido) 70%, transparent); }
.tipo-perfil { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); border: 0; padding: 0; margin: 0; }
.tipo-perfil legend { margin-bottom: var(--e-2); padding: 0; }
.tipo-perfil label { display: grid; gap: var(--e-1); padding: var(--e-4); border: 1px solid var(--borde-control); border-radius: var(--r-2); background: var(--superficie); cursor: pointer; font-size: var(--t-s); color: var(--texto-2); position: relative; }
.tipo-perfil label strong { color: var(--texto); font-size: var(--t-m); font-weight: 500; display: flex; gap: var(--e-2); align-items: center; }
.tipo-perfil input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.tipo-perfil label:has(input:checked) { border-color: var(--mando); box-shadow: 0 0 0 1px var(--mando); background: var(--mando-suave); }
.tipo-perfil label:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
.exito { display: grid; gap: var(--e-4); padding: var(--e-6); border: 1px solid var(--linea-fuerte); border-radius: var(--r-3); background: var(--superficie); }
.exito[hidden] { display: none; }
.exito .icono-grande { width: 2.75rem; height: 2.75rem; padding: .6rem; border-radius: 50%; background: var(--liquidado-fondo); color: var(--liquidado); }
@media (max-width: 900px) { .registro { grid-template-columns: 1fr; } .registro .contexto { padding-block: var(--e-7); } }

/* ── Panel autenticado: lateral + contenido ── */
.app { display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); min-height: calc(100dvh - 2.25rem); background: linear-gradient(90deg, var(--superficie) calc(var(--ancho-lateral) - 1px), var(--linea) calc(var(--ancho-lateral) - 1px) var(--ancho-lateral), transparent var(--ancho-lateral)); }
.lateral { position: sticky; top: 0; height: 100dvh; align-self: start; display: flex; flex-direction: column; gap: var(--e-6); padding: var(--e-5) var(--e-4); border-right: 1px solid var(--linea); background: var(--superficie); overflow-y: auto; }
.lateral nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lateral nav a { display: flex; align-items: center; gap: var(--e-3); min-height: 2.5rem; padding: 0 var(--e-3); border-radius: var(--r-2); color: var(--texto-2); text-decoration: none; font-size: var(--t-s); font-weight: 500; }
.lateral nav a:hover { background: var(--superficie-2); color: var(--texto); }
.lateral nav a[aria-current="page"] { background: var(--mando-suave); color: var(--mando); }
.es-negocio .lateral nav a[aria-current="page"] { background: var(--oro-suave); color: var(--oro-texto); }
.lateral nav .etiqueta { padding: 0 var(--e-3) var(--e-2); display: block; }
.lateral .abajo { margin-top: auto; display: grid; gap: var(--e-3); }
.principal { min-width: 0; display: grid; align-content: start; }
.barra-app { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-3) var(--margen); min-height: 4rem; border-bottom: 1px solid var(--linea); background: color-mix(in srgb, var(--fondo) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); flex-wrap: wrap; }
.barra-app .izq, .barra-app .der { display: flex; align-items: center; gap: var(--e-3); }
.barra-app .marca { display: none; }
.contenido { padding: var(--e-6) var(--margen) var(--e-9); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-6); max-width: 96rem; width: 100%; }
.titulo-pagina { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e-4); flex-wrap: wrap; }
.titulo-pagina h1 { font-size: var(--t-2xl); letter-spacing: -.025em; }
.titulo-pagina .sub { color: var(--texto-3); font-size: var(--t-s); margin-top: var(--e-1); }
.acciones-rapidas { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.rejilla-panel { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--e-5); align-items: start; }
.rejilla-panel > * { min-width: 0; }
.tabla-herramientas { display: flex; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--linea); }
.buscar { position: relative; flex: 1 1 14rem; max-width: 22rem; }
.buscar .icono-s { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.buscar .control { padding-left: 2.4rem; min-height: var(--alto-control-s); font-size: var(--t-s); }
.lista-alertas { list-style: none; margin: 0; padding: 0; }
.lista-alertas li { display: grid; grid-template-columns: auto 1fr; gap: var(--e-3); padding: var(--e-4) var(--e-5); border-top: 1px solid var(--linea); font-size: var(--t-s); color: var(--texto-2); }
.lista-alertas li:first-child { border-top: 0; }
.lista-alertas strong { display: block; color: var(--texto); font-weight: 500; font-size: var(--t-m); }
.lista-alertas .icono { margin-top: .15rem; }
.solo-movil { display: none; }
.nav-inferior { display: none; }

@media (max-width: 1100px) { .rejilla-panel { grid-template-columns: 1fr; } }
@media (max-width: 1024px) {
  .app { grid-template-columns: minmax(0, 1fr); background: none; }
  .lateral { display: none; }
  .barra-app .marca { display: inline-flex; }
  .contenido { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
  .nav-inferior { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; inset: auto 0 0 0; z-index: 30; background: var(--superficie); border-top: 1px solid var(--linea-fuerte); padding-bottom: env(safe-area-inset-bottom); }
  .nav-inferior a { display: grid; justify-items: center; gap: 2px; padding: var(--e-2) 0; min-height: 3.5rem; color: var(--texto-3); text-decoration: none; font-size: .6875rem; font-weight: 500; }
  .nav-inferior a[aria-current="page"] { color: var(--mando); }
  .es-negocio .nav-inferior a[aria-current="page"] { color: var(--oro-texto); }
}
@media (max-width: 760px) {
  .solo-escritorio { display: none !important; }
  .solo-movil { display: block; }
  .barra-app .perfil a { padding: 0 var(--e-3); }
}
@media (max-width: 480px) {
  .barra-app { flex-wrap: nowrap; padding-inline: var(--e-4); gap: var(--e-2); }
  .barra-app .notificaciones { display: none; }
  .barra-app .marca .nombre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .barra-app .izq, .barra-app .der { gap: var(--e-2); }
  .barra-app .perfil a { padding: 0 var(--e-3); }
}

/* ── Catálogo de componentes ── */
.catalogo { display: grid; gap: var(--e-8); padding-block: var(--e-7) var(--e-9); }
.catalogo section { display: grid; gap: var(--e-5); }
.catalogo h2 { font-size: var(--t-xl); }
.muestra { display: flex; gap: var(--e-3); flex-wrap: wrap; align-items: center; padding: var(--e-5); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-3); }
.muestra-rejilla { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); padding: var(--e-5); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-3); }
.paleta { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); }
.paleta div { border: 1px solid var(--linea); border-radius: var(--r-2); overflow: hidden; background: var(--superficie); font-size: var(--t-xs); }
.paleta i { display: block; height: 3.5rem; }
.paleta span { display: block; padding: var(--e-2) var(--e-3); font-family: var(--f-mono); color: var(--texto-2); }