/* =====================================================================
   Tema iOS (modo oscuro de Apple)
   Se carga despues de styles.css y solo sobreescribe el aspecto:
   colores del sistema de iOS, materiales translucidos, controles
   segmentados, iconos tipo Ajustes y botones con respuesta al toque.
   ===================================================================== */

:root {
    color-scheme: dark;
    --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

    /* colores del sistema (modo oscuro) */
    --primary: #0A84FF;
    --primary-hover: #409CFF;
    --accent: #0A84FF;
    --secondary: #8E8E93;
    --success: #30D158;
    --warning: #FF9F0A;
    --danger: #FF453A;

    --bg-main: #000000;
    --bg-card: #1C1C1E;          /* secondarySystemBackground */
    --bg-elevated: #2C2C2E;      /* tertiarySystemBackground */
    --ios-bg3: #3A3A3C;
    --ios-fill: rgba(118, 118, 128, 0.24);
    --ios-fill-strong: rgba(118, 118, 128, 0.36);
    --ios-material: rgba(30, 30, 32, 0.72);

    --text-primary: #FFFFFF;
    --text-secondary: rgba(235, 235, 245, 0.6);
    --text-tertiary: rgba(235, 235, 245, 0.3);
    --border: rgba(84, 84, 88, 0.45);
    --border-hover: rgba(84, 84, 88, 0.65);
    --divider: rgba(84, 84, 88, 0.55);

    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.55);

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 26px;

    --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
    --transition-fast: 180ms var(--ease-ios);
    --transition-normal: 320ms var(--ease-ios);
    --transition-slow: 450ms var(--ease-ios);
}

