/* ajustes-simple.css -- Ajustes en dos grupos, «Tu» y «Tu estudio» (plan preferencias-y-ajustes, Fase 3; lienzo aprobado el 13 oct 2026). Solo tokens de Cuarto Oscuro. Todo cuelga de .ajs2 / .ajs-*: sin `estudio.pantallas_simple` nada de esto se pinta.
   Ancho: barra lateral (buscador + dos grupos) y la seccion a la derecha. Angosto (la columna, no la ventana; ver .ajs2.angosto): la barra ES la lista de entrada. */
.ajs2{ display:grid; grid-template-columns:248px minmax(0,1fr); gap:var(--e-6); align-items:start; margin-top:var(--e-4); }
.ajs2-riel{ position:sticky; top:var(--e-4); display:flex; flex-direction:column; min-width:0; }
.ajs2-busca{ position:relative; margin-bottom:var(--e-2); }
.ajs2-busca .ex-q{ width:100%; }
.ajs2-res{ position:absolute; z-index:var(--z-menu); top:calc(100% + var(--e-1)); left:0; right:0; display:flex; flex-direction:column; padding:6px; border-radius:var(--r-flota); background:var(--menu); box-shadow:var(--sombra-menu); }
.ajs2-res a, .ajs2-sin-ruta{ display:flex; flex-direction:column; gap:2px; padding:var(--e-2) var(--e-3); border-radius:var(--r); color:var(--texto); text-decoration:none; }
.ajs2-res a b, .ajs2-sin-ruta b{ font-weight:500; color:var(--tinta); }
.ajs2-res a small, .ajs2-sin-ruta small{ font-size:var(--t-meta); color:var(--medio); }
.ajs2-res a:focus-visible{ background:var(--pag); }
@media (hover:hover){ .ajs2-res a:hover{ background:var(--pag); } }
.ajs2-nada{ margin:0; padding:var(--e-2) var(--e-3); font-size:var(--t-meta); color:var(--medio); }
.ajs2-grupo{ font-size:var(--t-meta); color:var(--apagado); margin:var(--e-4) var(--e-3) var(--e-1); }
.ajs2-item{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0 var(--e-2); min-height:36px; padding:0 var(--e-3); border-radius:var(--r-pildora); color:var(--texto); text-decoration:none; font-size:var(--t-texto); }
.ajs2-item[aria-current="page"]{ background:var(--piedra-on); color:var(--tinta); font-weight:500; }
@media (hover:hover){ .ajs2-item:not([aria-current="page"]):hover{ background:var(--tinte-toque); } }
.ajs2-item small{ display:none; }
.ajs2-punto{ width:6px; height:6px; border-radius:50%; background:var(--urge); flex:none; }
.ajs2-cerebro{ margin-top:var(--e-3); color:var(--medio); }
.ajs2-cuerpo{ min-width:0; max-width:760px; }
.ajs2-titulo{ margin:0 0 var(--e-4); font-size:var(--t-titulo); font-weight:500; color:var(--tinta); }
.ajs2-titulo:focus{ outline:none; }
.ajs2-volver{ display:none; }
/* Llegar a un campo desde el buscador: un marco un momento, sin animar (nada se anima en lo que se usa cien veces al dia). */
.ajs2-aqui{ outline:2px solid var(--tinta); outline-offset:6px; border-radius:var(--r); }

/* ANGOSTO (la clase la pone ajustes-simple.js midiendo la COLUMNA, no la ventana: con el chat abierto la columna mide ~720 px en una ventana
   de 1440). La barra es la lista de entrada; una seccion se abre como pagina, con «‹ Ajustes» arriba. */
