/* ═══════════════════════════════════════════════════════════════════════════
   VIVERO · Reportes — LA LÍNEA DE LUJO (2026-09-21)
   Visión Integral de Ventas por Ejecutivo, Red de clientes y Operadores (app7).
   ───────────────────────────────────────────────────────────────────────────
   El concepto: el vivero, donde crece lo que se siembra. Cada vista abre con una foto de
   vivero (de la semilla al invernadero) y su título en Marcellus; todo lo demás, en tinta,
   dentro del libro de marca: tinta #1A2633, deep #005565, teal #006D82, salvia #7D9B5B
   (sólo relleno), crema #EADFCE y blanco; ocre #8A6A2F y rojo #B3261E como andamiaje.
   Sin negrita ni itálica. Velo de foto de 0 a 45 %. Una sola sombra.
   Se carga DESPUÉS de vivero-aria-lujo.css (la paleta general de Tailwind en tinta).
   ES REVERSIBLE: se borran sus <link>/<script> en index.html.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{ --v-tinta:#1A2633; --v-hondo:#141D27; --v-hoja:#222E3A; --v-deep:#005565; --v-teal:#006D82; --v-salvia:#7D9B5B; --v-crema:#EADFCE;
  --v-crema70:rgba(234,223,206,.70); --v-filete:rgba(234,223,206,.16); --v-filete-s:rgba(234,223,206,.09);
  --v-glare:Marcellus, 'PP Fragment Glare', Georgia, serif; --v-sans:Figtree, 'PP Fragment Sans', Inter, system-ui, sans-serif;
  --v-sombra:0 30px 70px -18px rgba(26,38,51,.62); }

/* ── 1 · Suelo, letra y peso ─────────────────────────────────────────────── */
html.vivero-lujo body{ background:var(--v-tinta) !important; color:var(--v-crema) !important; font-family:var(--v-sans) !important; }
html.vivero-lujo body *{ font-weight:400 !important; font-style:normal !important; }
html.vivero-lujo h1, html.vivero-lujo h2, html.vivero-lujo h3, html.vivero-lujo h4, html.vivero-lujo .font-display{ font-family:var(--v-glare) !important; letter-spacing:.01em !important; }
html.vivero-lujo .font-mono{ font-family:ui-monospace, Menlo, monospace !important; }
#main-app, #main-app > main{ background:var(--v-tinta) !important; }
html.vivero-lujo ::-webkit-scrollbar-thumb{ background:rgba(234,223,206,.18); }
html.vivero-lujo *{ scrollbar-color:rgba(234,223,206,.18) transparent; }

/* ── 2 · El login: el invernadero ────────────────────────────────────────── */
#login-screen{ background-image:url('https://images.unsplash.com/photo-1659937795629-fc5f7b6ceef4?q=85&w=2400&auto=format&fit=crop') !important;
  background-position:center 62% !important; }
#login-screen > .absolute.inset-0{ background:linear-gradient(180deg, rgba(26,38,51,.18) 0%, rgba(26,38,51,.18) 45%, rgba(26,38,51,.45) 100%) !important; }
#login-screen .glass-box{ background:rgba(26,38,51,.45) !important; border:1px solid rgba(255,255,255,.22) !important; border-radius:18px !important;
  box-shadow:var(--v-sombra) !important; backdrop-filter:blur(18px) !important; -webkit-backdrop-filter:blur(18px) !important; max-width:360px !important; }
#login-screen .glass-box > img:not(.viv-marca){ display:none !important; }
#login-screen .viv-marca{ display:block; width:44px; height:44px; margin:0 auto .9rem; }
#login-screen h1{ font-family:var(--v-glare) !important; font-size:2.6rem !important; letter-spacing:.2em !important; padding-left:.2em; line-height:1 !important; color:#FFFFFF !important; text-shadow:none !important; }
#login-screen h1 + p{ margin-top:.7rem !important; margin-bottom:1.6rem !important; font-size:.64rem !important; letter-spacing:.34em !important; color:rgba(255,255,255,.85) !important; }
#login-screen .viv-sigla{ display:block; margin:.2rem 0 1.4rem; font-size:.72rem; line-height:1.45; color:rgba(255,255,255,.80); }
#login-screen .login-input{ background:#FFFFFF !important; color:var(--v-tinta) !important; border-radius:99px !important; border:1px solid transparent !important; }
#login-screen .login-input::placeholder{ color:rgba(26,38,51,.55) !important; opacity:1; }
#login-screen .login-input:focus{ border-color:var(--v-teal) !important; box-shadow:0 0 0 3px rgba(0,109,130,.25) !important; }
#login-screen .material-icons-outlined.text-oro-700, #login-screen form .text-slate-400{ color:var(--v-deep) !important; }
#login-screen button[type=submit]{ background:var(--v-deep) !important; animation:none !important; border-radius:99px !important; letter-spacing:.18em !important;
  box-shadow:none !important; transform:none !important; }
