/* sobrio-config.css · rediseño minimalista de esa pantalla (22/10). Archivo propio para que los rediseños no choquen al juntarlos. */

/* ================= CONFIGURACIÓN (ventana del equipo) · estándar Notion minimalista (22/10/2026, rama n22-v) =================
   Menú lateral sin caja con el ítem activo marcado, pestañas de texto, cuerpo sin cajas dobles, una acción por bloque, títulos chicos.
   Más compacto que el intento retirado (532d953): «Mis avisos» y «Texto de los avisos» siguen entrando completos a 1366×640 (sobran ≤2 px). Solo CSS. */
.ov-cfg>.modal.cfg{border-radius:.75rem;box-shadow:0 16px 44px rgba(0,0,0,.3)}
.modal.cfg{grid-template-columns:12.5rem minmax(0,1fr)}
/* menú lateral: sin caja, sin fondo; el activo queda marcado con un tono y el ícono de acento */
.modal.cfg .cfg-nav{background:none;padding:.625rem .5rem;gap:.0625rem;overflow-y:auto}
.modal.cfg .cfg-tit{padding:.125rem .5rem .375rem;font-size:.6875rem;letter-spacing:.06em;color:var(--mute)}
.modal.cfg .cfg-nav button{min-height:2rem;padding:.25rem .5rem;gap:.5rem;border-radius:.375rem;color:var(--mute);font-weight:500}
.modal.cfg .cfg-nav button:hover{background:var(--hover);color:var(--ink)}
.modal.cfg .cfg-nav button[aria-current=true]{background:var(--hover);color:var(--ink);font-weight:600}
.modal.cfg .cfg-nav svg{color:var(--mute)}
.modal.cfg .cfg-nav button[aria-current=true] svg{color:var(--accent)}
/* título de la sección: chico y sin línea */
.modal.cfg .cab-m{padding:.25rem 1rem .125rem 1.5rem;border-bottom:0}
.modal.cfg .cab-m b{font-size:.9375rem;font-weight:600}
/* cuerpo: sin cajas dobles */
.modal.cfg .cfg-in{padding:.375rem 1.5rem 1rem;gap:.625rem}
.modal.cfg .cfg-in .card{background:none;border:0;border-radius:0;box-shadow:none;animation:none}
.modal.cfg .cfg-in .card.pad{padding:.5rem 0}
.modal.cfg .cfg-in :is(.row,.row2){padding-inline:0}
.modal.cfg .cfg-in .row:hover{background:none}
.modal.cfg .cfg-in :is(h2,h3){margin:.375rem 0 0;font-size:var(--fs);font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.modal.cfg .cfg-in>p,.modal.cfg .cfg-in :is(.sub,.ayuda){margin:0;font-size:var(--fs-chico);line-height:1.35;color:var(--mute)}
/* pestañas y selectores: texto con subrayado, no un control con caja */
.modal.cfg .cfg-in :is(.seg,.avp-seg){padding:0;border:0;background:none;border-radius:0;overflow:visible;gap:0 1rem}
.modal.cfg .cfg-in :is(.seg,.avp-seg) button{height:auto;min-height:2rem;padding:0 .125rem;border-radius:0;border-bottom:.125rem solid transparent;background:none;box-shadow:none;color:var(--mute);font-weight:500}
.modal.cfg .cfg-in :is(.seg,.avp-seg) button:hover{color:var(--ink)}
.modal.cfg .cfg-in :is(.seg,.avp-seg) button[aria-pressed=true]{background:none;box-shadow:none;color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
/* una acción por bloque: la principal con color, el resto como texto */
.modal.cfg .cfg-in .btn.full{width:auto;min-width:0;align-self:flex-start}
.modal.cfg .cfg-in .btn.ghost{border-color:transparent;background:none;color:var(--mute);font-weight:500}
.modal.cfg .cfg-in .btn.ghost:hover{background:none;color:var(--accent)}
/* «Mis avisos»: la grilla más liviana y baja */
.modal.cfg .avp-wrap{gap:.5rem}
.modal.cfg .avp-grid{gap:.125rem} /* 23/10: con la fila «Cuentas para aprobar» (11 tipos para el equipo) */
.modal.cfg .avp-m{min-height:1.5rem;padding-block:.125rem;border-width:1px} /* 25/10: 12 tipos para el equipo (con «Contenido de Nexus»): casillas de 1,5 rem con mouse para que «Mis avisos» entre en 1366×640 */
/* celular: el menú pasa a una línea de pestañas de texto y todo se toca con el dedo */
html[data-ancho=cel] .modal.cfg .cfg-nav{padding:0 .5rem;gap:0}
html[data-ancho=cel] .modal.cfg .cfg-nav button{min-height:44px;padding:0 .75rem;border-radius:0;background:none;border-bottom:.125rem solid transparent;white-space:nowrap}
html[data-ancho=cel] .modal.cfg .cfg-nav button[aria-current=true]{background:none;border-bottom-color:var(--accent)}
html[data-ancho=cel] .modal.cfg .cfg-nav svg{display:none}
html[data-ancho=cel] .modal.cfg .cab-m{padding:0 .5rem 0 1.25rem}
html[data-ancho=cel] .modal.cfg .cab-m .ico{min-width:44px;min-height:44px}
html[data-ancho=cel] .modal.cfg .cfg-in{padding:.25rem 1.25rem 1rem}
html[data-ancho=cel] .modal.cfg .cfg-in :is(.btn,.inp,select,.mostrar){min-height:44px}
html[data-ancho=cel] .modal.cfg .cfg-in :is(.seg,.avp-seg) button{min-height:44px}
html[data-ancho=cel] .modal.cfg .avp-m{min-height:44px}
html[data-ancho=cel] .modal.cfg .avp-wrap{gap:.25rem}
html[data-ancho=cel] .modal.cfg .avp-wrap>.sub{display:none} /* 25/10: con 12 tipos de 44 px, la bajada también se va: cada casilla ya dice su modo y se ve que se toca */
html[data-ancho=cel] .modal.cfg .avp-leyenda{display:none} /* los modos ya se leen en cada casilla; con 11 tipos de 44 px la grilla tiene que entrar en una pantalla */
html[data-ancho=cel] .modal.cfg .avp-grid{gap:.125rem} /* 10 tipos de aviso con casillas de 44 px: la grilla tiene que entrar en una pantalla */