.ajs2.angosto{ grid-template-columns:minmax(0,1fr); gap:0; margin-top:0; }
.ajs2.angosto .ajs2-riel{ position:static; }
.ajs2.angosto:not(.lista) .ajs2-riel{ display:none; }
.ajs2.angosto.lista .ajs2-cuerpo{ display:none; }
/* La lista: renglones altos (44 px o mas para el dedo), con su linea de estado debajo y sin «actual» (aqui nada esta abierto todavia). */
.ajs2.angosto.lista .ajs2-item{ min-height:58px; padding:var(--e-2) var(--e-1); border-radius:var(--r); font-size:var(--t-campo); }
.ajs2.angosto.lista .ajs2-item[aria-current="page"]{ background:transparent; color:var(--texto); font-weight:400; }
.ajs2.angosto.lista .ajs2-et{ color:var(--tinta); font-weight:500; }
.ajs2.angosto.lista .ajs2-item small{ display:block; width:100%; font-size:var(--t-meta); color:var(--medio); font-weight:400; }
.ajs2.angosto.lista .ajs2-item small.falta{ color:var(--urge); }
.ajs2.angosto.lista .ajs2-punto{ display:none; }
.ajs2.angosto.lista .ajs2-grupo{ margin:var(--e-5) var(--e-1) var(--e-1); }
.ajs2.angosto .ajs2-volver{ display:inline-flex; align-items:center; min-height:44px; color:var(--medio); text-decoration:none; }
/* Dentro de una seccion, angosto, «‹ Ajustes» reemplaza al «← Volver» y al titulo de la pagina: dos salidas y dos titulos eran ruido. */
#view:has(.ajs2.angosto:not(.lista)) #aj-volver, #view:has(.ajs2.angosto:not(.lista)) .pz-cab{ display:none; }


/* ---- Tu (Fase 4): Preferencias y Cuenta y seguridad como el lienzo. Etiqueta a la izquierda y control a la derecha; angosto, uno debajo del otro. ---- */
.ajs-tu{ display:flex; flex-direction:column; gap:var(--e-5); max-width:720px; }
.ajs-tu-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--e-3); }
.ajs-intro{ margin:0; color:var(--medio); font-size:var(--t-texto); }
.ajs-tu-estado{ display:inline; margin:0; white-space:nowrap; }
.ajs-par{ display:grid; grid-template-columns:160px minmax(0,1fr); gap:var(--e-2) var(--e-5); align-items:start; }
.ajs-par-et{ padding-top:10px; color:var(--tinta); font-weight:500; font-size:var(--t-texto); }
.ajs-ayuda{ margin:6px 0 0; font-size:var(--t-meta); color:var(--medio); }
.ajs-valor{ padding-top:10px; color:var(--tinta); overflow-wrap:anywhere; }
.ajs-en-linea{ display:flex; gap:var(--e-2); align-items:center; }
.ajs-en-linea .inp{ flex:1; min-width:0; }
.ajs-botones{ margin-top:var(--e-2); flex-wrap:wrap; }
.ajs-bloque{ margin-top:var(--e-4); }
.ajs-casilla{ align-items:center; font-size:var(--t-texto); cursor:pointer; }
.ajs-chico{ margin:var(--e-2) 0 0; }
.ajs-fila-sw{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-5); padding:var(--e-2) 0; }
.ajs-fila-txt{ min-width:0; }
.ajs-fila-t{ color:var(--tinta); font-size:var(--t-texto); }
.ajs-fila-sw .ajs-ayuda{ margin-top:2px; }
/* Un interruptor de verdad: 44 x 26 (se toca con el dedo), lleno cuando esta encendido. */
.ajs-sw{ position:relative; flex:none; width:44px; height:26px; border:0; border-radius:var(--r-pildora); background:var(--piedra-on); cursor:pointer; padding:0; }
.ajs-sw:after{ content:""; position:absolute; top:4px; left:4px; width:18px; height:18px; border-radius:50%; background:var(--apagado); }
/* Se ve de 26 de alto pero se toca de 44: el area invisible crece arriba y abajo sin mover nada. */
.ajs-sw:before{ content:""; position:absolute; inset:-9px 0; }
.ajs-sw[aria-checked="true"]{ background:var(--boton); }
.ajs-sw[aria-checked="true"]:after{ left:22px; background:var(--boton-t); }
.ajs-sw:focus-visible{ outline:2px solid var(--tinta); outline-offset:2px; }
#ajs-ritmo .seg-btn[aria-checked="true"], #seg-tema .seg-btn[aria-pressed="true"], #seg-tema .seg-btn[aria-checked="true"]{ background:var(--piedra-on); color:var(--tinta); font-weight:500; }
.ajs2.angosto .ajs-par{ grid-template-columns:minmax(0,1fr); }
.ajs2.angosto .ajs-par-et, .ajs2.angosto .ajs-valor{ padding-top:0; }
.ajs2.angosto #seg-tema{ display:flex; }
.ajs2.angosto #seg-tema .seg-btn{ flex:1; justify-content:center; min-height:44px; }
.ajs2.angosto .ajs-fila-sw{ align-items:flex-start; }
.ajs2.angosto #ajs-ritmo{ flex-wrap:wrap; }