#login-screen button[type=submit]:hover{ background:var(--v-teal) !important; }
#login-screen .text-amber-200, #login-screen .text-amber-300{ color:var(--v-crema) !important; }
#login-screen hr{ border-color:rgba(255,255,255,.22) !important; }

/* ── 3 · El riel ─────────────────────────────────────────────────────────── */
#main-sidebar.bg-oro-insignia{ background:var(--v-hondo) !important; animation:none !important; border-right:1px solid rgba(234,223,206,.10) !important; box-shadow:none !important; }
#main-sidebar > div:first-child{ padding:2rem 1.2rem 1.1rem !important; border-bottom-color:rgba(234,223,206,.10) !important; }
#main-sidebar > div:first-child > .absolute{ display:none; }
#main-sidebar > div:first-child > img:not(.viv-logo){ display:none !important; }
#main-sidebar .viv-logo{ display:block; height:36px; width:auto; margin:0 auto .85rem; }
#main-sidebar h2{ font-family:var(--v-sans) !important; font-size:.66rem !important; letter-spacing:.3em !important; text-transform:uppercase; color:var(--v-crema70) !important; }
#main-sidebar .viv-sigla{ display:block; margin-top:.45rem; font-size:.62rem; line-height:1.4; color:rgba(234,223,206,.55); }
#main-sidebar .user-glass-pill{ background:rgba(234,223,206,.06) !important; border:1px solid var(--v-filete) !important; backdrop-filter:none !important; margin-top:1rem !important; }
#main-sidebar .user-glass-pill .rounded-full.bg-sky-500\/20{ background:var(--v-deep) !important; border-color:transparent !important; }
#display-user-name{ color:var(--v-crema) !important; }
#main-sidebar nav{ padding:1rem .8rem !important; gap:2px !important; scrollbar-width:none; }
#main-sidebar nav::-webkit-scrollbar{ display:none; }
#main-sidebar .viv-grupo{ display:flex; align-items:center; gap:.7rem; padding:.2rem .95rem .6rem; font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(234,223,206,.62); }
#main-sidebar .viv-grupo::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(234,223,206,.16), transparent); }
.sidebar-link{ border-left:0 !important; border-radius:99px !important; padding:.55rem .95rem !important; color:var(--v-crema70) !important;
  transition:background-color 120ms linear, color 120ms linear !important; }
.sidebar-link .material-icons-outlined{ color:var(--v-crema70); text-shadow:none !important; transform:none !important; margin-right:.85rem !important; }
.sidebar-link > span:last-child{ font-size:.84rem !important; letter-spacing:.01em !important; }
.sidebar-link:hover{ background:rgba(234,223,206,.06) !important; color:var(--v-crema) !important; }
.sidebar-link.active{ background:linear-gradient(90deg, rgba(0,109,130,.42), rgba(0,109,130,.10)) !important; color:#FFFFFF !important;
  box-shadow:inset 0 0 0 1px rgba(234,223,206,.10); }
