/**
 * AutoPyme Web Components - Device Simulator
 * Componente especializado para simulación de dispositivos móviles y resoluciones.
 * Diseño ultra-minimalista en una sola línea de baja altura, monocromático, sin colores estridentes.
 */

/* Banner contenedor principal: ultra bajo, monocromático, sin distracciones */
.apc-device-sim-banner {
    user-select: none;
    -webkit-user-select: none;
    height: 26px;
    min-height: 26px;
    max-height: 26px;
    background-color: var(--apl-bg-surface, #0f172a);
    border-bottom: 1px solid var(--apl-divider, rgba(148, 163, 184, 0.2));
    color: var(--apl-text-muted, #94a3b8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    font-size: 11px;
    line-height: 1;
    z-index: 50;
    overflow: hidden;
}

[data-apl-theme="light"] .apc-device-sim-banner,
.apl-theme-light .apc-device-sim-banner {
    background-color: #f8fafc;
    border-bottom-color: #e2e8f0;
    color: #64748b;
}

/* Fila interior compacta: estrictamente 1 línea (nowrap), baja altura */
.apc-device-sim-inner {
    width: 100%;
    height: 100%;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.apc-device-sim-left,
.apc-device-sim-right {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

/* La zona izquierda ocupa el ancho libre para que la URL pueda recortarse */
.apc-device-sim-left {
    flex: 1 1 auto;
    min-width: 0;
}

/* URL de la aplicación: una línea, recortada con "..." si no cabe */
.apc-device-sim-url {
    min-width: 0;
    max-width: 100%;
    height: 20px;
    margin-left: 0.25rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.apc-device-sim-url:hover {
    background-color: rgba(148, 163, 184, 0.15);
    color: var(--apl-text-primary, #e2e8f0);
}

[data-apl-theme="light"] .apc-device-sim-url:hover,
.apl-theme-light .apc-device-sim-url:hover {
    color: #0f172a;
}

.apc-device-sim-url.is-copied {
    color: #22c55e;
}

/* Selector desplegable de resolución: sobrio, sin fondo llamativo */
.apc-device-sim-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.apc-device-sim-select {
    height: 20px;
    padding: 0 1.25rem 0 0.4rem;
    border-radius: 0.25rem;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid var(--apl-border-subtle, rgba(148, 163, 184, 0.25));
    color: var(--apl-text-secondary, #cbd5e1);
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.apc-device-sim-select:hover,
.apc-device-sim-select:focus {
    border-color: rgba(148, 163, 184, 0.5);
    color: var(--apl-text-primary, #f8fafc);
}

[data-apl-theme="light"] .apc-device-sim-select,
.apl-theme-light .apc-device-sim-select {
    background-color: #ffffff;
    border-color: #cbd5e1;
    color: #334155;
}

[data-apl-theme="light"] .apc-device-sim-select:hover,
[data-apl-theme="light"] .apc-device-sim-select:focus {
    border-color: #94a3b8;
    color: #0f172a;
}

.apc-device-sim-chevron {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 12px !important;
    color: var(--apl-text-muted, #64748b);
}

/* Botones de acción: transparentes, monocromáticos, icono pequeño */
.apc-device-sim-btn {
    width: 20px;
    height: 20px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--apl-text-muted, #94a3b8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.apc-device-sim-btn .material-symbols-outlined {
    font-size: 13px !important;
}

.apc-device-sim-btn:hover {
    color: var(--apl-text-primary, #f8fafc);
    background-color: rgba(148, 163, 184, 0.15);
}

[data-apl-theme="light"] .apc-device-sim-btn {
    color: #64748b;
}

[data-apl-theme="light"] .apc-device-sim-btn:hover {
    color: #0f172a;
    background-color: #e2e8f0;
}

.apc-device-sim-btn:active {
    transform: scale(0.92);
}

/* Píldora de resolución: oculta (removida visualmente a petición del usuario) */
.apc-device-sim-res-badge {
    display: none !important;
}

/* Botón flotante y área derecha: completamente ocultos (sin icono aspect_ratio ni botones superfluos) */
.apc-device-sim-floating-btn,
#apl-device-simulator-floating-btn,
.apc-device-sim-right {
    display: none !important;
}

/* ==========================================================================
   Modo Dispositivo Activo: Adaptación armónica del marco y fondo de escritorio
   ========================================================================== */
body.apl-device-sim-active {
    background-color: #090d16 !important;
    overflow-x: hidden;
    overflow-y: auto !important;
    min-height: 100vh;
}

[data-apl-theme="light"] body.apl-device-sim-active,
html[data-apl-theme="light"] body.apl-device-sim-active,
body.apl-device-sim-active.apl-theme-light {
    background-color: #e2e8f0 !important;
}

body.apl-device-sim-active #apl-app-viewport {
    width: var(--apl-sim-width, 100%) !important;
    max-width: var(--apl-sim-width, 100%) !important;
    height: var(--apl-sim-height, 100%) !important;
    min-height: var(--apl-sim-height, 100%) !important;
    max-height: var(--apl-sim-height, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 16px !important;
    margin-bottom: 24px !important;
    border-radius: 28px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    zoom: var(--apl-sim-scale, 1);
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--apl-border-subtle, rgba(255, 255, 255, 0.08)) !important;
    transition: max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1), height 0.25s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    background-color: var(--apl-bg-app, #0f172a);
}

/* Scrollbar estilizada y discreta para el contenedor del dispositivo */
body.apl-device-sim-active #apl-app-viewport::-webkit-scrollbar {
    width: 5px;
}
body.apl-device-sim-active #apl-app-viewport::-webkit-scrollbar-track {
    background: transparent;
}
body.apl-device-sim-active #apl-app-viewport::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 4px;
}

[data-apl-theme="light"] body.apl-device-sim-active #apl-app-viewport,
html[data-apl-theme="light"] body.apl-device-sim-active #apl-app-viewport,
body.apl-device-sim-active.apl-theme-light #apl-app-viewport {
    box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
    background-color: var(--apl-bg-app, #f1f5f9);
}

body.apl-device-sim-active header.glass-header {
    max-width: var(--apl-sim-width, 100%);
    margin-left: auto;
    margin-right: auto;
}

body.apl-device-sim-active #apl-bottom-nav {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
}

body.apl-device-sim-active #apl-nav-drawer {
    left: max(0px, calc(50% - (var(--apl-sim-width, 100%) / 2)));
    max-width: min(100%, var(--apl-sim-width, 100%));
}

/* Cualquier botonera flotante "position: fixed" (p. ej. el FAB "+" de
   Nueva Carga) debe anclarse al marco simulado del dispositivo
   (#apl-app-viewport, con position:relative), no al viewport real del
   navegador de escritorio: si no, se sale del marco en vez de quedarse
   dentro del dispositivo simulado, igual que ya se resuelve arriba para
   #apl-bottom-nav. */
body.apl-device-sim-active .apc-floating-action-bar {
    position: absolute !important;
}

/* AppShell (app_shell_templates.xml): su contenedor .apc-app es el propio
   #apl-app-viewport, así que dentro del marco simulado ocupa su altura en
   vez de la de la ventana (su navegación ya es position: sticky, así que se
   queda dentro del marco), y el menú lateral (position: fixed) se ancla
   al dispositivo simulado en lugar de a la ventana real del escritorio. */
body.apl-device-sim-active .apc-app {
    min-height: var(--apl-sim-height, 100vh);
}

/* El fondo del marco sigue el tema de AppShell (claro/oscuro), no el de la
   app de AutoPyme Logistics que usa #apl-app-viewport por defecto */
body.apl-device-sim-active #apl-app-viewport.apc-app {
    background-color: var(--apc-bg-app, #f1f5f9);
}

body.apl-device-sim-active .apc-app .apc-drawer {
    position: absolute !important;
}

/* Maestro-Detalle de Cargas (DeCA): las clases "md:" de Tailwind evalúan el
   ancho REAL del navegador, no el del dispositivo simulado, así que en un
   escritorio ancho simulando un móvil se quedaban en su disposición de
   tablet (grid de 2 columnas, panel embebido) en vez de la de móvil (una
   columna, panel a pantalla completa) -por eso al pulsar "+" no se veía el
   formulario: la columna del detalle quedaba comprimida a casi 0 px.
   apl-sim-mobile (ver device_simulator.js) refleja el ancho SIMULADO, así
   que fuerza aquí la disposición de móvil sea cual sea el ancho real. */
body.apl-device-sim-active.apl-sim-mobile #deca-master-detail-container {
    display: flex !important;
    grid-template-columns: none !important;
    flex-direction: column !important;
}

/* El formulario/ficha a pantalla completa también usa position:fixed, que
   se sale del marco simulado por el mismo motivo que el FAB de arriba;
   además el "portal" a <body> (apl_deca.js#portalDecaPanel) se redirige a
   #apl-app-viewport cuando el simulador está activo, así que aquí basta
   con anclarlo (position:absolute) a ese contenedor en vez del viewport
   real. */
body.apl-device-sim-active.apl-sim-mobile #deca-detail-form-area,
body.apl-device-sim-active.apl-sim-mobile #deca-detail-content-area {
    position: absolute !important;
    inset: 0 !important;
    z-index: 50 !important;
}

@media (max-width: 640px) {
    body.apl-device-sim-active #apl-app-viewport {
        box-shadow: none !important;
        border-radius: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        height: 100% !important;
        max-height: 100% !important;
    }
}

/* ==========================================================================
   ESTILOS DE ENTORNO DE TEST: BADGE EN SIMULADOR Y TIRA SUPERIOR EN NAVEGADOR
   ========================================================================== */

/* 1. Badge y botón en el simulador de dispositivo (Modo PWA / Standalone) */
.apc-device-sim-env-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 700;
    color: #f59e0b;
    background-color: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 3px;
    white-space: nowrap;
}

.apc-device-sim-mail-btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    font-size: 10px;
    font-weight: 600;
    color: #ffffff !important;
    background-color: #0284c7;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.apc-device-sim-mail-btn:hover {
    background-color: #0369a1;
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff !important;
}

