/* Selector de tipo de negocio de la demo pública (WEB-INF/demo-negocio*.html).
   Cabecera y pie: los de createaccount-portal.css. Tokens de tokens.css; mobile-first. */
.dn-body { margin: 0; background: var(--white); color: var(--text); font-family: var(--font-sans); }
.dn-body *, .dn-body *::before, .dn-body *::after { box-sizing: border-box; }
.dn-body .ea-topbar { display: flex; align-items: center; }
.dn-body .ea-idioma-switch { display: inline-flex; overflow: hidden; }
.dn-body .ea-idioma-opcion { text-decoration: none; }

.dn-portal {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
    border-radius: 999px; background: var(--blue); color: var(--white);
    font-size: 14px; font-weight: 600; text-decoration: none;
}
.dn-portal:hover { background: var(--blue-dark); }

.dn-pagina { width: min(760px, 100% - 32px); margin: 0 auto; padding: 48px 0 16px; }
.dn-pagina h1 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.25rem); line-height: 1.15; }
.dn-intro { margin: 10px 0 28px; color: var(--muted); font-size: 1rem; line-height: 1.55; }

/* Una fila por negocio; al abrirla aparece el detalle y el botón */
.dn-lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.dn-lista li { border-bottom: 1px solid var(--line); }
.dn-negocio summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 64px; padding: 0 12px; margin: 0 -12px; border-radius: 10px;
    color: var(--ink); font-size: 1.05rem; font-weight: 600;
    list-style: none; cursor: pointer; transition: background .16s ease, color .16s ease;
}
.dn-negocio summary::-webkit-details-marker { display: none; }
.dn-negocio summary:hover { background: var(--soft); color: var(--blue-dark); }
.dn-negocio summary:active { background: var(--blue-soft); }
.dn-negocio summary:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 2px; }

/* Signo +/− dibujado con dos líneas */
.dn-signo { position: relative; flex: none; width: 14px; height: 14px; }
.dn-signo::before, .dn-signo::after {
    content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px;
    border-radius: 2px; background: currentColor; transition: transform .2s ease;
}
.dn-signo::after { transform: rotate(90deg); }
.dn-negocio[open] .dn-signo::after { transform: rotate(0deg); }
.dn-negocio[open] summary { color: var(--blue-dark); }

.dn-detalle { padding: 0 0 22px; animation: dn-abrir .2s ease; }
.dn-detalle p { margin: 0 0 6px; max-width: 60ch; color: var(--text); line-height: 1.55; }
.dn-detalle .dn-ejemplos { margin-bottom: 16px; color: var(--muted); font-size: .92rem; }
.dn-abrir {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px;
    border-radius: 999px; background: var(--blue); color: var(--white);
    font-weight: 600; text-decoration: none; transition: background .16s ease;
}
.dn-abrir:hover { background: var(--blue-dark); }
.dn-abrir:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 2px; }
@keyframes dn-abrir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
    .dn-pagina { padding-top: 32px; }
    .dn-abrir { width: 100%; }
    .dn-portal { padding: 0 14px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .dn-detalle { animation: none; }
    .dn-signo::before, .dn-signo::after, .dn-negocio summary { transition: none; }
}