/* ---- El menu del engrane con pantallas_simple (Fase 4): tema e idioma a un clic. min-width y no width: en telefono el menu es una hoja de abajo a lo ancho. ---- */
.usermenu.ajs-menu{ min-width:288px; }
.um-rapido{ display:flex; flex-direction:column; gap:var(--e-2); padding:0 6px var(--e-3); }
.um-rapido[hidden]{ display:none; }
.um-rapido .seg{ display:flex; }
.um-rapido .seg-btn{ flex:1; justify-content:center; gap:6px; }
.um-rapido .seg-btn[aria-pressed="true"]{ background:var(--piedra-on); color:var(--tinta); font-weight:500; }
.usermenu.ajs-menu .um-head #um-role, .usermenu.ajs-menu .um-head #um-estudio:not([hidden]){ display:inline; }
.usermenu.ajs-menu .um-head #um-estudio{ margin-left:4px; }

.ajs-guardado{ display:block; margin:calc(-1 * var(--e-2)) 0 var(--e-4); font-size:var(--t-meta); color:var(--medio); }
.ajs-guardado.ok:before{ content:""; display:inline-block; width:7px; height:7px; margin-right:var(--e-2); border-radius:50%; background:var(--punto); vertical-align:middle; }
.ajs-guardado.mal{ color:var(--urge); font-weight:500; }
.ajs-plegado{ margin:var(--e-3) 0; border-radius:var(--r); box-shadow:inset 0 0 0 1px var(--linea); }
.ajs-plegado > summary{ display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); padding:var(--e-4); cursor:pointer; list-style:none; min-height:44px; }
.ajs-plegado > summary::-webkit-details-marker{ display:none; }
.ajs-plegado > summary b{ display:block; font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.ajs-plegado > summary small{ display:block; font-size:var(--t-meta); color:var(--medio); font-weight:400; margin-top:2px; }
.ajs-plegado > summary:after{ content:"+"; color:var(--medio); font-size:var(--t-sub); }
.ajs-plegado[open] > summary:after{ content:"–"; }
.ajs-pleg-cuerpo{ padding:0 var(--e-4) var(--e-4); }
.ajs-baja{ margin-top:var(--e-6); }
.ajs-baja .settcard{ box-shadow:none; border:0; padding:0; }

/* ---- Tu estudio (Fase 5a, ajustes-estudio.js): Negocio, Marca y Avisos como el lienzo. Un campo por renglon de a dos; angosto, de a uno. ---- */
/* Sin el hueco de .ajs-tu: aqui se mezclan campos (con su propio margen), plegados y grupos; con hueco Y margen entre plegados quedaban 48 px
   (medido el 14 oct), y el lienzo pide los plegados juntos. El aire lo pone cada pieza. */
.ajse.ajs-tu{ gap:0; }
.ajse > .ajs-tu-cab, .ajse > .ajs-intro{ margin-bottom:var(--e-5); }
.ajse > .ajs-par, .ajse > .ajse-grupo{ margin-bottom:var(--e-5); }
.ajse > details.ajs-plegado{ margin:0 0 var(--e-2); }
.ajse > .ajse-rejilla + details.ajs-plegado, .ajse > .ajse-falta + details.ajs-plegado, .ajse > .field + details.ajs-plegado, .ajse > .ajse-grupo + details.ajs-plegado{ margin-top:var(--e-3); }
.ajse-rejilla{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--e-5); }
.ajse-rejilla .ajse-ancho, .ajse-rejilla .ajs-fila-sw{ grid-column:1 / -1; }
.ajse-pila{ display:flex; flex-direction:column; }
.ajs2.angosto .ajse-rejilla{ grid-template-columns:minmax(0,1fr); }
.ajse-campo .ajs-ayuda{ margin-top:6px; }
.ajse-sin-margen{ margin:0 0 var(--e-3); }
.ajse-err{ margin:6px 0 0; font-size:var(--t-meta); color:var(--urge); }
.ajse[data-ajse] [aria-invalid="true"]{ box-shadow:inset 0 0 0 1px var(--urge); }
.ajse-falta{ display:flex; align-items:center; gap:var(--e-2); margin:calc(-1 * var(--e-2)) 0 var(--e-4); font-size:var(--t-meta); color:var(--urge); }
.ajse-falta:before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--urge); flex:none; }
.ajse-cab-estado{ display:flex; align-items:center; gap:var(--e-2); flex:none; }
.ajse-estado.mal{ color:var(--urge); font-weight:500; }
.ajse-estado.ok:before{ content:""; display:inline-block; width:7px; height:7px; margin-right:var(--e-2); border-radius:50%; background:var(--punto); vertical-align:middle; }
.ajse-boton-pie{ display:flex; align-items:center; justify-content:flex-end; gap:var(--e-2); margin-top:var(--e-2); flex-wrap:wrap; }
.ajse-borrador{ margin-right:auto; font-size:var(--t-meta); color:var(--medio); }
.ajse-boton-ok{ font-size:var(--t-meta); color:var(--medio); }
.ajse-grupo{ display:flex; flex-direction:column; }
.ajse-grupo-t{ margin:0 0 var(--e-2); font-size:var(--t-meta); font-weight:500; color:var(--medio); }
/* Marca: el logo y la portada en miniatura, la paleta como opciones redondas con su nombre, y una vista previa de como te ven. */
.ajse-logo{ display:flex; align-items:center; gap:var(--e-3); flex-wrap:wrap; }
.ajse-logo-mini{ width:56px; height:56px; flex:none; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:var(--r); background:var(--piedra); box-shadow:inset 0 0 0 1px var(--linea); text-align:center; }
.ajse-logo-mini img{ max-width:100%; max-height:100%; }
.ajse-logo-mini .ajs-ayuda{ margin:0; padding:0 4px; }
.ajse-portada{ width:96px; }
.ajse-portada img{ width:100%; height:100%; object-fit:cover; }
.ajse-colores{ display:flex; gap:var(--e-2); flex-wrap:wrap; padding-top:6px; }
.ajse-color{ width:36px; height:36px; padding:0; border:0; border-radius:50%; cursor:pointer; background:var(--ajse-c); box-shadow:inset 0 0 0 1px var(--linea); }
.ajse-color[aria-checked="true"]{ outline:2px solid var(--tinta); outline-offset:3px; }
.ajse-color:focus-visible{ outline:2px solid var(--tinta); outline-offset:3px; }
.ajse-fuentes .seg-btn[aria-checked="true"]{ background:var(--piedra-on); color:var(--tinta); font-weight:500; }
.ajse-vista{ display:flex; align-items:center; gap:var(--e-3); padding:var(--e-3) var(--e-4); border-radius:var(--r-flota); background:var(--piedra); }
.ajse-vista .ajse-logo-mini{ width:40px; height:40px; }
.ajse-vista-nombre{ font-size:var(--t-sub); font-weight:500; color:var(--tinta); min-width:0; overflow-wrap:anywhere; }
.ajse-vista-acento{ margin-left:auto; width:72px; height:28px; flex:none; border-radius:var(--r-pildora); background:var(--ajse-c); }
.ajs2.angosto .ajse-color{ width:44px; height:44px; }