.apc-sim-mail-icon {
    font-size: 12px !important;
    line-height: 1 !important;
}

/* 2. Tira superior de Entorno de Test para navegador estándar (cuando NO está instalada como PWA) */
.apl-browser-test-ribbon {
    background-color: #f59e0b;
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    user-select: none;
    -webkit-user-select: none;
    font-size: 12px;
}

.apl-browser-test-ribbon-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px;
    gap: 8px;
    width: 100%;
}

.apl-browser-test-ribbon-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.apl-test-icon {
    font-size: 13px;
}

.apl-test-title {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.apl-test-subtitle {
    font-weight: 500;
    font-size: 11px;
    opacity: 0.9;
}

.apl-browser-test-ribbon-actions {
    display: inline-flex;
    align-items: center;
}

.apl-btn-test-mailbox {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: #0f172a;
    color: #ffffff !important;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.apl-btn-test-mailbox:hover {
    background-color: #1e293b;
    color: #ffffff !important;
}

.apl-btn-mail-icon {
    font-size: 13px !important;
    line-height: 1 !important;
}

/* 3. Reglas de visibilidad: si el simulador está activo o la app está en PWA/standalone,
      la tira superior del navegador se oculta porque ya está integrada en el simulador */
body.apl-device-sim-active #apl-browser-test-ribbon {
    display: none !important;
}

@media (display-mode: standalone), (display-mode: window-controls-overlay) {
    #apl-browser-test-ribbon {
        display: none !important;
    }
}