@keyframes pantallaEntra {
  from { opacity: 0; transform: translateY(14px) scale(0.992); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.telefono {
  animation: pantallaEntra 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity;
}

@keyframes datoFlash {
  0%   { background: rgba(177,200,232,0.0); }
  25%  { background: rgba(177,200,232,0.55); }
  100% { background: rgba(177,200,232,0.0); }
}
.dato-actualizado {
  animation: datoFlash 0.9s ease-out;
  border-radius: 5px;
}

button, .btn-grafico, .btn-nav, .btn-graf {
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow .25s ease, background .25s ease, color .25s ease;
}
button:active, .btn-grafico:active, .btn-nav:active, .btn-graf:active {
  transform: scale(0.95);
}

.con-ripple { position: relative; overflow: hidden; }
.con-ripple .ripple {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: rgba(177,200,232,0.45);
  animation: rippleAnim 0.55s ease-out; pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(2.4); opacity: 0; } }

#estado-conexion {
  position: absolute; top: 9px; left: 12px; z-index: 9;
  width: 9px; height: 9px; border-radius: 50%;
  background: #6C7B92; transition: background .3s ease, box-shadow .3s ease;
}
#estado-conexion[data-estado="cargando"] { background: #B1C8E8; box-shadow: 0 0 0 0 rgba(177,200,232,0.7); animation: pulso 1s infinite; }
#estado-conexion[data-estado="ok"]       { background: #1E8E3E; }
#estado-conexion[data-estado="error"]    { background: #C5221F; }
@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(177,200,232,0.7); }
  70%  { box-shadow: 0 0 0 7px rgba(177,200,232,0); }
  100% { box-shadow: 0 0 0 0 rgba(177,200,232,0); }
}

