/* === Identidad Ananda (Maestro 05-identidad-grafica) =====================
   Tokens y marco tomados de motor-rolling/motor/tablero_plan.py (_CSS,
   líneas 12-60) + bloque .bienvenida/.bv- del login split de Portal IA
   (static/css/ananda.css:605-648), adaptado a "Portal OPS Abasto". */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;600;700;800&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --ananda-lila:#C98BDB; --ananda-verde:#C5E86C; --ananda-negro:#000000; --ananda-blanco:#FFFFFF;
  --ananda-azul-soft:#EAF2FB; --ananda-azul:#AECBEC; --ananda-azul-strong:#4F7FBF; --ananda-azul-text:#2B4A73;
  --ananda-gris-soft:#F4F5F7; --ananda-gris:#E6E9EE; --ananda-gris-strong:#C4CAD3;
  --ananda-ambar:#F9A825; --ananda-ambar-soft:#FFF8E1;
  --fuente-titulos:'Bricolage Grotesque', system-ui, sans-serif;
  --fuente-cuerpo:'Poppins', system-ui, sans-serif;
}

* { box-sizing:border-box; }
body { font-family:var(--fuente-cuerpo); color:var(--ananda-negro); margin:0; background:var(--ananda-gris-soft); }
h1, h2, h3, .titulo { font-family:var(--fuente-titulos); font-weight:700; }

/* Utilidad: enlace de salto para lectores de teclado/pantalla */
.skip-link { position:absolute; left:-999px; top:auto; background:var(--ananda-lila); color:var(--ananda-negro);
  padding:10px 16px; border-radius:0 0 8px 0; font-weight:600; z-index:1000; }
.skip-link:focus { left:0; top:0; }
:focus-visible { outline:3px solid var(--ananda-azul-text); outline-offset:2px; }

/* Encabezado de marca autenticado: barra blanca, logo negro, borde inferior lila */
header.ananda { display:flex; align-items:center; gap:12px; background:var(--ananda-blanco);
  border-bottom:3px solid var(--ananda-lila); padding:12px 24px; }
header.ananda img { height:30px; }
header.ananda .titulo { font-family:var(--fuente-titulos); font-weight:700; font-size:19px;
  letter-spacing:.01em; color:var(--ananda-negro); }

/* Navegación — el portal ya trae 10 páginas: el menú DEBE envolver en vez
   de aplastarse/desbordarse (hallazgo UX de Ulises 2026-07-23). Los links
   no se parten (nowrap por link) pero la barra sí baja de renglón. */
.nav { display:flex; align-items:center; flex-wrap:wrap; gap:0 2px; background:var(--ananda-blanco);
  border-bottom:2px solid var(--ananda-lila); padding:0 16px; }
.nav a { display:inline-block; padding:10px 11px; font-size:13.5px; font-weight:500; color:var(--ananda-negro);
  white-space:nowrap; text-decoration:none; border-bottom:3px solid transparent;
  transition:color .15s, border-color .15s; }
