/* El portal del cliente: la misma hoja que el panel de administración (panel.css), copiada porque el panel solo se sirve por la puerta
   de administración y el portal por la pública. Paleta y reglas de docs/STYLE.md de FactoryNodes (manual de IrisWeb). */
:root {
    --ink: #2B2140; --petal: #4A3B78; --gold: #D6A24C; --gold-ink: #412402; --gold-soft: #F6ECD9; --teal: #2F7A6B;
    --paper: #F6F3EE; --mist: #DCD6E8; --amber: #B8860B; --red: #A32D2D; --grey: #888780; --white: #fff;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--paper); display: flex; min-height: 100vh; }
a { color: var(--petal); }

.lateral { width: 200px; flex: none; background: var(--ink); color: var(--white); padding: 18px 0; display: flex; flex-direction: column; }
.lateral .marca { font: italic 20px Georgia, serif; padding: 0 18px 18px; }
.lateral .marca small { display: block; font: 12px "Segoe UI", sans-serif; color: var(--mist); }
.lateral a { color: var(--white); text-decoration: none; padding: 8px 18px; border-left: 3px solid transparent; }
.lateral a:hover { background: rgba(255,255,255,.06); }
.lateral a.activo { border-left-color: var(--gold); color: var(--gold); }
.lateral .salir { margin-top: auto; padding: 0 18px; }
.lateral .salir button { color: var(--white); border-color: rgba(255,255,255,.3); width: 100%; }

main { flex: 1; padding: 24px 32px; max-width: 1200px; }
main.solo { display: flex; align-items: center; justify-content: center; }
h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 16px; margin: 0 0 10px; }

.panel { background: var(--white); border: 1px solid var(--mist); border-radius: 7px; padding: 16px 18px; margin-bottom: 18px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.cifras { display: flex; gap: 28px; flex-wrap: wrap; }
.cifra span { display: block; color: var(--grey); font-size: 12px; }
.cifra strong { font-size: 20px; font-weight: 600; }
.malo { color: var(--red); }
.pendiente { color: var(--amber); }
.baneado { color: var(--red); font-weight: 600; }   /* un nodder despedido o un enlace baneado, con su motivo */
.gris { color: var(--grey); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--mist); vertical-align: top; }
th { font-weight: 600; color: var(--grey); font-size: 12px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr:last-child td { border-bottom: none; }

form.linea { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--grey); }
input, select { font: inherit; color: var(--ink); padding: 6px 8px; border: 1px solid var(--mist); border-radius: 7px; background: var(--white); min-width: 0; }
input:focus, select:focus { outline: 2px solid var(--gold); outline-offset: -1px; }
/* Una casilla con su texto al lado (aceptar las condiciones), no debajo como los demás campos. */
label.casilla { flex-direction: row; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink); }
label.casilla input { margin-top: 2px; }
button { font: inherit; padding: 6px 14px; border-radius: 7px; border: 1px solid var(--mist); background: transparent; color: var(--ink); cursor: pointer; }
button.primario { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: 600; }
a.boton { display: inline-block; padding: 6px 14px; border-radius: 7px; background: var(--gold); color: var(--gold-ink); font-weight: 600; text-decoration: none; }   /* la descarga del instalador */
button.secundario { background: var(--petal); border-color: var(--petal); color: var(--white); }
button.destructivo { border-color: var(--red); color: var(--red); }
button:hover { filter: brightness(.96); }

.aviso, .error { border-radius: 7px; padding: 10px 14px; margin-bottom: 16px; border: 1px solid var(--mist); background: var(--white); }
.aviso { border-left: 3px solid var(--teal); }
.error { border-left: 3px solid var(--red); color: var(--red); }
.token { font-family: Consolas, monospace; background: var(--gold-soft); border: 1px solid var(--gold); border-radius: 7px; padding: 10px 14px; word-break: break-all; }

.piloto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--grey); margin-right: 6px; vertical-align: 1px; }
.piloto.activo { background: var(--teal); }

.entrar { width: 320px; }
.entrar form { display: flex; flex-direction: column; gap: 12px; }
.entrar .marca { font: italic 26px Georgia, serif; margin-bottom: 4px; }

/* Formularios en dos columnas (Configuración, datos de facturación) y filas que se cambian en un desplegable (datos del cliente). */
table.formulario td { border-bottom: 0; vertical-align: middle; }
table.formulario td:first-child { white-space: nowrap; color: var(--grey); }
details summary { cursor: pointer; color: var(--grey); font-size: 13px; }
details[open] { margin-bottom: 6px; }
td form { display: inline-flex; }
.miga { margin: 0 0 4px; font-size: 13px; }

/* Solo del portal. */
.lateral .quien { padding: 0 18px 14px; color: var(--mist); font-size: 12px; overflow-wrap: anywhere; }
.entrar p { margin: 0; }