[data-bind].cargando-skel {
  color: transparent !important;
  position: relative;
  border-radius: 4px;
  
  background: linear-gradient(90deg, #D7E3F4 25%, #E8EFF8 50%, #D7E3F4 75%);
  background-size: 200% 100%;
  animation: skelBrillo 1.4s ease-in-out infinite;
  user-select: none;
}

[data-bind].cargando-skel * { visibility: hidden; }

@keyframes skelBrillo {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.fecha-barra b.cargando-skel::after {
  content: "";
}

@media (prefers-reduced-motion: reduce) {
  [data-bind].cargando-skel { animation: none; background: #D7E3F4; }
}

#sello-actualizado {
  text-align: center; font-size: 10px; font-style: italic;
  color: #6C7B92; padding: 2px 8px;
}

@media (prefers-reduced-motion: reduce) {
  .telefono { animation: none; }
  .dato-actualizado { animation: none; }
}

@media (display-mode: standalone), (display-mode: fullscreen), (max-width: 600px) {
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    
    background: var(--gris-claro, #D7E3F4) !important;
  }

  .telefono {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;     
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    overflow-x: hidden !important;     
  }
  
  body > div { width: 100%; max-width: 100%; overflow-x: hidden; }

  .telefono .header,
  .telefono .fecha-barra,
  .telefono .panel,
  .telefono .scroll,
  .telefono .zona,
  .telefono .tabla,
  .telefono .comerciales,
  .telefono .total-general,
  .telefono .barra-nav,
  .telefono .barra-grafico {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .telefono .tabla { width: 100% !important; table-layout: fixed !important; }

  .telefono .tabla td.sucursal,
  .telefono .tabla th.sucursal {
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }
  
  .telefono .tabla td,
  .telefono .tabla th {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .telefono .tabla td.sucursal { padding-left: 9px !important; }
  .telefono .tabla th.sucursal { padding-left: 9px !important; }

  .telefono .header {
    padding-left: 10px !important;
    padding-right: 10px !important;
    gap: 8px !important;
    flex-wrap: nowrap;
  }
  .telefono .header .logo {
    width: 42px !important; height: 42px !important;
    flex-shrink: 0;
  }
  .telefono .header .titulos { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .telefono .header .empresa {
    font-size: 9.5px !important; letter-spacing: 0.6px !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .telefono .header .titulo {
    font-size: 19px !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  
  .telefono .header .marca-der {
    flex-shrink: 0;
    padding: 3px 5px !important;
  }
  .telefono .header .marca-der img { height: 18px !important; width: auto; max-width: 88px; }

  .telefono .panel { gap: 7px !important; padding-left: 8px !important; padding-right: 8px !important; }
  .telefono .tt-titulo { padding: 7px 9px !important; gap: 4px !important; }
  .telefono .tt-titulo .nombre { font-size: 17px !important; min-width: 0; }
  .telefono .icono-badge {
    width: 28px !important; height: 28px !important; flex-shrink: 0;
  }
  .telefono .icono-badge svg { width: 17px !important; height: 17px !important; }
  
  .telefono .tt-col .val { font-size: 14px !important; }
  .telefono .tt-col .etq { font-size: 8px !important; }
  .telefono .td-chip-total { padding: 3px 8px !important; font-size: 11.5px !important; }
  .telefono .td-col .val { font-size: 12.5px !important; }

  .telefono .total-general .tt-titulo .nombre { font-size: 18px !important; }

  .telefono .notch,
  .telefono > .status-bar {
    display: none !important;
  }

  .telefono .header {
    padding-top: calc(11px + env(safe-area-inset-top, 0px)) !important;
  }

  .telefono .barra-nav,
  .telefono .barra-grafico {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body > div > .pie,
  body > div > .leyenda,
  body > div > #sello-actualizado {
    background: var(--gris-claro, #D7E3F4);
  }
  body > div > .leyenda { display: none; }      
  body > div > .pie { padding: 6px 12px 2px; }

  .telefono { animation: pantallaEntra 0.4s ease both; }

  #estado-conexion {
    top: calc(6px + env(safe-area-inset-top, 0px));
    left: 10px;
  }
}

@supports (padding: env(safe-area-inset-top)) {
  @media (display-mode: standalone) {
    body { background: var(--azul-marino, #15294C); }
  }
}

#ux-carga{
  position:fixed; inset:0; z-index:9999;
  background:linear-gradient(160deg,#15294C,#1d3a68);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s ease, visibility 0s linear .4s;  
}

#ux-carga.visible{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .4s ease, visibility 0s; }
#ux-carga.visible.saliendo{ opacity:0; pointer-events:none; }
.ux-carga-cont{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ux-halo{
  position:absolute; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, rgba(177,200,232,.42), transparent 70%);
}
#ux-carga.visible .ux-halo{ animation:uxHalo 2.6s ease-in-out infinite; }
.ux-logo{
  width:120px; height:120px; border-radius:22px; background:#fff;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,.35); border:2px solid #B1C8E8; position:relative;
}
.ux-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
#ux-carga.visible .ux-logo{ animation:uxLogo 2.6s cubic-bezier(.22,.61,.36,1) infinite; }
.ux-marca{ margin-top:18px; text-align:center; }
.ux-marca .ux-e{ color:#B1C8E8; font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.ux-marca .ux-t{ color:#fff; font-size:22px; font-weight:700; font-style:italic; margin-top:2px; }
#ux-carga.visible .ux-marca{ animation:uxMarca 2.6s ease infinite; }

@keyframes uxHalo{ 0%{opacity:.3;transform:scale(.85)} 50%{opacity:1;transform:scale(1.08)} 100%{opacity:.3;transform:scale(.85)} }
@keyframes uxLogo{ 0%{opacity:.55;transform:scale(.94)} 50%{opacity:1;transform:scale(1)} 100%{opacity:.55;transform:scale(.94)} }
@keyframes uxMarca{ 0%{opacity:.55} 50%{opacity:1} 100%{opacity:.55} }

body.ux-saliendo .telefono{ animation:uxSale .32s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes uxSale{ to{ transform:translateX(-12%); opacity:0; } }

body.ux-entrando .telefono{ animation:uxEntra .4s cubic-bezier(.22,.61,.36,1); }
@keyframes uxEntra{ from{ transform:translateX(14%); opacity:0; } to{ transform:translateX(0); opacity:1; } }

@keyframes uxBarra{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
.ux-barra-anim{ transform-origin:bottom; animation:uxBarra .7s cubic-bezier(.22,.61,.36,1); }

@media (prefers-reduced-motion:reduce){
  #ux-carga.visible .ux-halo,
  #ux-carga.visible .ux-logo,
  #ux-carga.visible .ux-marca{ animation:none; opacity:1; }
  body.ux-saliendo .telefono, body.ux-entrando .telefono{ animation:none; }
  .ux-barra-anim{ animation:none; }
}

#ux-btn-wrap{ display:none; }

#ux-girar{
  position: fixed;
  
  top: 0; right: 0; bottom: 0; left: 0;
  inset: 0;
  z-index: 10000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  background: linear-gradient(160deg, #15294C 0%, #2F4F84 100%);
  color: #fff;
  font-family: "Times New Roman", Times, serif;
  
  padding-top: calc(24px + env(safe-area-inset-top));
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}
#ux-girar .ux-girar-icono{
  width: 62px;
  height: 62px;
  animation: uxGirarIcono 2.2s ease-in-out infinite;
}
#ux-girar .ux-girar-titulo{ font-size: 20px; line-height: 1.3; }
#ux-girar .ux-girar-texto{
  font-size: 14px;
  opacity: .8;
  max-width: 30ch;
  line-height: 1.5;
}
@keyframes uxGirarIcono{
  0%, 45%   { transform: rotate(-90deg); }
  55%, 100% { transform: rotate(0deg); }
}

body.ux-horizontal #ux-girar{ display: flex; }

body.ux-horizontal{ overflow: hidden; }

@media screen and (orientation: landscape) and (max-width: 1040px) and (max-height: 520px) {
  #ux-girar{ display: flex; }
  body{ overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  #ux-girar .ux-girar-icono{ animation: none; }
}