/* ═══════════════════════════════════════════════════════════════════════════ CIMA · LA LÍNEA DE LUJO — la copa, en tinta (2026-09-21, pedido de Luis) ─────────────────────────────────────────────────────────────────────────── La misma línea de lujo de ARIA, en el tema de CIMA (la copa del árbol), y SIEMPRE dentro del libro de marca (app-agentecotizador/System/marca/sistema_de_diseno.md): LOS COLORES — cinco y ninguno más tinta #1A2633 el suelo · la hoja #222E3A (tinta + crema 5 %: la elevación SUBE) deep #005565 relleno de acción y de lo activo teal #006D82 filetes y estados activos; NUNCA de letra sobre tinta (2,56) salvia #7D9B5B SÓLO relleno (lo que está bien, lo hecho) crema #EADFCE el texto; crema 70 % el secundario; crema 16 % los filetes blanco #FFFFFF los títulos y las cifras (ocre #8A6A2F y rojo #B3261E: andamiaje de sistema declarado, de relleno o filete) LA LEY DE TEXTO POR FONDO (§2) | Fondo | Cuerpo | Títulos | Etiquetas | Versalitas | | Tinta | Crema | Blanco | Teal sólo ≥ 18 pt | Crema 70 % | | Deep | Blanco | Blanco | Crema | Blanco 75 %| | Foto+velo | Blanco | Blanco | Blanco | Blanco 80 %| LETRA: Marcellus (exhibición, provisional de PP Fragment Glare) y Figtree (texto, provisional de PP Fragment Sans) — las pilas que autoriza la lámina. Sólo 300 y 400: ni negrita ni itálica. Lo más grande de cada pantalla es una cifra. FORMA: radios 14 / 9 / pastilla; una sola sombra (la del modal, teñida de tinta); nada se levanta al pasar el mouse; el velo de foto es tinta 0 → 45 % desde el 45 %. Reemplazó a la paleta «atardecer» de prueba (ámbar, dorado y selva no eran de la marca). El login conserva su diseño: sólo cambian la foto y sus acentos a la marca. ES REVERSIBLE: se borran las líneas de cima-lujo.* y cima-movil.css en index.html. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · LOS TOKENS DE LA APP 10, EN TINTA ───────────────────────────────── Sólo adentro de la app (no en el login). `--navy` hacía de LETRA de título en 64 sitios y de RELLENO en 4: sobre tinta la letra es blanca, y los cuatro rellenos se pintan abajo con su color escrito. */ #aplicacion, #zona-modales, #riel-globo, #aviso, .combo-panel{ --navy:#FFFFFF; --navy-hondo:#141D27; /* `--teal` es LETRA de acento en decenas de reglas (enlaces, rótulos, «Sin clasificar»), y el teal sobre tinta no se lee (2,31). Adentro de la app esa letra es crema; los pocos RELLENOS teal se pintan abajo con #005565 escrito (botones, activos). */ --teal:#EADFCE; --teal-alto:#EADFCE; --sage:#7D9B5B; --cream:#EADFCE; --borde:rgba(234,223,206,.16); --borde-suave:rgba(234,223,206,.10); --tinta:#EADFCE; --tinta-suave:rgba(234,223,206,.70); --papel:#222E3A; --papel-tenue:#1A2633; --alerta:#EADFCE; --naranja:#EADFCE; --ambar:#EADFCE; --sombra-card:none; --glare:Marcellus, 'PP Fragment Glare', Optima, Georgia, serif; --sans:Figtree, 'PP Fragment Sans', Inter, system-ui, 'Segoe UI', sans-serif; color:#EADFCE; } #aplicacion, #zona-modales{ font-family:var(--sans); } #aplicacion .fuente-titular, #zona-modales .fuente-titular{ font-family:var(--glare) !important; } #aplicacion .fuente-mono, #zona-modales .fuente-mono{ font-family:var(--sans) !important; letter-spacing:.06em; } body{ background-color:#1A2633; } #aplicacion ::selection, #zona-modales ::selection{ background-color:#005565; color:#FFFFFF; } /* Ni negrita ni itálica (§4). Los íconos son una letra más y quedan en 400. */ #aplicacion *, #zona-modales *, #aviso, #riel-globo{ font-weight:400 !important; font-style:normal !important; } #aplicacion b, #aplicacion strong, #zona-modales b, #zona-modales strong{ color:#FFFFFF; } /* Las barras de desplazamiento: finas, crema sobre tinta (§8: sólo `scrollbar-color`). */ #aplicacion, #aplicacion *, #zona-modales *{ scrollbar-width:thin; scrollbar-color:rgba(234,223,206,.22) transparent; } /* ── 2 · EL RIEL: la copa de noche ────────────────────────────────────────── Suelo tinta hondo con sus focos de luz (teal, deep y salvia: los de la marca) que derivan despacio. El logo arriba al centro — posición aprobada —, grande. */ .sidebar.bg-atlas-insignia{ background-color:#141D27 !important; border-right:1px solid rgba(234,223,206,.10) !important; box-shadow:none !important; } .bg-atlas-insignia::before{ background:radial-gradient(circle, rgba(0,109,130,.55) 0%, rgba(0,109,130,.16) 42%, transparent 68%) !important; } .bg-atlas-insignia::after{ background:radial-gradient(circle, rgba(125,155,91,.40) 0%, rgba(125,155,91,.12) 40%, transparent 66%) !important; } .atlas-foco-3{ background:radial-gradient(circle, rgba(0,85,101,.60) 0%, rgba(0,85,101,.18) 44%, transparent 70%) !important; } .atlas-foco-4{ background:radial-gradient(circle, rgba(0,85,101,.40) 0%, rgba(0,85,101,.12) 46%, transparent 72%) !important; } .cabecera-lateral{ padding:2.2rem 1.25rem 1.1rem !important; border-bottom-color:rgba(234,223,206,.10) !important; } .cabecera-lateral > div:first-child{ display:none; } .cabecera-lateral img.cima-logo{ display:block; height:38px !important; width:auto; margin:0 auto .9rem !important; filter:none !important; opacity:1 !important; } .cabecera-lateral img:not(.cima-logo){ display:none !important; } .cabecera-lateral h2{ font-family:var(--sans) !important; font-size:.66rem !important; letter-spacing:.26em !important; text-transform:uppercase; color:rgba(234,223,206,.70) !important; line-height:1.3 !important; } .user-glass-pill{ background:rgba(234,223,206,.06) !important; border:1px solid rgba(234,223,206,.14) !important; backdrop-filter:none !important; } .cabecera-lateral .user-glass-pill{ margin-top:1.1rem !important; padding:.45rem .8rem !important; } #nombre-usuario{ color:#EADFCE !important; font-size:.8rem !important; } #rol-usuario{ color:rgba(234,223,206,.70) !important; font-size:.64rem !important; letter-spacing:.06em; margin-top:.15rem; } #inicial-usuario{ background-color:#005565 !important; border-color:transparent !important; color:#FFFFFF !important; } #accesos-rapidos{ margin-top:.9rem !important; gap:.6rem !important; } #accesos-rapidos button{ width:2.1rem !important; height:2.1rem !important; background:transparent !important; border:1px solid rgba(234,223,206,.16) !important; box-shadow:none !important; } #accesos-rapidos button:hover, #interruptor-edicion[aria-pressed="true"], body.modo-edicion #interruptor-edicion{ border-color:rgba(234,223,206,.70) !important; } body.modo-edicion #interruptor-edicion{ background-color:#005565 !important; } #accesos-rapidos button .material-icons-outlined{ color:#EADFCE !important; font-size:16px !important; } #boton-colapsar{ background:transparent !important; border-color:rgba(234,223,206,.16) !important; color:#EADFCE !important; } #menu{ padding:.9rem .8rem 1.2rem !important; gap:1px !important; } .menu-grupo{ font-family:var(--sans); font-size:.62rem !important; letter-spacing:.24em !important; color:rgba(234,223,206,.70) !important; padding:1.3rem .9rem .5rem !important; } .sidebar-link{ color:rgba(234,223,206,.70) !important; border:0 !important; border-radius:9px !important; padding:.58rem .9rem !important; backdrop-filter:none !important; transition:background-color 120ms linear, color 120ms linear !important; } .sidebar-link .material-icons-outlined{ font-size:18px !important; color:rgba(234,223,206,.70); transform:none !important; text-shadow:none !important; } .sidebar-link > span:not(.material-icons-outlined):not(.sidebar-cuenta){ font-size:.84rem !important; letter-spacing:.01em !important; } .sidebar-link:hover{ background:rgba(234,223,206,.06) !important; color:#EADFCE !important; } .sidebar-link:hover .material-icons-outlined{ color:#EADFCE; } /* Lo activo: la hoja un paso más clara y el filete teal que crece desde la izquierda. */ .sidebar-link.active{ background:rgba(234,223,206,.09) !important; color:#FFFFFF !important; } .sidebar-link.active .material-icons-outlined{ color:#FFFFFF; } .sidebar-link::after{ content:""; position:absolute; left:0; top:22%; bottom:22%; width:2px; border-radius:2px; background:#006D82; transform:scaleY(0); transition:transform 180ms cubic-bezier(.22,.9,.24,1); } .sidebar-link.active::after{ transform:scaleY(1); } .sidebar-cuenta{ background:transparent !important; color:rgba(234,223,206,.70) !important; font-size:.72rem !important; padding:0 !important; font-variant-numeric:tabular-nums; letter-spacing:.02em; } .sidebar-link.active .sidebar-cuenta{ color:#EADFCE !important; } /* Medidos contra VIVERO en vivo, no copiados de su hoja: lo publicado allá no es lo que dice su archivo —el activo mide #00455A y el inactivo crema al 72%—, y lo que tiene que calzar es lo que Luis ve, no lo que el código dice (2026-09-23). */ .lang-btn{ color:rgba(234,223,206,.72) !important; } .lang-btn.active{ background:#00455A !important; color:#FFFFFF !important; } /* La firma del pie —«Costa Rica · Pura Vida» y el copyright— SE QUEDA FUERA de esta regla. El marcado ya la trae en blanco al 40% y al 30%, que es lo que se ve en VIVERO; acá la crema al 70% la encendía de más y era lo único del pie que cantaba distinto (Luis, 2026-09-23). En TEMA CLARO no hay nada que hacer: allá y acá va crema al 72% sobre el pie teal, medido en los dos. */ .barra-lateral .ocultable p{ color:rgba(234,223,206,.70) !important; } #barra-lateral > div.ocultable:last-of-type > div:last-child p{ color:rgba(255,255,255,.4) !important; } #barra-lateral > div.ocultable:last-of-type > div:last-child p + p{ color:rgba(255,255,255,.3) !important; } #riel-globo{ background:#222E3A !important; color:#EADFCE !important; border-color:rgba(234,223,206,.16) !important; box-shadow:0 30px 70px -18px rgba(26,38,51,.62) !important; } #riel-globo::before{ border-right-color:#222E3A !important; } @media (min-width:1025px){ .armazon.colapsado .sidebar-link.active{ background:rgba(234,223,206,.12) !important; box-shadow:none !important; } .armazon.colapsado .sidebar-link.active::before{ background:#006D82 !important; } .armazon.colapsado .sidebar-cuenta{ background:#005565 !important; color:#FFFFFF !important; border-color:#141D27 !important; box-shadow:none !important; } } /* ── 3 · LA CABECERA DE CADA VISTA: una foto de copa, con su título y su cifra ── La arma cima-lujo.js (capas de foto que se funden al cambiar de vista). La foto va con el velo de la marca y el título en Marcellus blanco; a la derecha, la cifra de la vista (lo que cuenta el menú). Las acciones, en pastillas sobre el velo. */ .zona-principal{ background-color:#1A2633 !important; } .zona-principal > header{ position:relative; isolation:isolate; overflow:hidden; min-height:216px; align-items:flex-end !important; padding:1.6rem 2.25rem 1.5rem !important; border-bottom:0 !important; background:#141D27 !important; gap:1.25rem 1.5rem !important; } .zona-principal > header::after{ display:none !important; } /* Sin el acercamiento de entrada tampoco (del 1,02 al 1 en seis segundos): era la otra mitad del mismo movimiento. Queda sólo el fundido. */ .cima-cab__foto{ position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center 40%; opacity:0; transition:opacity .62s cubic-bezier(.22,.9,.24,1); } .cima-cab__foto.activa{ opacity:1; } .cima-cab__velo{ position:absolute; inset:0; z-index:-1; pointer-events:none; /* El velo del libro, uno solo: tinta de 0 a 45 %, subiendo desde el 45 % de la altura. Las fotos se eligieron para que con esto alcance (ver FOTOS en cima-lujo.js). */ background:linear-gradient(180deg, rgba(26,38,51,0) 45%, rgba(26,38,51,.45) 100%); } .zona-principal > header > div[style*="flex:1"]{ align-self:flex-end; } #titulo-vista{ font-family:var(--glare) !important; font-size:2.9rem !important; line-height:1.05 !important; color:#FFFFFF !important; letter-spacing:-.005em !important; text-wrap:balance; } #sub-vista{ margin-top:.55rem !important; font-size:.9rem !important; line-height:1.45 !important; color:rgba(255,255,255,.80) !important; max-width:62ch; } .cima-cab__eyebrow{ display:block; margin-bottom:.7rem; font-family:var(--sans); font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.80); } .cima-cifra{ align-self:flex-end; display:flex; flex-direction:column; align-items:flex-end; gap:.35rem; color:#FFFFFF; margin-left:auto; } .cima-cifra[hidden]{ display:none !important; } .cima-cifra__n{ font-family:var(--glare); font-size:4.6rem; line-height:.9; letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .cima-cifra__rot{ font-family:var(--sans); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.80); } #acciones-vista{ align-self:flex-end; } #acciones-vista .btn{ background:rgba(26,38,51,.45) !important; color:#FFFFFF !important; border:1px solid rgba(255,255,255,.28) !important; border-radius:99px !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:.55rem 1.05rem !important; } #acciones-vista .btn:hover{ border-color:#FFFFFF !important; } #acciones-vista .btn-principal{ background:#005565 !important; border-color:#005565 !important; } #acciones-vista .btn-principal:hover{ background:#006D82 !important; border-color:#006D82 !important; } #acciones-vista select, #acciones-vista input{ background:rgba(26,38,51,.45) !important; color:#FFFFFF !important; border:1px solid rgba(255,255,255,.28) !important; border-radius:99px !important; backdrop-filter:blur(10px); } #boton-menu{ background:rgba(26,38,51,.45) !important; border-color:rgba(255,255,255,.28) !important; color:#FFFFFF !important; border-radius:99px !important; } /* ── 4 · EL SUELO Y LAS HOJAS ──────────────────────────────────────────── */ #contenido{ background-color:#1A2633 !important; color:#EADFCE; } .lienzo{ padding:2.25rem 2.25rem 4rem !important; } .panel, .tarjeta-stat, .estado-panel, .tarjeta-atencion, .tf-tarj, .tf-fila, .enl-item, .vt-tarjeta, .cl-cifra, .lst-tarjeta, .cp-grupo, .cp-opcion, .cp-lista, .cp-boton, .v-temp, .v-combo{ background-color:#222E3A !important; border:1px solid rgba(234,223,206,.16) !important; border-radius:14px !important; box-shadow:none !important; } .tarjeta-atencion{ border-top:1px solid rgba(234,223,206,.16) !important; transition:border-color 120ms linear !important; } .tarjeta-atencion:hover, .cp-opcion:hover:not(:disabled), .cp-boton:hover, .pastilla:hover, .etq-clic:hover{ transform:none !important; box-shadow:none !important; filter:none !important; } .tarjeta-atencion:hover{ border-color:rgba(234,223,206,.45) !important; } /* Las secciones del tablero. */ .seccion-cabeza h3, .tf-lista-cab h3, .lst-cab h3, .enl-aria h4{ font-family:var(--glare) !important; font-size:1.7rem !important; color:#FFFFFF !important; letter-spacing:-.005em !important; } .lst-cab h3{ font-size:1.25rem !important; } .seccion-cabeza p, .tf-sub, .lst-cab p{ color:rgba(234,223,206,.70) !important; font-size:.86rem !important; } .seccion{ margin-bottom:3.25rem !important; } /* LAS CIFRAS: lo más grande de la pantalla, en Marcellus blanco. */ .cifras-madre{ background:rgba(234,223,206,.16) !important; border-color:rgba(234,223,206,.16) !important; border-radius:14px !important; } .cifra-madre{ background-color:#222E3A !important; padding:1.9rem 2rem !important; } .cifra-madre .n, .stat-cifra, .tarjeta-atencion .cifra, .tf-cifra, .cl-cifra b{ font-family:var(--glare) !important; font-size:3.4rem !important; line-height:1 !important; color:#FFFFFF !important; letter-spacing:-.02em !important; font-variant-numeric:tabular-nums; } .tarjeta-atencion .cifra{ font-size:3.8rem !important; } .tf-cifra{ font-size:2.8rem !important; } .cl-cifra b{ font-size:2.4rem !important; } .cifra-madre .t, .stat-titulo, .estado-panel h4, .tf-rot, .lst-subtitulo{ font-family:var(--sans); font-size:.68rem !important; letter-spacing:.22em !important; text-transform:uppercase; color:rgba(234,223,206,.70) !important; } .cifra-madre .d, .stat-sub, .tarjeta-atencion .porque, .tf-mini{ color:rgba(234,223,206,.70) !important; font-size:.8rem !important; line-height:1.5 !important; } .tarjeta-atencion h4, .cp-paso-tit, .cp-opcion-tit, .cp-boton-tit, .tf-fila__nom, .tf-srv__nom, .lst-nombre, .lst-valor, .lst-anio b, .cl-com span{ color:#FFFFFF !important; } .tarjeta-atencion h4{ font-size:1.02rem !important; } /* Barras y repartos: salvia y teal de relleno, nunca de letra. */ .barra-pila, .fila-barra .pista-barra, .tf-barra, .cp-medidor-riel{ background:rgba(234,223,206,.10) !important; } .tf-barra span, .cp-medidor-barra{ background:#7D9B5B !important; animation:none !important; } .fila-barra{ border-bottom-color:rgba(234,223,206,.10) !important; } .fila-barra .et{ color:#EADFCE !important; } .fila-barra .n-barra, .leyenda b{ color:#FFFFFF !important; } .fila-barra:hover .n-barra{ color:#FFFFFF !important; } .leyenda span{ color:rgba(234,223,206,.70) !important; } .leyenda span:hover{ color:#EADFCE !important; } /* ── 5 · LAS PASTILLAS Y LAS ETIQUETAS DE ESTADO ────────────────────────── Sin tintes claros sobre la hoja oscura: el estado se dice con RELLENO de marca (salvia = bien, deep = en curso), con CONTORNO ocre (aviso: forma distinta, §1) o con relleno rojo de sistema (mal). La letra, siempre la que pide su fondo. */ .etq, .enl-estado, .cl-tipo, .chip-ia, .tf-chip, .pastilla{ border-radius:99px !important; letter-spacing:.06em !important; } .etq-ok, .etq-sage, .tf-chip--comod{ background-color:#7D9B5B !important; color:#1A2633 !important; border:1px solid #7D9B5B !important; } .etq-teal{ background-color:#005565 !important; color:#FFFFFF !important; border:1px solid #005565 !important; } .etq-alerta, .tf-chip--aviso{ background-color:transparent !important; color:#EADFCE !important; border:1px solid #8A6A2F !important; background-image:repeating-linear-gradient(135deg, rgba(138,106,47,.28) 0 4px, transparent 4px 8px) !important; } .etq-mal, .tf-chip--error{ background-color:#B3261E !important; color:#FFFFFF !important; border:1px solid #B3261E !important; } .etq-neutra, .tf-chip{ background-color:transparent !important; color:rgba(234,223,206,.85) !important; border:1px solid rgba(234,223,206,.16) !important; } .pastilla{ border-color:rgba(234,223,206,.16) !important; } .pastilla.activa{ outline:0 !important; background-color:#005565 !important; color:#FFFFFF !important; border-color:#005565 !important; } /* ── 6 · LAS TABLAS ──────────────────────────────────────────────────────── Cabecera en versalitas crema sobre tinta, filas en la hoja, filetes crema tenues. Sin animación de filas (§5). */ .tabla, .cl-tabla, .tf-tabla, .tabla-lote{ color:#EADFCE; } .tabla thead th, .cl-tabla th, .tf-tabla th, .cl-hist th, .tabla-lote th{ background-color:#141D27 !important; color:rgba(234,223,206,.70) !important; font-family:var(--sans) !important; font-size:.66rem !important; letter-spacing:.2em !important; border-right:0 !important; border-bottom:1px solid rgba(234,223,206,.16) !important; padding:.85rem .9rem !important; } .tabla tbody td, .cl-tabla td, .tf-tabla td{ background-color:#222E3A; border-bottom:1px solid rgba(234,223,206,.08) !important; border-top:0 !important; color:#EADFCE !important; padding:.75rem .9rem !important; } .tabla tbody tr:hover td, .cl-tabla tr:hover td, .tf-tabla tr:hover td{ background-color:#27323E !important; } .tabla tbody tr.f-ok td{ background-color:rgba(125,155,91,.12) !important; } .tabla tbody tr.f-alerta td{ background-color:rgba(138,106,47,.16) !important; } .tabla tbody tr.f-mal td{ background-color:rgba(179,38,30,.16) !important; } .tf-tabla .tf-rack{ color:#FFFFFF !important; } .tf-fechas, .tf-srv__cod, .cp-fila-cod{ color:rgba(234,223,206,.70) !important; } .tf-tabla-envoltura{ background-color:#222E3A !important; border-color:rgba(234,223,206,.16) !important; border-radius:9px !important; } .tf-detalle{ background-color:#1E2935 !important; border-top-color:rgba(234,223,206,.10) !important; } .tf-fila__cab:hover{ background-color:#27323E !important; } .tf-fila__flecha{ color:rgba(234,223,206,.70) !important; } .tf-vacio{ color:rgba(234,223,206,.70) !important; } .tabla-lote td{ border-bottom-color:rgba(234,223,206,.08) !important; } .tabla-lote input{ color:#EADFCE !important; } .tabla-lote input:focus{ background-color:#1A2633 !important; border-color:#006D82 !important; box-shadow:0 0 0 3px rgba(234,223,206,.18) !important; } .tabla-lote tr:hover input{ background-color:rgba(234,223,206,.04) !important; } .fila-lista{ border-bottom-color:rgba(234,223,206,.08) !important; border-left:2px solid transparent !important; } .fila-lista:hover{ background-color:#27323E !important; } .fila-lista.activa{ background-color:rgba(234,223,206,.07) !important; border-left-color:#006D82 !important; } /* ── 7 · LOS BOTONES ─────────────────────────────────────────────────────── Pastillas. Deep de relleno para la acción principal; contorno crema para las demás. Nada se levanta (§5). El rojo no va de letra sobre tinta: contorno rojo y letra crema. */ #aplicacion .btn, #zona-modales .btn{ border-radius:99px !important; font-family:var(--sans) !important; letter-spacing:.02em; padding:.55rem 1.1rem; transform:none !important; transition:background-color 120ms linear, border-color 120ms linear, color 120ms linear !important; } #aplicacion .btn-icono, #zona-modales .btn-icono{ padding:0 !important; width:36px !important; height:36px !important; } .btn-principal{ background-color:#005565 !important; color:#FFFFFF !important; border-color:#005565 !important; } .btn-principal:hover:not(:disabled){ background-color:#006D82 !important; border-color:#006D82 !important; } .btn-suave{ background-color:transparent !important; color:#EADFCE !important; border-color:rgba(234,223,206,.22) !important; } .btn-suave:hover:not(:disabled){ background-color:transparent !important; border-color:#EADFCE !important; } .btn-peligro{ background-color:transparent !important; color:#EADFCE !important; border-color:#B3261E !important; } .btn-peligro:hover:not(:disabled){ background-color:#B3261E !important; color:#FFFFFF !important; } .btn-fantasma{ background-color:transparent !important; color:rgba(234,223,206,.70) !important; } .btn-fantasma:hover:not(:disabled){ background-color:rgba(234,223,206,.06) !important; color:#EADFCE !important; } #aplicacion button svg, #aplicacion a svg, #zona-modales button svg{ width:1.05em; height:1.05em; flex:none; } /* El segmento de estado (cima-diseno.css) y los filtros. */ .segmento{ background:transparent !important; border-color:rgba(234,223,206,.16) !important; border-radius:99px !important; padding:3px !important; } .segmento .enl-chip{ color:rgba(234,223,206,.70) !important; border-radius:99px !important; padding:.42rem .9rem !important; } .segmento .enl-chip:hover{ background:rgba(234,223,206,.06) !important; color:#EADFCE !important; } .segmento .enl-chip.activa{ background-color:#005565 !important; color:#FFFFFF !important; } /* ── 8 · LOS CAMPOS ──────────────────────────────────────────────────────── Hundidos en tinta sobre la hoja; el foco es el anillo doble de la marca (teal + halo crema), porque el teal solo sobre tinta no se ve (§2). */ #aplicacion input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), #aplicacion select, #aplicacion textarea, #zona-modales input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), #zona-modales select, #zona-modales textarea, .combo-campo, .combo-panel input{ background-color:#1A2633 !important; color:#EADFCE !important; border-color:rgba(234,223,206,.16) !important; border-radius:9px !important; font-family:var(--sans) !important; } #aplicacion .tabla-lote input{ background-color:transparent !important; border-color:transparent !important; } #aplicacion input::placeholder, #aplicacion textarea::placeholder, #zona-modales input::placeholder, #zona-modales textarea::placeholder{ color:rgba(234,223,206,.45); } #aplicacion input:focus, #aplicacion select:focus, #aplicacion textarea:focus, #zona-modales input:focus, #zona-modales select:focus, #zona-modales textarea:focus, .combo.abierto .combo-campo{ outline:2px solid #006D82 !important; outline-offset:0 !important; box-shadow:0 0 0 4px rgba(234,223,206,.22) !important; border-color:#006D82 !important; } #aplicacion input:disabled, #aplicacion select:disabled, #aplicacion textarea:disabled, #zona-modales input:disabled, #zona-modales select:disabled, #zona-modales textarea:disabled{ background-color:rgba(234,223,206,.04) !important; color:rgba(234,223,206,.70) !important; } #aplicacion select option, #zona-modales select option{ background-color:#222E3A; color:#EADFCE; } #aplicacion input[type=checkbox], #aplicacion input[type=radio], #zona-modales input[type=checkbox], #zona-modales input[type=radio]{ accent-color:#006D82; } .campo label, .dato dt, .cp-grupo-tit, .combo-grupo{ font-family:var(--sans); font-size:.66rem !important; letter-spacing:.2em !important; color:rgba(234,223,206,.70) !important; } .dato{ border-bottom-color:rgba(234,223,206,.08) !important; } .dato dd{ color:#EADFCE !important; font-size:.92rem !important; } .campo .pista{ color:rgba(234,223,206,.70) !important; } /* El combo. */ .combo-panel{ background-color:#222E3A !important; border-color:rgba(234,223,206,.16) !important; border-radius:9px !important; box-shadow:0 30px 70px -18px rgba(26,38,51,.62) !important; } .combo-grupo{ background-color:#1A2633 !important; } .combo-opcion{ border-bottom-color:rgba(234,223,206,.08) !important; color:#EADFCE; } .combo-opcion:hover, .combo-opcion.marcada{ background-color:#27323E !important; } .combo-opcion.elegida{ background-color:rgba(0,85,101,.45) !important; color:#FFFFFF; } .combo-opcion .sub, .combo-vacio, .combo-campo .texto.vacio, .combo-campo .material-icons-outlined{ color:rgba(234,223,206,.70) !important; } /* ── 9 · LAS PESTAÑAS ──────────────────────────────────────────────────── */ .pestana{ color:rgba(234,223,206,.70) !important; font-family:var(--sans) !important; letter-spacing:.02em; } .pestana:hover{ color:#EADFCE !important; } .pestana.activa{ color:#FFFFFF !important; border-bottom-color:#006D82 !important; } .pestanas-editor{ background-color:#222E3A !important; border-bottom-color:rgba(234,223,206,.16) !important; } .lst-pestanas{ border-bottom-color:rgba(234,223,206,.16) !important; } /* ── 10 · LOS MODALES ──────────────────────────────────────────────────── */ .velo{ background:rgba(20,29,39,.72) !important; backdrop-filter:blur(4px) !important; } .caja-modal{ background-color:#222E3A !important; color:#EADFCE; border:1px solid rgba(234,223,206,.16); border-radius:14px !important; box-shadow:0 30px 70px -18px rgba(26,38,51,.62) !important; } .caja-modal h2, .caja-modal h3, .caja-modal .fuente-titular{ color:#FFFFFF !important; font-family:var(--glare) !important; } .caja-modal > div:first-child{ border-bottom-color:rgba(234,223,206,.12) !important; } #aviso{ background-color:#222E3A !important; color:#EADFCE !important; border:1px solid rgba(234,223,206,.16); border-radius:99px !important; box-shadow:0 30px 70px -18px rgba(26,38,51,.62) !important; } /* ── 11 · LA SOLICITUD A TOURSYS Y LAS LISTAS (colores escritos a mano) ───── */ .cp-boton-ico, .cp-opcion-ico{ background-color:rgba(234,223,206,.06) !important; color:#EADFCE !important; border-radius:9px !important; } .cp-boton.enviada .cp-boton-ico{ background-color:#7D9B5B !important; color:#1A2633 !important; } .cp-opcion[aria-checked="true"]{ border-color:#006D82 !important; background-color:rgba(0,85,101,.28) !important; box-shadow:none !important; } .cp-opcion[aria-checked="true"] .cp-opcion-ico{ background-color:#005565 !important; color:#FFFFFF !important; } .cp-opcion-marca{ color:#EADFCE !important; } .cp-opcion-sub, .cp-boton-sub, .cp-paso-sub, .cp-medidor-txt, .cp-falta{ color:rgba(234,223,206,.70) !important; } .cp-medidor-txt b{ color:#FFFFFF !important; } .cp-cabeza, .cp-lista-barra, .cp-resumen-srv{ background-color:#1A2633 !important; border-color:rgba(234,223,206,.16) !important; border-radius:9px !important; color:#EADFCE; } .cp-paso-num{ background-color:#005565 !important; color:#FFFFFF !important; } .cp-paso.listo .cp-paso-num{ background-color:#7D9B5B !important; color:#1A2633 !important; } .cp-fila{ border-bottom-color:rgba(234,223,206,.08) !important; } .cp-fila:hover, .cp-fila.marcada{ background-color:#27323E !important; } .cp-fila-nombre{ color:#EADFCE !important; } .cp-estado{ color:rgba(234,223,206,.45) !important; } .cp-campo.lleno .cp-estado{ color:#7D9B5B !important; } .cp-campo.falta .cp-estado{ color:#EADFCE !important; } .cp-campo.falta input, .cp-campo.falta select{ border-color:#8A6A2F !important; background-color:#1A2633 !important; } .cp-req{ color:#EADFCE !important; } .cp-aviso-teal, .lst-nota{ background-color:rgba(0,85,101,.30) !important; color:#EADFCE !important; border:1px solid rgba(0,109,130,.45); border-radius:9px !important; } .cp-aviso-ambar, .lst-aviso{ background-color:transparent !important; color:#EADFCE !important; border:1px solid #8A6A2F !important; border-radius:9px !important; } .lst-aviso--mal{ border-color:#B3261E !important; } .lst-lista{ background-color:#222E3A !important; border-color:rgba(234,223,206,.16) !important; border-radius:9px !important; } .lst-fila, .lst-eco, .lst-hijos{ border-bottom-color:rgba(234,223,206,.08) !important; } .lst-hijos, .lst-agregar--aria{ background-color:#1E2935 !important; } .lst-hijos::before, .lst-hijos:not(.lst-hijos--sueltos) .lst-hijo::before{ background:rgba(234,223,206,.16) !important; } .lst-ubi{ background-color:transparent !important; border-color:rgba(234,223,206,.16) !important; color:#EADFCE !important; } .lst-ubi b{ color:rgba(234,223,206,.70) !important; } .lst-ubi button{ color:#EADFCE !important; } .lst-en, .lst-sin, .lst-vacia, .lst-anio p, .lst-padre{ color:rgba(234,223,206,.70) !important; } .lst-cab > .material-icons-outlined, .lst-anio > .material-icons-outlined, .lst-candado, .lst-candado-t{ color:#EADFCE !important; } .lst-nombre--eco{ font-family:var(--glare) !important; font-size:1.1rem !important; } .lst-anio-v{ font-family:var(--glare) !important; font-size:1.6rem !important; color:#FFFFFF !important; } .cl-com{ background-color:#1A2633 !important; border-color:rgba(234,223,206,.16) !important; border-radius:9px !important; } .cl-com em{ color:rgba(234,223,206,.70) !important; } /* ── 12 · LOS COLORES ESCRITOS A MANO EN EL MARCADO ───────────────────── Unas decenas de estilos en línea (fondos claros de aviso y letras oscuras). Adentro de la app cualquier fondo claro escrito a mano pasa a la hoja un paso más clara, y cualquier letra oscura escrita a mano pasa a crema. */ #contenido [style*="background:#F"], #contenido [style*="background:#f"], #contenido [style*="background:#E"], #contenido [style*="background:#e"], #contenido [style*="background:#fff"], #contenido [style*="background:white"], #contenido [style*="background:var(--papel)"], #zona-modales [style*="background:#F"], #zona-modales [style*="background:#f"], #zona-modales [style*="background:#E"], #zona-modales [style*="background:#e"], #zona-modales [style*="background:#fff"], #zona-modales [style*="background:white"]{ background-color:rgba(234,223,206,.06) !important; background-image:none !important; } #contenido [style*="background:var(--papel-tenue)"], #zona-modales [style*="background:var(--papel-tenue)"]{ background-color:#1E2935 !important; } #contenido [style*="color:#1"], #contenido [style*="color:#2"], #contenido [style*="color:#3"], #contenido [style*="color:#4"], #contenido [style*="color:#5"], #contenido [style*="color:#6"], #contenido [style*="color:#7"], #contenido [style*="color:#8"], #contenido [style*="color:#9"], #contenido [style*="color:#0"], #contenido [style*="color:#B"], #contenido [style*="color:#C"], #contenido [style*="color:#b"], #contenido [style*="color:#c"], #zona-modales [style*="color:#1"], #zona-modales [style*="color:#2"], #zona-modales [style*="color:#3"], #zona-modales [style*="color:#4"], #zona-modales [style*="color:#5"], #zona-modales [style*="color:#6"], #zona-modales [style*="color:#7"], #zona-modales [style*="color:#8"], #zona-modales [style*="color:#9"], #zona-modales [style*="color:#0"], #zona-modales [style*="color:#B"], #zona-modales [style*="color:#C"], #zona-modales [style*="color:#b"], #zona-modales [style*="color:#c"]{ color:#EADFCE !important; } #contenido [style*="border:1px solid #"], #contenido [style*="border-color:#"], #zona-modales [style*="border:1px solid #"], #zona-modales [style*="border-color:#"]{ border-color:rgba(234,223,206,.16) !important; } /* Los rellenos de marca escritos a mano sí se respetan (deep, teal, tinta): llevan letra blanca. */ #contenido [style*="background:var(--teal)"], #zona-modales [style*="background:var(--teal)"], #contenido [style*="background:var(--navy)"], #zona-modales [style*="background:var(--navy)"]{ background-color:#005565 !important; color:#FFFFFF !important; } /* ── 13 · EL LOGIN: el mismo, con la foto de la cima y los acentos de la marca ── Pedido de Luis: la foto anterior (un atardecer) no representaba la cima del árbol. Ahora: copas de palmeras y selva vistas desde arriba — el que está en la cima. El panel y sus piezas no cambian; los acentos ámbar del atardecer vuelven a la marca. */ .atlas-login-bg{ background:url('fotos/1646928234724-ddfac30993e6.webp') no-repeat center center fixed !important; background-size:cover !important; } .glass-panel{ background:rgba(26,38,51,.45) !important; backdrop-filter:blur(16px) saturate(1.05); -webkit-backdrop-filter:blur(16px) saturate(1.05); border-color:rgba(234,223,206,.22) !important; } .atlas-input:focus{ box-shadow:0 0 0 4px rgba(234,223,206,.30) !important; } #pantalla-ingreso .bg-atlas-insignia{ background-color:#005565 !important; } /* ── 14 · LAS PIEZAS DE LA INTEGRACIÓN (cima-integracion, -clientes, -venta) ── Traían tintes claros de aviso con letra oscura. En la hoja oscura: relleno de marca o contorno, y la letra que pide su fondo. */ #aplicacion a:not(.sidebar-link):not(.btn){ color:#EADFCE; text-decoration-color:rgba(0,109,130,.9); text-underline-offset:3px; } #aplicacion a:not(.sidebar-link):not(.btn):hover{ color:#FFFFFF; } .enl-chip{ background-color:transparent !important; border-color:rgba(234,223,206,.16) !important; color:rgba(234,223,206,.70) !important; border-radius:99px !important; } .enl-chip:hover{ color:#EADFCE !important; border-color:rgba(234,223,206,.45) !important; } .enl-chip.activa{ background-color:#005565 !important; border-color:#005565 !important; color:#FFFFFF !important; } .enl-chip.activa *{ color:#FFFFFF !important; } .enl-barra, .vt-cab, .enl-aria{ background:#1E2935 !important; border-color:rgba(234,223,206,.12) !important; } .enl-cand{ border-color:rgba(234,223,206,.16) !important; background-color:transparent !important; border-radius:9px !important; } .enl-cand:hover{ background-color:#27323E !important; border-color:rgba(234,223,206,.45) !important; } .enl-barrita span{ background:#7D9B5B !important; } .enl-estado--confirmado, .enl-hecho{ background-color:#7D9B5B !important; color:#1A2633 !important; border-color:#7D9B5B !important; } .enl-hecho *{ color:#1A2633 !important; } .enl-estado--auto, .cl-tipo--agencia{ background-color:#005565 !important; color:#FFFFFF !important; } .enl-estado--propio, .cl-tipo--corporativo{ background-color:transparent !important; color:#EADFCE !important; border:1px solid #006D82 !important; } .enl-estado--dudoso, .cl-cons, .vt-pend, .v-aviso, .v-foto__bar button.falta{ background-color:transparent !important; color:#EADFCE !important; border:1px solid #8A6A2F !important; background-image:repeating-linear-gradient(135deg, rgba(138,106,47,.22) 0 4px, transparent 4px 8px) !important; } .enl-estado--sin_par, .cl-tipo--generico{ background-color:transparent !important; color:rgba(234,223,206,.85) !important; border:1px solid rgba(234,223,206,.16) !important; } .cl-tipo--directo{ background-color:#7D9B5B !important; color:#1A2633 !important; } .chip-ia{ background-color:transparent !important; color:#EADFCE !important; border:1px solid rgba(234,223,206,.22) !important; } .chip-ia--falta{ color:rgba(234,223,206,.85) !important; border-style:dashed !important; } .vt-seccion{ color:rgba(234,223,206,.70) !important; font-size:.66rem !important; letter-spacing:.22em !important; } .v-mas{ color:#EADFCE !important; text-decoration:underline; text-decoration-color:#006D82; text-underline-offset:3px; } .v-quitar{ color:#EADFCE !important; } .pv-srv, .v-check, .v-temp, .v-ficha-foto, .v-mapa, .v-foto__img{ background-color:#222E3A !important; border-color:rgba(234,223,206,.16) !important; } .v-foto__bar button{ background-color:transparent !important; color:#EADFCE !important; border-color:rgba(234,223,206,.22) !important; } .v-foto__bar button.on{ background-color:#B3261E !important; border-color:#B3261E !important; color:#FFFFFF !important; } .v-tabla input{ background-color:#1A2633 !important; } @media (prefers-reduced-motion:reduce){ .cima-cab__foto{ transition:opacity .01s linear !important; transform:none !important; } .sidebar-link::after{ transition:none !important; } } /* Los marcos del catálogo de ARIA: sin borde, sobre el mismo suelo. */ .ia-seccion, .ia-editor{ background-color:#1A2633 !important; border:0 !important; color-scheme:dark; } .caja-modal .ia-editor{ background-color:#222E3A !important; } /* Las pastillas de reparto (tipos de servicio…) traían un color por tipo, escrito a mano. En la hoja oscura: contorno crema y la cifra en blanco; la activa, relleno deep. */ .stat-fichas .pastilla{ background-color:transparent !important; color:#EADFCE !important; border:1px solid rgba(234,223,206,.16) !important; } .stat-fichas .pastilla:hover{ border-color:rgba(234,223,206,.55) !important; } .stat-fichas .pastilla b{ color:#FFFFFF !important; margin-left:.2rem; } .stat-fichas .pastilla span{ color:rgba(234,223,206,.70) !important; } .stat-fichas .pastilla.activa{ background-color:#005565 !important; border-color:#005565 !important; color:#FFFFFF !important; } /* ── 15 · Lo que la auditoría de contraste encontró (2026-09-21) ─────────── */ /* Letra con opacidad o en salvia: sobre tinta bajaba de 4,5:1. */ #contenido span[style*="opacity"], #contenido .stat-fichas .pastilla span{ opacity:1 !important; } #contenido [style*="color:var(--sage)"]{ color:#EADFCE !important; } .cp-campo.lleno .cp-estado{ color:#7D9B5B !important; } .tf-cifra small{ color:rgba(234,223,206,.70) !important; } /* Los rellenos de urgencia escritos a mano llevan letra blanca (ocre 5,0 · rojo 6,6 · teal 5,3). */ #contenido [style*="background:#8A6A2F"], #contenido [style*="background:#B3261E"], #contenido [style*="background:#005565"], #contenido [style*="background:#006D82"]{ color:#FFFFFF !important; } #contenido [style*="background:#8A6A2F"] *, #contenido [style*="background:#B3261E"] *, #contenido [style*="background:#005565"] *, #contenido [style*="background:#006D82"] *{ color:#FFFFFF !important; } #contenido [style*="background:#7D9B5B"], #contenido [style*="background:#7D9B5B"] *{ color:#1A2633 !important; } /* Un panel «ya resuelto» se atenuaba con opacidad; la letra no se diluye (§2). Se aquieta con el material: un suelo más hondo y el filete tenue. */ #contenido .panel[style*="opacity"]{ opacity:1 !important; background-color:#1E2935 !important; border-color:rgba(234,223,206,.10) !important; } /* Las pastillas de reparto con su tinte escrito a mano: gana la regla de la pastilla. */ #contenido .stat-fichas .pastilla[style]{ background-color:transparent !important; color:#EADFCE !important; } #contenido .stat-fichas .pastilla[style] b{ color:#FFFFFF !important; } #contenido .stat-fichas .pastilla[style] span{ color:rgba(234,223,206,.70) !important; } #contenido .stat-fichas .pastilla.activa[style], #contenido .stat-fichas .pastilla.activa[style] *{ background-color:#005565 !important; color:#FFFFFF !important; } /* ── 16 · La revisión completa (2026-09-21, segunda vuelta) ───────────────── */ /* El riel en pantallas bajas: la cabecera y el pie se comían el menú (quedaba una ventana de ~150 px). Cabecera más compacta, pie en una línea y la firma sólo si sobra alto. */ .cabecera-lateral{ padding:1.5rem 1.1rem .95rem !important; } .cabecera-lateral img.cima-logo{ margin-bottom:.55rem !important; } .cabecera-lateral .user-glass-pill{ margin-top:.85rem !important; } #accesos-rapidos{ margin-top:.7rem !important; } .cabecera-lateral .user-glass-pill button{ color:rgba(234,223,206,.70) !important; } .cabecera-lateral .user-glass-pill button:hover{ color:#FFFFFF !important; } /* ⚠ `:last-child` NO ALCANZA EL PIE, y estas reglas llevan tiempo sin aplicar. El riel tiene SIETE hijos y el último no es el pie: es `#cima-ocultar-menu`, que el JavaScript añade al arrancar. El pie es el sexto, así que `:last-child` no casa nunca y lo que se ve sale de la regla genérica `.user-glass-pill`. Lo descubrí midiendo (2026-09-23): creí haber cambiado el pie y estaba leyendo la pastilla de la cabecera. El selector que SÍ acierta es `> div.ocultable:last-of-type`, y es el que usan las reglas nuevas de más abajo. Éstas se dejan como están a propósito: activarlas cambiaría un pie que ya se dio por bueno, y eso es otra conversación, no un arreglo. */ .barra-lateral > .ocultable:last-child{ background:transparent !important; backdrop-filter:none !important; padding:.75rem 1rem .9rem !important; border-top-color:rgba(234,223,206,.10) !important; } .barra-lateral > .ocultable:last-child .user-glass-pill{ padding:3px !important; } .barra-lateral > .ocultable:last-child .lang-btn{ padding:.32rem !important; border-radius:99px !important; } .barra-lateral > .ocultable:last-child > div:last-child{ margin-top:.6rem !important; } @media (max-height:860px){ .barra-lateral > .ocultable:last-child > div:last-child{ display:none !important; } } @media (max-height:720px){ .cabecera-lateral h2{ display:none !important; } } /* Las cuatro cifras madre en UNA fila: con tres columnas la cuarta quedaba sola y dejaba un hueco claro al lado (§ «nada queda solo en una fila»). */ @media (min-width:821px){ .cifras-madre{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; } } .cifras-madre{ background:#222E3A !important; gap:0 !important; } .cifra-madre + .cifra-madre{ border-left:1px solid rgba(234,223,206,.12); } @media (max-width:820px){ .cifra-madre + .cifra-madre{ border-left:0; } .cifra-madre:nth-child(even){ border-left:1px solid rgba(234,223,206,.12) !important; } .cifra-madre:nth-child(n+3){ border-top:1px solid rgba(234,223,206,.12); } } @media (max-width:480px){ .cifra-madre:nth-child(even){ border-left:0 !important; } .cifra-madre + .cifra-madre{ border-top:1px solid rgba(234,223,206,.12); } } /* ── 17 · Sobre la foto, nada de cajas (Luis: «esos botones sobre la imagen no deberían tener ese fondo; se ve súper raro ese contenedor teal»). El segmento Fichas/Tabla y los demás controles de la cabecera van sueltos: pastillas de cristal sobre el velo, la activa en blanco con letra tinta (15,3:1). */ #acciones-vista .segmento{ background:transparent !important; border:0 !important; padding:0 !important; gap:.5rem !important; box-shadow:none !important; } #acciones-vista .segmento .enl-chip{ background:rgba(26,38,51,.45) !important; color:#FFFFFF !important; border:1px solid rgba(255,255,255,.30) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); padding:.5rem 1.1rem !important; } #acciones-vista .segmento .enl-chip:hover{ border-color:#FFFFFF !important; background:rgba(26,38,51,.45) !important; } #acciones-vista .segmento .enl-chip.activa{ background:#FFFFFF !important; color:#1A2633 !important; border-color:#FFFFFF !important; } #acciones-vista .segmento .enl-chip.activa *{ color:#1A2633 !important; } /* El botón de menú sobre la foto: cristal de tinta, no un círculo gris. */ #boton-menu{ background:rgba(26,38,51,.45) !important; border:1px solid rgba(255,255,255,.30) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } /* El velo, también arriba: el antetítulo, la cifra y el menú viven en la franja de arriba, que en fotos con niebla o cielo es clara. Tinta 45 % → 0 en el primer 35 % de la altura, y la de abajo sigue igual desde el 45 %: las dos no se tocan, así que en ningún punto pasa del 45 % que permite el libro. */ .cima-cab__velo{ 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%) !important; } /* «Ver por proveedor real» y la cuenta: sin el filete suelto a la izquierda cuando bajan de renglón. */ #contenido div[style*="border-left:1px solid var(--borde)"][style*="margin-left:auto"]{ border-left:0 !important; padding-left:0 !important; flex-wrap:wrap; } /* El conmutador Fichas / Tabla de Proveedores es un grupo con estilo en línea (una caja con fondo y borde): sobre la foto, sin caja. La opción elegida en blanco; la otra, cristal. */ #acciones-vista > div[style*="display:flex"]{ background:transparent !important; border:0 !important; padding:0 !important; gap:.5rem !important; border-radius:0 !important; } #acciones-vista > div[style*="display:flex"] > .btn-principal{ background:#FFFFFF !important; color:#1A2633 !important; border-color:#FFFFFF !important; } #acciones-vista > div[style*="display:flex"] > .btn-fantasma{ background:rgba(26,38,51,.45) !important; color:#FFFFFF !important; border:1px solid rgba(255,255,255,.30) !important; } #acciones-vista > div[style*="display:flex"] > .btn{ padding:.5rem 1.1rem !important; font-size:.84rem !important; } /* Los controles nativos (casillas, flechas de select, calendarios) en su versión oscura: la casilla blanca pura era un parche de luz en la hoja. */ #aplicacion, #zona-modales, .combo-panel{ color-scheme:dark; } #boton-menu{ background:rgba(26,38,51,.62) !important; } /* Tarifas: sus bloques van sueltos en el contenido (sin .lienzo) y quedaban pegados al borde. */ #contenido > .tf-rejilla, #contenido > .tf-lista-cab, #contenido > .tf-lista, #contenido > .tf-temps{ margin-left:2.25rem !important; margin-right:2.25rem !important; } #contenido > .tf-rejilla:first-child{ margin-top:2.25rem !important; } #contenido > .tf-lista:last-child{ margin-bottom:3rem !important; } @media (max-width:820px){ #contenido > .tf-rejilla, #contenido > .tf-lista-cab, #contenido > .tf-lista, #contenido > .tf-temps{ margin-left:1rem !important; margin-right:1rem !important; } #contenido > .tf-rejilla:first-child{ margin-top:1.25rem !important; } } /* Las cifras de los recuadros de Pólizas (y cualquier cifra de panel escrita a mano): Marcellus grande, como todas las cifras de CIMA. */ #contenido .panel > p[style*="font-size:1.6rem"], #contenido .panel > p[style*="font-weight:800"][style*="font-size:1."]{ font-family:var(--glare) !important; font-size:2.6rem !important; line-height:1 !important; color:#FFFFFF !important; margin-top:.5rem !important; font-variant-numeric:tabular-nums; } /* Las vistas que ponen sus bloques sueltos en el contenido (Tickets, Listas): el mismo marco que el resto — 36 px en escritorio, 16 en el celular. */ #contenido:has(> .panel:first-child), #contenido:has(> div:first-child + .panel){ padding:2.25rem !important; } #contenido > .lst{ padding:2.25rem !important; } @media (max-width:820px){ #contenido:has(> .panel:first-child), #contenido:has(> div:first-child + .panel){ padding:1rem !important; } #contenido > .lst{ padding:1.25rem 1rem 3rem !important; } #contenido > div[style*="padding:1.5rem"]{ padding:1.25rem 1rem 3rem !important; } } /* La cabecera de las fichas (servicio, proveedor…): `.bg-atlas-solido` pintaba un degradado de --navy a --teal, que adentro de la app son LETRA (blanco y crema): quedaba una franja clara con letra blanca encima. Ahora: tinta hacia deep, los dos de la marca, y letra blanca. */ .bg-atlas-solido{ background:linear-gradient(135deg, #141D27 0%, #1A2633 45%, #005565 100%) !important; color:#FFFFFF !important; border-bottom:1px solid rgba(234,223,206,.12); } .bg-atlas-solido h2, .bg-atlas-solido h3, .bg-atlas-solido .fuente-titular{ color:#FFFFFF !important; } .bg-atlas-solido p, .bg-atlas-solido span:not(.material-icons-outlined):not(.etq){ color:rgba(255,255,255,.80) !important; } .bg-atlas-solido button{ color:#FFFFFF !important; background:rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.22) !important; border-radius:99px !important; } .bg-atlas-solido button:hover{ border-color:#FFFFFF !important; } /* Las pestañas de la ficha de proveedor: pastillas que bajan de renglón también en escritorio (eran una tira de 14 con scroll lateral). La activa en deep. */ #zona-detalle div.sin-barra:has(> .pestana){ flex-wrap:wrap !important; overflow-x:visible !important; gap:.4rem !important; padding:1rem 1.25rem !important; border-bottom:1px solid rgba(234,223,206,.12) !important; background:transparent !important; } #zona-detalle div.sin-barra > .pestana{ flex:none !important; border:1px solid rgba(234,223,206,.16) !important; border-radius:99px !important; padding:.4rem .85rem !important; font-size:.82rem !important; margin:0 !important; } #zona-detalle div.sin-barra > .pestana:hover{ border-color:rgba(234,223,206,.45) !important; } #zona-detalle div.sin-barra > .pestana.activa{ background-color:#005565 !important; border-color:#005565 !important; color:#FFFFFF !important; } /* En las tablas, las etiquetas parten línea: no se montan sobre la columna de al lado. */ .tabla td .etq, .tabla td .chip-ia, .tabla td .enl-estado{ white-space:normal !important; max-width:100%; line-height:1.3; } .tabla thead th{ overflow:hidden; text-overflow:ellipsis; } /* LAS CINCO COLUMNAS TIENEN QUE SUMAR 100, y ésta las dejaba en 93: el `colgroup` del marcado reparte 24+31+18+15+12, y acá se reescribían la segunda (26) y la última (10) sin devolver a nadie los 7 puntos que se quitaban. Con `table-layout:fixed`, ese 7% no se reparte: queda como una franja muerta al final de la tabla, y la columna de vigencia no llega al borde (Luis, 2026-09-23). Ahora suman 100 y el ancho sobrante va a Servicio, que es la columna con los nombres largos. */ @media (min-width:821px){ .tabla.tabla-movil colgroup col:nth-child(2){ width:30% !important; } /* Servicio */ .tabla.tabla-movil colgroup col:last-child{ width:13% !important; } /* Vigencia */ } /* 24 + 30 + 18 + 15 + 13 = 100 */ /* Rejillas sin huecos: las 6 cifras de Pólizas en una fila (3 + 3 en pantallas medianas, 2 × 3 en el celular) y los 4 recuadros de Tarifas en una fila. */ #contenido div[style*="minmax(140px,1fr)"]:has(> .panel){ grid-template-columns:repeat(6, minmax(0,1fr)) !important; } @media (max-width:1180px){ #contenido div[style*="minmax(140px,1fr)"]:has(> .panel){ grid-template-columns:repeat(3, minmax(0,1fr)) !important; } } @media (max-width:560px){ #contenido div[style*="minmax(140px,1fr)"]:has(> .panel){ grid-template-columns:repeat(2, minmax(0,1fr)) !important; } } @media (min-width:1025px){ .tf-rejilla{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; } } @media (min-width:561px) and (max-width:1024px){ .tf-rejilla{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; } } /* El cero de Marcellus es un círculo perfecto: solo, se lee como la letra «O». Una cifra que empieza en cero va en la letra de texto, ligera (cima-lujo.js le pone la clase). */ .cima-cero{ font-family:var(--sans) !important; font-weight:300 !important; letter-spacing:-.03em !important; } /* Las pestañas de Listas y tipos: bajan de renglón en toda anchura (dejaban una barra lateral). */ .lst-pestanas{ flex-wrap:wrap !important; overflow-x:visible !important; } .lst-pestanas .pestana{ flex:none !important; } /* Las pestañas de las fichas (servicio, proveedor): pastillas que bajan de renglón en toda anchura — eran una tira con scroll lateral. Siguen pegadas arriba al desplazar la ficha. */ .pestanas-editor{ flex-wrap:wrap !important; overflow-x:visible !important; gap:.35rem !important; padding:.8rem 1.4rem .85rem !important; border-bottom-color:rgba(234,223,206,.12) !important; } .pestanas-editor .pestana{ flex:none !important; border:1px solid rgba(234,223,206,.16) !important; border-radius:99px !important; padding:.36rem .8rem !important; font-size:.82rem !important; margin:0 !important; } .pestanas-editor .pestana:hover{ border-color:rgba(234,223,206,.45) !important; } .pestanas-editor .pestana.activa{ background-color:#005565 !important; border-color:#005565 !important; color:#FFFFFF !important; } .pestanas-editor .pestana .etq{ background:rgba(234,223,206,.10) !important; border:0 !important; color:inherit !important; } /* Los botones del papel de cada foto: pastillas pequeñas. */ .v-foto__bar{ gap:.3rem !important; } .v-foto__bar button{ border-radius:99px !important; padding:.28rem .65rem !important; font-size:.72rem !important; } .v-foto__img{ border-radius:9px !important; } /* ── 18 · EL RIEL, REHECHO (2026-09-21) ────────────────────────────────────── Luis: «no calza con el diseño luxury; cuando se colapsa el logo debería cambiar por el ícono, se ve todo súper mal; quiero poder ocultar la barra del todo; debe mejorar mucho su diseño». Tres estados: abierto, colapsado (sólo íconos, con la estrella de la marca) y oculto (sin riel; un botón flotante lo trae). Todo en escritorio: en el celular el menú sigue siendo el cajón de siempre. */ /* Sin barra de desplazamiento a la vista en el menú: se desliza igual. Arriba y abajo el contenido se funde, para que se note que sigue. */ #aplicacion #menu{ scrollbar-width:none !important; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); } #aplicacion #menu::-webkit-scrollbar{ display:none; } /* Abierto. Los grupos con su filete; las entradas como pastillas; lo activo, un velo teal. */ #menu .menu-grupo{ display:flex; align-items:center; gap:.7rem; padding:1.35rem .95rem .55rem !important; font-size:.6rem !important; letter-spacing:.26em !important; color:rgba(234,223,206,.62) !important; } #menu .menu-grupo::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(234,223,206,.16), transparent); } #menu .menu-grupo:first-child{ padding-top:.4rem !important; } .sidebar-link{ border-radius:99px !important; padding:.52rem .95rem !important; margin:1px 0 !important; gap:0; } .sidebar-link .material-icons-outlined{ margin-right:.85rem !important; font-size:18px !important; } .sidebar-link::after{ display:none !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) !important; } .sidebar-link.active .material-icons-outlined{ color:#FFFFFF !important; } .sidebar-cuenta{ min-width:2.1rem; text-align:center; padding:.1rem .45rem !important; border-radius:99px !important; background:rgba(234,223,206,.07) !important; font-size:.68rem !important; line-height:1.4; } .sidebar-link.active .sidebar-cuenta{ background:rgba(255,255,255,.14) !important; color:#FFFFFF !important; } /* Los dos botones de arriba: ocultar (izquierda) y colapsar (derecha), gemelos. */ #boton-colapsar, #cima-ocultar-menu{ position:absolute; top:.75rem; z-index:5; width:30px !important; height:30px !important; border-radius:99px !important; display:flex; align-items:center; justify-content:center; cursor:pointer; background:transparent !important; border:1px solid rgba(234,223,206,.16) !important; color:#EADFCE !important; transition:border-color 120ms linear, background-color 120ms linear !important; } #boton-colapsar{ right:.75rem !important; } #cima-ocultar-menu{ left:.75rem; } #boton-colapsar:hover, #cima-ocultar-menu:hover{ border-color:rgba(234,223,206,.6) !important; background:rgba(234,223,206,.06) !important; } #boton-colapsar .material-icons-outlined, #cima-ocultar-menu .material-icons-outlined{ font-size:17px !important; color:#EADFCE !important; } .cabecera-lateral img.cima-estrella{ display:none !important; } @media (max-width:1024px){ #cima-ocultar-menu, #cima-mostrar-menu{ display:none !important; } } @media (min-width:1025px){ /* abierto: aire arriba para los dos botones, que no pisen el logo */ .armazon:not(.colapsado) .cabecera-lateral{ padding-top:3.3rem !important; } /* Colapsado: la estrella en vez del logo, los botones en columna, íconos en baldosas. */ .armazon.colapsado .cabecera-lateral{ padding:5.4rem .5rem 1rem !important; } .armazon.colapsado .cabecera-lateral img.cima-logo{ display:none !important; } .armazon.colapsado .cabecera-lateral img.cima-estrella{ display:block !important; width:34px; height:34px; margin:0 auto !important; opacity:.95; } .armazon.colapsado #boton-colapsar, .armazon.colapsado #cima-ocultar-menu{ left:50% !important; right:auto !important; transform:translateX(-50%) !important; } .armazon.colapsado #boton-colapsar{ top:.75rem !important; } .armazon.colapsado #cima-ocultar-menu{ top:2.95rem; } .armazon.colapsado #accesos-rapidos{ margin-top:1rem !important; gap:.45rem !important; } .armazon.colapsado #accesos-rapidos button{ width:2.3rem !important; height:2.3rem !important; } .armazon.colapsado #menu{ padding:.7rem 0 1rem !important; align-items:center; gap:.2rem !important; } .armazon.colapsado .sidebar-link{ width:44px !important; height:44px !important; padding:0 !important; border-radius:13px !important; justify-content:center; } .armazon.colapsado .sidebar-link .material-icons-outlined{ margin:0 !important; font-size:20px !important; } .armazon.colapsado .sidebar-link.active{ background:#005565 !important; box-shadow:none !important; } .armazon.colapsado .sidebar-link.active::before{ display:none !important; } /* los contadores no caben en una baldosa: el globo dice qué es cada una */ .armazon.colapsado .sidebar-cuenta{ display:none !important; } /* en vez del rótulo del grupo, un filete corto entre grupos */ .armazon.colapsado #menu .menu-grupo{ display:block !important; font-size:0 !important; padding:0 !important; width:24px; height:1px; margin:.55rem auto; background:rgba(234,223,206,.18); } .armazon.colapsado #menu .menu-grupo::after{ display:none; } .armazon.colapsado #menu .menu-grupo:first-child{ display:none !important; } /* Oculto: sin riel, todo el ancho para el trabajo. */ .armazon.menu-oculto, .armazon.menu-oculto.colapsado{ grid-template-columns:0 1fr !important; } .armazon.menu-oculto .barra-lateral{ visibility:hidden; border-right:0 !important; } .armazon.menu-oculto .zona-principal > header{ padding-left:4.6rem !important; } } /* El botón flotante que trae el menú de vuelta: vidrio sobre la foto de la cabecera. */ #cima-mostrar-menu{ position:fixed; top:1.05rem; left:1.05rem; z-index:60; width:42px; height:42px; border-radius:99px; display:none; align-items:center; justify-content:center; cursor:pointer; color:#FFFFFF; background:rgba(26,38,51,.45); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:background-color 120ms linear, border-color 120ms linear; } #cima-mostrar-menu:hover{ background:#005565; border-color:#005565; } #cima-mostrar-menu .material-icons-outlined{ font-size:20px; color:#FFFFFF; } @media (min-width:1025px){ body.cima-menu-oculto #cima-mostrar-menu{ display:flex; } } @media (prefers-reduced-motion:reduce){ .armazon{ transition:none !important; } } /* La ubicación que todavía no tiene lugar en el mapa de ecosistemas: filete punteado ocre. */ .lst-ubi.lst-ubi--sin-lugar{ border-style:dashed !important; border-color:#8A6A2F !important; } .lst-ubi button .material-icons-outlined{ vertical-align:-2px; } /* ── 19 · EL RIEL, COMO EL DE VIVERO (2026-09-21) ─────────────────────────── Luis: «el menú de VIVERO tiene un diseño muy elegante, quiero llevarlo a CIMA». Lo que cambia: el suelo liso de tinta honda, sin las manchas de luz que derivaban; el logo, el nombre en versalitas y debajo su sigla; la píldora del usuario; los grupos con su filete; las entradas como pastillas con el velo teal en la activa. Todo con las medidas de VIVERO. */ .sidebar.bg-atlas-insignia{ background:#141D27 !important; background-image:none !important; animation:none !important; } .sidebar.bg-atlas-insignia::before, .sidebar.bg-atlas-insignia::after, #barra-lateral .atlas-foco{ display:none !important; } @media (min-width:1025px){ .armazon:not(.colapsado) .cabecera-lateral{ padding:3.2rem 1.2rem 1.1rem !important; } } .cabecera-lateral{ border-bottom-color:rgba(234,223,206,.10) !important; } .cabecera-lateral img.cima-logo{ height:36px !important; margin:0 auto .85rem !important; } .cabecera-lateral h2{ font-size:.66rem !important; letter-spacing:.3em !important; color:rgba(234,223,206,.70) !important; } .cabecera-lateral .cima-sigla{ display:block; margin-top:.45rem; font-size:.62rem; line-height:1.4; color:rgba(234,223,206,.55); } .cabecera-lateral .user-glass-pill{ margin-top:1rem !important; padding:.5rem .85rem !important; border-radius:99px !important; } #inicial-usuario{ width:1.5rem !important; height:1.5rem !important; font-size:.66rem !important; } #nombre-usuario{ font-size:.84rem !important; } #menu{ padding:1rem .8rem 1.2rem !important; gap:2px !important; } #menu .menu-grupo{ padding:1.2rem .95rem .6rem !important; font-size:.6rem !important; letter-spacing:.26em !important; color:rgba(234,223,206,.62) !important; } #menu .menu-grupo:first-child{ padding-top:.2rem !important; } .sidebar-link{ padding:.55rem .95rem !important; margin:0 !important; } .sidebar-link > span:not(.material-icons-outlined):not(.sidebar-cuenta){ font-size:.84rem !important; } .sidebar-link.active{ background:linear-gradient(90deg, rgba(0,109,130,.42), rgba(0,109,130,.10)) !important; box-shadow:inset 0 0 0 1px rgba(234,223,206,.10) !important; } .barra-lateral > .ocultable:last-child{ border-top-color:rgba(234,223,206,.10) !important; padding:1rem 1.1rem 1.1rem !important; } @media (max-height:860px){ .cabecera-lateral .cima-sigla{ display:none; } } @media (min-width:1025px){ .armazon.colapsado .cabecera-lateral .cima-sigla{ display:none; } } /* El mismo ancho que el riel de VIVERO (w-72), y sin la sigla: NOMBRE · función. */ @media (min-width:1025px){ .armazon:not(.colapsado):not(.menu-oculto){ grid-template-columns:288px 1fr !important; } } /* ── 20 · El login, sin colores sueltos (pendiente chico) ───────────────────── «¿Olvidó su contraseña?» era cian (#7dd3d8), fuera del libro: sobre foto + velo va en blanco/crema. El ojo de la contraseña, sobre el cuadro blanco, en tinta. El aviso de clave temporal era amarillo: crema. */ #pantalla-ingreso button[onclick*="restablecerClave"]{ color:#EADFCE !important; font-weight:400 !important; } #pantalla-ingreso button[onclick*="verClave"]{ color:rgba(26,38,51,.55) !important; } #pantalla-ingreso button[onclick*="verClave"]:hover{ color:#005565 !important; } #pantalla-ingreso p[style*="#fcd34d"]{ color:#EADFCE !important; font-weight:400 !important; } /* ── 21 · Los títulos de los logins, iguales en las cuatro apps (Luis: «que se vean exactamente iguales») NOMBRE en Marcellus y su función en versalitas, con las medidas del login de VIVERO. */ #pantalla-ingreso h1{ font-family:Marcellus, "PP Fragment Glare", Georgia, serif !important; font-weight:400 !important; font-style:normal !important; font-size:2.6rem !important; line-height:1 !important; letter-spacing:.2em !important; padding-left:.2em !important; color:#FFFFFF !important; text-shadow:none !important; margin:0 !important; } #pantalla-ingreso h1 + p{ font-family:Figtree, "PP Fragment Sans", Inter, system-ui, sans-serif !important; font-weight:400 !important; font-size:.64rem !important; line-height:1.4 !important; letter-spacing:.34em !important; text-transform:uppercase !important; color:rgba(255,255,255,.85) !important; text-shadow:none !important; margin:.7rem 0 1.6rem !important; } /* ── 21 · EL RIEL, CALCADO DEL DE VIVERO Y GOLFITO (Luis, 2026-09-22) ────────── «Los tabs son muy pequeños, apuñados, con un acento que no es el mismo.» La causa: el menú es una columna flexible y con muchas secciones las entradas SE ENCOGÍAN (de 37,75 px a 24) en vez de deslizarse. Ahora cada entrada mide lo mismo que en VIVERO y el menú se desliza por dentro. Los grupos, la píldora del usuario (con la persona) y el activo, idénticos; los contadores fuera en el menú abierto (VIVERO no los tiene; en colapsado ya no estaban). */ #menu > *{ flex-shrink:0 !important; } #menu{ padding:1rem .8rem !important; gap:2px !important; } .sidebar-link{ min-height:37.75px; padding:.55rem .95rem !important; margin:0 !important; border-radius:99px !important; line-height:1.5 !important; color:rgba(234,223,206,.70) !important; transition:background-color 120ms linear, color 120ms linear !important; overflow:visible !important; } .sidebar-link .material-icons-outlined{ font-size:18px !important; margin-right:.85rem !important; color:rgba(234,223,206,.70); } .sidebar-link > span:not(.material-icons-outlined):not(.sidebar-cuenta){ font-size:.84rem !important; letter-spacing:.01em !important; } .sidebar-link:hover{ background:rgba(234,223,206,.06) !important; color:#EADFCE !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) !important; } .sidebar-link.active .material-icons-outlined, .sidebar-link:hover .material-icons-outlined{ color:#FFFFFF !important; } .sidebar-link::after, .sidebar-link::before{ display:none !important; } @media (min-width:1025px){ .armazon:not(.colapsado) .sidebar-cuenta{ display:none !important; } } #menu .menu-grupo{ display:flex; align-items:center; gap:.7rem; padding:.2rem .95rem .6rem !important; margin:0 !important; font-size:.6rem !important; letter-spacing:.26em !important; color:rgba(234,223,206,.62) !important; } #menu .menu-grupo:not(:first-child){ padding-top:1rem !important; } #menu .menu-grupo::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(234,223,206,.16), transparent); } /* la píldora del usuario, la de VIVERO: la persona en un círculo deep, el nombre y salir */ .cabecera-lateral .user-glass-pill{ padding:.5rem .75rem !important; border-radius:99px !important; background:rgba(234,223,206,.06) !important; border:1px solid rgba(234,223,206,.16) !important; backdrop-filter:none !important; } #inicial-usuario{ width:1.5rem !important; height:1.5rem !important; font-size:0 !important; background:#005565 !important; border:0 !important; display:inline-flex !important; align-items:center; justify-content:center; } #inicial-usuario::before{ content:"person"; font-family:'Material Icons Outlined'; font-size:13px; color:#FFFFFF; line-height:1; -webkit-font-feature-settings:'liga'; font-feature-settings:'liga'; } #nombre-usuario{ font-size:.75rem !important; color:#EADFCE !important; } /* la píldora como la de VIVERO: sólo el nombre (sin la línea del rol) */ #rol-usuario{ display:none !important; } /* LA FOTO YA NO RESPIRA (Luis, 2026-09-24). La cabecera se acercaba y se alejaba sin parar, un 12 % cada catorce segundos. Se retira por lo aprendido en ARIA: «ese zoom puede llegar a marear… que pasen nada más las imágenes». Y acá pesa más todavía, porque CIMA no cambia de fotografía dentro de una sección: la misma imagen respirando delante de quien trabaja toda la mañana es movimiento constante sin nada que lo justifique. Queda el fundido al cambiar de sección, que sí dice algo: cambiaste de sitio. */ /* ── 22 · SIN EL SCROLL GRANDE QUE MUEVE UN POQUITO (Luis, 2026-09-22) ───────── Proveedores (sobraban 38 px), Servicios (175), Tickets, Enlaces y Clientes: la página entera se deslizaba además de la lista. Ahora el contenido es una columna del alto exacto: la barra de filtros queda fija y SÓLO la lista o la tabla se desliza. */ @media (min-width:1025px){ #contenido:has(> .maestro-detalle), #contenido:has(> div[style*="max-height:calc(100vh"]), #contenido:has(> .enl-barra), #contenido:has(> .panel + .panel){ display:flex !important; flex-direction:column; overflow:hidden !important; } #contenido:has(> .maestro-detalle) > *, #contenido:has(> div[style*="max-height:calc(100vh"]) > *, #contenido:has(> .enl-barra) > *, #contenido:has(> .panel + .panel) > *{ flex:none; } #contenido > .maestro-detalle{ flex:1 1 auto !important; height:auto !important; min-height:0; } #contenido > div[style*="max-height:calc(100vh"]{ flex:1 1 auto !important; max-height:none !important; min-height:0; } #contenido:has(> .enl-barra) > :last-child, #contenido:has(> .panel + .panel) > :last-child{ flex:1 1 auto !important; min-height:0; overflow-y:auto !important; } /* Esa lista es una columna flex: al acotarle el alto, sus fichas se ENCOGÍAN a 4 px y la sección se veía vacía (Luis, 2026-09-22: «este apartado no muestra nada pero en móvil sí»). Las fichas no se encogen: se desliza la lista. */ #contenido > .enl-lista > *, #contenido:has(> .enl-barra) > :last-child > *{ flex:none !important; } } /* ── 23 · PROVEEDORES Y SERVICIOS, MÁS LUXURY (Luis, 2026-09-22) ───────────── El mismo lenguaje de VIVERO y Golfito: menos cajas y más aire. Los filtros son pastillas finas sin la franja de fondo; la lista respira y la fila elegida lleva el velo teal del riel; la ficha abre con el nombre grande en Marcellus, sin caja; las pestañas son un índice de libro (texto con subrayado teal) en dos renglones como mucho, sin scroll lateral; los tipos de servicio son chips finos parejos; la tabla, un libro contable. */ /* los filtros */ #contenido > div:first-child[style*="border-bottom"]{ background:transparent !important; border-bottom:0 !important; padding:1.1rem 1.5rem .9rem !important; gap:.55rem !important; } #contenido > div:first-child input[type="text"], #contenido > div:first-child input:not([type]), #contenido > div:first-child input[type="search"], #buscador, #contenido > div:first-child select{ height:38px; border-radius:99px !important; background-color:rgba(234,223,206,.04) !important; border:1px solid rgba(234,223,206,.12) !important; color:#EADFCE !important; font-size:.8rem !important; box-shadow:none !important; } #contenido > div:first-child select{ padding:0 2rem 0 1rem !important; } #contenido > div:first-child input:focus, #contenido > div:first-child select:focus{ border-color:#006D82 !important; background-color:rgba(0,109,130,.08) !important; outline:0 !important; } #contenido > div:first-child input::placeholder{ color:rgba(234,223,206,.45) !important; } /* la lista de proveedores */ #zona-lista{ background:transparent !important; border-right:1px solid rgba(234,223,206,.07) !important; } .fila-lista{ padding:1rem 1.35rem !important; border-left:0 !important; border-bottom:1px solid rgba(234,223,206,.055) !important; transition:background-color 120ms linear !important; } .fila-lista p:first-child{ font-size:.9rem !important; color:#FFFFFF !important; letter-spacing:.005em; } .fila-lista p + p{ font-size:.72rem !important; color:rgba(234,223,206,.52) !important; margin-top:.2rem !important; } .fila-lista:hover{ background-color:rgba(234,223,206,.03) !important; } .fila-lista.activa{ background:linear-gradient(90deg, rgba(0,109,130,.30), rgba(0,109,130,.05)) !important; box-shadow:inset 0 0 0 1px rgba(234,223,206,.06); } /* el estado: un punto de color y la palabra, en vez de la pastilla llena */ .fila-lista .etq, #zona-detalle .panel:first-of-type .etq{ background:transparent !important; border:0 !important; padding:0 !important; color:rgba(234,223,206,.72) !important; font-size:.66rem !important; letter-spacing:.14em !important; text-transform:uppercase; display:inline-flex !important; align-items:center; gap:.4rem; } .fila-lista .etq::before, #zona-detalle .panel:first-of-type .etq::before{ content:""; width:6px; height:6px; border-radius:99px; background:rgba(234,223,206,.4); flex:none; } .fila-lista .etq-ok::before, #zona-detalle .panel:first-of-type .etq-ok::before{ background:#7D9B5B; } .fila-lista .etq:not(.etq-ok):not(.etq-neutra)::before, #zona-detalle .panel:first-of-type .etq:not(.etq-ok):not(.etq-neutra)::before{ background:#B8904F; } /* la ficha: el encabezado sin caja, el nombre grande */ #zona-detalle{ background:transparent !important; } #zona-detalle > div > .panel:first-of-type{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:.4rem .3rem 1.2rem !important; } #zona-detalle > div > .panel:first-of-type h3{ font-size:2.3rem !important; line-height:1.08 !important; color:#FFFFFF !important; letter-spacing:-.005em; margin-top:.35rem !important; } #zona-detalle > div > .panel:first-of-type h3 + p{ font-size:.86rem !important; color:rgba(234,223,206,.6) !important; margin-top:.45rem !important; } #zona-detalle > div > .panel:first-of-type div[style*="border-radius:.55rem"]{ background:transparent !important; border:0 !important; border-top:1px solid rgba(234,223,206,.10) !important; border-radius:0 !important; padding:.8rem 0 0 !important; margin-top:1rem !important; } #zona-detalle > div > .panel + .panel{ background:rgba(234,223,206,.022) !important; border:1px solid rgba(234,223,206,.08) !important; border-radius:18px !important; box-shadow:none !important; overflow:hidden; } /* las pestañas: un índice de libro */ #zona-detalle div.sin-barra:has(> .pestana){ flex-wrap:wrap !important; overflow-x:visible !important; gap:0 1.5rem !important; padding:.35rem 1.6rem 0 !important; border-bottom:1px solid rgba(234,223,206,.10) !important; background:transparent !important; } #zona-detalle div.sin-barra > .pestana{ flex:none !important; border:0 !important; border-radius:0 !important; background:transparent !important; padding:.85rem 0 .75rem !important; font-size:.8rem !important; margin:0 !important; color:rgba(234,223,206,.6) !important; box-shadow:inset 0 -2px 0 transparent; transition:color 120ms linear, box-shadow 160ms linear !important; } #zona-detalle div.sin-barra > .pestana:hover{ color:#EADFCE !important; box-shadow:inset 0 -2px 0 rgba(234,223,206,.25); } #zona-detalle div.sin-barra > .pestana.activa{ background:transparent !important; color:#FFFFFF !important; box-shadow:inset 0 -2px 0 #006D82 !important; } #zona-detalle div.sin-barra > .pestana .etq{ background:transparent !important; border:0 !important; color:rgba(234,223,206,.5) !important; padding:0 !important; font-size:.7rem !important; margin-left:.3rem !important; } #zona-detalle dl{ padding:1.6rem 1.6rem 1.4rem !important; row-gap:1.35rem !important; } #zona-detalle dt{ font-size:.6rem !important; letter-spacing:.16em !important; color:rgba(234,223,206,.5) !important; } #zona-detalle dd{ font-size:.92rem !important; color:#FFFFFF !important; margin-top:.3rem !important; } /* Servicios: los tipos como chips finos y parejos; la tabla, un libro contable */ #contenido .stat-fichas{ gap:.45rem !important; } #contenido .stat-fichas .pastilla[style]{ padding:.38rem .85rem !important; font-size:.66rem !important; letter-spacing:.1em !important; border-color:rgba(234,223,206,.10) !important; } #contenido .tabla{ border-collapse:separate !important; border-spacing:0 !important; } #contenido .tabla thead th{ background:#1A2633 !important; font-size:.6rem !important; letter-spacing:.12em !important; color:rgba(234,223,206,.5) !important; border-bottom:1px solid rgba(234,223,206,.12) !important; padding:.85rem .8rem .75rem !important; } #contenido .tabla tbody td{ padding:1rem .8rem !important; border-bottom:1px solid rgba(234,223,206,.055) !important; background:transparent !important; vertical-align:top; } #contenido .tabla tbody tr:hover td{ background:rgba(234,223,206,.025) !important; } #contenido .tabla td a[onclick^="App.abrirFicha"]{ color:#FFFFFF !important; text-decoration:none !important; font-weight:400 !important; border-bottom:1px solid rgba(234,223,206,.22); } #contenido .tabla td a[onclick^="App.abrirFicha"]:hover{ border-bottom-color:#006D82; } /* los filtros caben en una línea: el buscador cede y las listas miden lo que dicen */ @media (min-width:1025px){ #contenido > div:first-child[style*="border-bottom"] > div[style*="flex:1"]{ flex:1 1 200px !important; min-width:170px !important; } #contenido > div:first-child select{ flex:0 1 auto !important; width:auto !important; max-width:200px; padding:0 1.8rem 0 .9rem !important; } } /* ── 24 · CIMA, MÁS LUXURY EN TODAS LAS SECCIONES (Luis, 2026-09-22) ───────────────────── El mismo lenguaje que ya tienen VIVERO, Golfito y ahora Proveedores y Servicios: menos cajas, más aire. Las tarjetas y paneles son hojas suaves (apenas más claras que la tinta, filete fino, esquinas amplias); una hoja dentro de otra ya no dibuja su propia caja; las cifras grandes en Marcellus fino; los grupos de Pólizas dejan la franja de color llena y pasan a un título fino con su punto de color; las etiquetas llenas pasan a chips finos; los campos son pastillas. Nada se quita ni cambia de lugar. */ #contenido .panel, #contenido .tf-tarj, #contenido .cifras-madre, #contenido .tarjeta-atencion, #contenido .estado-panel, #contenido .lst-tarjeta, #contenido .enl-item, #contenido .panel .panel, #contenido .panel .tf-tarj, #contenido .lst-tarjeta .lst-lista, #contenido .panel .estado-panel{ background:transparent !important; border:0 !important; } #contenido .cifra-madre{ background:transparent !important; } #contenido .enl-item:hover, #contenido .tarjeta-atencion:hover{ border-color:rgba(234,223,206,.18) !important; } #contenido .enl-barra, #contenido .enl-aria, #contenido .lst-hijos{ background:transparent !important; } /* las cifras grandes: Marcellus fino, blanco; el rótulo en versalitas tenues */ #contenido .tf-tarj [class*="cifra"], #contenido .cifra-madre [class*="num"], #contenido .panel [class*="cifra__n"]{ font-family:var(--serif, Marcellus, Georgia, serif) !important; font-weight:300 !important; color:#FFFFFF !important; } /* los grupos de Pólizas (Vencidas, 15 días…): título fino con su punto, sin la franja llena */ #contenido div[style*="border-radius:.55rem .55rem 0 0"]{ background:transparent !important; border-bottom:1px solid rgba(234,223,206,.10) !important; border-radius:0 !important; padding:.9rem 1.1rem .7rem !important; font-size:.66rem !important; letter-spacing:.2em !important; color:#EADFCE !important; } #contenido div[style*="border-radius:.55rem .55rem 0 0"]::before{ content:""; width:8px; height:8px; border-radius:99px; flex:none; background:rgba(234,223,206,.5); } #contenido div[style*="border-radius:.55rem .55rem 0 0"][style*="#B3261E"]::before{ background:#B3261E; box-shadow:0 0 0 4px rgba(179,38,30,.18); } #contenido div[style*="border-radius:.55rem .55rem 0 0"][style*="#8A6A2F"]::before{ background:#B8904F; } #contenido div[style*="border-radius:.55rem .55rem 0 0"][style*="#005565"]::before, #contenido div[style*="border-radius:.55rem .55rem 0 0"][style*="#006D82"]::before{ background:#006D82; } #contenido div[style*="border-radius:.55rem .55rem 0 0"][style*="#7D9B5B"]::before{ background:#7D9B5B; } /* las etiquetas llenas → chips finos: el color queda en el filete y en un punto */ #contenido .etq-teal, #contenido .etq-neutra, #contenido .etq-ocre, #contenido .etq-rojo, #contenido .etq-sage{ background:transparent !important; border:1px solid rgba(234,223,206,.16) !important; color:#EADFCE !important; font-size:.66rem !important; letter-spacing:.08em !important; padding:.2rem .6rem !important; } #contenido .etq-teal{ border-color:rgba(0,109,130,.7) !important; } #contenido .etq-ocre{ border-color:rgba(184,144,79,.7) !important; } #contenido .etq-rojo{ border-color:rgba(179,38,30,.75) !important; } #contenido .etq-sage{ border-color:rgba(125,155,91,.75) !important; } #contenido .etq .material-icons-outlined, #contenido .etq svg{ font-size:13px !important; opacity:.85; } /* los campos: pastillas */ #contenido input[type="text"], #contenido input[type="search"], #contenido input:not([type]), #contenido input[type="number"], #contenido input[type="date"]{ border-radius:99px !important; background-color:rgba(234,223,206,.04) !important; border:1px solid rgba(234,223,206,.12) !important; color:#EADFCE !important; } #contenido input:focus{ border-color:#006D82 !important; background-color:rgba(0,109,130,.08) !important; outline:0 !important; } /* los botones: el principal sin brillo, los suaves de filete fino */ #contenido .btn-suave{ border-color:rgba(234,223,206,.16) !important; } #contenido .btn-suave:hover, #contenido .btn-icono:hover{ border-color:rgba(234,223,206,.45) !important; background:rgba(234,223,206,.04) !important; } #contenido .btn-principal{ box-shadow:none !important; } /* las notas de contexto («56 pólizas están Sin clasificar…»): un filete teal fino, sin caja */ #contenido .lst-nota, #contenido .panel > p:only-child{ background:transparent !important; border:0 !important; border-left:0 !important; } #contenido .lst-nota{ padding:.2rem 0 .2rem .9rem !important; box-shadow:inset 2px 0 0 rgba(0,109,130,.6); border-radius:0 !important; color:rgba(234,223,206,.75) !important; } /* los segmentos (Tickets de fichas · Aperturas, Todos · Actualización…): pastillas finas */ #contenido .segmento{ border-color:rgba(234,223,206,.12) !important; } #contenido .enl-chip:not(.activa){ background:transparent !important; color:rgba(234,223,206,.7) !important; } #contenido .enl-chip:not(.activa):hover{ color:#FFFFFF !important; } /* ── 25 · MÁS CAMPO PARA EL CONTENIDO (Luis, 2026-09-22) ───────────────────────────────── La foto de la cabecera un poco menos alta (216 → 168 px) y los filtros plegables: el buscador siempre a la vista, el resto detrás de la pastilla «Filtros» con su cuenta. */ /* La misma escalera de alturas que VIVERO y Golfito, a cualquier tamaño (Luis, 2026-09-22). El número vive en una sola variable y se repite igual en las tres apps. */ :root{ --alto-foto:200px; } /* en el celular, 208 y no 176: el renglón de arriba es del botón del menú, que flota ahí, y con 176 el texto de las secciones con botones le llegaba por debajo (Luis, 2026-09-27) */ @media (max-width:767px){ :root{ --alto-foto:208px; } } .zona-principal > header{ min-height:var(--alto-foto) !important; } @media (min-width:768px){ .zona-principal > header{ height:var(--alto-foto) !important; } } /* En el celular la cabecera crece con lo que lleva: con alto fijo y recorte, el botón del menú se quedaba afuera (Luis, 2026-09-22: «en móvil dejé de ver el botón de expandir»). */ @media (max-width:767px){ .zona-principal > header{ height:auto !important; overflow:visible !important; } } /* El botón del menú va sobre la foto: el mismo contraste que los demás, o se pierde contra el follaje (Luis, 2026-09-22: «en móvil dejé de ver el botón de expandir»). */ #boton-menu{ background:rgba(13,23,32,.62) !important; border:1px solid rgba(234,223,206,.42) !important; color:#FFFFFF !important; box-shadow:0 8px 20px -10px rgba(13,23,32,.95) !important; /* La banda de la foto va en la capa 10 y el botón traía la 2: quedaba DEBAJO —se podía tocar pero no se veía (Luis, 2026-09-22)—. Sube por encima de la banda. */ z-index:13 !important; } #boton-menu:hover{ background:rgba(13,23,32,.78) !important; border-color:#EADFCE !important; } #contenido:not(.cima-filtros-abiertos) .cima-filtros__resto, #contenido:not(.cima-filtros-abiertos) .cima-filtros__chips{ display:none !important; } .cima-filtros{ align-items:center !important; } /* EL BUSCADOR NO SE COME LA BARRA. Con `flex:1` a secas se llevaba 616 de 888 píxeles, y al abrir los filtros no quedaba sitio para nada: los cuatro desplegables y las dos casillas caían de a uno por fila y el contador se iba solo a una tercera, con media barra vacía al lado (Luis, 2026-09-23: «se ven apuñados y hay mucho espacio que no se está usando»). Con un techo, el buscador sigue creciendo en pantallas anchas pero deja pasar al resto. */ .cima-filtros__buscar{ max-width:24rem; } /* Los desplegables tampoco piden más de lo que les cabe: con el texto largo de «Con y sin venta en ARIA» uno solo medía 200px. */ .cima-filtros select{ max-width:12rem; } .cima-filtros__bt{ height:38px; display:inline-flex; align-items:center; gap:.45rem; padding:0 .9rem 0 .8rem; border-radius:99px; cursor:pointer; flex:none; background:rgba(234,223,206,.04); border:1px solid rgba(234,223,206,.14); color:#EADFCE; font-size:.8rem; transition:border-color 120ms linear, background-color 120ms linear; } .cima-filtros__bt:hover{ border-color:rgba(234,223,206,.4); } .cima-filtros__bt[aria-expanded="true"]{ background:#005565; border-color:#005565; color:#FFFFFF; } .cima-filtros__bt .material-icons-outlined{ font-size:17px; } .cima-filtros__n{ min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:#8A6A2F; color:#FFFFFF; font-size:.66rem; display:inline-flex; align-items:center; justify-content:center; } .cima-filtros__n:empty{ display:none; } .cima-filtros__chev{ transition:transform .25s ease; } .cima-filtros__bt[aria-expanded="true"] .cima-filtros__chev{ transform:rotate(180deg); } /* ── 26 · LA PRIORIDAD DE LOS TICKETS ───────────────────────────────────────────────────── En la lista, un punto de color con la palabra (alta en rojo, media en ocre, baja en salvia); en el modal, tres pastillas para elegir. */ .tk-prio{ display:inline-flex; align-items:center; gap:.4rem; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:#EADFCE; padding:.15rem .1rem; } .tk-prio::before{ content:""; width:8px; height:8px; border-radius:99px; background:#B8904F; } .tk-prio--alta::before{ background:#B3261E; box-shadow:0 0 0 4px rgba(179,38,30,.18); } .tk-prio--baja::before{ background:#7D9B5B; } .tk-prio-elige{ display:flex; gap:.5rem; flex-wrap:wrap; } .tk-prio-op{ position:relative; cursor:pointer; } .tk-prio-op input{ position:absolute; opacity:0; pointer-events:none; } .tk-prio-op span{ display:inline-flex; align-items:center; gap:.45rem; height:36px; padding:0 1rem; border-radius:99px; font-size:.82rem; border:1px solid rgba(234,223,206,.16); color:#EADFCE; background:rgba(234,223,206,.03); transition:all 140ms linear; } .tk-prio-op span::before{ content:""; width:8px; height:8px; border-radius:99px; background:#B8904F; } .tk-prio-op--alta span::before{ background:#B3261E; } .tk-prio-op--baja span::before{ background:#7D9B5B; } .tk-prio-op:hover span{ border-color:rgba(234,223,206,.4); } .tk-prio-op input:checked + span{ border-color:#EADFCE; background:rgba(234,223,206,.10); color:#FFFFFF; } .tk-prio-op--alta input:checked + span{ border-color:#B3261E; background:rgba(179,38,30,.22); } .tk-prio-op input:focus-visible + span{ outline:2px solid #006D82; outline-offset:2px; } /* los botones que subieron a la foto: pastillas de vidrio oscuro, legibles sobre cualquier imagen */ #acciones-vista .cima-subido{ height:38px; border-radius:99px !important; padding:0 1rem !important; font-size:.8rem !important; background:rgba(20,29,39,.58) !important; border:1px solid rgba(255,255,255,.28) !important; color:#FFFFFF !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:inline-flex; align-items:center; gap:.4rem; } #acciones-vista .cima-subido:hover{ border-color:rgba(255,255,255,.6) !important; } #acciones-vista .cima-subido.btn-principal{ background:rgba(0,85,101,.85) !important; border-color:rgba(0,109,130,.9) !important; } #acciones-vista .cima-subido .etq{ background:rgba(255,255,255,.14) !important; border:0 !important; color:#FFFFFF !important; } /* ── 27 · CARGA CONTINUA: lo que todavía no se ve no se dibuja ─────────────────────────── */ .cima-oculta{ display:none !important; } .cima-mas{ display:flex; justify-content:center; padding:1rem 0 1.4rem; } tr.cima-mas{ display:table-row; } .cima-mas span{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(234,223,206,.45); } tr.cima-mas td{ text-align:center; padding:1rem 0 1.4rem !important; border:0 !important; } /* ── 28 · LA FICHA DEL PROVEEDOR, EN SU MODAL (Luis, 2026-09-22) ───────────────────────── Proveedores es una sola tabla; al tocar una fila se abre la ficha entera en el modal grande, con sus pestañas, como el de Servicios. Dentro del modal sobra el botón de volver a la lista y el panel no necesita su propio marco. */ .ficha-en-modal #volver-a-lista{ display:none !important; } .ficha-en-modal > div > .panel:first-of-type{ padding-top:0 !important; } .ficha-en-modal{ padding:0 !important; } /* la fila de Proveedores se toca entera */ #contenido table tbody > tr:not(.cima-mas){ cursor:pointer; } /* dentro del modal, el nombre y el subtítulo ya están en su barra: no se repiten abajo */ .ficha-en-modal > div > .panel:first-of-type h3, .ficha-en-modal > div > .panel:first-of-type h3 + p{ display:none !important; } .ficha-en-modal > div > .panel:first-of-type{ padding-bottom:.6rem !important; } /* ═══════════════════════════════════════════════════════════════════════════ 29 · LAS TRANSICIONES ENTRE SECCIONES (Luis, 2026-09-22) «Debés mejorar muchísimo las transiciones entre secciones.» Cambiar de sección es un movimiento con dirección: lo que se va se apaga y baja un pelo (160 ms), y lo nuevo entra de abajo hacia arriba — primero la cabecera (antetítulo, título, subtítulo, cifra), después el contenido, bloque por bloque. Nada rebota ni gira: es la misma calma del resto. ═══════════════════════════════════════════════════════════════════════════ */ #contenido.cima-va{ opacity:0; transform:translateY(6px); transition:opacity .16s cubic-bezier(.4,0,1,1), transform .16s cubic-bezier(.4,0,1,1); } @keyframes cimaEntra{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } } @keyframes cimaEntraLeve{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:none; } } @keyframes cimaEntraCifra{ from{ opacity:0; transform:translateY(12px) scale(.96); } to{ opacity:1; transform:none; } } /* El contenido: la primera pieza (la barra de filtros o la cifra madre) entra primero y las siguientes la siguen de a 55 ms. Más de seis y todas entran juntas: esperar cansa. */ #contenido.cima-entra > *{ animation:cimaEntra .52s cubic-bezier(.16,.84,.32,1) both; } #contenido.cima-entra > *:nth-child(1){ animation-delay:.02s; } #contenido.cima-entra > *:nth-child(2){ animation-delay:.07s; } #contenido.cima-entra > *:nth-child(3){ animation-delay:.12s; } #contenido.cima-entra > *:nth-child(n+4){ animation-delay:.17s; } /* Dentro del lienzo del tablero, las secciones entran igual (el lienzo es un solo hijo). */ #contenido.cima-entra > .lienzo > *{ animation:cimaEntraLeve .5s cubic-bezier(.16,.84,.32,1) both; } #contenido.cima-entra > .lienzo > *:nth-child(1){ animation-delay:.06s; } #contenido.cima-entra > .lienzo > *:nth-child(2){ animation-delay:.13s; } #contenido.cima-entra > .lienzo > *:nth-child(3){ animation-delay:.2s; } #contenido.cima-entra > .lienzo > *:nth-child(n+4){ animation-delay:.26s; } /* La cabecera: el antetítulo abre, el título sube detrás y la cifra llega al final. */ .cima-cab--entra .cima-cab__eyebrow{ animation:cimaEntraLeve .5s cubic-bezier(.16,.84,.32,1) both; } .cima-cab--entra #titulo-vista{ animation:cimaEntra .6s cubic-bezier(.16,.84,.32,1) both; animation-delay:.05s; } .cima-cab--entra #sub-vista{ animation:cimaEntraLeve .55s cubic-bezier(.16,.84,.32,1) both; animation-delay:.12s; } .cima-cab--entra .cima-cifra{ animation:cimaEntraCifra .7s cubic-bezier(.16,.84,.32,1) both; animation-delay:.16s; } .cima-cab--entra #acciones-vista{ animation:cimaEntraLeve .55s cubic-bezier(.16,.84,.32,1) both; animation-delay:.2s; } @media (prefers-reduced-motion:reduce){ #contenido.cima-va{ transition:none !important; opacity:1 !important; transform:none !important; } #contenido.cima-entra > *, #contenido.cima-entra > .lienzo > *, .cima-cab--entra *{ animation:none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 30 · EL REPASO FINO (Luis, 2026-09-22: «CIMA más luxury») ═══════════════════════════════════════════════════════════════════════════ */ /* Cuando la búsqueda no encuentra nada: una línea serena en el lugar de la lista, y la forma de volver. Antes quedaba el encabezado de la tabla solo, sin una palabra. */ .cima-vacio{ display:flex; flex-direction:column; align-items:center; gap:.55rem; text-align:center; padding:4.5rem 1.5rem 5rem; color:rgba(234,223,206,.70); } .cima-vacio .material-icons-outlined{ font-size:30px; color:rgba(234,223,206,.32); } .cima-vacio__t{ margin:0; font-family:var(--glare); font-size:1.5rem; line-height:1.2; color:#FFFFFF; letter-spacing:-.005em; } .cima-vacio__s{ margin:0; font-size:.84rem; max-width:44ch; line-height:1.5; } .cima-vacio .btn{ margin-top:.5rem; } .cima-sin-nada{ display:none !important; } /* la tabla vacía no muestra su encabezado solo */ /* Los títulos de las tarjetas de atención, en Marcellus como los demás títulos. */ .tarjeta-atencion h4{ font-family:var(--glare) !important; font-size:1.18rem !important; letter-spacing:-.005em !important; } /* La marca «consulta» de Clientes era el único chip con esquina cuadrada: pastilla, como todos. */ .cl-cons{ border-radius:99px !important; } /* ═══════════════════════════════════════════════════════════════════════════ 31 · LA TABLA DE PROVEEDORES: LO NECESARIO (Luis, 2026-09-22) «Tiene demasiados datos; debe estar lo necesario sin generar scroll horizontal.» Seis columnas de ancho fijo y dos renglones donde hace falta: el nombre arriba, su cédula y su agrupación debajo, en crema tenue. Lo demás vive en la ficha. ═══════════════════════════════════════════════════════════════════════════ */ .tabla-prov{ width:100% !important; min-width:0 !important; } #contenido .tabla-prov tbody td{ vertical-align:top; padding:.8rem .9rem !important; overflow-wrap:anywhere; } .prov-nom__n{ color:#FFFFFF; font-size:.9rem; line-height:1.3; } .prov-nom__c, .prov-sub{ margin-top:.2rem; font-size:.72rem; line-height:1.35; color:rgba(234,223,206,.62); } .prov-nom__c .fuente-mono{ font-size:.7rem; letter-spacing:.02em; } /* la fila entera se toca: el subrayado del nombre lo dice sin un botón de más */ #contenido .tabla-prov tbody tr:hover .prov-nom__n{ text-decoration:underline; text-decoration-color:rgba(0,109,130,.9); text-underline-offset:3px; } /* ═══════════════════════════════════════════════════════════════════════════ 32 · LOS ENCABEZADOS DE GRUPO Y LAS FILAS QUE SE TOCAN (Luis, 2026-09-22) «Los números están bien, pero los encabezados de las tablas no me gustan del todo.» Se fue la franja de color con versalitas blancas: ahora el grupo se anuncia como un título —Marcellus, blanco—, un filete lo lleva hasta su cifra y un punto dice el estado. Y donde había un cuadrito para abrir la ficha, ahora se toca la línea entera. ═══════════════════════════════════════════════════════════════════════════ */ .grupo-cab{ display:flex; align-items:center; gap:.9rem; padding:.2rem .3rem .7rem; } .grupo-cab h3{ margin:0; display:flex; align-items:center; gap:.65rem; font-family:var(--glare) !important; font-size:1.5rem !important; line-height:1.15; color:#FFFFFF !important; letter-spacing:-.005em; } .grupo-cab h3::before{ content:""; width:9px; height:9px; border-radius:99px; background:rgba(234,223,206,.45); flex:none; } .grupo-cab--vencida h3::before{ background:#B3261E; box-shadow:0 0 0 4px rgba(179,38,30,.16); } .grupo-cab--d15 h3::before, .grupo-cab--d30 h3::before{ background:#8A6A2F; } .grupo-cab--d60 h3::before{ background:#8A6A2F; opacity:.6; } .grupo-cab--vigente h3::before{ background:#7D9B5B; } .grupo-cab i{ flex:1 1 auto; height:1px; background:linear-gradient(90deg, rgba(234,223,206,.22), rgba(234,223,206,.05)); } .grupo-cab__n{ font-family:var(--glare); font-size:1.5rem; line-height:1; color:#EADFCE; font-variant-numeric:tabular-nums; } .grupo-nota{ margin:-.3rem .3rem .6rem; font-size:.76rem; color:rgba(234,223,206,.62); } .grupo-hoja{ background:#222E3A; border:1px solid rgba(234,223,206,.16); border-radius:14px; overflow:hidden; } .grupo-hoja > div:last-child{ border-bottom:0 !important; } /* La línea entera abre su ficha, en Tickets y en Pólizas igual que en las tablas. */ #contenido .cima-fila[data-ficha]{ cursor:pointer; transition:background-color 120ms linear; } #contenido .cima-fila[data-ficha]:hover{ background-color:#27323E; } /* ═══════════════════════════════════════════════════════════════════════════ 33 · LAS PESTAÑAS DE LA FICHA: UNA LÍNEA Y CON DIVISIONES (Luis, 2026-09-22) «Que en escritorio esté en una sola línea y no dos; no importa que le des más ancho al modal» y «estos taps deben verse mejor, se ven como texto sin divisiones». Las 14 pestañas son pastillas con su filete —cada una se ve como una pieza—, en un solo renglón. El modal creció a 1560 px: en pantalla grande entran todas; en una ventana chica el índice se desliza solo, con los bordes difuminados, y la pestaña abierta se centra sola (importa ahora que se puede entrar directo en Pólizas). ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width:821px){ #zona-detalle div.sin-barra:has(> .pestana){ display:flex !important; flex-wrap:nowrap !important; overflow-x:auto !important; gap:.22rem !important; padding:.6rem clamp(.55rem, .8vw, 1.1rem) !important; scrollbar-width:none !important; -ms-overflow-style:none !important; border-bottom:1px solid rgba(234,223,206,.10) !important; background:transparent !important; scroll-snap-type:x proximity; scroll-padding-inline:1.5rem; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); } #zona-detalle div.sin-barra > .pestana{ flex:none !important; white-space:nowrap !important; scroll-snap-align:center; border:1px solid rgba(234,223,206,.16) !important; border-radius:99px !important; padding:.34rem clamp(.46rem, .58vw, .78rem) !important; margin:0 !important; font-size:clamp(.66rem, .42vw + .3rem, .78rem) !important; color:rgba(234,223,206,.72) !important; background:transparent !important; box-shadow:none !important; transition:border-color 120ms linear, background-color 120ms linear, color 120ms linear !important; } #zona-detalle div.sin-barra > .pestana:hover{ color:#EADFCE !important; border-color:rgba(234,223,206,.45) !important; box-shadow:none !important; } #zona-detalle div.sin-barra > .pestana.activa{ background-color:#005565 !important; border-color:#005565 !important; color:#FFFFFF !important; box-shadow:none !important; } /* Sin barra de desplazamiento a la vista: si el índice no cabe, se desliza en silencio (Luis, 2026-09-22: «genera ese scroll en escritorio que no me gusta»). */ #zona-detalle div.sin-barra:has(> .pestana)::-webkit-scrollbar{ width:0 !important; height:0 !important; display:none !important; } #zona-detalle div.sin-barra > .pestana .etq{ color:rgba(234,223,206,.55) !important; margin-left:.28rem !important; font-size:.62rem !important; } #zona-detalle div.sin-barra > .pestana.activa .etq{ color:rgba(255,255,255,.75) !important; } } /* En el celular ya eran pastillas que bajan de renglón (cima-movil.css): ahí eso es lo que sirve. */ /* ═══════════════════════════════════════════════════════════════════════════ 34 · LA FRANJA DE PORTADA (Luis, 2026-09-22) «Que la imagen tome protagonismo sobre el menú, de alguna manera creativa, wow e innovadora, pero elegante y luxury.» Primer intento: el riel como vidrio ahumado sobre la foto — el desenfoque la ensuciaba y no gustó. Éste no desenfoca nada: la foto cruza la pantalla de borde a borde, NÍTIDA, y el menú deja de cortarla. En la franja el riel es transparente y el logo queda dentro de la foto, como el titular de una portada, con una sombra suave a la izquierda que le da fondo. Debajo, el menú sigue siendo tinta sólida y se lee igual. No crece nada hacia abajo: la foto gana toda la anchura, y al ocultar el menú queda entera. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --alto-cab:168px; } .cima-banda{ position:fixed; top:0; left:0; right:0; height:var(--alto-cab); z-index:10; overflow:hidden; pointer-events:none; background-color:#141D27; } .cima-banda .cima-cab__foto, .cima-banda .cima-cab__velo{ position:absolute; inset:0; } /* La sombra de la izquierda: le da fondo al logo sin tocar la nitidez de la foto. */ .cima-banda::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(20,29,39,.78) 0, rgba(20,29,39,.52) 190px, rgba(20,29,39,.18) 330px, rgba(20,29,39,0) 480px); } /* El filete de luz que cierra la franja, de borde a borde: una sola línea para toda la app. */ .cima-banda::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:2; background:linear-gradient(90deg, rgba(234,223,206,.30), rgba(234,223,206,.10) 45%, rgba(234,223,206,.26)); } /* La cabecera ya no lleva la foto: sólo su texto, por encima de la franja. */ .zona-principal > header.cima-cab{ background:transparent !important; isolation:auto !important; } .zona-principal > header.cima-cab > *{ position:relative; z-index:11; } /* TODO LO QUE VA SOBRE LA FOTO SE LEE SOBRE CUALQUIER FOTO (Luis, 2026-09-22). El velo del libro no se toca —sigue entre 0 y 45 %—: lo que se refuerza es la letra, con una sombra corta que la despega del follaje, y el logo con la suya. UN HALO DETRÁS DEL TEXTO (Luis, 2026-09-25: «hay que darle más contraste a los textos del encabezado de CIMA para que se lea sobre cualquier foto»). Con el viaje de 37 fotos, la sombra de la letra no alcanzaba sobre la niebla o el musgo claro. Ahora el bloque del título lleva detrás una elipse de tinta que se apaga hacia afuera: oscurece sólo donde hay letra y el resto de la foto queda intacta. Medido sobre las 37, con el 5 % más claro de la zona de cada renglón: el peor caso pasó de 1,6:1 a 2,9:1, la mediana de 2,9 a 5,0, y a eso se suma la sombra de la letra, que ahora es más firme. */ .zona-principal > header.cima-cab > div[style*="flex:1"]::before{ content:""; position:absolute; z-index:-1; inset:-3.2rem -7rem -2.6rem -4.5rem; pointer-events:none; background:radial-gradient(ellipse 50% 50% at 42% 55%, rgba(13,23,32,.60) 0%, rgba(13,23,32,.33) 55%, rgba(13,23,32,0) 100%); } .cima-cab__eyebrow, #titulo-vista, #sub-vista, .cima-cifra__n, .cima-cifra__rot{ text-shadow:0 1px 2px rgba(13,23,32,.85), 0 0 12px rgba(13,23,32,.55), 0 8px 28px rgba(13,23,32,.5) !important; } /* La cifra de la derecha, con su propio halo: también cae sobre foto. */ .cima-cifra{ position:relative; } .cima-cifra::before{ content:""; position:absolute; z-index:-1; inset:-2rem -2.5rem -1.6rem -3rem; pointer-events:none; background:radial-gradient(ellipse 50% 50% at 60% 55%, rgba(13,23,32,.55) 0%, rgba(13,23,32,.28) 55%, rgba(13,23,32,0) 100%); } #barra-lateral .cabecera-lateral img.cima-logo, #barra-lateral .cabecera-lateral img.cima-estrella{ filter:drop-shadow(0 2px 7px rgba(13,23,32,.7)) !important; } /* El riel: transparente en la franja, tinta sólida debajo. */ /* El corte es EXACTO: la tinta del menú empieza justo donde termina la foto, y el filete de la franja cruza los dos lados a la misma altura (Luis: «la línea del menú debe estar a la misma altura de donde termina la imagen»). */ #barra-lateral{ background-color:transparent !important; border-right-color:transparent !important; z-index:21 !important; background-image:linear-gradient(180deg, rgba(20,29,39,0) 0, rgba(20,29,39,0) var(--alto-cab), #141D27 var(--alto-cab)) !important; } #barra-lateral::before, #barra-lateral::after, #barra-lateral .atlas-foco{ -webkit-mask-image:linear-gradient(180deg, transparent 0, transparent var(--alto-cab), #000 calc(var(--alto-cab) + 56px)); mask-image:linear-gradient(180deg, transparent 0, transparent var(--alto-cab), #000 calc(var(--alto-cab) + 56px)); } .zona-principal{ box-shadow:inset 1px 0 0 rgba(234,223,206,.10); } /* El logo, dentro de la foto; el nombre y los accesos, debajo. */ /* Todo el bloque de identidad vive DENTRO de la franja —logo, nombre y los dos accesos, uno bajo otro y encajados, nunca encimados (Luis)—, y termina justo en la línea. */ #barra-lateral .cabecera-lateral{ position:relative; display:flex !important; flex-direction:column; height:var(--alto-cab); padding:1.05rem 1.25rem .7rem !important; border-bottom:0 !important; } #barra-lateral .cabecera-lateral img.cima-logo{ position:static !important; transform:none !important; height:34px !important; margin:0 auto .7rem !important; } #barra-lateral .cabecera-lateral .user-glass-pill{ margin-top:0 !important; } #barra-lateral .cabecera-lateral #accesos-rapidos{ margin-top:.6rem !important; margin-bottom:0 !important; } /* El canto derecho del panel, sobre la foto: un filete de luz y su sombra. Sin eso, en la franja no se nota dónde termina el menú (Luis: «no se ve la sombra de la división»). */ #barra-lateral{ box-shadow:10px 0 26px -10px rgba(13,23,32,.85), 1px 0 0 rgba(234,223,206,.12) !important; } /* Sobre la foto, el nombre y los dos accesos necesitan su propio fondo: la pastilla se hunde en tinta y su filete sube, para que se lean sobre CUALQUIER imagen (Luis, 2026-09-22). VA CON `.cabecera-lateral` Y NO SUELTA, y es el mismo tropiezo que ya costo una vuelta: HAY DOS pildoras con esta clase en el riel —la del usuario, arriba y sobre la foto, y la del ES/EN, abajo en el pie—. Sin acotar, el pie recibia la tinta al 58% y el filete al 30%, y ahi el contorno claro se ve grueso y el selector deja de parecerse al de VIVERO, que es de crema al 6% con filete al 16%. Lo vio Luis (2026-09-23). El pie se iguala mas abajo. */ /* Los valores vivos estan mas abajo, medidos contra la pastilla REAL de VIVERO. Aqui solo queda la letra: el fondo y el filete se fijan en un solo sitio. */ #barra-lateral .cabecera-lateral .user-glass-pill span, #barra-lateral .cabecera-lateral .user-glass-pill b{ color:#FFFFFF !important; } #barra-lateral #accesos-rapidos button{ background:rgba(13,23,32,.62) !important; border-color:rgba(234,223,206,.34) !important; box-shadow:0 8px 20px -12px rgba(13,23,32,.9) !important; } #barra-lateral #accesos-rapidos button:hover{ border-color:#EADFCE !important; background:rgba(13,23,32,.75) !important; } #barra-lateral #accesos-rapidos button .material-icons-outlined{ color:#FFFFFF !important; } /* Los dos controles del riel (colapsar y ocultar) también viven sobre la foto. */ #boton-colapsar, #cima-ocultar-menu{ background:rgba(13,23,32,.62) !important; border:1px solid rgba(234,223,206,.34) !important; color:#FFFFFF !important; box-shadow:0 8px 20px -12px rgba(13,23,32,.9) !important; } #boton-colapsar:hover, #cima-ocultar-menu:hover{ border-color:#EADFCE !important; background:rgba(13,23,32,.78) !important; } /* Y los botones de acción de la cabecera, que van sobre la misma foto. */ #acciones-vista .btn{ background:rgba(13,23,32,.58) !important; border-color:rgba(255,255,255,.40) !important; } #acciones-vista .btn:hover{ background:rgba(13,23,32,.72) !important; border-color:#FFFFFF !important; } #acciones-vista .btn-principal{ background:#005565 !important; border-color:#005565 !important; } #acciones-vista .btn-principal:hover{ background:#006D82 !important; border-color:#006D82 !important; } /* Colapsado: en la franja caben la estrella y los dos accesos, sin que nada quede detrás de nada (Luis: «la estrella no puede quedar atrás»); el botón de ocultar baja a la tinta. */ @media (min-width:1025px){ /* Cada pieza con su aire: el botón arriba, la estrella sin tocarlo (14 px) y los dos accesos sin llegar al filo de la foto (Luis: «la estrella no debe tocar ningún botón»). */ .armazon.colapsado #boton-colapsar{ top:10px !important; } /* Con la franja más alta hay aire de sobra: las piezas se reparten por toda la zona de la foto, sin quedar al ras ni del principio ni del final (Luis, 2026-09-22). */ /* La flecha a 10 px y la estrella a 54 px: los mismos números en CIMA, VIVERO y Golfito. */ .armazon.colapsado #barra-lateral .cabecera-lateral{ height:var(--alto-cab); padding:54px .5rem 1.1rem !important; justify-content:flex-start !important; } .armazon.colapsado #barra-lateral .cabecera-lateral img.cima-estrella{ width:32px !important; height:32px !important; flex:none; margin:0 auto !important; } .armazon.colapsado #barra-lateral #accesos-rapidos{ margin:auto 0 0 !important; gap:.5rem !important; } .armazon.colapsado #barra-lateral #accesos-rapidos button{ width:2.15rem !important; height:2.15rem !important; } /* Ocultar el panel sólo existe con el riel abierto (Luis, 2026-09-22: «eliminá ese botón, que quede sólo cuando está completamente expandido»): en el riel angosto no cabía sin pisar algo —la estrella arriba, una baldosa del menú abajo— y ahí sobra. */ .armazon.colapsado #cima-ocultar-menu{ display:none !important; } } #boton-colapsar, #cima-ocultar-menu{ z-index:22 !important; } @media (max-width:1024px){ /* En el celular la página entera se desliza: la franja va con ella, no fija, y el riel —que ahí es un cajón— vuelve a ser tinta sólida. */ #aplicacion{ position:relative; } .cima-banda{ position:absolute; } .cima-banda::after{ background:none; } #barra-lateral{ background-image:none !important; background-color:#141D27 !important; } #barra-lateral::before, #barra-lateral::after, #barra-lateral .atlas-foco{ -webkit-mask-image:none; mask-image:none; } .cabecera-lateral{ padding-top:3.2rem !important; } .cabecera-lateral .cima-logo{ position:static !important; transform:none; } } /* ── 35 · EL COLAPSO DEL RIEL, COMO UNA ANIMACIÓN (Luis, 2026-09-22) ───────────────────── «Cuando colapso del menú grande al angosto la animación se ve como un brinco.» El ancho ya se animaba (.26 s), pero todo lo de adentro cambiaba de golpe: el logo por la estrella, los rótulos que se van, las baldosas que cambian de forma. Ahora el ancho viaja más despacio con la curva de la casa, la forma de cada pieza la acompaña, y lo que aparece lo hace fundido —sólo durante el cambio, para que un repintado del menú no vuelva a encender nada—. */ .armazon{ transition:grid-template-columns .42s cubic-bezier(.22,.9,.24,1) !important; } #barra-lateral .sidebar-link{ transition:width .42s cubic-bezier(.22,.9,.24,1), height .42s cubic-bezier(.22,.9,.24,1), padding .42s cubic-bezier(.22,.9,.24,1), border-radius .42s cubic-bezier(.22,.9,.24,1), background-color 120ms linear !important; } #barra-lateral .cabecera-lateral{ transition:padding .42s cubic-bezier(.22,.9,.24,1), height .42s cubic-bezier(.22,.9,.24,1) !important; } @keyframes cimaFundir{ from{ opacity:0; } to{ opacity:1; } } .cima-transicion .cima-logo, .cima-transicion .cima-estrella, .cima-transicion .user-glass-pill, .cima-transicion #menu .sidebar-link > span:not(.material-icons-outlined), .cima-transicion #menu .menu-grupo, .cima-transicion .sidebar-cuenta{ animation:cimaFundir .38s .08s cubic-bezier(.22,.9,.24,1) both; } @media (prefers-reduced-motion:reduce){ .armazon{ transition:none !important; } .cima-transicion *{ animation:none !important; } } /* ── 36 · EL NOMBRE DE LA APP EN EL RIEL, COMO EN VIVERO Y GOLFITO (Luis, 2026-09-22) ──── «Veo el nombre de la herramienta ahí y una altura que difiere con CIMA: hagamos igual CIMA, porque me gusta cómo se ve en VIVERO y Golfito.» El rótulo vuelve bajo el logo, dentro de la franja de la foto, y la foto pasa a medir lo mismo en las tres. */ #barra-lateral .cabecera-lateral h2{ display:block !important; margin:0 0 .75rem !important; font-family:var(--sans) !important; font-size:.66rem !important; letter-spacing:.26em !important; text-transform:uppercase; color:rgba(255,255,255,.82) !important; line-height:1.3 !important; text-shadow:0 1px 2px rgba(13,23,32,.55), 0 10px 30px rgba(13,23,32,.45) !important; } @media (max-height:720px){ #barra-lateral .cabecera-lateral h2{ display:block !important; } } .armazon.colapsado #barra-lateral .cabecera-lateral h2{ display:none !important; } /* ═══════════════════════════════════════════════════════════════════════════ 37 · EL MENÚ EN EL CELULAR (Luis, 2026-09-22) «En modo móvil el efecto translúcido del menú también debe seguir existiendo, y debe estar bien alineado; acá encima se ve muy mal.» En el cajón no hay riel angosto ni franja: el menú vuelve a ser una hoja de vidrio ahumado sobre la página, la identidad ocupa lo que necesita —sin el hueco que dejaba el alto de la franja— y el botón de colapsar no aparece, porque ahí no hay nada que colapsar. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width:1024px){ /* En el cajón, lo mismo que en escritorio: la foto se ve por detrás de la franja —el menú es transparente ahí— y de la línea para abajo, tinta sólida (Luis, 2026-09-22: «la foto tiene que verse como cuando el menú está extendido»). Sin desenfoque: ensucia la foto. */ #barra-lateral{ background-color:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background-image:linear-gradient(180deg, rgba(20,29,39,0) 0, rgba(20,29,39,0) var(--alto-cab, var(--alto-foto)), #141D27 var(--alto-cab, var(--alto-foto))) !important; box-shadow:8px 0 34px rgba(0,0,0,.5) !important; border-right:1px solid rgba(234,223,206,.12) !important; } /* la sombra de la izquierda sobre la foto, para que el logo y el nombre se lean */ #barra-lateral .cabecera-lateral{ background:linear-gradient(90deg, rgba(20,29,39,.78) 0, rgba(20,29,39,.52) 60%, rgba(20,29,39,.34) 100%) !important; } #barra-lateral::before, #barra-lateral::after, #barra-lateral .atlas-foco{ -webkit-mask-image:none !important; mask-image:none !important; } /* La línea del menú muere donde muere la foto, también en el cajón (Luis, 2026-09-22: «en móvil la línea también tiene que quedar alineada»): la identidad mide lo mismo que la franja y su contenido va centrado, así no queda hueco muerto ni línea corrida. */ #barra-lateral .cabecera-lateral{ height:var(--alto-cab, var(--alto-foto)) !important; padding:1.1rem 1.25rem !important; justify-content:center !important; border-bottom:1px solid rgba(234,223,206,.10) !important; } #barra-lateral .cabecera-lateral img.cima-logo{ margin:0 auto .7rem !important; } #barra-lateral .cabecera-lateral h2{ margin:0 0 .85rem !important; } #barra-lateral #accesos-rapidos{ margin:0 !important; } #boton-colapsar{ display:none !important; } } /* ── Con el cajón abierto, la página se calla (Luis, 2026-09-22) ──────────────────────── «Los títulos y el botón para abrir el menú tienen que volverse transparentes mientras el menú esté abierto; cuando se cierra, vuelven.» Así el texto del menú se lee limpio sobre la foto y nada se transparenta por detrás. */ @media (max-width:1024px){ #titulo-vista, #sub-vista, .cima-cab__eyebrow, .cima-cifra, #acciones-vista, #boton-menu{ transition:opacity .22s ease, visibility .22s ease; } #aplicacion:has(.barra-lateral.abierta) #titulo-vista, #aplicacion:has(.barra-lateral.abierta) #sub-vista, #aplicacion:has(.barra-lateral.abierta) .cima-cab__eyebrow, #aplicacion:has(.barra-lateral.abierta) .cima-cifra, #aplicacion:has(.barra-lateral.abierta) #acciones-vista, #aplicacion:has(.barra-lateral.abierta) #boton-menu{ opacity:0 !important; visibility:hidden !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 38 · LOS ENCABEZADOS DEL CELULAR: TODOS DEL MISMO ALTO (Luis, 2026-09-22) «La altura de la imagen tiene que ser igual en absolutamente todas las secciones… en Pólizas el número se ve muy mal, desacomodado; Tickets debería estar arriba a la derecha.» Medido antes del cambio: de 183 px (Tablero) a 342 px (Tickets), porque la cifra y los botones se apilaban bajo el título. Ahora la cabecera mide lo mismo en todas —la franja de la foto—, la cifra va arriba a la derecha y los botones, al pie de la foto. ═══════════════════════════════════════════════════════════════════════════ */ /* EL RENGLÓN DEL BOTÓN DEL MENÚ ES SUYO (Luis, 2026-09-27: «ese botón que despliega el menú queda encima del texto»). El botón flota fijo arriba a la izquierda (12 px + 42 px), y en las secciones con botones o con título largo el texto, que se apila desde abajo, le llegaba por debajo: medido, de 12 a 44 px de más en 16 de las 21 secciones a 320 px. La cabecera reserva ese renglón arriba y mide lo mismo en todas (--alto-foto); sólo si un título se parte en dos renglones en un teléfono muy angosto crece lo justo, en vez de meterse debajo del botón. */ @media (max-width:1024px){ .zona-principal > header.cima-cab{ position:relative !important; height:auto !important; min-height:var(--alto-foto) !important; overflow:hidden !important; padding:calc(12px + 42px + .35rem) 1.1rem .95rem !important; display:flex !important; align-items:flex-end !important; } /* el bloque del título, abajo a la izquierda, sin meterse debajo de la cifra */ .zona-principal > header.cima-cab > div[style*="flex:1"]{ align-self:flex-end !important; padding-right:5.5rem; } #titulo-vista{ font-size:2rem !important; } #sub-vista{ font-size:.8rem !important; margin-top:.35rem !important; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .cima-cab__eyebrow{ margin-bottom:.4rem !important; font-size:.6rem !important; } /* la cifra: arriba a la derecha, compacta */ .cima-cifra{ position:absolute !important; top:1rem; right:1.1rem; align-items:flex-end; margin:0 !important; z-index:12; } .cima-cifra__n{ font-size:2.1rem !important; line-height:.95 !important; } .cima-cifra__rot{ font-size:.55rem !important; letter-spacing:.2em !important; } /* los botones de la sección: al pie de la foto, en una sola fila */ #acciones-vista{ position:absolute !important; right:1.1rem; bottom:.9rem; left:auto; z-index:12; display:flex !important; flex-wrap:nowrap !important; gap:.4rem; max-width:62vw; overflow-x:auto; scrollbar-width:none; } #acciones-vista::-webkit-scrollbar{ display:none; } #acciones-vista .btn{ flex:none; padding:.4rem .8rem !important; font-size:.72rem !important; } #acciones-vista .btn .material-icons-outlined{ font-size:15px !important; } /* El botón del menú FLOTA: se queda arriba aunque se desplace la página, como en VIVERO y Golfito (Luis, 2026-09-22: «en modo móvil el botón del menú tiene que estar encima de todo y no ocultarse cuando se haga scroll»). */ #boton-menu{ position:fixed !important; top:12px; left:12px; z-index:60 !important; } /* Si la sección trae botones, el subtítulo les deja el sitio: antes el texto se metía debajo de «Ver el correo de hoy» (Pólizas en el celular). */ .zona-principal > header.cima-cab:has(#acciones-vista .btn) > div[style*="flex:1"]{ padding-bottom:2.7rem; } .zona-principal > header.cima-cab:has(#acciones-vista .btn) #sub-vista{ -webkit-line-clamp:1; } } /* ══════════════════════════════════════════════════════════════════════════ LA CABECERA DEL RIEL, IGUAL QUE EN VIVERO Y GOLFITO (2026-09-23, pedido de Luis) ────────────────────────────────────────────────────────────────────────── «Este apartado no calza con los otros.» Medido contra VIVERO, que es el modelo aprobado, ya coincidían el relleno de la cabecera (16,8 / 20 / 11,2), el tamaño del título (10,56px), la píldora (42px de alto, 8/12 de relleno) y el círculo del usuario (24px en deep). Lo que no coincidía es lo de acá abajo, y una sola de esas diferencias explica casi todo lo que se ve: en CIMA la píldora era una cápsula OSCURA SÓLIDA —tinta al 58%— y en las otras dos es un vidrio apenas teñido —crema al 6%—. De lejos, una parece un botón y la otra un reflejo. VA ACÁ Y NO EN EL TEMA CLARO A PROPÓSITO. Toda esta zona está sobre la fotografía, así que por regla de la casa se ve IGUAL en los dos temas: se escribe una sola vez, en la hoja de la app, y el tema claro no la toca (la rama lleva `data-pz-foto`). ══════════════════════════════════════════════════════════════════════════ */ /* LA PÍLDORA DEL USUARIO, IGUAL QUE EN VIVERO (corregida el 2026-09-23). TRES VECES MEDÍ LA PIEZA EQUIVOCADA ANTES DE ACERTAR, y vale dejar escrito el porqué: 1 · medí la píldora del panel del teléfono en vez de la del riel; 2 · medí el ES/EN del pie creyendo que era ésta —son dos con la misma clase—; 3 · medí un fragmento armado a mano, sin `data-pz-foto`, y el tema claro lo pintaba distinto que a la real, así que «encontré» una diferencia entre temas que no existía. Lo que zanjó el asunto fue abrir VIVERO con la sesión puesta y leer SU píldora, la que se ve en pantalla. De ahí salen estos números, y son otros de los que yo había anotado: crema al 6% de fondo, filete crema al 16% —no al 30%, que era el doble y es el contorno grueso que Luis fotografió alrededor del botón de salir— y NINGUNA sombra proyectada: sólo el hundido interior que trae el marcado. El botón de salir va sin alto forzado. La lección, para la próxima: medir el archivo del otro sistema no sirve —lo publicado no dice lo mismo que su hoja— y medir una copia del marcado tampoco. Se mide lo que se ve. */ /* El selector lleva también `.cabecera-lateral` porque más arriba hay un `#barra-lateral .cabecera-lateral .user-glass-pill{margin-top:0}` que, con una clase más, le ganaba al margen de acá y dejaba la píldora 16px por encima de la de VIVERO. */ /* EL VESTIDO, EL DE LOS BOTONES REDONDOS (Luis, 2026-09-25: «que tenga la transparencia de los botones circulares, más oscuritos, para que se note más y no se pierda entre las fotos»): tinta al 62 %, filete crema al 34 % y su misma sombra corta. Igual en GOLFITO y VIVERO (prisma-riel.css). En el tema claro, sólo cuando va sobre la foto. */ #barra-lateral .cabecera-lateral .user-glass-pill{ border-radius:9999px !important; padding:.5rem .75rem !important; margin-top:16px !important; } html:not([data-tema="claro"]) #barra-lateral .cabecera-lateral .user-glass-pill, html[data-tema="claro"] #barra-lateral .cabecera-lateral .user-glass-pill[data-pz-foto]{ background:rgba(13,23,32,.62) !important; border:1px solid rgba(234,223,206,.34) !important; box-shadow:0 8px 20px -12px rgba(13,23,32,.9) !important; } /* el nombre, blanco como en VIVERO (el marcado lo trae en #e5e7eb, un gris que no es de casa) */ #barra-lateral #nombre-usuario{ color:#FFFFFF !important; } /* el botón de salir: mismo tono y misma caja que allá (estaba al 70% y medía 14 de alto). También acotado a la cabecera: suelto alcanzaba los ES/EN del pie y los bajaba del 70% de VIVERO al 58%, además de forzarles una altura que allí no tienen. */ #barra-lateral .cabecera-lateral .user-glass-pill button{ color:rgba(234,223,206,.58) !important; } /* el título: mismo tracking (0,3em) y mismo tono que VIVERO y Golfito */ #barra-lateral .cabecera-lateral h2{ letter-spacing:.3em !important; color:rgba(234,223,206,.70) !important; } /* La fila de botones respira lo mismo que allá: 13,6px arriba y 2,4 abajo. Lleva los dos ids porque más arriba en este mismo archivo hay un `#barra-lateral .cabecera-lateral #accesos-rapidos` con 0,6rem que le ganaba a un `#accesos-rapidos` pelado. */ #barra-lateral .cabecera-lateral #accesos-rapidos{ margin:13.6px 0 2.4px !important; } /* Los botones de la fila, exactamente como el de VIVERO: sin sombra. La sombra la llevan los dos de los extremos —colapsar y ocultar—, no éstos. */ #accesos-rapidos > button{ box-shadow:none !important; } /* EL ENCOLUMNADO, AL PÍXEL. La píldora de CIMA caía 14px más arriba que la de VIVERO, y el desfase venía de las dos piezas de encima. Medido en las dos apps: VIVERO logo y=12, alto 36, margen abajo 13,6 → título y=62, alto 24, margen 0 píldora y=102 (con su margen de 16) CIMA logo y=17, alto 34, margen abajo 11,2 → título y=62, alto 14, margen abajo 12 píldora y=88 La cuenta cierra sola: 12 + 36 + 13,6 = 62 para el título, y 62 + 24 + 16 = 102 para la píldora. Se copian esas tres medidas y todo lo de abajo cae en su sitio, incluida la fila de botones, que pasa de 143 a 157 sin tocarla. */ /* El selector lleva `img` a propósito: más arriba de este archivo hay un `#barra-lateral .cabecera-lateral img.cima-logo` —con el nombre de la etiqueta— que le gana a uno sin él aunque tengan los mismos ids y las mismas clases. */ #barra-lateral .cabecera-lateral img.cima-logo{ height:36px !important; margin:-4.8px auto 13.6px !important; } #barra-lateral .cabecera-lateral h2{ height:24px !important; line-height:24px !important; margin-bottom:0 !important; } /* El botón del tema, sin sombra, como el de VIVERO. Lleva los dos ids porque la sombra se la dan a la vez el atributo `style` del marcado y una regla de más arriba de este archivo. */ /* Mismo cuidado acá: el que ponía la sombra era `#barra-lateral #accesos-rapidos button`, con dos ids Y el nombre de la etiqueta. Se le responde con la misma forma. */ #barra-lateral #accesos-rapidos button{ box-shadow:none !important; } /* ══════════════════════════════════════════════════════════════════════════ LOS TRES BOTONES CUANDO EL MENÚ ESTÁ COLAPSADO (2026-09-23, pedido de Luis) ────────────────────────────────────────────────────────────────────────── «Hay que unir los tres botones más entre sí, sin tocarse entre sí y sin que toquen el borde teal.» Al colapsar, la fila de accesos se vuelve columna y se salía por abajo. Medido: los botones iban de 86 a 205, de 34px con 8 de separación, y la franja de fotografía termina en 200 —o sea el último cruzaba la línea del teal por cinco píxeles—. La cuenta, con el bloque arrancando en 86: 86 + 30 + 5 + 30 + 5 + 30 = 186, y quedan 14px de aire hasta el teal. Botones de 30px y 5 de separación: más juntos que antes, sin tocarse, y sin llegar al borde. SÓLO en colapsado: con el menú abierto la fila es horizontal y no tiene este problema. ══════════════════════════════════════════════════════════════════════════ */ /* El bloque baja 7px para no tocar la estrella. Medido: la estrella termina en 86 y el primer botón empezába en 86 —separación CERO, se tocaban—, y abajo sobraban 14px hasta el teal. Repartidos: 7 arriba y 7 abajo, simétrico. LA ESTRELLA NO SE MUEVE. Luis: «la estrella no se mueve porque debe ser exacta con las demás» — es la misma pieza en las tres apps y su sitio ya estaba acordado. */ .armazon.colapsado #accesos-rapidos{ gap:5px !important; } .armazon.colapsado #barra-lateral .cabecera-lateral #accesos-rapidos{ gap:5px !important; margin-top:7px !important; } /* El tamaño lleva los dos ids del riel porque más arriba hay un `#barra-lateral #accesos-rapidos button` que fija los 34px y le ganaba a un selector con la sola clase del armazón. Con 34 el último botón quedaba a UN píxel del teal. */ .armazon.colapsado #barra-lateral #accesos-rapidos button, .armazon.colapsado #barra-lateral #accesos-rapidos #pz-tema-btn{ width:30px !important; height:30px !important; } .armazon.colapsado #barra-lateral #accesos-rapidos button .material-icons-outlined, .armazon.colapsado #barra-lateral #accesos-rapidos #pz-tema-btn .material-icons-outlined{ font-size:15px !important; } /* ══════════════════════════════════════════════════════════════════════════ LAS PESTAÑAS DE UNA FICHA, EN DOS FILAS Y SIN SCROLL (2026-09-23, pedido de Luis) ─────────────────────────────────────────────────────────────────────────═ «Esa barra de los apartados del proveedor tiene un scroll; no lo quiero, que se haga doble fila, igual que en servicios.» Medido en la ficha de un proveedor: 14 pestañas, el contenedor mide 930px y su contenido 1.039 —109px de más—, con `flex-wrap:nowrap` y `overflow-x:auto`. La regla que envuelve ya existía, pero exige `#zona-detalle`, y la ficha del proveedor no vive ahí: se arma dentro de un `.panel` en `#zona-modales`. Se repite el mismo tratamiento —los mismos valores, para que las dos se vean igual— en el molde de las ventanas. ══════════════════════════════════════════════════════════════════════════ */ #zona-modales div.sin-barra:has(> .pestana), .caja-modal div.sin-barra:has(> .pestana){ flex-wrap:wrap !important; overflow-x:visible !important; gap:.4rem !important; padding:1rem 1.25rem !important; border-bottom:1px solid rgba(234,223,206,.12) !important; background:transparent !important; } #zona-modales div.sin-barra > .pestana, .caja-modal div.sin-barra > .pestana{ flex:none !important; border:1px solid rgba(234,223,206,.16) !important; border-radius:99px !important; padding:.4rem .85rem !important; font-size:.82rem !important; margin:0 !important; } #zona-modales div.sin-barra > .pestana:hover, .caja-modal div.sin-barra > .pestana:hover{ border-color:rgba(234,223,206,.45) !important; } #zona-modales div.sin-barra > .pestana.activa, .caja-modal div.sin-barra > .pestana.activa{ background-color:#005565 !important; border-color:#005565 !important; color:#FFFFFF !important; } /* ── EL SELECTOR ES/EN DEL PIE, IGUAL QUE EN VIVERO (2026-09-23) ───────────────────────── Lo vio Luis: el contorno de la pastilla del idioma no calzaba con el de VIVERO. No era el teal del boton activo —ese es el mismo #005565 en los dos— sino la CAJA que lo contiene: dos reglas escritas para la pastilla del USUARIO sobre la foto la alcanzaban tambien, y le daban tinta al 58% con filete al 30% y sombra. Alla es crema al 6%, filete al 16% y sin sombra. Acotadas aquellas dos, esta fija el pie en los valores de VIVERO. */ #barra-lateral > div.ocultable:last-of-type .user-glass-pill{ background:rgba(234,223,206,.08) !important; border:0.8px solid rgba(234,223,206,.18) !important; box-shadow:none !important; }