/* Panel de WAR — misma paleta oficial que su sitio (manual de marca rev2). */ :root{ --verde:#20372C; --bg:#0E1813; --bg2:#16251E; --hueso:#FFFBF4; --papel:#F7F4EE; --blanco:#fff; --ambar:#C68246; --cobre:#A75F3F; --grafito:#292B27; --tinta:#20372C; --tinta2:#5C7066; --linea:rgba(32,55,44,.14); --r:12px; --sombra:0 14px 34px -24px rgba(20,32,26,.55); } *{box-sizing:border-box;margin:0} body{font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--papel);color:var(--tinta);-webkit-font-smoothing:antialiased} a{color:inherit} .wrap{max-width:1080px;margin:0 auto;padding:26px 20px 90px} /* La barra superior con el logo y el menú se retiró el 8-sep-2026: Propiedades, Consultas, Visitas, quién entró, «Ver el sitio» y «Salir» viven ahora en el menú lateral Apple TV, al final de esta hoja. Arriba queda solo el título. */ h1{font-size:26px;letter-spacing:-.02em;line-height:1.2} h2{font-size:16px;letter-spacing:.02em;margin-bottom:16px;color:var(--cobre)} .mut{color:var(--tinta2);font-size:14px} .codigo{font-size:13px;color:var(--tinta2);font-weight:400;margin-left:10px} .cabeza{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:22px 0 18px} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--verde);color:var(--hueso); border:1px solid var(--verde);border-radius:999px;padding:11px 22px;font:600 15px/1 inherit;cursor:pointer;text-decoration:none; transition:filter .2s,transform .2s} .btn:hover{filter:brightness(1.12);transform:translateY(-1px)} .btn.ghost{background:transparent;color:var(--tinta);border-color:var(--linea)} .btn.borrar{background:transparent;color:#9b3232;border-color:rgba(155,50,50,.4)} .tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:22px;margin-bottom:16px;box-shadow:var(--sombra)} label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--tinta2);margin-bottom:14px} label.ancho{width:100%} label.check{flex-direction:row;align-items:center;gap:10px;text-transform:none;font-size:14.5px;letter-spacing:0; align-self:end;margin-bottom:14px;padding:11px 12px;border:1px solid var(--linea);border-radius:9px;background:var(--blanco); color:var(--tinta);font-weight:500;cursor:pointer} /* Lo que va DENTRO de un label no se grita: hereda el text-transform de la regla de arriba y una aclaración entre paréntesis salía en mayúsculas y en otra línea. */ label .mut,label .pista{text-transform:none;letter-spacing:0;font-weight:400;font-size:13px} /* `.pista` faltaba y la ayuda del campo salía GRITADA: hereda el `text-transform:uppercase` de la regla de los label, igual que ya había pasado con `.mut` y con las casillas (ver «Una casilla dentro de un label sale gritada»). Cada elemento nuevo dentro de un label hay que sacarlo a mano. */ /* El label es flex en columna: dos hijos en línea se convierten en dos filas. La aclaración va DENTRO del mismo span que el rótulo para que compartan línea. */ label .rot{display:block} /* 🔴 Acá decía `font:16px/1.5 inherit`, que es INVÁLIDA: la forma corta de `font` no admite `inherit` como familia, así que el navegador descartaba la declaración ENTERA. Resultado: todos los campos del panel en 13,3 px y en Arial, nunca en 16 y nunca en la fuente del sitio. Y bajo 16 px, Safari en iPhone hace zoom solo al enfocar un campo y descuadra la página en cada toque. Nadie lo vio nunca porque el CSS «decía» 16. Van separadas. */ input,select,textarea{font-family:inherit;font-size:16px;line-height:1.5; color:var(--tinta);background:var(--blanco);border:1px solid var(--linea); border-radius:9px;padding:11px 12px;width:100%} /* La casilla NO puede heredar width:100%: se estiraba a todo el ancho y el texto quedaba a 120 px de distancia. */ input[type=checkbox]{width:auto;flex:none;margin:0;accent-color:var(--cobre);width:18px;height:18px} input:focus,select:focus,textarea:focus{outline:2px solid var(--ambar);outline-offset:1px;border-color:transparent} textarea{resize:vertical} .fila3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .fila5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .pista{font-size:13px;color:var(--tinta2);margin-top:2px} .ok{background:rgba(198,130,70,.14);border:1px solid rgba(198,130,70,.4);color:var(--cobre);padding:12px 16px;border-radius:10px;font-weight:600;margin-bottom:18px} .error{background:rgba(155,50,50,.08);border:1px solid rgba(155,50,50,.3);color:#9b3232;padding:10px 14px;border-radius:9px;font-size:14px;margin-bottom:6px;text-transform:none;letter-spacing:0} .vacio{color:var(--tinta2);padding:40px 0;text-align:center} .entrar{max-width:390px;margin:8vh auto;padding:30px} .entrar h1{margin-bottom:20px;font-size:22px} .entrar .btn{width:100%} .filtros{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap} .filtros input{flex:1;min-width:220px} .filtros select{width:auto;min-width:190px} .grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(238px,100%),1fr));gap:16px} .ficha{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;text-decoration:none; display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s} .ficha:hover{transform:translateY(-3px);box-shadow:var(--sombra)} /* Sin display:grid: con place-items:center la imagen NO se estira y el aspect-ratio deja de mandar — una foto vertical estiraba la tarjeta y descuadraba la fila. */ .ficha .foto{position:relative;aspect-ratio:4/3;background:var(--bg2);overflow:hidden} .ficha .foto img{width:100%;height:100%;object-fit:cover;display:block} .sinfoto{position:absolute;inset:0;display:grid;place-items:center;color:#8A9186;font-size:13px} .chip{position:absolute;top:9px;left:9px;font-size:11px;font-weight:700;letter-spacing:.04em;padding:4px 9px;border-radius:999px;background:rgba(255,251,244,.94);color:var(--verde)} .chip.destacada{left:auto;right:9px;background:var(--ambar);color:var(--bg)} .chip.e-vendida,.chip.e-arrendada{background:var(--grafito);color:var(--hueso)} .chip.e-pausada{background:#8A9186;color:#fff} .ficha .txt{padding:13px 14px 15px;display:flex;flex-direction:column;gap:4px;flex:1} .ficha .precio{margin-top:auto} .ficha .txt b{font-size:15px;line-height:1.3} .precio{color:var(--cobre);font-weight:700;font-size:16px;margin-top:2px} .fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr));gap:12px;margin-bottom:16px} .fotos figure{position:relative;margin:0;border-radius:10px;overflow:hidden;border:1px solid var(--linea);cursor:grab;background:var(--bg2)} .fotos figure.arrastrando{opacity:.4} .fotos figure:first-child::after{content:"Portada";position:absolute;left:6px;bottom:6px;background:var(--ambar);color:var(--bg); font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px} .fotos img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block} .quitar{position:absolute;top:5px;right:5px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(14,24,19,.78); color:#fff;font-size:17px;line-height:1;cursor:pointer} .subir{display:inline-flex;flex-direction:column;text-transform:none;letter-spacing:0;font-size:14px;gap:8px; border:1px dashed var(--linea);border-radius:10px;padding:16px;background:var(--papel);cursor:pointer} .subir input[type=file]{width:auto;border:0;padding:0;background:none;font-size:14px} .peligro{margin-top:34px;padding-top:20px;border-top:1px solid var(--linea)} @media(max-width:760px){ .fila3,.fila5{grid-template-columns:1fr 1fr} .cabeza{flex-direction:column;align-items:stretch} .cabeza .btn{width:100%} } /* ===== Revisión editorial, consultas y visitas (7-sep-2026) ===== */ .revision{background:rgba(198,130,70,.10);border:1px solid rgba(198,130,70,.35);border-radius:10px; padding:14px 18px;margin-bottom:16px} .revision b{display:block;font-size:15px;margin-bottom:4px} .revision ul{margin:8px 0 0 18px;display:flex;flex-direction:column;gap:6px} .revision li{font-size:14px;line-height:1.5} .pista.antes{margin:-6px 0 14px} .pastilla{display:inline-flex;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--acento,#A75F3F); color:#fff;font-size:11px;font-weight:700;align-items:center;justify-content:center;margin-left:4px} .consultas{display:flex;flex-direction:column;gap:14px} .consulta{background:#fff;border:1px solid rgba(32,55,44,.14);border-radius:12px;padding:16px 18px} .consulta.hecha{opacity:.62} .consulta.spam{border-style:dashed;opacity:.55} .consulta header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px} .consulta header b{font-size:16px} .consulta .datos{font-size:14px;margin-bottom:6px} .consulta .datos a{border-bottom:1px solid rgba(167,95,63,.4)} .consulta .prop{font-size:14px;margin-bottom:8px} .consulta .mensaje{font-size:14.5px;line-height:1.6;white-space:pre-line;background:rgba(32,55,44,.04); border-radius:8px;padding:10px 12px;margin-bottom:10px} .consulta .acciones{margin:0} .cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:12px;margin-bottom:22px} .cifras div{background:#fff;border:1px solid rgba(32,55,44,.14);border-radius:12px;padding:14px 16px} .cifras b{display:block;font-size:26px;line-height:1.1} .cifras span{font-size:13px;color:var(--tinta2,#5C7066)} .ranking{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:7px} .ranking li{font-size:14.5px;line-height:1.45} .ranking .mut{float:right;font-variant-numeric:tabular-nums} /* La pastilla de las consultas NO puede ser `.chip`: esa va posicionada sobre la foto de una propiedad y aquí se iba a la esquina de la página, encima del logo. */ .etiqueta{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 9px; border-radius:999px;background:rgba(155,50,50,.12);color:#9b3232} .consulta{box-shadow:0 1px 2px rgba(20,35,28,.06)} /* ===== Plantilla estructurada (8-sep-2026) ===== */ .fila4{display:grid;grid-template-columns:repeat(4,1fr);gap:0 16px} .repetible{display:flex;flex-direction:column;gap:8px;margin-bottom:12px} .fila-rep{display:flex;gap:8px;align-items:center} .fila-rep input, .fila-rep select{flex:1;padding:10px 12px;border-radius:9px;border:1px solid rgba(32,55,44,.2); background:#fff;font-size:14.5px} .fila-rep .corto{flex:0 0 90px} .fila-rep select{flex:0 0 84px} .quitar-fila{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(32,55,44,.2); background:#fff;color:var(--tinta2,#5C7066);font-size:17px;line-height:1;cursor:pointer} .quitar-fila:hover{border-color:#9b3232;color:#9b3232} .agregar-fila{font-size:14px} .tarjeta.interna{border-style:dashed;background:rgba(32,55,44,.03)} .tarjeta.interna h2 .mut{font-weight:400;letter-spacing:0;text-transform:none} #cuentaResumen{font-weight:400;letter-spacing:0;text-transform:none} @media (max-width:900px){ .fila4{grid-template-columns:repeat(2,1fr)} } @media (max-width:560px){ .fila4{grid-template-columns:1fr} .fila-rep{flex-wrap:wrap} } /* ═══════════════════════════════════════════════════════════════════════════ EL MENÚ LATERAL APPLE TV (8-sep-2026) ═══════════════════════════════════════════════════════════════════════════ El estándar de la casa, tal como está en `~/vertex-taller/panel/vertex.css` y documentado en la wiki («La barra lateral Vertex, anatomía Apple TV»). Lo que se copia es la FORMA, no la paleta: acá manda el manual de marca de WAR. Lo primero que hay que entender es que NO es una columna pegada al canto de la ventana: es un PANEL FLOTANTE, metido 8 px de los cuatro bordes, con esquinas de radio 18 y un hairline de 1 px en TODO su contorno. Medido sobre una captura real de la app de Apple TV: panel de 219,5 de ancho · filas de 32 con paso 32 · píldora insertada 10 a cada lado · relleno de la fila activa al 6,3 % de blanco · etiqueta de 13 px en peso normal · primera fila a 54 del techo del panel. Lo que hasta hoy vivía en la barra superior —Propiedades, Consultas, Visitas, quién entró, Ver el sitio y Salir— vive acá. Arriba ya no queda una banda: solo el título, y el material del panel aparece únicamente al scrollear. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* La barra va en la fuente del SISTEMA, no en la del contenido. Es la única excepción declarada del estándar y no se revierte. */ --side-font:system-ui,-apple-system,"Segoe UI",sans-serif; --sidebar:13.75rem; /* 220 px a raíz 16; el panel de Apple mide 219,5 */ --side-gap:.5rem; /* cuánto se mete el panel de los cantos */ --side-radio:1.125rem; --side-borde:rgba(255,251,244,.16); --side-borde-top:rgba(255,251,244,.11); /* Apple ilumina el canto superior 33 % menos */ --side-sombra:0 4px 18px rgba(0,0,0,.34); /* ── Cristal, por capas ─────────────────────────────────────────────────── Un blur solo no es vidrio. Lo que lo hace leer como cristal son cinco cosas apiladas: el tinte translúcido, el desenfoque CON saturación y algo de brillo, el velo que baja por la cara, el filo especular del canto superior y la sombra interior del pie, que le da grosor. Quitar una y el panel sigue distinguiéndose del fondo: por eso la puerta las mide una por una, no por el escalón. */ --side-bg:rgba(6,14,10,.40); /* tinte. El lienzo de WAR (#0E1813) no es negro puro: con el .17 del taller el panel salía MÁS CLARO que el fondo, o sea sobresalido. */ --side-luz:rgba(255,251,244,.14); /* filo especular del canto superior */ --side-luz2:rgba(255,251,244,.05); /* velo de luz que baja por la cara */ --side-fondo-int:rgba(0,0,0,.40); /* sombra interior del pie */ --side-filtro:blur(34px) saturate(180%) brightness(1.12); --fila:2rem; /* 32 px */ --fila-inset:.5625rem; /* +1 del contorno = 10 desde el canto, como Apple */ --fila-radio:.5rem; --nav-on:rgba(255,251,244,.075); --nav-hover:rgba(255,251,244,.045); --nav-txt:#FFFBF4; /* Apple pinta TODAS las etiquetas blancas, no solo la activa */ /* El encabezado de grupo NO hereda un gris de texto secundario: el de Apple está en 1,9:1 y eso no pasa AA. Acá va en un valor que sí. */ --nav-grp:#B9C3BB; --nav-ic:#8C9A90; /* icono en reposo */ --av-bg:#243B30; /* La luz que el vidrio refracta. Sin nada detrás, un panel translúcido es un rectángulo gris: en una web no pasa contenido por abajo, así que la luz se pone. En los colores de WAR, no en el azul de la casa. */ --aura-1:rgba(198,130,70,.22); --aura-2:rgba(122,168,140,.11); --lienzo:#0E1813; } /* ── Las capas de atrás: luz ambiente y estrellas ───────────────────────────── Va en capa PROPIA: puesta en `body`, el `background` de la regla de más arriba la reseteaba. */ body.tv{background:var(--lienzo);color:var(--hueso)} body.tv::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(680px 620px at 6% 12%, var(--aura-1), transparent 66%), radial-gradient(560px 720px at 0% 82%, var(--aura-2), transparent 70%)} canvas.chispas{position:fixed;inset:0;z-index:0;pointer-events:none;display:block} /* `.layout` va posicionado pero SIN z-index propio: con `z-index:1` creaba un contexto de apilado y el cajón del teléfono —z 70, pero encerrado ahí dentro— quedaba DEBAJO del velo, que cuelga del body en z 45. Las filas se veían y no recibían el toque; ninguna medida de CSS lo delata, solo preguntar por el punto con elementFromPoint. Posicionado y después del lienzo en el DOM, igual pinta por encima del aura y de las estrellas. */ .layout{position:relative} .menu-cuenta,.scrim{position:fixed} .layout{display:grid;grid-template-columns:calc(var(--sidebar) + var(--side-gap) * 2) 1fr;min-height:100vh} .sidebar{width:var(--sidebar);margin:var(--side-gap);align-self:start; height:calc(100vh - var(--side-gap) * 2);position:sticky;top:var(--side-gap); background:var(--side-bg);border:1px solid var(--side-borde);border-top-color:var(--side-borde-top); border-radius:var(--side-radio); box-shadow:var(--side-sombra), inset 0 1px 0 var(--side-luz), inset 0 -1px 0 var(--side-fondo-int); backdrop-filter:var(--side-filtro);-webkit-backdrop-filter:var(--side-filtro); display:flex;flex-direction:column;padding:0 0 .3125rem;overflow:hidden;z-index:50; font-family:var(--side-font)} /* El velo: la luz cae desde arriba y se apaga a media cara. */ .sidebar::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0; background: linear-gradient(115deg,transparent 24%,rgba(255,251,244,.07) 42%,transparent 58%), linear-gradient(to bottom,var(--side-luz2),transparent 42%)} /* El grano: el desenfoque deja bandas en los degradados; una textura finísima las rompe y es lo que termina de dar sensación de material y no de filtro. */ .sidebar::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:.14; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")} .sidebar>*{position:relative;z-index:1} /* ── La marca, en la banda que Apple deja libre arriba (54 hasta la primera fila). Va en TEJA: suelta y monocroma se pierde contra el vidrio. La teja usa el acento PURO del cliente —el ámbar del manual—, no un ámbar oscurecido para texto. */ .sidebar .brand{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto; column-gap:10px;row-gap:1px;align-items:center; padding:1.15rem var(--fila-inset) 0 1.1875rem;margin:0;text-align:left; color:var(--hueso);text-decoration:none} /* 🔴 La teja es la de VERTEX, siempre. Es nuestra marca en el panel de un cliente, igual que en el taller y en el panel del equipo; el cliente se nombra debajo y su logotipo, cuando lo lleva, va al PIE. Los valores son los de la casa (`vertex-taller/panel/vertex.css`), no se recalibran por cliente. */ :root{--azul-vertex:#1A6FFF} .sidebar .brand .teja{grid-row:1 / 3;align-self:center; width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none; color:#fff; background:linear-gradient(160deg,#3B86FF,var(--azul-vertex) 55%,#0B4FD0); box-shadow:0 3px 10px rgba(26,111,255,.42), inset 0 1px 0 rgba(255,255,255,.35)} /* La V no se estira: se le da el alto y el ancho sale de su proporción. */ .sidebar .brand .teja svg.mark{display:block;height:19px;width:auto} .sidebar .brand b{grid-column:2;align-self:end;line-height:1.05; font-family:var(--side-font);font-size:.92rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap} .sidebar .brand .bsub{grid-column:2;align-self:start;line-height:1.05; color:#A9B5AC;font-weight:600;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ── Las filas ──────────────────────────────────────────────────────────────── El que corre es la LISTA, no el panel: así la marca y la cuenta quedan fijas y ninguna fila se mete bajo la esquina redondeada. */ .nav-vert{display:flex;flex-direction:column;gap:0;min-height:0;overflow-y:auto; overscroll-behavior:contain;margin-top:2.9rem} .nav-link{display:flex;align-items:center;gap:.5rem; height:var(--fila);min-height:var(--fila);padding:0 .5rem;margin:0 var(--fila-inset); border-radius:var(--fila-radio);color:var(--nav-txt); font-size:.8125rem;font-weight:400;line-height:1;white-space:nowrap;min-width:0; cursor:pointer;text-decoration:none;text-align:left;border:0;background:none; font-family:var(--side-font);transition:background .13s,color .13s} .nav-link>span{min-width:0;overflow:hidden;text-overflow:ellipsis;position:relative;top:1px} /* Su propia regla, porque cualquier `display` le gana al atributo `hidden`: sin esto, apagar una fila con `hidden` la deja igual de visible y de pulsable, sin un solo error (ver «Una capa hidden puede tapar la web entera»). */ .nav-link[hidden]{display:none} .nav-link .ic{flex:none;width:1.375rem;height:1.375rem;color:var(--nav-ic);transition:color .13s} .nav-link:hover{background:var(--nav-hover);color:#fff} .nav-link:hover .ic{color:var(--nav-txt)} /* El estado activo NO lo puede cargar el relleno: al 7,5 % da 1,25:1 contra el panel, muy debajo del 3:1 que pide 1.4.11. Apple lo carga TIÑENDO el icono. La etiqueta no cambia: ni de peso ni de color, igual que en Apple. */ .nav-link.active{background:var(--nav-on)} .nav-link.active .ic{color:var(--ambar)} /* La cuenta de consultas sin atender: no es la etiqueta, así que no se recorta con ella ni la empuja fuera de la píldora. */ .nav-link .pastilla{flex:none;margin-left:auto;background:var(--cobre);color:#fff} /* ── La cuenta al pie ───────────────────────────────────────────────────────── Al pie queda SOLO quién está: los accesos («Ver el sitio», «Salir») se van a un menú tipo macOS que se abre al pulsarla. Cinco filas apiladas al pie son cinco cosas distintas compitiendo con la lista de secciones, que es lo que importa. */ .sidebar .spacer{flex:1;min-height:14px} .cuenta{display:flex;align-items:center;gap:10px;width:auto;min-width:0; margin:0 var(--fila-inset);padding:.4rem .35rem;border:0;background:none;cursor:pointer; /* border-radius:0 a propósito: esta fila lleva separador arriba y con radio el borde se arquea en las dos puntas y se lee como una caja suelta flotando. */ border-radius:0;border-top:1px solid rgba(255,251,244,.09); font-family:var(--side-font);color:var(--nav-txt);text-align:left} .cuenta:hover{background:var(--nav-hover)} .cuenta .av{flex:none;width:2.25rem;height:2.25rem;border-radius:50%; display:grid;place-items:center;background:var(--av-bg);color:var(--hueso); border:1px solid rgba(255,251,244,.13);font-family:var(--side-font); font-size:.72rem;font-weight:700;letter-spacing:.02em;overflow:hidden} .cuenta .cn{display:flex;flex-direction:column;gap:2px;min-width:0} .cuenta .cn b{font-size:.8rem;font-weight:600;color:var(--nav-txt);line-height:1.2; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cuenta .estado{font-size:.68rem;color:#A9B5AC;line-height:1.25; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cuenta .chev{flex:none;margin-left:auto;width:11px;height:11px;opacity:.6;transition:transform .16s,opacity .13s} .cuenta[aria-expanded="true"] .chev{transform:rotate(90deg);opacity:1} /* El menú vive FUERA del