html, body { background: #000 !important; }
body {
    font-family: var(--font);
    color: var(--text-primary);
    letter-spacing: -0.01em;
    -webkit-tap-highlight-color: transparent;
}
body::before { display: none !important; }
button, input, select, textarea { font-family: inherit; }

/* Las tarjetas no "flotan" al pasar el raton (en iOS no existe el hover) */
.card:hover, .arm-card:hover { transform: none !important; box-shadow: none !important; }

/* ---------- Barra superior: material translucido ---------- */
.header {
    background: var(--ios-material) !important;
    backdrop-filter: saturate(180%) blur(30px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(30px) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 22px !important;
    box-shadow: none !important;
}
.menu-btn {
    width: 40px; height: 40px;
    border-radius: 50% !important;
    background: var(--ios-fill) !important;
    color: var(--primary) !important;
}
.menu-btn:hover { transform: none; background: var(--ios-fill-strong) !important; }
.robot-logo { filter: none !important; border-radius: 12px; }
.header-title { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; }

.ip-input-container { background: var(--ios-fill) !important; border-radius: 12px; padding: 3px; }
.ip-input { color: #fff !important; font-weight: 500; font-variant-numeric: tabular-nums; }
.ip-input::placeholder { color: var(--text-tertiary) !important; }
.ip-input:focus { background: transparent !important; }
.connect-btn {
    background: var(--primary) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.connect-btn:hover { transform: none !important; box-shadow: none !important; filter: brightness(1.12); }
.connect-btn:active { transform: scale(0.96) !important; filter: brightness(0.9); }

.volume-toggle-btn {
    width: 40px; height: 40px; padding: 0 !important; justify-content: center;
    border-radius: 50% !important; background: var(--ios-fill) !important; color: #fff !important;
}
.volume-toggle-btn .volume-icon { width: 22px; height: 22px; }
.volume-panel {
    background: rgba(44, 44, 46, 0.85) !important;
    backdrop-filter: saturate(180%) blur(30px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(30px) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-xl) !important;
}
.volume-mute-btn, .volume-btn-small { border-radius: 50% !important; background: var(--ios-fill) !important; }

.connection-status {
    background: var(--ios-fill) !important;
    border-radius: 999px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}
.status-indicator { box-shadow: none !important; }
.lab-logo { border: none !important; border-radius: 10px !important; padding: 0 !important; }
.lab-name { color: var(--text-tertiary); letter-spacing: 0.04em; }

/* ---------- Deslizadores estilo iOS ---------- */
.volume-slider { height: 4px !important; background: var(--ios-fill-strong) !important; border-radius: 2px !important; }
.volume-slider::-webkit-slider-thumb {
    width: 26px !important; height: 26px !important; background: #fff !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(0, 0, 0, 0.04) !important;
}
.volume-slider::-webkit-slider-thumb:hover { transform: none !important; }
.volume-slider::-moz-range-thumb { width: 26px; height: 26px; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); }

/* ---------- Menu lateral: lista tipo Ajustes ---------- */
.nav-drawer-overlay { background: rgba(0, 0, 0, 0.45) !important; backdrop-filter: blur(6px) !important; }
.nav-drawer-content {
    background: rgba(28, 28, 30, 0.82) !important;
    backdrop-filter: saturate(180%) blur(30px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(30px) !important;
    border-right: 0.5px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 0 22px 22px 0;
    transition: transform 450ms var(--ease-ios) !important;
}
.nav-drawer-header { border-bottom: none !important; padding: 22px 20px 14px !important; }
.nav-drawer-title { font-size: 28px !important; font-weight: 700 !important; letter-spacing: -0.03em !important; }
.nav-drawer-logo-img { filter: none !important; }
.nav-drawer-close {
    width: 30px !important; height: 30px !important; border: none !important; border-radius: 50% !important;
    background: var(--ios-fill) !important; color: var(--text-secondary) !important;
}
.nav-drawer-close svg { width: 14px !important; height: 14px !important; }
.nav-drawer-close:hover { box-shadow: none !important; background: var(--ios-fill-strong) !important; color: #fff !important; }
.nav-drawer-items {
    margin: 4px 12px 16px; padding: 0 !important;
    background: var(--bg-elevated); border-radius: 14px; overflow-y: auto; flex: 0 1 auto !important; min-height: 0;
}
.nav-drawer-item {
    border-radius: 0 !important; margin: 0 !important; padding: 10px 14px !important; gap: 14px !important;
    position: relative; transition: background 120ms ease !important;
}
.nav-drawer-item + .nav-drawer-item::before {   /* separador fino desde el texto, como en iOS */
    content: ''; position: absolute; top: 0; right: 0; left: 60px; height: 0.5px; background: var(--divider);
}
.nav-drawer-item:hover { background: rgba(255, 255, 255, 0.04) !important; }
.nav-drawer-item:active { background: var(--ios-bg3) !important; }
.nav-drawer-item.active { background: var(--primary) !important; }
.nav-drawer-item.active::before, .nav-drawer-item.active + .nav-drawer-item::before { display: none; }
.nav-drawer-item.active .nav-item-title { color: #fff !important; }
.nav-drawer-item.active .nav-item-desc { color: rgba(255, 255, 255, 0.75) !important; }
.nav-item-icon {
    width: 32px !important; height: 32px !important; border-radius: 8px !important;
    color: #fff !important; box-shadow: none !important;
}
.nav-item-icon svg { width: 19px !important; height: 19px !important; }
.nav-item-icon img { width: 20px !important; height: 20px !important; filter: brightness(0) invert(1); }
/* colores de cada icono, como la app Ajustes */
.nav-drawer-item[data-panel="game-controls"] .nav-item-icon { background: #0A84FF !important; }
.nav-drawer-item[data-panel="arms"] .nav-item-icon         { background: #FF9F0A !important; }
.nav-drawer-item[data-panel="attacks"] .nav-item-icon      { background: #FF453A !important; }
.nav-drawer-item[data-panel="buzzer"] .nav-item-icon       { background: #FF375F !important; }
.nav-drawer-item[data-panel="display"] .nav-item-icon      { background: #5E5CE6 !important; }
.nav-drawer-item[data-panel="ultrasonic"] .nav-item-icon   { background: #30D158 !important; }
.nav-drawer-item[data-panel="calibrate"] .nav-item-icon    { background: #8E8E93 !important; }
.nav-drawer-item.active .nav-item-icon { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85) !important; }
.nav-item-title { font-size: 16px !important; font-weight: 500 !important; letter-spacing: -0.02em !important; }
.nav-item-desc { font-size: 12.5px !important; }

/* ---------- Tarjetas y titulos ---------- */
.card {
    background: var(--bg-card) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 26px !important;
    box-shadow: none !important;
}
.content-panel .card-header {
    border-bottom: none !important;
    max-width: none !important;
    justify-content: space-between;
    padding: 2px 6px 0 !important;
}
.content-panel .card-title {
    font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.025em !important;
    color: #fff !important; text-align: left;
}
#game-controls .card-header { justify-content: center; }
#game-controls .card-title { font-size: 17px !important; font-weight: 600 !important; letter-spacing: -0.02em !important; }
#game-controls .card-title > span:last-child { color: #fff !important; text-shadow: none !important; font-weight: 600 !important; }
#game-controls .card-title > span:first-child {     /* icono de mando como icono de app */
    background: linear-gradient(180deg, #2A9BFF 0%, #0A6CFF 100%) !important;
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.25) !important;
    border: none !important;
    border-radius: 9px !important;
}
#game-controls .card-title img { filter: brightness(0) invert(1) !important; }
.attacks-counter, .sounds-counter { color: var(--text-secondary) !important; font-weight: 500 !important; }

/* ---------- Controles segmentados (pestañas y Rodar/Caminar) ---------- */
.home-tabs, .mode-toggle {
    background: var(--ios-fill) !important;
    border-radius: 10px !important;
    padding: 2px !important;
    gap: 0 !important;
}
.home-tab, .mode-toggle-btn {
    border-radius: 8px !important;
    color: #fff !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    letter-spacing: -0.01em !important;
    transition: background 200ms var(--ease-ios), box-shadow 200ms var(--ease-ios) !important;
}
.home-tab.on, .mode-toggle-btn.active {
    background: #636366 !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04) !important;
}
.mode-toggle-btn .mode-icon img { filter: brightness(0) invert(1); }

/* ---------- Inicio ---------- */
#game-controls .card { padding: 12px !important; }
#game-controls .home-quick { background: transparent !important; padding: 0 !important; gap: 10px !important; }
.home-twin { border-radius: 20px !important; background: #0d0f13; }
.twin-badge {
    background: rgba(30, 30, 32, 0.6) !important;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    font: 600 12px/1 var(--font) !important; padding: 7px 10px !important;
}
.twin-badge i { box-shadow: none !important; }
.twin-btn {
    width: 32px !important; height: 32px !important;
    background: rgba(30, 30, 32, 0.6) !important;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}

/* Botones rapidos (ataques, sonidos, mensajes) */
.quick-attack-btn, .quick-sound-btn, .quick-display-btn, .quick-bitmap-btn {
    background: var(--bg-elevated) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    color: #fff !important;
    transition: transform 160ms var(--ease-ios), background 160ms ease !important;
}
.quick-attack-btn:hover, .quick-sound-btn:hover, .quick-display-btn:hover, .quick-bitmap-btn:hover {
    background: var(--ios-bg3) !important; transform: none !important; box-shadow: none !important;
}
.quick-attack-btn:active, .quick-sound-btn:active, .quick-display-btn:active, .quick-bitmap-btn:active {
    transform: scale(0.95) !important; background: #48484A !important;
}
/* icono arriba y nombre debajo, sin solaparse aunque el boton sea bajo */
.quick-attack-btn, .quick-sound-btn { flex-direction: column !important; gap: 2px; line-height: 1.1 !important; }
.quick-attack-btn .attack-hint, .quick-sound-btn .sound-hint { position: static !important; padding: 0 6px !important; }
.quick-attack-btn .attack-hint, .quick-sound-btn .sound-hint, .quick-display-btn .display-text, .quick-bitmap-text {
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
@media (max-height: 480px) {
    .quick-attack-btn, .quick-sound-btn { font-size: 26px !important; }
    .quick-attack-btn .attack-hint, .quick-sound-btn .sound-hint, .quick-display-btn .display-text { font-size: 11px !important; }
}
.quick-attack-btn:hover .attack-hint, .quick-sound-btn:hover .sound-hint, .quick-display-btn:hover .display-text { color: #fff !important; }
.no-attacks-message, .no-sounds-message, .no-display-message, .no-bitmaps-message { font-style: normal !important; color: var(--text-tertiary) !important; }
.quick-bitmap-slot { border-top: 0.5px solid var(--divider) !important; }
.quick-bitmap-slot-title { color: var(--text-secondary) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; }

/* Cruceta */
.d-pad-btn {
    background: var(--bg-elevated) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    color: #fff !important;
    transition: transform 140ms var(--ease-ios), background 140ms ease !important;
}
.d-pad-btn svg { width: 46%; height: 46%; max-width: 26px; max-height: 26px; }
.d-pad-btn:hover { background: var(--ios-bg3) !important; transform: none !important; box-shadow: none !important; }
.d-pad-btn:active { background: var(--primary) !important; transform: scale(0.93) !important; }
.d-pad-btn.d-pad-home { background: rgba(10, 132, 255, 0.18) !important; color: var(--primary) !important; }
.d-pad-btn.d-pad-home:hover { background: rgba(10, 132, 255, 0.28) !important; }
.d-pad-btn.d-pad-home:active { background: var(--primary) !important; color: #fff !important; }

/* Joystick (modo Rodar) */
.joystick-base {
    background: radial-gradient(circle at 50% 50%, #2C2C2E 0%, #232325 70%) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}
.joystick-grid::before, .joystick-grid::after { background: rgba(84, 84, 88, 0.35) !important; }
.joystick-knob {
    background: linear-gradient(180deg, #FFFFFF 0%, #E5E5EA 100%) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(0, 0, 0, 0.1) !important;
}
.joystick-knob::after { display: none !important; }
.stat-box { background: var(--bg-elevated) !important; border: none !important; box-shadow: none !important; border-radius: 12px !important; }

/* ---------- Botones generales ---------- */
.arm-btn {
    background: var(--ios-fill) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    transition: transform 140ms var(--ease-ios), background 140ms ease !important;
}
.arm-btn:hover { background: var(--ios-fill-strong) !important; transform: none !important; box-shadow: none !important; }
.arm-btn:active { transform: scale(0.96) !important; background: var(--primary) !important; }

.arm-card, .quick-attacks-container, .quick-sounds-container, .quick-display-container, .sound-visualizer {
    background: var(--bg-elevated) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: none !important;
}
.arm-icon { background: var(--ios-bg3) !important; border-radius: 16px !important; }

/* Tarjetas seleccionables (ataques y sonidos) */
.attack-card, .buzzer-card {
    background: var(--bg-elevated) !important;
    border: none !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    transition: transform 160ms var(--ease-ios), background 160ms ease, box-shadow 160ms ease !important;
}
.attack-card:hover:not(.disabled), .buzzer-card:hover:not(.disabled) {
    transform: none !important; background: var(--ios-bg3) !important; box-shadow: none !important;
}
.attack-card:active:not(.disabled), .buzzer-card:active:not(.disabled) { transform: scale(0.96) !important; }
.attack-card.selected, .buzzer-card.selected {
    background: rgba(10, 132, 255, 0.16) !important;
    box-shadow: inset 0 0 0 2px var(--primary) !important;
}
.attack-card.disabled, .buzzer-card.disabled { opacity: 0.35 !important; }
.attack-icon { filter: none !important; }
.attack-name, .buzzer-name { font-weight: 600 !important; letter-spacing: -0.015em !important; }
.ultimate-card { background: rgba(255, 69, 58, 0.14) !important; }
.ultimate-card .attack-name { text-shadow: none !important; color: var(--danger) !important; }

/* Circulo de seleccion con check, como en Fotos/Mail */
.attack-checkbox-label, .buzzer-checkbox-label {
    border: 1.5px solid rgba(235, 235, 245, 0.35) !important;
    background: transparent !important;
    box-shadow: none !important;
}
.attack-checkbox-input:checked + .attack-checkbox-label,
.buzzer-checkbox-input:checked + .buzzer-checkbox-label {
    background: var(--primary) !important;
    border-color: #fff !important;
    box-shadow: none !important;
}
.buzzer-number { background: var(--ios-fill) !important; border-radius: 6px !important; }
.buzzer-card:hover .buzzer-number { background: var(--ios-fill-strong) !important; color: var(--text-secondary) !important; }
.sound-bar { box-shadow: none !important; background: var(--primary) !important; }

/* Barras de desplazamiento finas */
.card::-webkit-scrollbar-track { background: transparent !important; }
.card::-webkit-scrollbar-thumb { background: rgba(235, 235, 245, 0.2) !important; }
.card::-webkit-scrollbar-thumb:hover { background: rgba(235, 235, 245, 0.35) !important; box-shadow: none !important; }

/* Quien prefiera menos movimiento no ve animaciones */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ---------- Movil en vertical ---------- */
@media (orientation: portrait) and (max-width: 600px) {
    .main-content { padding: 10px 10px 12px !important; }
    /* Cabecera en dos filas: menu, logo, estado y volumen arriba; IP + Conectar debajo */
    .header { flex-direction: row !important; align-items: center !important; text-align: left !important; flex-wrap: wrap !important; padding: 10px 12px !important; gap: 8px 10px !important; margin-bottom: 10px !important; }
    .header-left { margin-right: auto; gap: 10px !important; }
    .header-title, .lab-logo-container { display: none !important; }
    .robot-logo { width: 38px !important; height: 38px !important; }
    .status-bar { display: contents !important; }
    .connection-status { order: 1; }
    .volume-controls { order: 2; }
    .ip-input-container { order: 3; flex: 1 1 100%; }
    .ip-input { flex: 1; max-width: none !important; min-width: 0 !important; }

    /* Inicio: el robot usa el espacio que sobra; botones y cruceta con tamaño fijo */
    #game-controls .card { padding: 10px !important; border-radius: 24px !important; }
    #game-controls .card-header { margin-bottom: 6px !important; padding-bottom: 0 !important; }
    #game-controls .home-grid { grid-template-rows: minmax(150px, 1fr) auto !important; gap: 10px !important; }
    #game-controls .home-quick { justify-content: flex-start; }
    #game-controls .home-quick [class$="-grid"] { flex: none !important; align-content: start !important; }
    #game-controls .home-quick [class$="-grid"] > * { height: clamp(58px, 10.5vh, 92px) !important; }
    #game-controls .right-panel { justify-content: flex-start !important; gap: 10px !important; }
    #game-controls .d-pad { --dp: clamp(44px, calc((50vw - 44px) / 3), 62px) !important; }
    #game-controls .mode-toggle-btn { padding: 6px 8px !important; gap: 5px !important; }
    #game-controls .mode-toggle-btn .mode-icon { font-size: 15px !important; }
    #game-controls .mode-toggle-btn .mode-icon img { width: 18px !important; height: 18px !important; }
}