/* @cpi 2026-10-22 20:40: ventana de Configuración por secciones (Aspecto, Sonido, Privacidad, Idioma y, en el modo oficial, Mis ROMs).
   room-music.js crea la ventana con un hueco data-section por sección; cada módulo monta la suya y los huecos vacíos no se ven.
   Sustituye a los estilos de #room-settings y .appearance-* que había en room-retro.css. */
#room-settings{width:min(600px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box;padding:22px 22px 16px;color:var(--ink);background:#171925;border:1px solid #bbdcd34d;border-radius:16px;font:14px/1.4 'Segoe UI',sans-serif}
#room-settings::backdrop{background:#000a}
#room-settings h2{margin:2px 56px 16px 2px;font:700 22px/1.2 'Segoe UI',sans-serif;color:#f6ecd2}
#room-settings .settings-sections{display:flex;flex-direction:column;gap:10px}
#room-settings [data-section]:empty{display:none}

/* Tarjeta de cada sección: título corto en mayúsculas y contenido debajo. */
#room-settings .settings-section{margin:0;padding:14px 16px;border:1px solid #ffffff17;border-radius:12px;background:#1f2231;text-align:left}
#room-settings .settings-section h3{margin:0 0 6px;font:700 12px/1.2 'Segoe UI',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#e6c77b}
#room-settings .settings-section p{margin:0 0 12px;color:#b9bbc6;font:13px/1.45 'Segoe UI',sans-serif}

/* Aspecto: ocho siluetas en cuatro columnas (también en el móvil, más pequeñas), color y Guardar a la derecha. */
.appearance-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.appearance-choices button{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;margin:0;padding:8px 4px 6px;border:1px solid #756a584f;border-radius:8px;background:#171a22;color:#d9d6cc;cursor:pointer;font:11.5px/1.25 'Segoe UI',sans-serif}
.appearance-choices button[aria-pressed="true"]{border-color:#edcc80;background:#2b2d29;box-shadow:inset 0 0 0 1px #edcc80}
.appearance-choices button[aria-pressed="true"]:after{content:'✓';position:absolute;right:6px;top:2px;color:#edcc80;font-size:16px}
.appearance-choices button:focus-visible{outline:2px solid #fff0c6;outline-offset:2px}
.appearance-preview{display:block;width:56px;height:84px;background:var(--figure-color,#66ff75);clip-path:var(--silhouette-clip);mask-image:var(--silhouette-art);mask-size:var(--silhouette-size);mask-position:var(--silhouette-position);mask-repeat:no-repeat}
.appearance-color{display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap;margin:14px 0 0}
.appearance-color label{display:flex;align-items:center;gap:8px;white-space:nowrap;color:#e3e0d6}
.appearance-color input[type=color]{width:46px;height:32px;margin:0;padding:2px;border:1px solid #9b8c73;border-radius:6px;background:#24252a;cursor:pointer}
.appearance-color input[type=checkbox]{flex:none;width:18px;height:18px;margin:0;accent-color:#e6c77b}
.appearance-actions{display:flex;align-items:center;gap:12px;margin-top:12px}
.appearance-actions [role="status"]{flex:1;order:-1;font:13px/1.3 'Segoe UI',sans-serif;color:#e2d8c2}
.appearance-save{flex:none;width:auto;margin:0;border:1px solid #cab278;border-radius:8px;background:#e0ca94;color:#29241b;font:600 14px 'Segoe UI',sans-serif;padding:8px 16px;cursor:pointer}
.appearance-save:disabled{opacity:.5;cursor:default}

/* Sonido: interruptor de la música y volumen en una fila; créditos debajo. */
#room-settings .music-settings{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px 16px}
#room-settings #room-music-toggle{justify-self:start;width:auto;min-height:0;margin:0;padding:7px 14px;border:1px solid #e6c77b55;border-radius:999px;background:#272a3a;color:#d9d6cc;font:600 13px 'Segoe UI',sans-serif;cursor:pointer}
#room-settings #room-music-toggle[aria-pressed="true"]{border-color:#e6c77b;background:#e6c77b26;color:#f6ecd2}
#room-settings .room-music-volume{display:flex;align-items:center;gap:10px;font:13px 'Segoe UI',sans-serif;color:#d9d6cc}
#room-settings .room-music-volume input{flex:1;width:auto;min-width:60px}
#room-settings .room-music-credit{grid-column:1/-1;justify-self:start;color:var(--mint);font:12px 'Segoe UI',sans-serif}

/* Privacidad: casilla con su explicación alineada al texto. */
#room-settings .settings-check{display:flex;align-items:flex-start;gap:10px;margin:8px 0 6px;color:#f1ead8;font:600 14px/1.35 'Segoe UI',sans-serif;cursor:pointer}
#room-settings .settings-check input{flex:none;width:20px;height:20px;margin:0;accent-color:#e6c77b;cursor:pointer}
#room-settings .settings-section .settings-hint{margin:0 0 0 30px}
#room-settings .settings-section .settings-status{margin:8px 0 0 30px;color:#f3bc78}
#room-settings .settings-section .settings-status:empty{display:none}

/* Idioma: una fila con el título a la izquierda y el desplegable a la derecha. */
#room-settings .settings-language{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;font:700 12px/1.2 'Segoe UI',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#e6c77b}
#room-settings .settings-language select{width:auto;min-height:34px;margin:0;padding:0 8px;color:var(--ink);background:#262939;border:1px solid #bbdcd34d;border-radius:8px;font:14px 'Segoe UI',sans-serif;letter-spacing:0;text-transform:none}

/* Mis ROMs (modo oficial) dentro de su tarjeta; enlace legal al pie. */
#room-settings .official-settings h3{margin-top:0}
#room-settings .settings-legal{margin:14px 0 0;font-size:13px;text-align:center}

@media(max-width:480px){
 #room-settings{padding:18px 14px 14px}
 #room-settings h2{font-size:20px;margin-bottom:14px}
 #room-settings .settings-section{padding:12px}
 .appearance-choices{gap:6px}
 .appearance-choices button{padding:6px 2px 5px;font-size:10px}
 .appearance-preview{width:42px;height:63px}
}