/* Cabecera compacta de la Torre: menús desplegables con íconos, reloj con sol o luna y franja de datos. */
header.deus-top { position: sticky; top: 0; z-index: 40; display: block; max-width: none; margin: 0; padding: 8px clamp(12px, 2.4vw, 32px) 6px; background: #0b1319f2; border-bottom: 1px solid #1f2e3a; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.deus-top-fila { display: flex; align-items: center; gap: 14px; }
.deus-top .brand { font-size: .82rem; letter-spacing: .16em; white-space: nowrap; }
.icono { flex: 0 0 auto; width: 18px; height: 18px; }

/* --- Grupo principal: Torre · CRM · reloj · Ajustes --------------------- */
.deus-top .compact-nav.deus-nav { position: static; display: flex; align-items: center; gap: 2px; width: auto; max-width: none; margin: 0; padding: 4px; overflow: visible; background: linear-gradient(180deg, #16263380, #10202b); border: 1px solid #28404f; border-radius: 14px; box-shadow: 0 6px 22px #0006, inset 0 1px 0 #ffffff0a; -webkit-backdrop-filter: none; backdrop-filter: none; }
.deus-top .deus-menu { position: relative; margin: 0; padding: 0; border: 0; }
.deus-top .deus-menu > summary, .deus-top .deus-ajustes { display: flex; flex-direction: row; align-items: center; gap: 7px; min-height: 0; padding: 8px 13px; border-radius: 10px; color: #dfe9f1; text-decoration: none; font-size: .92rem; font-weight: 700; cursor: pointer; list-style: none; white-space: nowrap; transition: background .15s, color .15s; }
.deus-top .deus-menu > summary::-webkit-details-marker { display: none; }
.deus-top .deus-menu > summary:hover, .deus-top .deus-ajustes:hover { background: #1c3340; color: #fff; }
.deus-top .deus-menu[data-activo] > summary, .deus-top .deus-menu[open] > summary, .deus-top .deus-ajustes[aria-current] { background: #1f3a37; color: #fff; box-shadow: inset 0 0 0 1px #a3f0d033; }
.deus-top .deus-menu[data-activo] > summary .icono:first-child { color: #a3f0d0; }
.deus-flecha { width: 14px; height: 14px; opacity: .7; transition: transform .18s; }
.deus-menu[open] .deus-flecha { transform: rotate(180deg); }
.deus-separador { width: 1px; align-self: stretch; margin: 6px 6px; background: #28404f; }

/* --- Paneles desplegables --------------------------------------------------- */
.deus-top .deus-panel, .crm-nuevo .deus-panel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; display: flex; flex-direction: column; gap: 2px; width: max-content; min-width: 250px; max-height: none; margin: 0; padding: 8px; overflow: visible; background: #15222cf7; border: 1px solid #2e4150; border-radius: 14px; box-shadow: 0 18px 48px #000d; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); animation: deus-despliega .16s ease-out; }
.deus-top .deus-pisos.floor-elevator { position: absolute; width: max-content; }
.deus-top .deus-panel-crm { display: grid; grid-template-columns: repeat(3, minmax(210px, 1fr)); gap: 6px 10px; min-width: 0; }
.deus-grupo { display: flex; flex-direction: column; gap: 2px; }
.deus-panel-titulo { margin: 4px 10px 4px; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: #6f8494; }
.deus-panel a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; color: #dfe9f1; text-decoration: none; font-size: .9rem; font-weight: 600; transition: background .12s, transform .12s; }
.deus-panel a .icono { width: 20px; height: 20px; padding: 6px; box-sizing: content-box; border-radius: 9px; background: #1d2f3b; color: #a3f0d0; transition: background .12s, color .12s; }
.deus-panel a span { display: flex; flex-direction: column; line-height: 1.2; }
.deus-panel a small { font-size: .72rem; font-weight: 500; color: #8ba0b0; }
.deus-panel a b { font-family: ui-monospace, monospace; color: #7fd8bd; font-size: .85rem; min-width: 20px; }
.deus-panel a:hover { background: #1f3340; transform: translateX(2px); }
.deus-panel a:hover .icono { background: #a3f0d0; color: #0f2a24; }
.deus-panel a[aria-current] { background: #1f3a37; }
@keyframes deus-despliega { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

/* --- Reloj con sol o luna --------------------------------------------------- */
.deus-reloj { display: flex; align-items: center; gap: 8px; padding: 2px 8px; }
.deus-reloj-textos { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.deus-reloj #deus-fecha { font-size: .7rem; color: #9fb3c2; }
.deus-reloj strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.deus-reloj .icono { width: 20px; height: 20px; }
.deus-sol { color: #ffcf5c; filter: drop-shadow(0 0 6px #ffcf5c88); animation: deus-sol-gira 18s linear infinite; }
.deus-luna { color: #c9d8ff; filter: drop-shadow(0 0 6px #9fb4ff77); }
.deus-reloj[data-momento="dia"] .deus-luna, .deus-reloj[data-momento="noche"] .deus-sol { display: none; }
@keyframes deus-sol-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .deus-sol { animation: none; } }

/* --- Franja de datos ---------------------------------------------------------- */
.deus-ticker { display: flex; gap: 0; margin-top: 7px; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 92%, transparent); }
.deus-ticker::-webkit-scrollbar { display: none; }
.deus-dato { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; padding: 2px 14px; border-left: 1px solid #22323f; color: inherit; text-decoration: none; border-radius: 6px; transition: background .12s; }
.deus-dato:first-child { border-left: 0; padding-left: 0; }
.deus-dato:hover { background: #ffffff08; }
.deus-dato small { font-size: .63rem; color: #8ba0b0; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
.deus-dato strong { font-size: .92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.deus-dato strong span { margin-left: 5px; font-weight: 500; font-size: .8rem; color: #c9d6e0; }
.deus-dato strong > span:only-child { margin-left: 0; font-weight: 600; font-size: .88rem; color: #eaf0f6; }
.deus-dato .sube { color: #7fe0b0; }
.deus-dato .baja { color: #f39aa2; }
.deus-dato .alerta { color: #f1c46b; }

/* --- Botón «Nuevo» del tablero ------------------------------------------------ */
.crm-top-links { display: flex; align-items: center; gap: 10px; }
.crm-nuevo { position: relative; padding: 0; border: 0; }
.crm-nuevo > summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.crm-nuevo > summary::-webkit-details-marker { display: none; }
.crm-etapas { display: inline-flex; align-items: center; gap: 6px; color: #9fb3c2; text-decoration: none; font-size: .85rem; padding: 8px 10px; border-radius: 10px; }
.crm-etapas:hover { background: #1c3340; color: #fff; }
.cal-angela { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 14px; }

@media (max-width: 900px) {
  .deus-top .deus-panel-crm { grid-template-columns: minmax(220px, 1fr); max-height: 70vh; overflow-y: auto; }
  .deus-top .deus-nav-crm .deus-panel { left: auto; right: auto; }
}
@media (max-width: 650px) {
  /* ops.css oculta todo «header span» en celular y floor-ui.css apila «.compact-nav a»: aquí no aplica. */
  header.deus-top span { display: revert; }
  header.deus-top .trap { display: block; }
  header.deus-top .deus-reloj-textos { display: flex; }
  header.deus-top .deus-panel a span { display: flex; }
  .deus-top .compact-nav .deus-panel a { flex-direction: row; gap: 11px; padding: 9px 10px; font-size: .9rem; text-align: left; }
  header.deus-top .deus-ajustes-texto { display: none; }
  header.deus-top .deus-flecha { display: none; }
  .deus-top .compact-nav.deus-nav { gap: 0; padding: 3px; }
  .deus-top .deus-menu > summary, .deus-top .deus-ajustes { gap: 6px; padding: 8px 9px; }
  .deus-reloj { gap: 5px; padding: 2px 4px; }
  .deus-reloj strong { font-size: .95rem; }
  .deus-top .compact-nav .deus-panel a { justify-content: flex-start; }
  header.deus-top .deus-panel a span { align-items: flex-start; }
  .deus-top .deus-panel, .deus-top .deus-pisos.floor-elevator, .deus-top .deus-panel-crm { position: fixed; top: 58px; left: 10px; right: 10px; width: auto; min-width: 0; max-height: calc(100vh - 80px); overflow-y: auto; }
  header.deus-top { padding: 6px 10px 5px; }
  .deus-top .brand, .deus-ajustes-texto, .deus-reloj #deus-fecha { display: none; }
  .deus-top-fila { justify-content: center; }
  .deus-top .compact-nav.deus-nav { width: 100%; justify-content: space-between; }
  .deus-top .deus-menu > summary, .deus-top .deus-ajustes { padding: 8px 10px; font-size: .88rem; }
  .deus-separador { display: none; }
  .deus-top .deus-panel { position: fixed; top: 56px; left: 10px; right: 10px; width: auto; min-width: 0; }
  .deus-dato { padding: 2px 10px; }
}

/* --- Franja de datos v2 (17/09/2026): cifra y nombre separados, colores y animación al cambiar --- */
.deus-dato { gap: 2px; }
.deus-dato-fila { display: flex !important; align-items: center; gap: 7px; white-space: nowrap; }
.deus-cifra { font-size: .95rem; font-variant-numeric: tabular-nums; color: var(--dato, #eaf0f6); }
.deus-nombre { display: inline-block !important; max-width: 150px; overflow: hidden; text-overflow: ellipsis; padding: 1px 8px; border-radius: 999px; font-style: normal; font-size: .76rem; font-weight: 600; color: var(--dato, #eaf0f6); background: color-mix(in srgb, var(--dato, #eaf0f6) 16%, transparent); border: 1px solid color-mix(in srgb, var(--dato, #eaf0f6) 35%, transparent); }
.dato-dinero { --dato: #eaf0f6; }
.dato-gasto { --dato: #f39aa2; }
.dato-cobrar { --dato: #f1c46b; }
.dato-meta { --dato: #9cc7ff; }
.dato-fondo { --dato: #7fe0b0; }
.dato-venta { --dato: #7fe0b0; }
.dato-cotizacion { --dato: #f1c46b; }
.dato-contacto { --dato: #9cc7ff; }
.dato-visita { --dato: #c9a8ff; }
.deus-dato small { display: flex; align-items: center; gap: 5px; }
.deus-dato small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dato, #6f8494); opacity: .85; }
.deus-dato .deus-cifra.sube { color: #7fe0b0; }
.deus-dato .deus-cifra.baja { color: #f39aa2; }
.deus-dato .deus-cifra.alerta { color: #f1c46b; }
.deus-dato.cambio { animation: dato-cambio 1.8s ease-out 1; }
.deus-dato.cambio .deus-cifra, .deus-dato.cambio .deus-nombre { animation: dato-brilla 1.8s ease-out 1; }
@keyframes dato-cambio { 0% { background: color-mix(in srgb, var(--dato, #a3f0d0) 28%, transparent); } 100% { background: transparent; } }
@keyframes dato-brilla { 0%, 30% { text-shadow: 0 0 12px var(--dato, #a3f0d0); transform: translateY(-2px); } 100% { text-shadow: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .deus-dato.cambio, .deus-dato.cambio .deus-cifra, .deus-dato.cambio .deus-nombre { animation: none; } }