/* ---- Tu estudio, Fase 5b: Apps conectadas en renglones, Equipo y permisos, Plan y pagos. ---- */
.intg-filas{ display:flex; flex-direction:column; max-width:720px; }
.intg-filas > .ajs-intro{ margin-bottom:var(--e-5); }
.intg-filas > .intg-renglon{ margin:0 0 var(--e-2); }
.intg-renglon > summary{ display:grid; grid-template-columns:40px minmax(0,1fr) auto 16px; align-items:center; gap:var(--e-3); }
.intg-renglon .intg-ico{ width:40px; height:40px; border-radius:var(--r); }
.intg-renglon-txt b{ display:block; font-size:var(--t-texto); font-weight:500; color:var(--tinta); }
.intg-renglon-txt small{ display:block; margin-top:2px; font-size:var(--t-meta); color:var(--medio); }
.intg-renglon .ajs-pleg-cuerpo .settcard{ box-shadow:none; border:0; padding:0; margin:0 0 var(--e-4); }
.ajs2.angosto .intg-renglon > summary{ grid-template-columns:40px minmax(0,1fr) 16px; }
.ajs2.angosto .intg-renglon > summary .intg-estado{ grid-column:2; grid-row:2; }
.ajse-roles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--e-4); }
.ajse-rol{ padding:var(--e-4); border-radius:var(--r-flota); background:var(--piedra); }
.ajse-rol b{ color:var(--tinta); font-weight:500; }
.ajse-rol ul{ margin:var(--e-3) 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--e-1); font-size:var(--t-texto); color:var(--texto); }
.ajse-rol small{ font-size:var(--t-meta); color:var(--medio); }
.ajs2.angosto .ajse-roles{ grid-template-columns:minmax(0,1fr); }
.ajse-fundador{ margin-bottom:var(--e-5); padding:var(--e-3) var(--e-4); border-radius:var(--r-flota); background:var(--piedra); color:var(--tinta); }
.ajse-medidores{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--e-6); margin-bottom:var(--e-5); }
.ajs2.angosto .ajse-medidores{ grid-template-columns:minmax(0,1fr); gap:var(--e-5); }
.ajse-cifra{ font-size:var(--t-sub); font-weight:500; color:var(--tinta); margin-bottom:var(--e-2); }
.ajse-barra{ height:8px; border-radius:var(--r-pildora); background:var(--piedra-on); overflow:hidden; }
.ajse-barra > span{ display:block; height:100%; border-radius:inherit; background:var(--tinta); }
.ajse-barra.mal > span{ background:var(--urge); }
.ajse-mal{ color:var(--urge); }
.ajse-uso-fila{ display:flex; justify-content:space-between; gap:var(--e-3); padding:var(--e-1) 0; font-size:var(--t-texto); color:var(--texto); }
.ajse-planes{ gap:var(--e-3); flex-wrap:wrap; }
.ajse-nota:empty{ display:none; }

