/* =====================================================
   EMULADOR 360
   Desarrollado por NET360.PE
===================================================== */

:root{
    --primary:#000000;
    --secondary:#00FFFF;
    --bg:#f5f7fa;
    --card:#ffffff;
    --text:#222222;
    --border:#d9d9d9;
    --shadow:0 8px 24px rgba(0,0,0,.08);
}

body.dark{
    --bg:#0f172a;
    --card:#1e293b;
    --text:#f8fafc;
    --border:#334155;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%;}
body{
    background:var(--bg);
    color:var(--text);
    font-family:Inter,Segoe UI,Arial,sans-serif;
}

button,input{font:inherit}
button{cursor:pointer}

.toolbar{
    position:sticky;
    top:0;
    z-index:9999;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 18px;
    background:var(--card);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow);
}

.brand{display:flex;flex-direction:column;min-width:245px;flex-shrink:0}
.brand h1{font-size:23px;color:var(--primary);font-weight:800;line-height:1.1}
.brand span{font-size:11px;color:#666;margin-top:3px}
body.dark .brand h1{color:#fff}
body.dark .brand span{color:#cbd5e1}

#urlForm{display:flex;gap:8px;flex:1;min-width:220px}
.toolbar input{
    flex:1;min-width:0;padding:11px 14px;border-radius:8px;
    border:1px solid var(--border);font-size:14px;outline:none;
    background:var(--bg);color:var(--text);
}

.toolbar button,.filters button,.zoom-controls button{
    border:0;border-radius:8px;padding:9px 13px;
    background:var(--primary);color:#fff;font-weight:600;
    transition:.2s;white-space:nowrap;
}
.toolbar button:hover,.filters button:hover,.zoom-controls button:hover{transform:translateY(-1px);opacity:.9}

.filters,.zoom-controls{
    display:flex;align-items:center;gap:9px;padding:10px 18px;
    border-bottom:1px solid var(--border);background:var(--card);
    overflow-x:auto;white-space:nowrap;
}
.filters strong,.zoom-controls strong{font-size:13px}
.zoom-controls #zoomStatus{
    padding:8px 11px;border-radius:8px;background:#eef2f7;color:#111;font-size:12px;font-weight:700;
}
body.dark .zoom-controls #zoomStatus{background:#334155;color:#fff}
.zoom-help{font-size:12px;color:#777;margin-left:4px}
body.dark .zoom-help{color:#94a3b8}

.devices{
    display:flex;align-items:flex-start;gap:24px;
    overflow:auto;padding:24px;min-height:calc(100vh - 205px);
}

.device{
    flex:0 0 auto;
    width:max-content;
    max-width:none;
    background:var(--card);
    border-radius:15px;
    padding:12px;
    box-shadow:var(--shadow);
    border:2px solid var(--border);
    position:relative;
    transition:border-color .2s,box-shadow .2s,transform .2s;
}
.device:hover{transform:translateY(-2px)}
.device.active{border-color:var(--secondary);box-shadow:0 0 0 3px rgba(0,255,255,.12),var(--shadow)}
.device[hidden]{display:none!important}

.device-header{
    display:flex;justify-content:space-between;align-items:center;
    gap:15px;margin-bottom:10px;min-height:34px;
}
.title{font-size:14px;font-weight:700;text-align:left}
.dimension{font-size:11px;color:#666;margin-top:2px}
body.dark .dimension{color:#94a3b8}
.device-actions{display:flex;gap:6px}
.fullscreen,.capture-device,.capture-full-page{
    width:32px;height:32px;padding:0!important;border:0;border-radius:7px;
    background:var(--secondary);color:#111;font-weight:700;
}

.viewport{
    overflow:auto;
    border-radius:10px;
    border:1px solid #cfd4da;
    background:#fff;
    position:relative;
    flex:none;
}
.viewport-stage{
    position:relative;
    flex:none;
}
.viewport iframe{
    display:block;
    border:0;
    margin:0;
    padding:0;
    background:#fff;
    transform-origin:top left;
    max-width:none;
}

.devices::-webkit-scrollbar,.viewport::-webkit-scrollbar{width:10px;height:10px}
.devices::-webkit-scrollbar-thumb,.viewport::-webkit-scrollbar-thumb{background:#888;border-radius:20px}

.history-panel,.favorites-panel{
    padding:15px 18px;background:var(--card);border-top:1px solid var(--border)
}
.history-panel h3,.favorites-panel h3{font-size:15px;margin-bottom:9px}
.favorite-item{
    padding:9px 10px;margin-bottom:5px;border-radius:6px;cursor:pointer;
    background:var(--bg);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.favorite-item:hover{background:#e6f7ff}

.empty-state{width:100%;text-align:center;padding:110px 20px;color:#888}
.empty-state h2{margin-bottom:10px}

.device:fullscreen,
.device.fullscreen-fallback{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483647 !important;
    width:100vw !important;
    height:100vh !important;
    max-width:none !important;
    max-height:none !important;
    margin:0 !important;
    padding:20px !important;
    background:var(--card) !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
}
.device:fullscreen .device-header,
.device.fullscreen-fallback .device-header{
    flex:0 0 auto;
}
.device:fullscreen .viewport,
.device.fullscreen-fallback .viewport{
    margin:auto !important;
    flex:0 0 auto !important;
    overflow:hidden !important;
}
.device:fullscreen .viewport-stage,
.device.fullscreen-fallback .viewport-stage{
    overflow:hidden;
}
body.has-fallback-fullscreen{
    overflow:hidden !important;
}

@media(max-width:1024px){
    .toolbar{flex-wrap:wrap}
    .brand{width:100%;min-width:0}
    #urlForm{order:2;width:100%}
    .toolbar>button{order:3}
    .devices{padding:16px}
}

@media(max-width:768px){
    .toolbar{padding:10px}
    .filters,.zoom-controls{padding:9px 10px}
    .devices{gap:15px;padding:15px}
    .device{padding:10px}
    .zoom-help{display:none}
}

body.capturing .device:not(.active){opacity:.65}

.zoom-controls button.zoom-active{
    background:var(--secondary);
    color:#111;
    box-shadow:0 0 0 2px rgba(0,255,255,.22);
}

.capture-full-page{background:#111!important;color:#fff!important}