.sidebar-link.active .material-icons-outlined, .sidebar-link:hover .material-icons-outlined{ color:#FFFFFF; }
#main-sidebar > div:last-child{ background:transparent !important; backdrop-filter:none !important; border-top-color:rgba(234,223,206,.10) !important; padding:1rem 1.1rem 1.1rem !important; }
#ui-lang-switcher{ background:rgba(234,223,206,.06) !important; border:1px solid var(--v-filete) !important; }
.lang-btn{ color:var(--v-crema70) !important; }
.lang-btn.active{ background:var(--v-deep) !important; color:#FFFFFF !important; box-shadow:none !important; }
#mobile-menu-toggle{ background:rgba(26,38,51,.45) !important; animation:none !important; border:1px solid rgba(255,255,255,.28) !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:none !important; }

/* ── 4 · La cabecera de cada vista: una foto de vivero, empotrada como en CIMA ──
   Va a sangre —de borde a borde, pegada arriba, sin recuadro— y el contenido sigue debajo
   sobre la tinta. El velo del libro: tinta arriba para la ceja, limpia al medio y 45 % abajo. */
.viv-cab{ position:relative; isolation:isolate; overflow:hidden; min-height:232px; margin:-2rem -2rem 2rem !important;
  padding:2.2rem 2.25rem 1.7rem !important; align-items:flex-end !important; border:0; border-radius:0; background:var(--v-hondo); gap:1.2rem 1.5rem !important; }
.viv-cab__foto{ position:absolute; inset:0; z-index:-2; background-image:var(--foto); background-size:cover; background-position:var(--pos, center);
  animation:vivFoto 1.1s cubic-bezier(.22,.9,.24,1) both; }
@keyframes vivFoto{ from{ opacity:0; transform:scale(1.04); } to{ opacity:1; transform:scale(1); } }
.viv-cab__velo{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(26,38,51,.45) 0%, rgba(26,38,51,.12) 38%, rgba(26,38,51,0) 45%, rgba(26,38,51,.45) 100%); }
.viv-cab > div:first-of-type{ align-self:flex-end; }
.viv-cab__ceja{ display:block; margin-bottom:.7rem; font-family:var(--v-sans); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.80); }
.viv-cab h1{ font-family:var(--v-glare) !important; font-size:2.9rem !important; line-height:1.05 !important; color:#FFFFFF !important; letter-spacing:-.005em !important; text-wrap:balance; }
.viv-cab h1 + p{ margin-top:.55rem !important; font-size:.9rem !important; line-height:1.45 !important; letter-spacing:.01em !important; text-transform:none !important;
  color:rgba(255,255,255,.80) !important; max-width:62ch; }
/* los botones de la cabecera, como pastillas de vidrio sobre la foto (igual que en CIMA) */
.viv-cab button, .viv-cab select, .viv-cab a.px-4{ border-radius:99px !important; background:rgba(26,38,51,.45) !important; color:#FFFFFF !important;
  border:1px solid rgba(255,255,255,.28) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:none !important; padding:.55rem 1.05rem !important; }
.viv-cab button:hover{ border-color:#FFFFFF !important; }
.viv-cab select option{ background:#222E3A; color:#EADFCE; }
.viv-cab input{ border-radius:99px !important; background:rgba(26,38,51,.55) !important; color:#FFFFFF !important; border:1px solid rgba(255,255,255,.28) !important; }
.viv-cab input::placeholder{ color:rgba(255,255,255,.7) !important; }
.viv-cab .material-icons-outlined{ color:inherit !important; }
.view-section > button:first-child{ position:relative; z-index:2; }

/* ── 4b · Ventas y embudo (se mudó de CIMA) ─────────────────────────────── */
.viv-fuente{ margin:-.8rem 0 1.4rem; font-size:.74rem; color:var(--v-crema70); }
.viv-met-cab{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:0 0 .6rem; }
.viv-met-ventana{ font-size:.7rem; color:var(--v-crema70); font-variant-numeric:tabular-nums; }
.viv-met-rejilla{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:.8rem; margin-bottom:.4rem; }
.viv-met{ position:relative; background:var(--v-hoja); border:1px solid var(--v-filete); border-radius:14px; padding:1.1rem 1.2rem 1.1rem 1.35rem; }
.viv-met::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:#ACA8A0; }
.viv-met--en::before{ background:#7D9B5B; } .viv-met--bajo::before{ background:#B3261E; } .viv-met--sobre::before{ background:#B8904F; }
.viv-met--neutro::before{ background:#006D82; } .viv-met--apagado::before{ background:rgba(234,223,206,.22); }
.viv-met__cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; }
.viv-met__cab h4{ margin:0; font-family:var(--v-sans) !important; font-size:.84rem !important; line-height:1.35; color:var(--v-crema) !important; letter-spacing:.01em !important; }
.viv-met-estado{ flex-shrink:0; padding:.15rem .55rem; border-radius:99px; font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--v-crema);
  background:rgba(234,223,206,.08); }
.viv-met-estado--en{ background:rgba(125,155,91,.34); } .viv-met-estado--bajo{ background:rgba(179,38,30,.40); }
.viv-met-estado--sobre{ background:rgba(138,106,47,.48); } .viv-met-estado--neutro{ background:rgba(0,109,130,.40); }
html.vivero-lujo .viv-met__valor{ margin:.45rem 0 .1rem; font-family:var(--v-sans); font-size:2.3rem; line-height:1.05; font-weight:300 !important; color:#FFFFFF;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.viv-met--apagado .viv-met__valor{ color:var(--v-crema70); }
.viv-met__u{ font-size:.9rem; color:var(--v-crema70); }
.viv-met__pie{ font-size:.76rem; color:var(--v-crema70); font-variant-numeric:tabular-nums; }
.viv-met-nota{ margin-top:.55rem; font-size:.72rem; line-height:1.5; color:var(--v-crema70); }
.viv-met-rot{ color:var(--v-crema); }
.viv-met-chip{ display:inline-block; margin-top:.4rem; padding:.12rem .55rem; border-radius:99px; border:1px solid var(--v-filete); font-size:.64rem; color:var(--v-crema70); }
.viv-met-aviso{ margin-top:.6rem; padding:.45rem .7rem; border-radius:9px; background:rgba(138,106,47,.28); font-size:.72rem; line-height:1.45; color:var(--v-crema); }
.viv-ab-gana td{ color:#FFFFFF !important; background:rgba(125,155,91,.14); }
.viv-ficha{ width:100%; max-width:56rem; max-height:88vh; overflow-y:auto; background:var(--v-hoja); border:1px solid var(--v-filete); border-radius:14px;
  box-shadow:var(--v-sombra); padding:1.6rem 1.8rem; }
.viv-ficha__cab{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.viv-ficha__cab h3{ margin:0; font-size:1.6rem !important; color:#FFFFFF !important; }
.viv-ficha__cab p{ margin-top:.2rem; font-size:.7rem; color:var(--v-crema70); }
.viv-ficha__acc{ display:flex; gap:.5rem; }
.viv-ficha__acc button{ display:inline-flex; align-items:center; gap:.35rem; padding:.5rem 1rem; border-radius:99px; border:1px solid var(--v-filete); color:var(--v-crema); background:transparent; cursor:pointer; }
.viv-ficha__acc button:first-child{ background:var(--v-deep); border-color:var(--v-deep); color:#FFFFFF; }
.viv-ficha__cols{ columns:2 20rem; column-gap:1.6rem; font-size:.84rem; line-height:1.55; color:var(--v-crema); }
.viv-ficha__bloque{ break-inside:avoid; margin-bottom:1rem; }
.viv-ficha__bloque h4{ margin:0 0 .3rem; font-family:var(--v-sans) !important; font-size:.62rem !important; letter-spacing:.24em !important; text-transform:uppercase; color:#7D9B5B !important; }
.viv-ficha__bloque ul, .viv-ficha__bloque ol{ padding-left:1.1rem; }
@media print{
  body > *:not(#vemFichaCaja){ display:none !important; }
  #vemFichaCaja{ position:static !important; background:none !important; display:block !important; opacity:1 !important; }
  .viv-ficha{ max-height:none; overflow:visible; box-shadow:none; border:0; background:#FFFFFF; }
  .viv-ficha *{ color:#1A2633 !important; }
  .no-imprimir{ display:none !important; }
}

/* ── 5 · Las piezas del panel, en tinta ──────────────────────────────────── */
.input-field{ background:rgba(234,223,206,.05) !important; border:1px solid var(--v-filete) !important; color:var(--v-crema) !important; border-radius:9px; }
.input-field:focus{ border-color:var(--v-teal) !important; box-shadow:0 0 0 3px rgba(0,109,130,.25) !important; }
.fin-stat-card, .fin-table-wrap, .fin-kpi, .fin-desglose, .fin-ms-panel{ background:var(--v-hoja) !important; border:1px solid var(--v-filete) !important; box-shadow:none !important; }
.fin-table-wrap, .fin-desglose, .fin-kpi, .fin-stat-card{ border-radius:14px !important; }
.fin-ms-panel{ box-shadow:var(--v-sombra) !important; }
.fin-stat-label, .fin-kpi-label{ color:var(--v-crema70) !important; letter-spacing:.2em !important; }
.fin-stat-value{ color:#FFFFFF !important; }
.fin-kpi{ padding:1rem 1.1rem 1rem 1.3rem !important; transition:border-color 120ms linear !important; }
.fin-kpi:hover{ transform:none !important; box-shadow:none !important; border-color:rgba(234,223,206,.34) !important; }
.fin-kpi::before{ top:14px !important; bottom:14px !important; border-radius:0 3px 3px 0; }
/* lo más grande es una cifra: Figtree 300, blanca, en columnas parejas */
html.vivero-lujo .fin-kpi-value{ color:#FFFFFF !important; font-size:1.55rem !important; letter-spacing:-.01em !important; font-weight:300 !important; }
.fin-kpi-value.fin-kpi-sm{ font-size:1.2rem !important; }
.fin-kpi-sub{ color:var(--v-crema70) !important; }
.fin-acc-emerald{ --acc:#7D9B5B; } .fin-acc-sky{ --acc:#2A93A8; } .fin-acc-red{ --acc:#B3261E; }
.fin-acc-amber{ --acc:#B8904F; } .fin-acc-indigo{ --acc:#EADFCE; } .fin-acc-slate{ --acc:#ACA8A0; }
.fin-acc-teal{ --acc:#006D82; } .fin-acc-violet{ --acc:#8A93B8; } .fin-acc-rose{ --acc:#C9785A; }
.fin-table th{ background:#26323E !important; color:var(--v-crema70) !important; letter-spacing:.16em !important; border-bottom:1px solid var(--v-filete) !important; }
.fin-table td{ border-bottom:1px solid var(--v-filete-s) !important; color:var(--v-crema); }
.fin-table tr.fin-row-clickable:hover, .fin-table tbody tr:hover{ background:rgba(234,223,206,.04) !important; }
.fin-sticky-bar{ background:var(--v-tinta) !important; }
.fin-section-label{ color:var(--v-crema70) !important; letter-spacing:.24em !important; }
.fin-section-label::after{ background:linear-gradient(90deg, var(--v-filete), transparent) !important; }
.fin-iva-table th{ color:var(--v-crema70) !important; }
.fin-iva-table td{ color:var(--v-crema) !important; border-top-color:var(--v-filete-s) !important; }
.fin-iva-table tr.fin-iva-total td{ color:#FFFFFF !important; border-top-color:var(--v-filete) !important; }
.fin-desglose-head{ border-bottom-color:var(--v-filete) !important; color:var(--v-crema70) !important; background:transparent !important; }
.fin-desglose-row{ border-bottom-color:var(--v-filete-s) !important; }
.fin-desglose-row > span:first-child{ color:var(--v-crema70) !important; }
.fin-desglose-row > span:last-child{ color:var(--v-crema) !important; }
.fin-desglose-row.fin-desglose-total{ background:rgba(234,223,206,.05) !important; border-top-color:var(--v-filete) !important; }
.fin-desglose-row.fin-desglose-total > span{ color:#FFFFFF !important; }
.fin-desglose-nota{ color:var(--v-crema70) !important; }
.fin-cell-money{ color:var(--v-crema) !important; }
.fin-cell-money small, .fin-cell-money small b{ color:var(--v-crema70) !important; }
.fin-bar{ background:rgba(234,223,206,.08) !important; }
.fin-bar > i{ background:var(--acc, #006D82) !important; }
/* pastillas de estado: rellenos de marca con letra crema */
.fin-badge, .fin-pct-badge, .fin-conf-badge, .fin-delta{ border-radius:99px !important; letter-spacing:.08em !important; }
.fin-badge-costo, .fin-delta-down{ background:rgba(179,38,30,.38) !important; color:var(--v-crema) !important; }
.fin-badge-utilidad_pura, .fin-badge-pagado, .fin-delta-up{ background:rgba(125,155,91,.34) !important; color:var(--v-crema) !important; }
.fin-badge-comision, .fin-pct-badge, .fin-conf-badge{ background:rgba(0,109,130,.40) !important; color:var(--v-crema) !important; }
.fin-badge-provision, .fin-badge-parcial{ background:rgba(138,106,47,.45) !important; color:var(--v-crema) !important; }
.fin-badge-pendiente, .fin-delta-flat{ background:rgba(234,223,206,.08) !important; color:var(--v-crema70) !important; }
.fin-combo-header{ background:rgba(125,155,91,.10) !important; }
/* pestañas y botones: pastillas */
.fin-tabs{ background:rgba(234,223,206,.05) !important; border:1px solid var(--v-filete-s); border-radius:99px !important; padding:3px !important; }
.fin-tab{ border-radius:99px !important; color:var(--v-crema70) !important; letter-spacing:.04em; }
.fin-tab:hover{ background:rgba(234,223,206,.06) !important; color:var(--v-crema) !important; }
.fin-tab.active{ background:var(--v-deep) !important; color:#FFFFFF !important; border-color:transparent !important; box-shadow:none !important; }
.fin-btn-excel{ border-radius:99px !important; background:transparent !important; color:var(--v-crema) !important; border:1px solid var(--v-filete) !important; }
.fin-btn-excel:hover{ border-color:var(--v-crema70) !important; background:rgba(234,223,206,.05) !important; }
.fin-vacio{ color:var(--v-crema70) !important; }
.fin-vacio .material-icons-outlined{ color:rgba(234,223,206,.28) !important; }
.fin-evid-thumb, .fin-evid-thumb-more{ border-color:var(--v-tinta) !important; background:var(--v-hoja) !important; color:var(--v-crema) !important; box-shadow:none !important; }
#fin-lightbox{ background:rgba(20,29,39,.97) !important; }
.lb-close-v:hover{ color:var(--v-crema) !important; }
/* los botones de Tailwind con relleno de acción: pastillas deep */
html.vivero-lujo main button.rounded-xl, html.vivero-lujo main a.rounded-xl{ border-radius:99px !important; }
html.vivero-lujo .shadow-sm, html.vivero-lujo .shadow, html.vivero-lujo .shadow-md, html.vivero-lujo .shadow-lg{ box-shadow:none !important; }
html.vivero-lujo .hover\:scale-105:hover, html.vivero-lujo .hover\:scale-110:hover{ transform:none !important; }

/* los modales y el aviso */
.modal-container{ background:rgba(20,29,39,.78) !important; }
#confirmation-content{ background:var(--v-hoja) !important; border:1px solid var(--v-filete) !important; box-shadow:var(--v-sombra) !important; border-radius:14px !important; }
#confirmation-content > div:first-child.bg-oro-insignia, .modal-container .bg-oro-insignia{ background:transparent !important; animation:none !important; border-bottom:1px solid var(--v-filete) !important; }
#confirmation-content h3{ font-family:var(--v-glare) !important; font-size:1.35rem !important; }
#btn-confirm-ok{ background:var(--v-deep) !important; border-radius:99px !important; box-shadow:none !important; letter-spacing:.14em !important; }
#toast{ border-radius:99px !important; box-shadow:var(--v-sombra) !important; }
#loader{ background:rgba(20,29,39,.94) !important; }
#loader img{ display:none; }
#loader .viv-carga{ width:54px; height:54px; animation:vivGira 4s linear infinite; }
@keyframes vivGira{ to{ transform:rotate(360deg); } }
#loader p{ color:var(--v-crema70) !important; letter-spacing:.3em !important; }

/* ── 6 · El celular ──────────────────────────────────────────────────────── */
@media (max-width:767px){
  .viv-cab{ min-height:200px; padding:4.2rem 1.1rem 1.2rem !important; margin:-1rem -1rem 1.3rem !important; }
  .viv-cab{ align-items:stretch !important; justify-content:flex-end !important; }   /* en columna: todo a la izquierda */
  .viv-cab > div{ width:100%; justify-content:flex-start !important; }
  .viv-cab h1{ font-size:2rem !important; }
  .viv-cab h1 + p{ font-size:.82rem !important; }
  #main-app > main > .view-section{ padding-top:1rem !important; }
  #mobile-menu-toggle{ top:1rem !important; left:1rem !important; right:auto !important; width:42px !important; height:42px !important; }   /* a la izquierda, donde sale el menú */
  #main-sidebar > div:first-child{ padding-top:4.6rem !important; }   /* aire para el botón, que queda encima del menú abierto */
  /* las tablas, fichas de dos columnas: sin deslizar de lado */
  table.viv-fichas thead{ display:none; }
  table.viv-fichas, table.viv-fichas tbody{ display:block; width:100%; }
  table.viv-fichas tr{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem .9rem; padding:.9rem 1rem; border-bottom:1px solid var(--v-filete-s); }
  table.viv-fichas td{ display:block; padding:0 !important; border:0 !important; min-width:0; overflow-wrap:anywhere; }
  table.viv-fichas td::before{ content:attr(data-rotulo); display:block; margin-bottom:.15rem; font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--v-crema70); }
  table.viv-fichas td:first-child{ grid-column:1 / -1; font-size:.95rem; color:#FFFFFF; }
  table.viv-fichas td:first-child::before{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .viv-cab__foto, #loader .viv-carga{ animation:none !important; }
}