/* ---- Fase 7: accesibilidad medida (auditoria del 14 oct, todas las secciones a 375 px con los plegados abiertos). ---- */
/* En telefono todo lo que se toca mide 44 px o mas: los botones de siempre (.btn 36, .btn-sm 32, .seg-btn 32) quedaban cortos para el dedo. */
.ajs2.angosto :is(.btn, .btn-sm, .seg-btn, .pz-b-p, .pz-b-s){ min-height:44px; }
/* El titulo de «Cerrar mi cuenta» venia en un rojo escrito a mano que daba 3.5:1 sobre el fondo oscuro; el token de urgencia pasa 4.5. */
.ajs-baja .settcard .peyebrow{ color:var(--urge); }
/* En tema claro, la pildora de estado de Google («Sin conectar») quedaba en 4.49:1: dentro de los renglones de Apps lleva la tinta. */
.intg-renglon .pill{ color:var(--tinta); }

/* Promociones (invariante 25, P0.2; lienzo aprobado el 29 oct). La misma seccion en «Tu estudio» y en la tarjeta de la pantalla clasica. */
.ajs-promos{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--e-3); }
.ajs-promos > .ajs-ayuda{ margin:0; }
.ajs-promos-txt{ margin:0; font-size:var(--t-texto); line-height:1.5; }
.ajs-promos-pie-et{ font-size:var(--t-meta); font-weight:500; color:var(--medio); margin-bottom:calc(-1 * var(--e-2)); }
.ajs-promos-pie{ margin:0; padding:var(--e-3) var(--e-4); border-radius:var(--r); background:var(--piedra-on); font-size:var(--t-meta); line-height:1.7; color:var(--medio); align-self:stretch; }
.ajs-promos-pie u{ color:var(--tinta); }
.ajs-promos-urge{ color:var(--urge); }
.ajs-promos-tarjeta{ margin-bottom:var(--e-5); }
.ajs-promos-eti{ margin-bottom:var(--e-4); }