:root{--tinta:#111;--suave:#666;--linea:#e2e2e2;--fondo:#f7f7f8;--acento:#0f4c81;--ok:#1b7f4b;--mal:#a32020;--aviso:#8a5a00}
html,body{margin:0;padding:0}
body{font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--tinta);background:var(--fondo);font-size:15px;line-height:1.45}
header.barra{background:#fff;border-bottom:1px solid var(--linea);padding:10px 18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
header.barra .marca{font-weight:700;color:var(--acento);text-decoration:none;font-size:17px}
header.barra nav a{color:var(--tinta);text-decoration:none;margin-inline-end:14px;font-size:14px}
header.barra nav a.activo{color:var(--acento);font-weight:600}
header.barra .quien{margin-inline-start:auto;font-size:13px;color:var(--suave)}
main{max-width:1180px;margin:0 auto;padding:18px}
h1{font-size:21px;margin:0 0 4px}
h2{font-size:17px;margin:22px 0 8px}
p.guia{color:var(--suave);margin:0 0 14px;font-size:14px}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:8px;padding:16px;margin-bottom:16px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
label{display:block;font-size:13px;color:var(--suave);margin:8px 0 3px}
input,select,textarea{width:100%;padding:8px 9px;border:1px solid var(--linea);border-radius:6px;font-size:14px;background:#fff;font-family:inherit}
textarea{min-height:64px}
button{background:var(--acento);color:#fff;border:0;border-radius:6px;padding:9px 14px;font-size:14px;cursor:pointer;margin-top:10px}
button.secundario{background:#fff;color:var(--acento);border:1px solid var(--acento)}
button.peligro{background:var(--mal)}
button.mini{padding:4px 8px;font-size:12px;margin:0;margin-inline-end:3px}
button:disabled{opacity:.5;cursor:default}
table{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
th,td{border-bottom:1px solid var(--linea);padding:7px 8px;text-align:start;vertical-align:top}
th{background:#fafafa;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--suave)}
td.dinero,th.dinero{text-align:end;white-space:nowrap}
.etiqueta{display:inline-block;padding:2px 7px;border-radius:10px;font-size:11px;background:#eef2f7;color:var(--acento)}
.etiqueta.ok{background:#e7f5ec;color:var(--ok)}
.etiqueta.mal{background:#fbeaea;color:var(--mal)}
.etiqueta.aviso{background:#fdf3e2;color:var(--aviso)}
.cifra{font-size:22px;font-weight:700}
.cifra small{display:block;font-size:12px;font-weight:400;color:var(--suave);text-transform:uppercase}
.mensaje{padding:10px 12px;border-radius:6px;margin:10px 0;font-size:14px;display:none}
.mensaje.ok{display:block;background:#e7f5ec;color:var(--ok)}
.mensaje.mal{display:block;background:#fbeaea;color:var(--mal)}
.pestanas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pestanas button{margin:0;background:#fff;color:var(--tinta);border:1px solid var(--linea)}
.pestanas button.activa{background:var(--acento);color:#fff;border-color:var(--acento)}
.seccion{display:none}
.seccion.visible{display:block}
.lineas{font-size:13px;border-top:1px dashed var(--linea);margin-top:10px;padding-top:8px}
.lineas div{display:flex;justify-content:space-between;padding:2px 0}
.lineas div.total{font-weight:700;font-size:15px;border-top:1px solid var(--linea);margin-top:6px;padding-top:6px}
.nota{font-size:12px;color:var(--suave)}
.fila{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.fila>div{flex:1;min-width:150px}

.mensaje.error{background:#fde8e8;border:1px solid #e57373;color:#8a1c1c}

/* pantallas nuevas: usan div id barra y div envoltura en vez de header y main */
.envoltura{max-width:1180px;margin:0 auto;padding:18px}
#barra{background:#fff;border-bottom:1px solid var(--linea);padding:10px 18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
#barra .marca{font-weight:700;color:var(--acento);text-decoration:none;font-size:17px}
#barra nav a{color:var(--tinta);text-decoration:none;margin-inline-end:14px;font-size:14px}
#barra nav a.activo{color:var(--acento);font-weight:600}
#barra .quien{margin-inline-start:auto;font-size:13px;color:var(--suave)}
.mensaje.error{display:block;background:#fbeaea;color:var(--mal);border:1px solid #e57373}
h3{font-size:15px;margin:16px 0 6px}
.rejilla .tarjeta{margin-bottom:0}
.grupo{border-top:1px dashed var(--linea);margin-top:14px;padding-top:4px}

/* Idiomas (i18n.js). La pagina no se ve hasta tener los textos en su idioma. */
html.i18n-cargando body{visibility:hidden}
select.idioma{width:auto;padding:3px 6px;font-size:13px;margin-inline-end:8px}
/* Direcciones, vuelos y folios dentro de texto en arabe: que no se inviertan. */
[dir=rtl] input,[dir=rtl] textarea{unicode-bidi:plaintext}
/* Portada: el selector de idioma a la vista, junto al titulo. */
.cabecera-portada{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.cabecera-portada h1{margin:0}
.idioma-portada{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--linea);border-radius:8px;padding:6px 10px}
.idioma-portada label{margin:0;font-size:13px;white-space:nowrap}
.idioma-portada select.idioma{margin:0;font-size:14px;padding:5px 8px}
/* hidden gana siempre, aunque la clase ponga display (rejilla, fila...). */
[hidden]{display:none !important}
/* Mi cuenta: elegir entrar con telefono o con correo. */
.eleccion{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:4px}
.eleccion label{display:flex;align-items:center;gap:6px;margin:0;font-size:14px;color:var(--tinta)}
.eleccion input{width:auto}
/* Mi cuenta: las dos opciones arriba, y avisos que no se esconden solos. */
.opciones-cuenta button{font-size:15px;padding:10px 16px}
.mensaje.aviso-fijo{display:block;background:#fdf3e2;color:var(--aviso)}
.campo-tarjeta{min-height:90px;margin:4px 0}
/* Portada de producto y alta de licenciatarios. */
.acciones-portada{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.acciones-portada .nota{flex-basis:100%;margin:0}
a.boton-enlace{display:inline-block;background:var(--acento);color:#fff;border-radius:6px;padding:10px 16px;font-size:15px;text-decoration:none;margin-top:10px}
a.boton-enlace.secundario{background:#fff;color:var(--acento);border:1px solid var(--acento)}
.fila-subdominio{display:flex;align-items:center;gap:6px}
.fila-subdominio input{flex:1}
.fila-subdominio .sufijo{color:var(--suave);font-size:14px;white-space:nowrap}
#pasos{font-size:14px;color:var(--tinta);padding-inline-start:20px}
#pasos li{margin-bottom:4px}
/* Marca del licenciatario y panel de la empresa. */
header.barra .marca img.logo,#barra .marca img.logo{height:28px;width:auto;display:block}
.colores{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end}
.colores label{margin-bottom:2px}
.colores input[type=color]{width:56px;height:38px;padding:2px}
.vista-previa{border:1px solid var(--linea);border-radius:8px;padding:12px;margin-top:10px}
.vista-previa .boton-falso{display:inline-block;border-radius:6px;padding:8px 14px;font-size:14px;margin-top:6px}
.logo-actual{max-height:60px;max-width:220px;display:block;margin:6px 0}