/* ============================================================ PANEL · DISEÑO NUEVO (piel) ------------------------------------------------------------ Todo lo de aquí solo se aplica cuando . Se enciende y se apaga desde el menú del panel ("Diseño nuevo"). Apagado, el panel se ve exactamente como antes: este fichero no pinta nada. Qué hace: 1. Fondo con manchas suaves de los colores del logo. 2. Tarjetas de cristal (translúcidas, desenfocan lo de detrás). 3. Barra lateral fija a la izquierda, oscura como el logo, para administrador y equipo (la pinta js/core/piel.js). El carril del cliente (.prail) se queda abierto y con el mismo aspecto, para que las dos barras sean la misma cosa. 4. Botones, tablas, chips y títulos con un solo criterio. Qué NO hace: tocar datos, rutas ni botones. Solo aspecto. ============================================================ */ /* ---------- 0 · Tokens ---------- */ html[data-piel="nueva"]{ --barra:248px; --glass:rgba(19,14,38,.55); --glass-line:rgba(255,255,255,.10); --glass-2:rgba(255,255,255,.06); --barra-bg:#07051a; --barra-t:#c9c1e3; --barra-tenue:#6f668f; --chip-suave:rgba(139,92,246,.18); --chip-texto:#c4b5fd; --sombra-card:0 1px 2px rgba(0,0,0,.25),0 12px 34px rgba(0,0,0,.3); --sombra-card-alta:0 2px 4px rgba(0,0,0,.3),0 18px 44px rgba(0,0,0,.4); } html[data-piel="nueva"][data-tema="claro"]{ --bg:#f4f2f9; --glass:rgba(255,255,255,.58); --glass-line:rgba(255,255,255,.72); --glass-2:rgba(255,255,255,.55); --barra-bg:#0b0818; --chip-suave:rgba(124,58,237,.10); --chip-texto:#6d28d9; --sombra-card:0 1px 2px rgba(23,17,48,.04),0 10px 30px rgba(23,17,48,.06); --sombra-card-alta:0 2px 4px rgba(23,17,48,.06),0 18px 44px rgba(23,17,48,.1); } /* ---------- 1 · Fondo con manchas de color ---------- */ /* El fondo RESPIRA (11/9/2026, pedido por David: "que se sienta más vivo"): las manchas flotan muy despacio (un ciclo de 22 s) y, al bajar la página, el color gira del morado hacia el magenta. La capa es más grande que la pantalla para que al moverse no asomen los bordes. La variable --nx-scroll (0 a 1) la pone piel.js según lo que hayas bajado. Con "reducir movimiento" activado en el sistema, se queda quieto. */ /* El color de fondo lo pone ; el body se queda transparente. Si no, su fondo opaco se pinta ENCIMA de la capa de manchas (z-index -1) y no se ve ninguna: pasaba desde el primer día. */ html[data-piel="nueva"]{background:var(--bg)} html[data-piel="nueva"] body, html[data-piel="nueva"][data-tema="claro"] body{background:transparent} html[data-piel="nueva"] body::after{ content:"";position:fixed;inset:-30%;z-index:-1;pointer-events:none; background: radial-gradient(560px 440px at 70% 22%, rgba(217,38,169,.44), transparent 68%), radial-gradient(520px 440px at 30% 80%, rgba(139,92,246,.46), transparent 68%), radial-gradient(440px 360px at 78% 70%, rgba(56,189,248,.26), transparent 68%); filter:hue-rotate(calc(var(--nx-scroll, 0) * 70deg)); transition:filter .4s linear; animation:nx-respira 16s ease-in-out infinite alternate; will-change:transform; } @keyframes nx-respira{ 0% {transform:translate3d(-9%,-6%,0) scale(1)} 50% {transform:translate3d(8%,9%,0) scale(1.16)} 100%{transform:translate3d(9%,-9%,0) scale(1.06)} } @media (prefers-reduced-motion:reduce){ html[data-piel="nueva"] body::after{animation:none;transition:none} } html[data-piel="nueva"][data-tema="claro"] body::after{ background: radial-gradient(560px 440px at 70% 22%, rgba(217,38,169,.28), transparent 68%), radial-gradient(520px 440px at 30% 80%, rgba(139,92,246,.32), transparent 68%), radial-gradient(440px 360px at 78% 70%, rgba(56,189,248,.20), transparent 68%); } /* la rejilla y las bolas de la pantalla de acceso se quedan; el fondo nuevo solo importa dentro del panel */ html[data-piel="nueva"] .papp .grid-bg{display:none} /* ---------- 2 · Tarjetas de cristal ---------- */ html[data-piel="nueva"] .papp .pcard, html[data-piel="nueva"] .papp .pwrap, html[data-piel="nueva"] .papp .pkpi, html[data-piel="nueva"] .papp .pgrupo, html[data-piel="nueva"] .papp .pequipoc, html[data-piel="nueva"] .pmodal__caja{ background:var(--glass); border:1px solid var(--glass-line); border-radius:16px; box-shadow:var(--sombra-card); backdrop-filter:blur(22px) saturate(1.4); -webkit-backdrop-filter:blur(22px) saturate(1.4); } html[data-piel="nueva"] .papp .pcard:hover{transform:none;box-shadow:var(--sombra-card-alta);border-color:rgba(139,92,246,.45)} html[data-piel="nueva"] .papp .pkpi:hover{box-shadow:var(--sombra-card)} html[data-piel="nueva"] .papp .pkpi--ok{box-shadow:var(--sombra-card),inset 3px 0 0 var(--ok)} html[data-piel="nueva"] .papp .pkpi--mal{box-shadow:var(--sombra-card),inset 3px 0 0 var(--mal)} html[data-piel="nueva"] .papp .pkpi__t{font-size:.8rem;color:var(--muted);letter-spacing:.02em} html[data-piel="nueva"] .papp .pkpi__v{font-family:var(--font-display);font-size:1.7rem;font-weight:600;letter-spacing:-.02em} /* ---------- 3 · Barra lateral (administrador y equipo) ---------- */ html[data-piel="nueva"] .pbarra{ position:fixed;left:0;top:0;bottom:0;z-index:120; width:var(--barra); display:flex;flex-direction:column;gap:2px; padding:22px 14px 16px; background:var(--barra-bg);color:var(--barra-t); overflow-y:auto; } html[data-piel="nueva"] .pbarra__marca{display:flex;align-items:center;gap:10px;padding:2px 10px 20px;color:#fff;text-decoration:none} html[data-piel="nueva"] .pbarra__marca img{width:34px;height:34px;border-radius:50%} html[data-piel="nueva"] .pbarra__marca b{font-family:var(--font-display);letter-spacing:.1em;font-size:.95rem} html[data-piel="nueva"] .pbarra__t{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--barra-tenue);padding:16px 12px 6px} html[data-piel="nueva"] .pbarra__i{ display:flex;align-items:center;gap:12px; padding:10px 12px;border-radius:10px; font-weight:500;font-size:.9rem;color:var(--barra-t);text-decoration:none; transition:background .15s,color .15s;position:relative; } html[data-piel="nueva"] .pbarra__i .nxi{width:20px;height:20px;flex:0 0 20px} html[data-piel="nueva"] .pbarra__i:hover{background:rgba(255,255,255,.05);color:#fff} html[data-piel="nueva"] .pbarra__i.is-aqui{background:rgba(255,255,255,.08);color:#fff} html[data-piel="nueva"] .pbarra__i.is-aqui::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--grad)} html[data-piel="nueva"] .pbarra__pie{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:12px} html[data-piel="nueva"] .pbarra__yo{display:flex;align-items:center;gap:10px;padding:8px 12px} html[data-piel="nueva"] .pbarra__yo i{width:34px;height:34px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:600;font-size:.8rem;font-style:normal;flex:0 0 34px} html[data-piel="nueva"] .pbarra__yo b{display:block;color:#fff;font-size:.9rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html[data-piel="nueva"] .pbarra__yo small{display:block;color:var(--barra-tenue);font-size:.75rem} /* el contenido se aparta de la barra */ html[data-piel="nueva"] body.con-barra .papp{padding-left:calc(var(--barra) + 34px);padding-right:34px} html[data-piel="nueva"] body.con-barra .papp .container{width:100%;max-width:1180px;margin-inline:0} html[data-piel="nueva"] body.con-barra .ppreview{left:var(--barra)} /* la barra de arriba se queda solo con lo suyo (atrás, tema, menú) y se aparta también; el logo ya está en la barra lateral */ html[data-piel="nueva"] body.con-barra .nav{left:var(--barra)} html[data-piel="nueva"] body.con-barra .nav .nav__brand{visibility:hidden} /* la barra de arriba, de cristal al bajar: si fuera transparente, el botón "Volver" se pisaría con lo que pasa por debajo */ html[data-piel="nueva"] .nav.is-scrolled{background:var(--glass);box-shadow:none;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--glass-line)} html[data-piel="nueva"] .nav:not(.is-scrolled){background:transparent} html[data-piel="nueva"] .nav .ptema, html[data-piel="nueva"] .nav .pmenu__btn, html[data-piel="nueva"] .nav .patras{ background:var(--glass);border:1px solid var(--glass-line); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); } /* el carril del cliente: abierto siempre y con el mismo traje */ html[data-piel="nueva"] .prail{ width:var(--barra);background:var(--barra-bg);border-right:0; padding:22px 0 16px;box-shadow:none; } html[data-piel="nueva"] .prail:hover, html[data-piel="nueva"] .prail:focus-within{width:var(--barra);box-shadow:none} html[data-piel="nueva"] .prail__l, html[data-piel="nueva"] .prail__pie{padding:0 14px} html[data-piel="nueva"] .prail__i{color:var(--barra-t);border-radius:10px;padding:10px 12px;font-size:.9rem} html[data-piel="nueva"] .prail__i span{opacity:1} html[data-piel="nueva"] .prail__i:hover{background:rgba(255,255,255,.05);color:#fff} html[data-piel="nueva"] .prail__i.is-aqui{background:rgba(255,255,255,.08);color:#fff;position:relative} html[data-piel="nueva"] .prail__i.is-aqui::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--grad)} html[data-piel="nueva"] .prail__t{height:auto;background:none;text-indent:0;margin:16px 12px 6px;color:var(--barra-tenue)} html[data-piel="nueva"] .prail__pronto{opacity:1} html[data-piel="nueva"] body.con-rail .papp{padding-left:calc(var(--barra) + 34px);padding-right:34px} html[data-piel="nueva"] body.con-rail .papp .container{width:100%;max-width:1180px;margin-inline:0} html[data-piel="nueva"] body.con-rail .nav{left:var(--barra)} html[data-piel="nueva"] body.con-rail .nav .nav__brand{visibility:hidden} /* ---------- 4 · Un solo criterio para todo ---------- */ /* cabecera de pantalla */ html[data-piel="nueva"] .papp__head h1{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:600;letter-spacing:-.02em} html[data-piel="nueva"] .papp__head small{color:var(--muted);font-size:.95rem} html[data-piel="nueva"] .papp__rol{ background:var(--grad);color:#fff;border:0; font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase; padding:6px 12px;border-radius:999px; } /* títulos de sección: pequeños, en mayúsculas, como una etiqueta. El icono sobra: ya lo dice el nombre. */ html[data-piel="nueva"] .papp .psection{margin-bottom:34px} html[data-piel="nueva"] .papp .psection > h2{ font-family:var(--font);font-size:.76rem;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:var(--faint); margin-bottom:10px; } html[data-piel="nueva"] .papp .psection > h2 .nxi{display:none} html[data-piel="nueva"] .papp .psection > h2 small{font-size:.76rem;text-transform:none;letter-spacing:0;font-weight:400} html[data-piel="nueva"] .papp .pcab h2{font-size:clamp(1.4rem,3vw,1.9rem);font-weight:600;letter-spacing:-.02em} html[data-piel="nueva"] .papp .pcab h2 .nxi{display:none} html[data-piel="nueva"] .papp .pcab__volver, html[data-piel="nueva"] .papp .pcab__volver:hover{background:none;border:0;padding:0;color:var(--faint);font-size:.82rem} html[data-piel="nueva"] .papp .pcab__volver:hover{color:var(--text)} /* botones: esquinas redondeadas, no pastilla; el sólido con el degradado */ html[data-piel="nueva"] .papp .pbtn, html[data-piel="nueva"] .pcab .pbtn, html[data-piel="nueva"] .pmodal .pbtn{ border-radius:10px;min-height:36px;padding:8px 14px;font-weight:600;font-size:.84rem; background:var(--glass-2);border:1px solid var(--glass-line);color:var(--text); } html[data-piel="nueva"] .papp .pbtn:hover, html[data-piel="nueva"] .pcab .pbtn:hover, html[data-piel="nueva"] .pmodal .pbtn:hover{background:var(--chip-suave);border-color:rgba(139,92,246,.45)} html[data-piel="nueva"] .papp .pbtn--ok{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.3)} html[data-piel="nueva"] .papp .pbtn--danger{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.3)} html[data-piel="nueva"] .papp .btn--solid, html[data-piel="nueva"] .pmodal .btn--solid{ border-radius:10px;background:var(--grad);box-shadow:0 6px 18px rgba(217,38,169,.22); } html[data-piel="nueva"] .papp .btn--sm{padding:9px 16px;font-size:.84rem} html[data-piel="nueva"] .papp .btn--ghost{border-radius:10px} /* tablas */ html[data-piel="nueva"] .papp .ptable th{ font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint); border-bottom:1px solid var(--glass-line);padding:12px 14px 8px; } html[data-piel="nueva"] .papp .ptable td{border-bottom:1px solid var(--linea);padding:12px 14px} html[data-piel="nueva"] .papp .ptable tr:hover td{background:var(--glass-2)} /* chips: punto de color y sin sombra */ html[data-piel="nueva"] .papp .pchip{ border-radius:999px;padding:3px 10px;font-size:.74rem;font-weight:600; background:var(--glass-2);border:1px solid var(--linea);color:var(--muted); } html[data-piel="nueva"] .papp .pchip--cliente, html[data-piel="nueva"] .papp .pchip--empresa{background:var(--chip-suave);color:var(--chip-texto);border-color:transparent} html[data-piel="nueva"] .papp .pchip--admin{background:var(--grad);color:#fff;border-color:transparent} /* avisos: raya de color a la izquierda, sin fondo chillón */ html[data-piel="nueva"] .papp .palerta{ background:var(--glass);border:1px solid var(--glass-line);border-radius:14px; backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px); position:relative;overflow:hidden;padding-left:22px; } html[data-piel="nueva"] .papp .palerta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--purple)} html[data-piel="nueva"] .papp .palerta--alta::before{background:var(--mal)} html[data-piel="nueva"] .papp .palerta--media::before{background:#f59e0b} html[data-piel="nueva"] .papp .palerta--ok::before{background:var(--ok)} /* pestañas */ html[data-piel="nueva"] .papp .ptabs{gap:4px;border-bottom:1px solid var(--glass-line)} html[data-piel="nueva"] .papp .ptab{border-radius:0;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:10px 14px} html[data-piel="nueva"] .papp .ptab.is-sel{border-bottom-color:var(--magenta);background:none;color:var(--text)} /* buscador y campos */ html[data-piel="nueva"] .papp .pbuscador input, html[data-piel="nueva"] .papp input:not([type=checkbox]):not([type=radio]), html[data-piel="nueva"] .papp select, html[data-piel="nueva"] .papp textarea, html[data-piel="nueva"] .pmodal input:not([type=checkbox]):not([type=radio]), html[data-piel="nueva"] .pmodal select, html[data-piel="nueva"] .pmodal textarea{ border-radius:10px;background:var(--glass-2);border:1px solid var(--glass-line);box-shadow:none; } html[data-piel="nueva"] .papp input:focus, html[data-piel="nueva"] .papp select:focus, html[data-piel="nueva"] .papp textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(139,92,246,.18)} /* el menú de las tres rayitas, de cristal como lo demás */ html[data-piel="nueva"] .pmenu__caja{ background:var(--glass);border:1px solid var(--glass-line);border-radius:12px; backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px); } /* ---------- 5 · Móvil: la barra lateral no cabe, manda la de abajo ---------- */ @media (max-width:760px){ html[data-piel="nueva"] .pbarra{display:none} html[data-piel="nueva"] body.con-barra .papp{padding-left:0;padding-right:0} html[data-piel="nueva"] body.con-barra .papp .container{width:100%;padding-inline:16px} html[data-piel="nueva"] body.con-barra .nav{left:0} html[data-piel="nueva"] body.con-barra .nav .nav__brand{visibility:visible} html[data-piel="nueva"] body.con-barra .ppreview{left:0} html[data-piel="nueva"] body.con-rail .nav{left:0} html[data-piel="nueva"] body.con-rail .nav .nav__brand{visibility:visible} html[data-piel="nueva"] body.con-rail .papp{padding-left:0;padding-right:0} html[data-piel="nueva"] .pnavbaja{ background:var(--glass);border-top:1px solid var(--glass-line); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); } html[data-piel="nueva"] .pnavbaja a.is-aqui{color:var(--magenta)} html[data-piel="nueva"] .papp .pcard, html[data-piel="nueva"] .papp .pwrap, html[data-piel="nueva"] .papp .pkpi{border-radius:14px} } /* ---------- 6 · Carpetas: un apartado a la vista, los demás plegados ---------- */ html[data-piel="nueva"] .pcarpetas{ display:flex;flex-wrap:wrap;gap:4px; margin:6px 0 22px;padding:4px;border-radius:12px; background:var(--glass);border:1px solid var(--glass-line); backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px); } html[data-piel="nueva"] .pcarpeta__tab{ border:0;background:none;font:inherit;cursor:pointer; padding:8px 14px;border-radius:9px;font-size:.86rem;font-weight:500;color:var(--muted); transition:background .15s,color .15s; } html[data-piel="nueva"] .pcarpeta__tab:hover{color:var(--text);background:var(--glass-2)} html[data-piel="nueva"] .pcarpeta__tab.is-sel{background:var(--grad);color:#fff;font-weight:600;box-shadow:0 4px 14px rgba(217,38,169,.25)} /* el apartado abierto ya no necesita su propio título: lo dice la pestaña */ html[data-piel="nueva"] .papp .psection[data-carpeta] > h2{font-size:.76rem} html[data-piel="nueva"] #pContenido{position:relative} html[data-piel="nueva"] .psection.is-plegada{ position:absolute;left:0;right:0;height:0;overflow:hidden; visibility:hidden;pointer-events:none;margin:0; } @media (max-width:760px){ html[data-piel="nueva"] .pcarpetas{margin:4px 0 16px} html[data-piel="nueva"] .pcarpeta__tab{padding:8px 12px;font-size:.84rem} } /* ---------- 7 · Avisos plegados: una línea, el detalle al pinchar ---------- Vale para la portada (.papp) y para la campana (.pavisos), que cuelga del body. */ html[data-piel="nueva"] :is(.papp,.pavisos) .palertas{gap:0;background:var(--glass);border:1px solid var(--glass-line);border-radius:14px;overflow:hidden;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)} html[data-piel="nueva"] :is(.papp,.pavisos) .palertas .palerta{ background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none; padding:0;align-items:stretch;gap:0;cursor:pointer; } html[data-piel="nueva"] :is(.papp,.pavisos) .palertas .palerta + .palerta{border-top:1px solid var(--linea)} html[data-piel="nueva"] :is(.papp,.pavisos) .palertas .palerta::before{display:none} /* el icono grande se cambia por un punto de color */ html[data-piel="nueva"] :is(.papp,.pavisos) .palertas .palerta > span{ flex:0 0 auto;width:38px;display:flex;justify-content:center;padding-top:19px; } html[data-piel="nueva"] :is(.papp,.pavisos) .palertas .palerta > span .nxi{display:none} html[data-piel="nueva"] :is(.papp,.pavisos) .palertas .palerta > span::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--purple)} html[data-piel="nueva"] :is(.papp,.pavisos) .palertas .palerta--alta > span::before{background:var(--mal)} html[data-piel="nueva"] :is(.papp,.pavisos) .palertas .palerta--media > span::before{background:#f59e0b} html[data-piel="nueva"] :is(.papp,.pavisos) .palertas .palerta--ok > span::before{background:var(--ok)} html[data-piel="nueva"] :is(.papp,.pavisos) .palertas .palerta > div{flex:1;min-width:0;padding:14px 44px 14px 0;position:relative} html[data-piel="nueva"] :is(.papp,.pavisos) .palertas .palerta b{ display:block;margin:0;font-weight:500;font-size:.95rem; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* la flechita */ html[data-piel="nueva"] :is(.papp,.pavisos) .palertas .palerta > div::after{ content:"";position:absolute;right:18px;top:20px;width:8px;height:8px; border-right:1.8px solid var(--faint);border-bottom:1.8px solid var(--faint); transform:rotate(45deg);transition:transform .2s; } html[data-piel="nueva"] :is(.papp,.pavisos) .palertas .palerta.is-abierta > div::after{transform:rotate(225deg);top:24px} /* el detalle y los botones, solo abierto */ html[data-piel="nueva"] :is(.papp,.pavisos) .palertas .palerta p, html[data-piel="nueva"] :is(.papp,.pavisos) .palertas .palerta .palerta__pie{display:none} html[data-piel="nueva"] :is(.papp,.pavisos) .palertas .palerta.is-abierta b{white-space:normal} html[data-piel="nueva"] :is(.papp,.pavisos) .palertas .palerta.is-abierta p{display:block;margin-top:6px;max-width:680px} html[data-piel="nueva"] :is(.papp,.pavisos) .palertas .palerta.is-abierta .palerta__pie{display:flex;margin-top:12px} html[data-piel="nueva"] :is(.papp,.pavisos) .palertas .palerta a{margin:0;font-weight:600} html[data-piel="nueva"] :is(.papp,.pavisos) .palertas .palerta__btn{border-radius:10px;padding:8px 14px} html[data-piel="nueva"] :is(.papp,.pavisos) .palertas__mas{padding:10px 16px} /* ---------- 7b · En la campana, cada aviso en su burbuja ---------- Misma mecánica plegada, pero cada uno es una tarjeta con su color: rojo lo urgente, ámbar lo que hay que mirar, verde lo bueno. */ html[data-piel="nueva"] .pavisos .palertas{ display:flex;flex-direction:column;gap:10px; background:none;border:0;border-radius:0;overflow:visible;backdrop-filter:none;-webkit-backdrop-filter:none;padding:4px 0 0; } html[data-piel="nueva"] .pavisos .palertas .palerta{ border-radius:16px;border:1px solid rgba(139,92,246,.28); background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(139,92,246,.05)); box-shadow:0 8px 24px -14px rgba(0,0,0,.35); transition:transform .15s,box-shadow .15s; } html[data-piel="nueva"] .pavisos .palertas .palerta + .palerta{border-top:1px solid rgba(139,92,246,.28)} html[data-piel="nueva"] .pavisos .palertas .palerta:hover{transform:translateY(-1px);box-shadow:0 12px 28px -14px rgba(0,0,0,.45)} html[data-piel="nueva"] .pavisos .palertas .palerta--alta{ border-color:rgba(248,113,113,.45); background:linear-gradient(135deg,rgba(248,113,113,.22),rgba(248,113,113,.06)); } html[data-piel="nueva"] .pavisos .palertas .palerta--media{ border-color:rgba(245,158,11,.45); background:linear-gradient(135deg,rgba(245,158,11,.22),rgba(245,158,11,.06)); } html[data-piel="nueva"] .pavisos .palertas .palerta--ok{ border-color:rgba(74,222,128,.4); background:linear-gradient(135deg,rgba(74,222,128,.2),rgba(74,222,128,.05)); } /* el punto pasa a ser una pastilla redonda con el icono dentro */ html[data-piel="nueva"] .pavisos .palertas .palerta > span{ width:54px;padding:14px 0 0 14px;justify-content:flex-start; } html[data-piel="nueva"] .pavisos .palertas .palerta > span::before{display:none} html[data-piel="nueva"] .pavisos .palertas .palerta > span .nxi{ display:block;width:30px;height:30px;padding:7px;border-radius:50%; color:#fff;background:var(--purple);box-sizing:border-box; } html[data-piel="nueva"] .pavisos .palertas .palerta--alta > span .nxi{background:var(--mal)} html[data-piel="nueva"] .pavisos .palertas .palerta--media > span .nxi{background:#f59e0b} html[data-piel="nueva"] .pavisos .palertas .palerta--ok > span .nxi{background:var(--ok)} html[data-piel="nueva"] .pavisos .palertas .palerta > div{padding:16px 44px 16px 0} html[data-piel="nueva"] .pavisos .palertas .palerta b{font-weight:600;font-size:.97rem} html[data-piel="nueva"] .pavisos .palertas .palerta > div::after{top:23px;right:20px} html[data-piel="nueva"] .pavisos .palertas .palerta.is-abierta > div::after{top:27px} html[data-piel="nueva"] .pavisos .palertas .palerta .palerta__btn{ background:var(--purple);color:#fff;border-color:transparent; } html[data-piel="nueva"] .pavisos .palertas .palerta--alta .palerta__btn{background:var(--mal);color:#fff} html[data-piel="nueva"] .pavisos .palertas .palerta--media .palerta__btn{background:#f59e0b;color:#fff} html[data-piel="nueva"] .pavisos .palertas .palerta .palerta__btn--flojo{background:transparent;color:var(--text);border-color:var(--glass-line)} /* la etiqueta del rol ya está en la barra lateral; arriba solo cuando estás mirando como otra persona */ html[data-piel="nueva"] body.con-barra .papp__rol:not(.is-preview){display:none} html[data-piel="nueva"] body.con-barra .papp__head{padding-right:110px} /* ---------- 8 · La campana y el panel de avisos ---------- */ html[data-piel="nueva"] .papp .psection.is-en-campana{display:none} html[data-piel="nueva"] .pcampana{position:relative;margin-right:6px} html[data-piel="nueva"] .pcampana__n{ position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px; border-radius:999px;background:var(--magenta);color:#fff; font-size:.66rem;font-weight:700;line-height:18px;text-align:center; border:2px solid var(--bg); } html[data-piel="nueva"] .pcampana.tiene-alta .pcampana__n{background:var(--mal)} html[data-piel="nueva"] .pbarra__avisos{display:block;padding:0 12px 6px;color:var(--barra-tenue);font-size:.72rem} html[data-piel="nueva"] .pavisos{position:fixed;inset:0;z-index:1500;pointer-events:none} html[data-piel="nueva"] .pavisos__fondo{position:absolute;inset:0;background:rgba(7,5,14,.35);opacity:0;transition:opacity .25s} html[data-piel="nueva"] .pavisos__caja{ position:absolute;top:0;right:0;bottom:0;width:min(440px,100vw); display:flex;flex-direction:column; background:var(--glass);border-left:1px solid var(--glass-line); backdrop-filter:blur(28px) saturate(1.4);-webkit-backdrop-filter:blur(28px) saturate(1.4); box-shadow:-20px 0 60px rgba(0,0,0,.35); transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.65,.3,1); } html[data-piel="nueva"] .pavisos.is-abierta{pointer-events:auto} html[data-piel="nueva"] .pavisos.is-abierta .pavisos__fondo{opacity:1} html[data-piel="nueva"] .pavisos.is-abierta .pavisos__caja{transform:none} html[data-piel="nueva"] .pavisos__cab{display:flex;align-items:center;gap:10px;padding:22px 22px 14px} html[data-piel="nueva"] .pavisos__cab h2{font-family:var(--font-display);font-size:1.25rem;font-weight:600;margin:0;display:flex;align-items:center;gap:10px} html[data-piel="nueva"] .pavisos__n{font-size:.72rem;font-weight:700;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--grad);color:#fff;display:inline-grid;place-items:center} html[data-piel="nueva"] .pavisos__n:empty{display:none} html[data-piel="nueva"] .pavisos__x{margin-left:auto;width:36px;height:36px;border-radius:10px;border:1px solid var(--glass-line);background:var(--glass-2);color:var(--text);display:grid;place-items:center;cursor:pointer} html[data-piel="nueva"] .pavisos__x .nxi{width:18px;height:18px} html[data-piel="nueva"] .pavisos__cuerpo{flex:1;overflow-y:auto;padding:0 16px 24px} /* dentro del panel, los avisos van abiertos: para eso has pulsado la campana */ html[data-piel="nueva"] .pavisos .palertas{background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;gap:10px;overflow:visible} html[data-piel="nueva"] .pavisos .palerta{ background:var(--glass-2);border:1px solid var(--glass-line);border-radius:14px; cursor:default;position:relative;overflow:hidden;margin:0;padding:0;display:flex; } html[data-piel="nueva"] .pavisos .palerta + .palerta{border-top:1px solid var(--glass-line)} html[data-piel="nueva"] .pavisos .palerta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--purple)} html[data-piel="nueva"] .pavisos .palerta--alta::before{background:var(--mal)} html[data-piel="nueva"] .pavisos .palerta--media::before{background:#f59e0b} html[data-piel="nueva"] .pavisos .palerta--ok::before{background:var(--ok)} html[data-piel="nueva"] .pavisos .palerta > span{display:none} html[data-piel="nueva"] .pavisos .palerta > div{flex:1;min-width:0;padding:14px 16px 14px 18px;position:relative} html[data-piel="nueva"] .pavisos .palerta > div::after{display:none} html[data-piel="nueva"] .pavisos .palerta b{display:block;white-space:normal;font-weight:600;font-size:.92rem;margin:0} html[data-piel="nueva"] .pavisos .palerta p{display:block;margin:5px 0 0;font-size:.84rem;color:var(--muted);line-height:1.55} html[data-piel="nueva"] .pavisos .palerta .palerta__pie{display:flex;margin-top:10px;gap:10px;flex-wrap:wrap;align-items:center} html[data-piel="nueva"] .pavisos .palerta a{font-size:.84rem;font-weight:600;color:var(--purple);text-decoration:none;margin:0} html[data-piel="nueva"] .pavisos .palerta__btn{border-radius:10px;padding:7px 13px;font-size:.8rem} html[data-piel="nueva"] .pavisos .palertas__mas{text-align:center;padding:8px} /* el mensajito de aviso nuevo sale arriba, como en el móvil */ html[data-piel="nueva"] .ptoasts{top:calc(var(--nav-h) + 10px);bottom:auto} html[data-piel="nueva"] .ptoast{ background:var(--glass);border:1px solid var(--glass-line); backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px); } @media (max-width:760px){ html[data-piel="nueva"] .pavisos__caja{width:100vw;border-left:0} html[data-piel="nueva"] .pavisos__cab{padding-top:max(22px,env(safe-area-inset-top))} } /* ---------- 9 · Acordeón (ficha de cliente) y "Ver todo" ---------- */ html[data-piel="nueva"] .pvertodo{ margin-left:auto;border:0;background:none;font:inherit;cursor:pointer; padding:8px 12px;border-radius:9px;font-size:.82rem;font-weight:500;color:var(--faint); } html[data-piel="nueva"] .pvertodo:hover{color:var(--text);background:var(--glass-2)} html[data-piel="nueva"] .pcarpetas.is-todo .pcarpeta__tab.is-sel{background:var(--glass-2);color:var(--text);box-shadow:none} html[data-piel="nueva"] .pcarpetas--acordeon{background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;margin:0 0 10px;justify-content:flex-end} html[data-piel="nueva"] .papp .psection.is-acordeon{position:relative;margin:0 0 10px} html[data-piel="nueva"] .papp .psection.is-acordeon > h2{ display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none; margin:0;padding:15px 18px;border-radius:14px; background:var(--glass);border:1px solid var(--glass-line); backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4); font-family:var(--font);font-size:.98rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text); transition:background .15s,border-color .15s; } html[data-piel="nueva"] .papp .psection.is-acordeon > h2:hover{border-color:rgba(139,92,246,.45)} html[data-piel="nueva"] .papp .psection.is-acordeon > h2 small{margin-left:auto;font-size:.8rem;font-weight:400;color:var(--faint);text-align:right} html[data-piel="nueva"] .papp .psection.is-acordeon > h2::after{ content:"";width:8px;height:8px;flex:0 0 8px;margin-left:6px; border-right:1.8px solid var(--faint);border-bottom:1.8px solid var(--faint); transform:rotate(45deg);transition:transform .2s; } html[data-piel="nueva"] .papp .psection.is-acordeon:not(.is-cerrada) > h2{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent} html[data-piel="nueva"] .papp .psection.is-acordeon:not(.is-cerrada) > h2::after{transform:rotate(225deg)} /* lo de dentro, pegado a la franja */ html[data-piel="nueva"] .papp .psection.is-acordeon > :not(h2){margin-top:0} html[data-piel="nueva"] .papp .psection.is-acordeon > .pwrap, html[data-piel="nueva"] .papp .psection.is-acordeon > .pcard{border-top-left-radius:0;border-top-right-radius:0;border-top:0} /* cerrado: fuera de la vista pero con tamaño, para que el mapa mida bien */ html[data-piel="nueva"] .papp .psection.is-acordeon.is-cerrada > :not(h2){ position:absolute;left:0;right:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;margin:0; } /* el logo al lado del nombre */ html[data-piel="nueva"] .pcab h2 .pcab__logo{width:44px;height:44px;border-radius:12px;object-fit:cover;vertical-align:middle;margin-right:10px;background:var(--glass-2)} html[data-piel="nueva"] .pcab h2 .pcab__logo[hidden]{display:none} @media (max-width:760px){ html[data-piel="nueva"] .papp .psection.is-acordeon > h2{padding:13px 14px;font-size:.94rem} html[data-piel="nueva"] .papp .psection.is-acordeon > h2 small{display:none} } /* ---------- 10 · Buscador de lista ---------- */ html[data-piel="nueva"] .pbusca{ display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:9px 14px;max-width:440px; background:var(--glass);border:1px solid var(--glass-line);border-radius:12px;color:var(--faint); backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px); } html[data-piel="nueva"] .pbusca .nxi{width:18px;height:18px;flex:0 0 18px} html[data-piel="nueva"] .pbusca input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:.9rem;color:var(--text);outline:none;padding:0;box-shadow:none} html[data-piel="nueva"] .pbusca input::placeholder{color:var(--faint)} html[data-piel="nueva"] .pbusca__n{font-size:.78rem;white-space:nowrap} html[data-piel="nueva"] .papp .psection.is-acordeon > .pbusca{margin:12px 0 10px} /* ---------- 11 · Inicio del cliente: las herramientas ya están en la barra ---------- Esto lo decidía el CSS: se pintaban las tarjetas y luego se escondían si había barra (body.con-rail). Se rompió el 9/9/2026 en la vista previa, donde la barra no salía: David veía las herramientas de orgingarden.home dos veces, en cuadrados. Ahora la regla vive en un solo sitio, en cliente.js: las herramientas NO se pintan en tarjeta, punto. La clase se queda por si alguna pantalla vieja la usa. */