/* portal.css — SOLO lo específico del portal de cliente. Marca, tokens, cabecera, botones, tarjetas, alertas e insignias vienen de tokens.css/base.css/shell.css/componentes.css
   (copias byte a byte del shell canónico de motor/noratool/ui: mismo lenguaje visual que la ventana local de NoraTool). Ningún color suelto: solo tokens. */

.cabecera-interior { align-items: center; }
.cabecera-acciones { display: flex; flex-wrap: wrap; gap: var(--nora-e3); align-items: center; }
.entorno { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--nora-t-xs); font-weight: 700; letter-spacing: 0.06em; border: 1px solid var(--nora-borde); background: var(--nora-info-fondo); color: var(--nora-texto); }
.usuario { color: var(--nora-texto-suave); font-size: var(--nora-t-sm); overflow-wrap: anywhere; }

.encabezado-pagina { margin-bottom: var(--nora-e5); }
.encabezado-pagina p { color: var(--nora-texto-suave); margin-bottom: 0; }
.fila-titulo { display: flex; flex-wrap: wrap; gap: var(--nora-e3); align-items: center; justify-content: space-between; }
.fila-titulo h1, .fila-titulo h2 { margin-bottom: 0; }

/* ── oferta ── */
.oferta { display: grid; gap: var(--nora-e5); }
@media (min-width: 720px) { .oferta { grid-template-columns: 1fr 1fr; align-items: start; } }
.precio { display: flex; align-items: baseline; gap: var(--nora-e2); margin: var(--nora-e2) 0 var(--nora-e3); }
.precio .importe { font-size: 2.75rem; font-weight: 750; line-height: 1; }
.precio .periodo { color: var(--nora-texto-suave); font-weight: 600; }
.lista-marcas { list-style: none; padding: 0; margin: 0 0 var(--nora-e4); }
.lista-marcas li { position: relative; padding-left: 1.9em; margin-bottom: var(--nora-e2); }
.lista-marcas li::before { position: absolute; left: 0; top: 0; width: 1.4em; text-align: center; font-weight: 800; }
.lista-marcas.incluye li::before { content: "✓"; color: var(--nora-ok); }
.lista-marcas.no-incluye li::before { content: "✕"; color: var(--nora-error); }
.subtitulo { font-size: var(--nora-t-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--nora-texto-suave); margin: 0 0 var(--nora-e2); }
.nota-legal { font-size: var(--nora-t-xs); color: var(--nora-texto-suave); margin: var(--nora-e3) 0 0; }
.aviso-claude { border-left: 6px solid var(--nora-naranja); }

/* ── formularios ── */
.formulario { display: grid; gap: var(--nora-e3); }
.formulario .campo input { max-width: none; width: 100%; letter-spacing: normal; }
.formulario .campo input.codigo { letter-spacing: 0.08em; text-transform: uppercase; }
.formulario details { border: 1px dashed var(--nora-linea); border-radius: var(--nora-radio-sm); padding: var(--nora-e2) var(--nora-e3); }
.formulario summary { cursor: pointer; font-weight: 600; color: var(--nora-texto-suave); min-height: 32px; display: flex; align-items: center; }
.formulario details[open] summary { margin-bottom: var(--nora-e3); }
.mensaje { min-height: 1.5em; margin: 0; }
.mensaje.ok { color: var(--nora-ok); font-weight: 600; }
.mensaje.error { color: var(--nora-error); font-weight: 600; }
.boton.grande { min-height: 52px; font-size: var(--nora-t-lg); width: 100%; }
@media (min-width: 720px) { .boton.grande { width: auto; } }

/* ── cuenta ── */
.estado-cuenta { display: grid; gap: var(--nora-e3); }
.datos-cuenta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--nora-e4); margin: var(--nora-e3) 0; }
.datos-cuenta > div { background: var(--nora-fondo); border-radius: var(--nora-radio-sm); padding: var(--nora-e3) var(--nora-e4); }
.datos-cuenta dt { font-size: var(--nora-t-xs); color: var(--nora-texto-suave); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.datos-cuenta dd { margin: var(--nora-e1) 0 0; font-size: var(--nora-t-md); font-weight: 650; }
.pasos-instalacion { list-style: none; counter-reset: paso; padding: 0; margin: 0 0 var(--nora-e4); display: grid; gap: var(--nora-e3); }
.pasos-instalacion li { counter-increment: paso; display: flex; gap: var(--nora-e3); align-items: flex-start; margin: 0; }
.pasos-instalacion li::before { content: counter(paso); flex: 0 0 auto; width: 2em; height: 2em; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--nora-naranja); color: var(--nora-sobre-naranja); font-weight: 750; }
.selector { display: flex; flex-wrap: wrap; gap: var(--nora-e3); align-items: end; margin-bottom: var(--nora-e3); }
.selector label { font-weight: 650; display: block; margin-bottom: var(--nora-e1); }
.selector select { min-height: var(--nora-objetivo); padding: 6px 12px; font: inherit; border: 2px solid var(--nora-borde); border-radius: var(--nora-radio-sm); background: var(--nora-superficie); color: var(--nora-texto); }
.descarga-lista { display: grid; gap: var(--nora-e2); }
.descarga-lista .nombre-fichero { font-family: ui-monospace, Consolas, monospace; font-size: var(--nora-t-sm); overflow-wrap: anywhere; }

/* ── carga y esqueleto ── */
.cargando { display: grid; gap: var(--nora-e3); }

/* ── detalles técnicos (secundario) ── */
.tecnico { margin-top: var(--nora-e5); border: 1px solid var(--nora-linea); border-radius: var(--nora-radio); background: var(--nora-superficie); }
.tecnico > summary { cursor: pointer; padding: var(--nora-e3) var(--nora-e4); font-weight: 650; color: var(--nora-texto-suave); min-height: var(--nora-objetivo); display: flex; align-items: center; }
.tecnico .contenido { padding: 0 var(--nora-e4) var(--nora-e4); display: grid; gap: var(--nora-e4); }
.tecnico h3 { font-size: var(--nora-t-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--nora-texto-suave); margin-bottom: var(--nora-e2); }
.tecnico pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: var(--nora-t-xs)/1.5 ui-monospace, Consolas, monospace; background: var(--nora-fondo); padding: var(--nora-e3); border-radius: var(--nora-radio-sm); max-height: 20em; overflow: auto; }

.avisos-zona { padding-bottom: 0; }
.pie a { color: inherit; }