/**
 * Orvex Care — Performance & App-Feel Layer
 * Transiciones de sección, feedback táctil, scroll nativo, skeleton.
 */

/* ============================================================
   BASE — sensación de app nativa
   ============================================================ */

/* Eliminar highlight azul en tap (Android/iOS) */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Scroll suave y momentum nativo en iOS — solo en los contenedores que scrollean */
.kame-client-content,
#kame-worker-sec,
.kame-admin-content,
.kame-content,
.ov-main-content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* Fuente system-ui para render más rápido donde no hay fuente personalizada */
body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   TRANSICIONES DE SECCIÓN — entrada desde abajo (estilo app)
   ============================================================ */

@keyframes ov-section-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ov-section-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Se aplica cuando JS añade .ov-enter al contenedor de sección */
.ov-enter,
#kame-worker-sec > *,
.kame-client-content > * {
    animation: ov-section-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Modales bottom-sheet */
@keyframes ov-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.kw-hist-modal__sheet,
.kame-bottom-sheet,
[class$="__sheet"] {
    animation: ov-slide-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ============================================================
   FEEDBACK TÁCTIL — todos los elementos interactivos
   ============================================================ */

button,
[role="button"],
.kame-nav-item,
[onclick],
[data-sec],
[class*="-btn"],
[class*="-item"][onclick],
.kw-hist-item {
    cursor: pointer;
    transition:
        transform 100ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity   100ms ease;
    user-select: none;
}
button:hover,
[class*="-btn"]:hover,
.kw-hist-item:hover {
    will-change: transform;
}

button:active,
[role="button"]:active,
.kame-nav-item:active,
[onclick]:active,
[data-sec]:active,
[class*="-btn"]:active,
.kw-hist-item:active {
    transform: scale(0.96) !important;
    opacity: 0.85;
}

/* Botón CTA principal — feedback más pronunciado */
.kame-btn:active,
button[style*="background:#c2873b"]:active,
button[style*="background: #c2873b"]:active {
    transform: scale(0.95) !important;
    box-shadow: 0 2px 8px rgba(194, 135, 59, 0.4);
}

/* Nav items — no escalar, solo opacidad */
.kame-nav-item:active,
[class*="bottom-nav"] [class*="item"]:active {
    transform: scale(0.92) !important;
    opacity: 0.7;
}

/* Deshabilitar transform en elementos deshabilitados */
button:disabled:active,
button[disabled]:active {
    transform: none !important;
    opacity: 1;
}

/* ============================================================
   SKELETON SCREENS — para el SPA del cliente
   ============================================================ */

@keyframes ov-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

.ov-skeleton {
    background: linear-gradient(
        90deg,
        #e8eaf0 25%,
        #f4f5f8 50%,
        #e8eaf0 75%
    );
    background-size: 800px 100%;
    animation: ov-shimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
}

/* Skeleton presets */
.ov-sk-title  { height: 20px; width: 60%; margin-bottom: 8px; }
.ov-sk-text   { height: 14px; width: 90%; margin-bottom: 6px; }
.ov-sk-text-s { height: 14px; width: 40%; margin-bottom: 6px; }
.ov-sk-card   { height: 120px; border-radius: 16px; margin-bottom: 12px; }
.ov-sk-avatar { height: 44px; width: 44px; border-radius: 50%; flex-shrink: 0; }
.ov-sk-chip   { height: 32px; width: 80px; border-radius: 20px; display: inline-block; }
.ov-sk-btn    { height: 48px; border-radius: 12px; }

/* Skeleton para home del cliente */
.ov-skeleton-home {
    padding: 16px;
}
.ov-skeleton-home .ov-sk-hero {
    height: 200px;
    border-radius: 24px;
    margin-bottom: 20px;
}
.ov-skeleton-home .ov-sk-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

/* ============================================================
   TRANSICIÓN DE NAV — punto activo con slide
   ============================================================ */

.kame-nav-item {
    position: relative;
    transition: color 200ms ease;
}

.kame-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--ov-gold, #c2873b);
    animation: ov-section-fade 200ms ease both;
}

/* ============================================================
   SCROLLBAR — invisible pero funcional (nativo en iOS)
   ============================================================ */

::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

/* ============================================================
   IMÁGENES — lazy loading optimizado
   ============================================================ */

img {
    loading: lazy;
    content-visibility: auto;
}

img[src] {
    transition: opacity 200ms ease;
}


/* ============================================================
   PERFORMANCE HINTS — reducir layout thrashing
   ============================================================ */

/* Bottom nav fija — promote a compositing layer */
.kame-bottom-nav,
[class*="bottom-nav"],
.kame-topbar {
    transform: translateZ(0);
    backface-visibility: hidden;
}