.nav a:hover { color:var(--ananda-azul-strong); border-bottom-color:var(--ananda-lila); }
.nav a.activo { border-bottom-color:var(--ananda-lila); color:var(--ananda-negro); font-weight:600; }
.nav .nav-usuario { margin-left:auto; font-size:12.5px; color:#5B6470; padding-left:10px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.nav a.salir { color:var(--ananda-azul-text); font-size:13px; }
.nav a.salir:hover { color:#c00; border-bottom-color:transparent; }
/* En pantallas angostas el usuario baja a su propio renglón sin empujar links */
@media (max-width: 760px) {
  .nav .nav-usuario { margin-left:0; flex-basis:100%; padding:4px 0 8px; }
}

/* Ancho: las páginas de datos tienen tablas anchas y nombres largos; 1100px
   dejaba franjas vacías enormes en monitores grandes (hallazgo Ulises
   2026-07-23). 1440px aprovecha el espacio sin que las líneas se vuelvan
   incómodas de leer. */
main { padding:20px 32px; max-width:1440px; margin:0 auto; }
.tarjeta { background:var(--ananda-blanco); border-radius:12px; padding:16px 20px; margin-bottom:16px;
  box-shadow:0 1px 4px rgba(0,0,0,.08); }
.tarjeta h2, .tarjeta h3 { margin:0 0 12px; }

/* Pie de página global (Global Constraint, todas las páginas): el universo
   del portal es SIEMPRE SKUs con forecast, grupos 101/102/106, moneda MXP. */
.pie-universo { max-width:1100px; margin:0 auto; padding:12px 24px 24px; font-size:12px; color:#5B6470; }

/* Tarjetas KPI (portadas de motor-rolling/motor/tablero_plan.py: .tarjetas/.card) */
.tarjetas { display:flex; gap:14px; flex-wrap:wrap; margin:0 0 16px; }
.card { flex:1 1 200px; min-width:180px; border-radius:16px; padding:14px 18px; background:var(--ananda-blanco);
  border:1px solid var(--ananda-gris); border-top:3px solid var(--ananda-gris-strong);
  box-shadow:0 2px 10px rgba(201,139,219,.12); }
/* El número héroe: 1.5rem entra sin cortar los montos grandes ($41,111,968)
   en tarjetas de ~180px (hallazgo Ulises 2026-07-23: se cortaban a 2rem). */
.card .n { font-size:1.5rem; font-weight:700; font-variant-numeric:tabular-nums;
  font-family:var(--fuente-titulos); line-height:1.15; overflow-wrap:anywhere; }
.card.rojo { border-top-color:#c0392b; } .card.rojo .n { color:#c0392b; }
.card.amarillo { border-top-color:#8a6d00; } .card.amarillo .n { color:#8a6d00; }
.card.lila { border-top-color:var(--ananda-lila); } .card.lila .n { color:var(--ananda-negro); }
.card.verde { border-top-color:#2e7d32; } .card.verde .n { color:#2e7d32; }

.estado-corrida { font-size:13px; color:#33373d; background:var(--ananda-azul-soft); border-radius:8px;
  padding:8px 14px; margin:0 0 16px; display:inline-block; }
.estado-corrida.ambar { background:var(--ananda-ambar-soft); color:#6b4a00; }

/* Dashboard de Inicio (Ulises 2026-07-23): UNA gráfica por renglón, ancha y
   bajita — se leen bien sin ser enormes (viewBox ~1160x260, escala al ancho
   del contenedor). */
.dash-graficas { display:flex; flex-direction:column; gap:16px; margin-bottom:16px; }
.dash-graficas .grafica { margin:0; }
.dash-graficas .grafica h2 { font-size:1.05rem; }
/* Las gráficas del dashboard ESCALAN al ancho de su tarjeta (viewBox
   conserva proporción); NO llevan el min-width de las tablas — por eso NO
   usan .scroll-x, para que no aparezca un scroll interno que las recorta
   (hallazgo Ulises 2026-07-23). */
.dash-graficas .grafica-wrap { width:100%; overflow:hidden; }
.dash-graficas svg { width:100%; height:auto; min-width:0; display:block; }
.leg-rojo { color:#c0392b; } .leg-azul { color:#2B4A73; }

.boton-baja { background:#FDECEA; color:#8A1C13; border:1px solid #F5C6C0;
  border-radius:8px; padding:.3rem .7rem; font-size:.85rem; cursor:pointer;
  font-family:var(--fuente-cuerpo); }
.boton-baja:hover { background:#f8d7d2; }
form.filtros { align-items:flex-end; }

.accesos { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.accesos .boton { display:inline-block; padding:10px 18px; border-radius:10px; background:var(--ananda-lila);
  color:var(--ananda-negro); font-weight:600; text-decoration:none; font-size:14px; }
.accesos .boton:hover { filter:brightness(.97); }

table { width:100%; border-collapse:collapse; margin-top:.6rem; font-size:.92rem; }
table th, table td { padding:6px 8px; border-bottom:1px solid var(--ananda-gris); text-align:left; }
table td.num, table th.num { text-align:right; font-variant-numeric:tabular-nums; }
/* Encabezado de tabla verde sticky — mismo lenguaje que los tableros
   embebidos (hallazgo UI/UX 2026-07-23: el shell y los tableros se sentían
   como dos productos). Ayuda a leer tablas largas sin perder los títulos. */
table thead th { background:var(--ananda-verde); color:#111; position:sticky; top:0; z-index:2;
  white-space:nowrap; }
/* Tablas anchas (stock seguridad 13 col, gobernanza): scroll horizontal
   propio, el body nunca se desborda. */
.scroll-x table { min-width:720px; }

/* ===== Alertas · Quiebres futuros (Task 4) ===== */
.anc { background:color-mix(in srgb, var(--ananda-lila) 55%, #fff); color:var(--ananda-negro);
  font-weight:700; border-radius:8px; padding:.05rem .45rem; font-size:.78em; margin-left:4px; }
.badge-estimado { background:color-mix(in srgb, var(--ananda-lila) 55%, #fff); color:var(--ananda-negro);
  font-weight:700; border-radius:8px; padding:.05rem .45rem; font-size:.78em; margin-left:4px; }
.filtros { display:flex; gap:20px; flex-wrap:wrap; margin-top:10px; }
.filtros label { font-size:13px; color:#33373d; display:flex; flex-direction:column; gap:4px; }
.filtros select, .filtros input[type="date"], .input-ancho { padding:6px 8px; border-radius:8px;
  border:1px solid var(--ananda-gris-strong); font-family:var(--fuente-cuerpo); }
/* Campo de texto largo (correo en /admin). Estaba como `style=` en línea y la
   CSP (style-src 'self') lo descartaba: el campo se veía sin formato. */
.input-ancho { min-width:260px; }
/* Cuenta dueña del portal: no se puede quitar ni degradar (allowlist.ADMIN_PERPETUO). */
.candado-perpetuo { font-size:12.5px; color:var(--ananda-azul-text);
  background:var(--ananda-azul-soft); border-radius:999px; padding:2px 9px; white-space:nowrap; }
/* 🚢 SKU que viene en un contenedor -> enlaza a su seguimiento. Mismo look que
   en la Ficha 360° (ficha.css) para que se reconozca igual en todo el portal.
   Siempre lleva el CÓDIGO junto al icono: la identidad no depende del emoji. */
.barco { display:inline-block; background:var(--ananda-verde); color:#111;
  font-size:12px; font-weight:600; border-radius:999px; padding:1px 8px;
  margin-left:5px; text-decoration:none; white-space:nowrap; }
.barco:hover, .barco:focus { text-decoration:underline; }
.banda-vencidos { border-left:5px solid #c0392b; }
.banda-vencidos h2 { color:#c0392b; }
/* Recién vencidos (aún accionable): naranja, se distingue del rojo "agua
   pasada" (separador pedido por Ulises 2026-07-23). */
.banda-recientes { border-left:5px solid #E8820C; }
.banda-recientes h2 { color:#B4650A; }
.banda-estimados { border-left:5px solid var(--ananda-gris-strong); background:var(--ananda-gris-soft); }
h2 .conteo { font-family:var(--fuente-cuerpo); font-weight:600; font-size:13px;
  color:#5B6470; margin-left:8px; }
td.num.sobre-umbral, th.num.sobre-umbral { color:#c0392b; font-weight:700; }
td.nombre { max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Línea de tiempo — LISTA compacta por mes (antes: mini-tabla de 3 columnas
   que truncaba el monto en tarjetas angostas, hallazgo Ulises 2026-07-23).
   Cada ítem: SKU + monto en un renglón (el monto nunca se corta, va a la
   derecha), la fecha en una línea chica abajo. */
.timeline .meses-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:14px; margin-top:8px; align-items:start; }
.timeline .mes-col { background:var(--ananda-gris-soft); border-radius:10px; padding:10px 12px; }
.timeline .mes-col h3 { margin:0 0 6px; font-size:14px; display:flex; align-items:center; gap:6px; }
.timeline .mes-conteo { font-family:var(--fuente-cuerpo); font-weight:600; font-size:11px;
  color:#5B6470; background:var(--ananda-gris); border-radius:20px; padding:1px 8px; }
.mes-lista { list-style:none; margin:0; padding:0; }
.mes-lista li { display:grid; grid-template-columns:1fr auto; gap:0 8px; align-items:baseline;
  padding:5px 0; border-bottom:1px solid var(--ananda-gris); }
.mes-lista li:last-child { border-bottom:0; }
.mes-lista .mi-sku { font-weight:600; text-decoration:none; color:var(--ananda-azul-text); }
.mes-lista .mi-monto { text-align:right; font-weight:700; white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.mes-lista .mi-monto.sobre-umbral { color:#c0392b; }
.mes-lista .mi-meta { grid-column:1 / -1; font-size:11.5px; color:#5B6470; }
.timeline .sin-datos { color:#5B6470; font-size:13px; margin:0; }

/* ===== Venta Perdida (Rama 2) + utilidades CSP-safe ===== */
/* .scroll-x reemplaza los style="overflow-x:auto" inline: la CSP del portal
   (style-src SIN unsafe-inline) bloquea atributos style= en el navegador. */
.scroll-x { overflow-x:auto; }
.scroll-x svg { min-width:640px; width:100%; height:auto; display:block; }
.iframe-tablero { width:100%; height:80vh; border:0; }
.badge-rama2 { background:color-mix(in srgb, #c0392b 18%, #fff); color:#8A1C13;
  font-weight:700; border-radius:8px; padding:.05rem .45rem; font-size:.78em; margin-left:4px; }
.nota-metodo { color:#5B6470; font-size:13px; margin:8px 0 0; }
.nota-criterios p { color:#33373d; font-size:14px; margin:0; }
.sin-datos { color:#5B6470; font-size:13px; margin:0; }
.badge-sin-presupuesto { background:var(--ananda-gris-soft); color:#5B6470;
  border:1px dashed var(--ananda-gris-strong); font-weight:700; border-radius:8px;
  padding:.05rem .45rem; font-size:.72em; margin-left:4px; white-space:nowrap; }
.chip-descontinuado { background:color-mix(in srgb, #c0392b 14%, #fff); color:#8A1C13;
  border-radius:8px; padding:.05rem .45rem; font-size:.72em; margin-left:6px; white-space:nowrap; }
.chip-sin-clasif { background:#c0392b; color:#fff; font-weight:700;
  border-radius:8px; padding:.05rem .45rem; font-size:.72em; margin-left:6px; white-space:nowrap; }
.bitacora { background:var(--ananda-gris-soft); border:1px solid var(--ananda-gris);
  border-radius:10px; padding:12px 14px; font-size:12px; line-height:1.5;
  overflow-x:auto; white-space:pre-wrap; word-break:break-word; max-height:420px; overflow-y:auto; }

/* ===== Pantalla de bienvenida (pre-login) — split-screen, marca Ananda ===== */
.bienvenida { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); min-height:100dvh; }
.bienvenida .bv-left { display:flex; flex-direction:column; padding:32px 40px; }
.bienvenida .bv-brand { display:flex; align-items:center; gap:10px; }
.bienvenida .bv-brand img { height:32px; }
.bienvenida .bv-tag { font-family:var(--fuente-titulos); font-weight:600; font-size:12px; color:var(--ananda-negro);
  background:var(--ananda-lila); padding:3px 9px; border-radius:999px; }
.bienvenida .bv-body { flex:1; display:flex; flex-direction:column; justify-content:center; max-width:380px; margin:0 auto; width:100%; }
.bienvenida .bv-eyebrow { font-family:var(--fuente-titulos); font-weight:600; font-size:13px; letter-spacing:.03em; color:var(--ananda-azul-text); margin:0 0 6px; }
.bienvenida h1 { font-family:var(--fuente-titulos); font-weight:800; font-size:clamp(26px,4vw,36px); line-height:1.1;
  letter-spacing:-.02em; margin:0 0 14px; color:var(--ananda-negro); }
.bienvenida .bv-sub { font-size:15px; line-height:1.6; color:#33373d; margin:0 0 26px; }
.bienvenida .bv-error { background:#FDECEA; color:#8A1C13; border:1px solid #F5C6C0;
  border-radius:10px; padding:10px 14px; font-size:14px; margin:0 0 14px; }
.bienvenida .bv-cta-local { background:var(--ananda-gris-soft); color:var(--ananda-negro);
  border:1px dashed var(--ananda-gris-strong); box-shadow:none; margin-top:10px; }
.bienvenida .bv-local-nota { font-size:12px; color:#8A6D00; background:#FFF7DF;
  border-radius:8px; padding:6px 10px; margin:8px 0 0; }
.banda-modo-local { background:#FFF3CD; color:#6b4a00; border-bottom:1px solid #E6D9A8;
  padding:6px 24px; font-size:13px; font-weight:600; }
.bienvenida .bv-cta { display:flex; align-items:center; justify-content:center; gap:11px; width:100%;
  background:var(--ananda-lila); color:var(--ananda-negro); font-family:var(--fuente-titulos); font-weight:700; font-size:16px;
  border:none; border-radius:12px; padding:15px 22px; min-height:54px; cursor:pointer; text-decoration:none;
  box-shadow:0 8px 24px -10px color-mix(in srgb, var(--ananda-lila) 85%, #000); transition:transform .15s, filter .15s; }
.bienvenida .bv-cta:hover { filter:brightness(.97); transform:translateY(-1px); }
.bienvenida .bv-cta:focus-visible { outline:3px solid var(--ananda-azul-text); outline-offset:2px; }
.bienvenida .bv-cta .ms { width:20px; height:20px; flex:0 0 auto; display:block; }
.bienvenida .bv-secure { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:14px; font-size:12.5px; color:#5B6470; }
.bienvenida .bv-secure svg { width:15px; height:15px; flex:0 0 auto; }
.bienvenida .bv-feats { list-style:none; margin:28px 0 0; padding:22px 0 0; border-top:1px solid var(--ananda-gris); display:grid; gap:13px; }
.bienvenida .bv-feat { display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:#33373d; line-height:1.4; }
.bienvenida .bv-feat .ck { width:22px; height:22px; border-radius:7px; flex:0 0 auto; display:grid; place-items:center;
  background:color-mix(in srgb, var(--ananda-verde) 40%, #fff); }
.bienvenida .bv-feat .ck svg { width:13px; height:13px; stroke:var(--ananda-negro); fill:none; stroke-width:2.4; }
.bienvenida .bv-feat strong { font-family:var(--fuente-titulos); font-weight:700; }
.bienvenida .bv-foot { font-size:12px; color:#5B6470; padding-top:20px; }
/* panel derecho: arte abstracto en colores Ananda (CSS puro, sin imágenes) */
.bienvenida .bv-right { position:relative; overflow:hidden;
  background:
    radial-gradient(42rem 30rem at 18% 22%, color-mix(in srgb, var(--ananda-lila) 78%, #fff), transparent 60%),
    radial-gradient(40rem 30rem at 88% 30%, color-mix(in srgb, var(--ananda-azul) 82%, #fff), transparent 58%),
    radial-gradient(46rem 34rem at 70% 92%, color-mix(in srgb, var(--ananda-verde) 70%, #fff), transparent 60%),
    radial-gradient(38rem 30rem at 25% 88%, color-mix(in srgb, var(--ananda-lila) 55%, #fff), transparent 60%),
    linear-gradient(135deg, #EEF3FB, #F7EFFA); }
/* ===== Contenedores (Task 4): ciclo de 6 etapas + detalle plegable ===== */
.etapas-ciclo { display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:12px 0; padding:0; }
.etapas-ciclo li { flex:1 1 100px; text-align:center; font-size:12px; font-weight:600;
  padding:6px 8px; border-radius:8px; background:var(--ananda-gris-soft); color:#5B6470;
  border:1px solid var(--ananda-gris); }
.etapas-ciclo li.etapa-hecha { background:color-mix(in srgb, var(--ananda-verde) 45%, #fff);
  color:#1f3d00; border-color:var(--ananda-verde); }
.etapas-ciclo li.etapa-actual { background:var(--ananda-lila); color:var(--ananda-negro);
  border-color:var(--ananda-lila); font-weight:700; }
.contenedor-detalle { margin-top:10px; }
.contenedor-detalle summary { cursor:pointer; font-weight:600; color:var(--ananda-azul-text); }
.contenedor-detalle[open] summary { margin-bottom:8px; }
.historico-contenedores summary { cursor:pointer; font-weight:700; font-family:var(--fuente-titulos); }
.historico-contenedores[open] summary { margin-bottom:12px; }
.contenedor-historico-item { padding:10px 0; border-top:1px solid var(--ananda-gris); }
.contenedor-historico-item:first-of-type { border-top:0; }
.contenedor-historico-item h3 { margin:0 0 4px; font-size:15px; }
.form-etapa { margin-top:12px; }

/* ===== Método plegable de Venta Perdida ("¿Cómo se calcula?") =====
   Mismo patrón <details>/<summary> NATIVO que .historico-contenedores (la CSP
   del portal prohíbe <script>, on*= y style= en línea, así que el plegable no
   lleva una línea de JS). */
.metodo-vp summary { cursor:pointer; font-weight:700; font-family:var(--fuente-titulos);
  font-size:1.05rem; }
.metodo-vp[open] summary { margin-bottom:12px; }
.metodo-vp h3 { margin:18px 0 6px; font-size:15px; }
.metodo-vp p, .metodo-vp li { font-size:14px; line-height:1.55; }
.metodo-vp ul, .metodo-vp ol { margin:6px 0; padding-left:22px; }
.metodo-vp li { margin-bottom:4px; }
.metodo-vp code { background:var(--ananda-gris-soft); border-radius:5px; padding:1px 4px;
  font-size:12.5px; }
.metodo-vp .formula { background:var(--ananda-gris-soft); border-left:4px solid var(--ananda-lila);
  border-radius:8px; padding:10px 14px; margin:10px 0; font-weight:600; }
.metodo-vp .ejemplo { background:var(--ananda-azul-soft); border-radius:10px;
  padding:12px 14px; margin:12px 0; }
.metodo-vp .ejemplo h4 { font-family:var(--fuente-titulos); font-size:14px; margin:0 0 6px; }
.metodo-vp .ejemplo table { margin-top:4px; }
.metodo-vp .ejemplo .resultado { margin:8px 0 0; font-weight:600; }
.metodo-vp .no-entra { color:#8A1C13; }
.metodo-vp .si-entra { color:#1f3d00; font-weight:600; }

.bienvenida .bv-right::before { content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(20rem 20rem at 60% 40%, color-mix(in srgb, var(--ananda-azul-strong) 60%, transparent), transparent 70%),
    radial-gradient(16rem 16rem at 35% 60%, color-mix(in srgb, var(--ananda-lila) 70%, transparent), transparent 70%);
  filter:blur(40px); opacity:.85; mix-blend-mode:multiply; }
.bienvenida .bv-ov { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:40px; }
.bienvenida .bv-ov-tag { font-family:var(--fuente-titulos); font-weight:800; font-size:clamp(22px,3vw,30px); color:var(--ananda-negro);
  letter-spacing:-.02em; text-shadow:0 1px 12px rgba(255,255,255,.45); margin:0 0 4px; }
.bienvenida .bv-ov-sub { font-size:14px; color:#1f2937; max-width:24em; margin:0; }
@media (max-width:860px) {
  .bienvenida { grid-template-columns:1fr; }
  .bienvenida .bv-right { display:none; }
  .bienvenida .bv-left { padding:24px 20px;
    background:
      radial-gradient(34rem 22rem at 110% -6%, color-mix(in srgb, var(--ananda-lila) 34%, #fff), transparent 60%),
      radial-gradient(30rem 22rem at -10% 108%, color-mix(in srgb, var(--ananda-verde) 40%, #fff), transparent 58%); }
  .bienvenida .bv-body { max-width:420px; }
}

/* Sello "oficial" de la ventana de venta perdida que manda en el reporte
   (las dos ventanas se muestran juntas desde 2026-07-28). */
.chip-oficial { background:var(--ananda-verde); color:#111; font-size:11.5px;
  font-weight:700; border-radius:999px; padding:1px 8px; margin-left:5px;
  white-space:nowrap; }