/* ============================================================ NIUXER — Estilos del CRM ------------------------------------------------------------ Solo lo NUEVO del panel. Todo lo que ya existía (.pcard, .pgrid, .ptable, .pbar, .pchip, .pbtn, .psection, .pwrap, .pempty y las variables de color) sigue en style.css y se reutiliza tal cual. ============================================================ */ /* ============================================================ BARRAS DE DESPLAZAMIENTO ------------------------------------------------------------ Las de Windows son gruesas, grises y con flechitas: al lado del calendario parecían de otro programa. Aquí van finas, redondeadas y del color de las líneas, así que casi no se ven hasta que hacen falta. Esta hoja solo la carga el panel, la web pública no cambia. ============================================================ */ *{scrollbar-width:thin;scrollbar-color:var(--pista) transparent} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--pista);border-radius:999px; border:2px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background:var(--sutil-2);background-clip:content-box} ::-webkit-scrollbar-button,::-webkit-scrollbar-corner{display:none} /* ============================================================ MODO CLARO ------------------------------------------------------------ Solo repinta variables. El HTML lleva data-tema="claro" en y todo lo demás (tarjetas, tablas, gráficas, modales) se adapta solo porque ya no hay colores escritos a mano en las reglas. Este bloque vive en panel.css a propósito: la web pública no carga esta hoja, así que sigue siendo oscura pase lo que pase. ============================================================ */ :root[data-tema="claro"]{ --bg:#f4f2f9; --bg-2:#ffffff; --bg-3:#ebe7f4; --card:#ffffff; --card-hover:#faf9ff; --border:rgba(26,20,48,.14); --text:#181231; --muted:#4f4668; --faint:#756c8d; --nav-bg:rgba(255,255,255,.88); --campo:#ffffff; --campo-foco:#ffffff; --linea:rgba(26,20,48,.09); --sutil:rgba(26,20,48,.035); --sutil-2:rgba(26,20,48,.07); --pista:rgba(26,20,48,.1); --boton:rgba(26,20,48,.035); --velo:rgba(26,20,48,.45); --sombra:0 24px 70px rgba(26,20,48,.16); /* Los verdes y ámbares del modo oscuro se vuelven ilegibles sobre blanco. Estos son los mismos colores bajados de luminosidad. */ --ok:#15803d; --aviso:#a16207; --mal:#b91c1c; --info:#0369a1; --lila:#6d28d9; --gris:#525b6b; --blue:#0369a1; --purple:#7c3aed; --grad-soft:linear-gradient(100deg,rgba(139,92,246,.11),rgba(217,38,169,.11)); } /* Los pocos sitios donde el fondo sí tenía que cambiar de verdad. */ :root[data-tema="claro"] body{background:var(--bg)} :root[data-tema="claro"] .auth__card{ background:#fff;border-color:rgba(139,92,246,.28); box-shadow:0 30px 80px rgba(26,20,48,.14)} :root[data-tema="claro"] .nav.is-scrolled{box-shadow:0 8px 30px rgba(26,20,48,.1)} :root[data-tema="claro"] .pcard, :root[data-tema="claro"] .pkpi, :root[data-tema="claro"] .pwrap{box-shadow:0 1px 3px rgba(26,20,48,.05)} :root[data-tema="claro"] .grid-bg{opacity:.35} :root[data-tema="claro"] .orbs{opacity:.4} :root[data-tema="claro"] .auth select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234f4668'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E")} /* El fondo del chip admin es el degradado de marca: el texto va en blanco en los dos temas. */ :root[data-tema="claro"] .pchip--admin, :root[data-tema="claro"] .pswitch.is-on span, :root[data-tema="claro"] .pfase--hecha::before, :root[data-tema="claro"] .ppasos li.is-act span{color:#fff} /* Al cambiar de tema se apagan TODAS las transiciones durante un instante. Si no, cualquier elemento que anime un color venido de una variable (la barra superior, las pestañas, los botones) se queda con el color del tema anterior en vez de repintarse. */ :root.nx-cambiando-tema *, :root.nx-cambiando-tema *::before, :root.nx-cambiando-tema *::after{transition:none !important} /* ---------- Interruptor de tema ---------- */ .ptema{display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;flex:0 0 auto;border-radius:999px;cursor:pointer; border:1px solid var(--border);background:var(--boton);color:var(--muted); font-size:1rem;line-height:1;transition:.2s} .ptema:hover{border-color:var(--purple);color:var(--text);background:var(--card-hover)} .ptema__sol{display:none} :root[data-tema="claro"] .ptema__luna{display:none} :root[data-tema="claro"] .ptema__sol{display:inline} /* ---------- Cabecera de pantalla ---------- Se queda pegada arriba al bajar: en fichas largas tenías que subir hasta el principio solo para pulsar «Volver». */ .pcab{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 26px; position:sticky;top:var(--nav-h);z-index:60; padding:12px 0;background:var(--nav-bg);backdrop-filter:blur(12px); border-bottom:1px solid transparent;transition:border-color .2s} .pcab.is-pegada{border-bottom-color:var(--border)} .pcab h2{font-family:var(--font-display);font-size:clamp(1.25rem,3vw,1.75rem);margin:0;flex:1 1 260px} .pcab__volver{flex:0 0 auto;font-size:.84rem;color:var(--muted);text-decoration:none; padding:7px 13px;border:1px solid var(--border);border-radius:999px;transition:.2s} .pcab__volver:hover{color:var(--text);border-color:var(--purple);background:var(--card)} .pcab__acc{display:flex;gap:8px;flex-wrap:wrap} .pintro{font-size:.9rem;color:var(--muted);line-height:1.65;margin:0 0 16px} .pintro:last-child{margin-bottom:0} .pfaint{color:var(--faint);font-size:.8rem} .pprof{font-size:.8rem;font-weight:500;opacity:.8} .pverde{color:var(--ok)} .pambar{color:var(--aviso)} .projo{color:var(--mal)} .num{text-align:right;font-variant-numeric:tabular-nums} /* ---------- Rejilla de indicadores ---------- */ .pkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin:0 0 18px} .pkpi{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:15px 17px; transition:border-color .25s,transform .25s} .pkpi:hover{border-color:rgba(139,92,246,.4);transform:translateY(-2px)} .pkpi__t{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin:0} /* break-word partía palabras por la mitad ("250,00 €/m·es"). Con overflow-wrap solo se rompe si una palabra sola no cabe. */ .pkpi__v{font-family:var(--font-display);font-size:1.42rem;margin:7px 0 0;line-height:1.15; overflow-wrap:break-word;hyphens:none} .pkpi__p{font-size:.75rem;color:var(--muted);margin:5px 0 0;line-height:1.45} .pkpi__o{font-size:.72rem;color:var(--faint);margin:6px 0 0} .pkpi--grande .pkpi__v{font-size:1.75rem} .pkpi--ok{border-color:rgba(74,222,128,.32)} .pkpi--mal{border-color:rgba(248,113,113,.32)} .pdelta{display:inline-block;font-size:.74rem;font-weight:600;padding:1px 7px;border-radius:999px; background:var(--pista);color:var(--muted)} .pdelta--ok{background:rgba(74,222,128,.14);color:var(--ok)} .pdelta--mal{background:rgba(248,113,113,.14);color:var(--mal)} /* ---------- Barra de progreso ---------- */ .pbarwrap{display:flex;align-items:center;gap:10px;margin:10px 0} .pbarwrap .pbar{flex:1} .pbar__n{font-size:.76rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums} /* ---------- Tarjetas de servicio ---------- */ .pcard--serv{display:flex;flex-direction:column;gap:8px;text-decoration:none;position:relative} .pcard__estado{margin:-2px 0 2px} .pcard__mini{margin-top:auto;padding-top:8px} .pcard__ir{font-size:.78rem;color:var(--purple);margin-top:6px} /* ---------- Selector de periodo (Ingresos) ---------- */ .pselper{padding:7px 12px;border-radius:9px;border:1px solid var(--border); background:var(--campo);color:var(--text);font-family:inherit;font-size:.8rem; font-weight:600;cursor:pointer;transition:.2s} .pselper:hover{border-color:var(--purple)} .pselper:focus{outline:0;border-color:var(--purple)} /* ---------- Pestañas ---------- */ .ptabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin:0 0 22px;overflow-x:auto; scrollbar-width:none} .ptabs::-webkit-scrollbar{display:none} .ptab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted); font-family:inherit;font-size:.88rem;padding:11px 16px;cursor:pointer;white-space:nowrap;transition:.2s} .ptab:hover{color:var(--text)} .ptab.is-sel{color:var(--text);border-bottom-color:var(--purple)} /* Pestana de algo que aun no existe: no se puede pulsar y lleva la misma etiqueta violeta que la barra lateral, para que se lea igual en los dos sitios. */ .ptab--pronto{display:inline-flex;align-items:center;gap:6px; cursor:default;color:var(--faint)} .ptab--pronto:hover{color:var(--faint)} .ptab__pronto{padding:2px 8px;border-radius:999px;background:var(--purple); color:#fff;font-size:.6rem;font-style:normal;font-weight:700; letter-spacing:.07em;text-transform:uppercase} .ptab__b{display:inline-block;margin-left:6px;font-size:.7rem;background:var(--card); padding:1px 6px;border-radius:999px} /* ---------- Formularios ---------- */ .pform{display:block} .pform__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px} .pform__pie{display:flex;gap:9px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap} .pcampo{display:flex;flex-direction:column;gap:5px;min-width:0} .pcampo--2{grid-column:1/-1} .pcampo label,.pminilbl{font-size:.76rem;color:var(--muted);font-weight:500} .pcampo input,.pcampo select,.pcampo textarea,.pasignar select,.pmapeo select,.pdrop input{ width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--border); background:var(--campo);color:var(--text);font-family:inherit;font-size:.86rem;transition:.2s} .pcampo input:focus,.pcampo select:focus,.pcampo textarea:focus{ outline:0;border-color:var(--purple);background:var(--campo-foco)} .pcampo textarea{resize:vertical;line-height:1.5} .pcampo small{font-size:.72rem;color:var(--faint);line-height:1.4} .pcheck{display:flex;align-items:flex-start;gap:9px;font-size:.83rem;color:var(--muted); grid-column:1/-1;cursor:pointer;line-height:1.45} .pcheck input{width:16px;height:16px;flex:0 0 auto;margin-top:2px;accent-color:var(--purple)} .pacciones{display:flex;gap:9px;flex-wrap:wrap;margin:16px 0 0;align-items:center} .pacc{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .pmini{margin-top:16px;display:flex;flex-direction:column;gap:5px} /* ---------- Interruptor de visibilidad ---------- */ .pvis{list-style:none;margin:0;padding:0} .pvis__i{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:13px 0;border-bottom:1px solid var(--linea)} .pvis__i:last-child{border-bottom:0} .pvis__i b{font-size:.9rem;display:inline-block} .pvis__i small{display:block;font-size:.76rem;color:var(--faint);margin-top:3px;line-height:1.45} .pvis__i .pchip{margin-left:8px;vertical-align:middle} .pswitch{flex:0 0 auto;width:46px;height:26px;border-radius:999px;border:1px solid var(--border); background:var(--campo);cursor:pointer;padding:0;position:relative;transition:.25s} .pswitch span{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%; background:var(--faint);transition:.25s} .pswitch.is-on{background:var(--grad);border-color:transparent} .pswitch.is-on span{left:23px;background:#fff} .pswitch:disabled{opacity:.5;cursor:wait} /* ---------- Permisos ---------- */ .pperm{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:12px 0;border-bottom:1px solid var(--linea)} .pperm:last-child{border-bottom:0} .pperm b{font-size:.88rem} .pperm small{display:block;font-size:.75rem;color:var(--faint);margin-top:2px} /* ---------- Notas ---------- */ .pnotas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} .pnota{border-left:2px solid var(--purple);padding:2px 0 2px 14px} .pnota.is-fija{border-left-color:var(--aviso)} .pnota.is-interna{border-left-color:var(--lila);opacity:.85} .pnota__cab{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap} .pnota__cab b{font-size:.9rem} .pnota__cab span{font-size:.74rem;color:var(--faint);white-space:nowrap;display:flex;align-items:center;gap:6px} .pnota p{font-size:.86rem;color:var(--muted);margin:5px 0 0;line-height:1.6;white-space:pre-line} .pnota__s{font-size:.76rem;color:var(--purple);text-decoration:none;display:inline-block;margin-top:6px} /* ---------- Archivos ---------- */ .parchs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .parch{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--linea)} .parch:last-child{border-bottom:0} .parch__i{font-size:1.3rem;flex:0 0 auto} .parch__t{flex:1;min-width:0} .parch__t b{font-size:.87rem;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .parch__t small{font-size:.75rem;color:var(--faint)} .parch__p{font-size:.75rem;color:var(--faint);white-space:nowrap} /* ---------- Piezas de vídeo ---------- */ .ppiezas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px} .ppieza{display:flex;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--linea)} .ppieza:last-child{border-bottom:0;padding-bottom:0} .ppieza__mini{flex:0 0 76px;height:100px;border-radius:11px;overflow:hidden;background:var(--card); display:flex;align-items:center;justify-content:center;font-size:1.5rem} .ppieza__mini img{width:100%;height:100%;object-fit:cover} .ppieza__c{flex:1;min-width:0} .ppieza__cab{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .ppieza__cab b{font-size:.92rem} .ppieza__l{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px} .ppieza__m{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;font-size:.8rem;color:var(--muted)} .ppieza__t{color:var(--purple)} .penlaces{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px} .penlaces li{display:flex;align-items:center;gap:9px;font-size:.82rem} .penlaces a{color:var(--muted);text-decoration:none;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;flex:1;min-width:0} .penlaces a:hover{color:var(--purple)} /* ---------- Fases de proyecto ---------- */ .pfases{list-style:none;margin:0;padding:0;counter-reset:f} .pfase{display:flex;align-items:center;gap:16px;padding:13px 0; border-bottom:1px solid var(--linea);counter-increment:f} .pfase:last-child{border-bottom:0} .pfase::before{content:counter(f);flex:0 0 26px;height:26px;border-radius:50%; background:var(--card);border:1px solid var(--border);display:flex;align-items:center; justify-content:center;font-size:.75rem;color:var(--faint)} .pfase--hecha::before{background:var(--grad);border-color:transparent;color:#fff} .pfase__c{flex:1;min-width:0} .pfase__c b{font-size:.9rem;margin-right:8px} .pfase__c small{display:block;font-size:.77rem;color:var(--faint);margin-top:3px} .pfase .pbarwrap{flex:0 0 170px;margin:0} .pespera{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .pespera li{font-size:.87rem;color:var(--muted);line-height:1.55} .pespera b{color:var(--text)} /* ---------- Publicidad ---------- */ .pperiodo{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 20px} .proas{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:22px;border-radius:var(--radius); background:var(--grad-soft);border:1px solid rgba(139,92,246,.28);margin-bottom:18px} .proas__n{text-align:center;flex:0 0 auto} .proas__n span{display:block;font-family:var(--font-display);font-size:2.7rem;line-height:1; background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .proas__n small{display:block;font-size:.72rem;color:var(--faint);margin-top:6px; letter-spacing:.06em;text-transform:uppercase} .proas__d{flex:1;min-width:230px} .proas__d p{font-size:.9rem;color:var(--muted);margin:0 0 6px;line-height:1.6} .proas__d p:last-child{margin-bottom:0} .pcols{display:grid;grid-template-columns:minmax(240px,1fr) minmax(280px,1.4fr);gap:16px;align-items:start} .pglosario{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px} .pglosario div{padding:11px 13px;background:var(--sutil);border-radius:11px} .pglosario dt{font-size:.82rem;font-weight:600;color:var(--text)} .pglosario dd{font-size:.79rem;color:var(--faint);margin:3px 0 0;line-height:1.5} /* ---------- Data Science ---------- */ .phallazgos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px} .phall{padding:15px 17px;border-radius:13px;background:var(--sutil); border-left:3px solid var(--faint)} .phall--alta{border-left-color:var(--aviso)} .phall--critica{border-left-color:var(--mal)} .phall--media{border-left-color:var(--info)} .phall__cab{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap} .phall__cab b{font-size:.94rem;line-height:1.4} .phall p{font-size:.86rem;color:var(--muted);margin:8px 0 0;line-height:1.6} .phall__ev{font-size:.81rem !important;color:var(--faint) !important; background:var(--campo);padding:8px 11px;border-radius:9px;margin-top:10px !important} .phall__pie{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:11px} .phall__eur{font-size:.82rem;color:var(--ok);font-weight:600} .pimpacto{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:22px;border-radius:var(--radius); background:var(--grad-soft);border:1px solid rgba(139,92,246,.28);margin-bottom:18px} .pimpacto__n{text-align:center;flex:0 0 auto} .pimpacto__n span{display:block;font-family:var(--font-display);font-size:2.5rem;line-height:1; background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .pimpacto__n small{display:block;font-size:.72rem;color:var(--faint);margin-top:6px} .pimpacto__d{flex:1;min-width:230px} .pimpacto__d p{font-size:.89rem;color:var(--muted);margin:0 0 6px;line-height:1.6} /* ---------- SEO ---------- */ .pacciones-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px} .pacciones-l li{display:flex;gap:12px;align-items:flex-start;padding-bottom:13px; border-bottom:1px solid var(--linea)} .pacciones-l li:last-child{border-bottom:0;padding-bottom:0} .pacciones-l li > div{flex:1;min-width:0} .pacciones-l b{font-size:.88rem} .pacciones-l small{display:block;font-size:.79rem;color:var(--faint);margin-top:3px;line-height:1.5} .pacciones-l > li > span:last-child{font-size:.75rem;white-space:nowrap} /* ---------- Equipo y asignaciones ---------- */ .pequipo{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:9px} .pequipo li{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.87rem} .pasignar{display:flex;gap:9px;flex-wrap:wrap;align-items:center} .pasignar select{flex:1;min-width:190px;max-width:340px} .palta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px} .palta b{font-size:.87rem;min-width:168px} .palta input{flex:1;min-width:210px;padding:9px 13px;border-radius:10px;border:1px solid var(--border); background:var(--campo);color:var(--muted);font-size:.78rem;font-family:inherit} /* ---------- Quién puede borrar ---------- Editar y borrar no son lo mismo: uno corrige, el otro destruye y no tiene deshacer. Si la sesión no puede borrar (todo el equipo, y el admin mientras previsualiza), los botones de eliminar ni se enseñan. El bloqueo real está en app.js y en las políticas de Supabase; esto solo evita enseñar un botón que va a dar error. */ body:not(.puede-borrar) [data-accion*="borrar"], body:not(.puede-borrar) [data-accion="cap-olvidar"], body:not(.puede-borrar) [data-borrar-serv], body:not(.puede-borrar) [data-borrar-servicio], body:not(.puede-borrar) [data-borrar-nota], body:not(.puede-borrar) [data-borrar-evento], body:not(.puede-borrar) [data-borrar-ingreso], body:not(.puede-borrar) [data-del], body:not(.puede-borrar) [data-quitar-persona]{display:none !important} /* ---------- Botón de volver, fijo en la barra ---------- Vive en la barra superior, que ya es fija, así que está siempre en el mismo punto pase lo que pase con el contenido. */ /* margin-right:auto lo pega al logo y empuja el resto a la derecha. Sin esto, el reparto de la barra lo dejaba en mitad de la pantalla. */ .patras{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto; margin-left:18px;margin-right:auto;padding:8px 16px;border-radius:999px;cursor:pointer; border:1px solid var(--border);background:var(--card);color:var(--muted); font-family:inherit;font-size:.88rem;font-weight:500;transition:.2s} .patras:hover{border-color:var(--purple);color:var(--text);background:var(--card-hover); transform:translateX(-2px)} .patras:focus-visible{outline:2px solid var(--purple);outline-offset:2px} .patras[hidden]{display:none} /* En pantallas estrechas se queda solo la flecha: el nombre del sitio al que se vuelve se lleva la mitad de la barra. */ @media (max-width:720px){ .patras{margin-left:10px;padding:8px 12px} .patras__t{display:none} } /* ---------- Buscador de listas ---------- */ .pbuscador{display:flex;align-items:center;gap:12px;margin:0 0 18px} .pbuscador input{flex:1;min-width:0;padding:11px 15px;border-radius:11px; border:1px solid var(--border);background:var(--campo);color:var(--text); font-family:inherit;font-size:.9rem;transition:.2s} .pbuscador input:focus{outline:0;border-color:var(--purple);background:var(--campo-foco)} .pbuscador input::placeholder{color:var(--faint)} .pbuscador__n{flex:0 0 auto;font-size:.8rem;color:var(--muted);white-space:nowrap} .pbuscador__n.es-cero{color:var(--aviso)} /* ---------- Personas con acceso a un cliente ---------- */ .ppersonas,.pinvits{list-style:none;margin:0;padding:0;display:flex; flex-direction:column;gap:9px} .ppersonas li,.pinvits li{display:flex;align-items:center;justify-content:space-between; gap:14px;padding:11px 13px;border-radius:11px;background:var(--sutil); border:1px solid var(--pista)} .ppersonas b,.pinvits b{font-size:.9rem;margin-right:8px} .ppersonas small,.pinvits small{display:block;font-size:.77rem;margin-top:3px} .pinvits li{border-style:dashed} /* ---------- Tarjeta de cada trabajador ---------- */ .pequipoc{border:1px solid var(--border);border-radius:14px;background:var(--card); padding:16px 18px;margin:0 0 12px;transition:border-color .25s} .pequipoc:last-child{margin-bottom:0} .pequipoc:hover{border-color:rgba(139,92,246,.35)} .pequipoc__cab{display:flex;align-items:center;justify-content:space-between; gap:14px;flex-wrap:wrap} .pequipoc__quien b{font-size:.98rem;display:block} .pequipoc__quien small{font-size:.78rem} .pequipoc__perms{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 0} /* De qué se encarga, en la tarjeta del equipo y en su ficha. Va ARRIBA de los permisos y no mezclado con ellos a propósito: los permisos dicen qué puede ver dentro de un cliente, y esto dice a qué clientes y servicios llega siquiera. Es la pregunta primera, y verlas revueltas hacía pensar que eran lo mismo. */ .pequipoc__mods,.ptra__mods{ display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0 0} .pequipoc__mods>.pfaint,.ptra__mods>.pfaint{ font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;width:100%;margin:0} .ptra__mods{margin-top:4px} /* Un permiso denegado se ve apagado, no rojo: no es un error, es que no lo tiene. */ .pequipoc__perms .pchip:not(.pchip--cliente){background:var(--sutil-2);color:var(--faint)} .pequipoc__lista{margin-top:13px;padding-top:12px;border-top:1px solid var(--linea); font-size:.8rem} .pequipoc__chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px} .pequipoc__chips a{text-decoration:none;transition:.2s} .pequipoc__chips a:hover{filter:brightness(1.25)} .pequipoc__vacio{margin:13px 0 0;padding-top:12px;border-top:1px solid var(--linea); font-size:.83rem;color:var(--aviso)} /* ---------- Gráficas ---------- */ .pchart{width:100%} .csvg{width:100%;height:auto;display:block;overflow:visible} .csvg .cg{stroke:var(--sutil-2);stroke-width:1} .csvg .cy{fill:var(--faint);font-size:10px;text-anchor:end;font-family:var(--font-body)} .csvg .cx{fill:var(--faint);font-size:10px;font-family:var(--font-body)} .csvg .cc{fill:var(--text);font-size:19px;text-anchor:middle;font-family:var(--font-display);font-weight:600} .csvg .ccp{fill:var(--faint);font-size:9px;text-anchor:middle} .pleyenda{list-style:none;display:flex;gap:16px;flex-wrap:wrap;margin:0 0 12px;padding:0; font-size:.78rem;color:var(--muted)} .pleyenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px; vertical-align:middle} .panillo{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .panillo__svg{width:150px;height:150px;flex:0 0 auto} .panillo__svg .cc{fill:var(--text);font-size:19px;text-anchor:middle; font-family:var(--font-display);font-weight:600} .panillo__svg .ccp{fill:var(--faint);font-size:9px;text-anchor:middle} .panillo__l{list-style:none;margin:0;padding:0;flex:1;min-width:180px;display:flex; flex-direction:column;gap:8px} .panillo__l li{display:flex;align-items:center;gap:9px;font-size:.83rem;color:var(--muted)} .panillo__l i{width:10px;height:10px;border-radius:3px;flex:0 0 auto} .panillo__l span{flex:1} .panillo__l b{color:var(--text);font-variant-numeric:tabular-nums} .pspark{width:88px;height:24px;display:inline-block;vertical-align:middle} .phist{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)} .phist b{font-size:.8rem;color:var(--muted);display:block;margin-bottom:10px} /* ---------- Modal ---------- */ body.pmodal-abierto{overflow:hidden} /* La barra superior del sitio va a z-index 1000. Con el modal en 200, la barra se dibujaba ENCIMA y tapaba la X de cerrar — en todos los modales del panel. El modal tiene que estar por encima de todo. */ .pmodal{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-start; justify-content:center;padding:5vh 16px;overflow-y:auto} .pmodal__fondo{position:fixed;inset:0;background:var(--velo);backdrop-filter:blur(5px)} .pmodal__caja{position:relative;width:min(620px,100%);background:var(--bg-2); border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--sombra); animation:pmIn .22s ease} .pmodal__caja--sm{width:min(430px,100%)} .pmodal__caja--lg{width:min(880px,100%)} @keyframes pmIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}} .pmodal__cab{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:17px 22px;border-bottom:1px solid var(--border);position:sticky;top:0; background:var(--bg-2);border-radius:var(--radius) var(--radius) 0 0;z-index:1} .pmodal__cab h3{font-family:var(--font-display);font-size:1.02rem;margin:0} .pmodal__x{background:none;border:0;color:var(--faint);font-size:1.5rem;line-height:1; cursor:pointer;padding:0 4px} .pmodal__x:hover{color:var(--text)} .pmodal__cuerpo{padding:22px} .pconfirm{font-size:.9rem;color:var(--muted);line-height:1.65;margin:0 0 18px} /* ---------- Avisos flotantes ---------- */ .ptoasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:3000; display:flex;flex-direction:column;gap:9px;align-items:center;pointer-events:none; width:min(430px,calc(100% - 32px))} .ptoast{background:var(--bg-3);border:1px solid var(--border);border-radius:12px; padding:12px 18px;font-size:.85rem;color:var(--text);box-shadow:0 10px 34px rgba(0,0,0,.5); animation:ptIn .25s ease;max-width:100%;text-align:center} .ptoast--ok{border-color:rgba(74,222,128,.42)} .ptoast--err{border-color:rgba(248,113,113,.42)} /* Un tercer tono: ni bien ni mal, solo te cuenta algo. Hacia falta porque solo habia verde y rojo, y los avisos de "estas en vista previa" salian en rojo: el usuario los leia como un fallo del panel cuando no habia fallo ninguno. */ .ptoast--info{border-color:rgba(139,92,246,.5)} /* Los avisos salen abajo en el centro, que es justo donde vive la banda rosa de la vista previa. Se pisaban y el aviso no se podia leer. Con la banda puesta, los avisos suben por encima de ella. */ body.es-preview .ptoasts{bottom:82px} @media (max-width:760px){ body.es-preview .ptoasts{bottom:120px} } .ptoast.is-out{animation:ptOut .45s ease forwards} @keyframes ptIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes ptOut{to{opacity:0;transform:translateY(14px)}} /* ---------- Cargando ---------- */ .pcargando{display:flex;align-items:center;gap:11px;justify-content:center;padding:44px 20px; color:var(--faint);font-size:.86rem} .pspin{width:17px;height:17px;border:2px solid var(--border);border-top-color:var(--purple); border-radius:50%;animation:pspin .7s linear infinite} @keyframes pspin{to{transform:rotate(360deg)}} /* ---------- Banda de vista previa ---------- */ body.es-preview{padding-bottom:58px} /* La banda flota encima de todo, asi que hay que reservarle sitio o se come lo ultimo de cada pantalla. --banda es lo que mide de alto, y se usa mas abajo para apartar el contenido y el pie de la barra lateral. Si algun dia se cambia el padding o la letra de aqui, hay que mover tambien ese numero. */ :root{ --banda: 52px; } .ppreview{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--grad); color:#fff;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap; padding:9px 18px;font-size:.8rem;line-height:1.35; box-shadow:0 -6px 26px rgba(0,0,0,.45)} .ppreview .pbtn{padding:6px 12px;font-size:.78rem} /* El hueco: la pagina termina justo encima de la banda. Sin esto, para leer lo ultimo habia que salirse de la vista previa. */ body.es-preview .papp{padding-bottom:calc(var(--banda) + 20px)} /* Y el pie de la barra lateral, que se quedaba debajo: el boton de ayuda salia medio tapado. */ body.es-preview .prail{padding-bottom:calc(var(--banda) + 16px)} .ppreview .pbtn{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);color:#fff} .ppreview .pbtn:hover{background:rgba(255,255,255,.3)} /* "Entrar y editar" no puede parecerse a "solo mirar". La banda pasa de el degradado de marca a ROJO, porque aqui lo que pulses se guarda en la cuenta de otro. Si las dos fueran del mismo color, con la pantalla llena nadie distinguiria en cual esta. */ .ppreview--edit{background:linear-gradient(90deg,#b91c1c,#dc2626)} .ppreview--edit .pbtn{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)} .papp__rol.is-preview{background:var(--grad);color:#fff} /* ---------- Asistente de importación ---------- */ .ppasos{list-style:none;display:flex;gap:6px;margin:0 0 24px;padding:0;flex-wrap:wrap; font-size:.79rem;color:var(--faint)} .ppasos li{display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px; border:1px solid var(--border);background:var(--card)} .ppasos li span{width:19px;height:19px;border-radius:50%;background:var(--sutil-2); display:flex;align-items:center;justify-content:center;font-size:.7rem} .ppasos li.is-act{color:var(--text);border-color:var(--purple)} .ppasos li.is-act span{background:var(--grad);color:#fff} .ppasos li.is-hecho{color:var(--ok);border-color:rgba(74,222,128,.32)} .ppasos li.is-hecho span{background:rgba(74,222,128,.18);color:var(--ok)} .ppasosl{margin:0 0 18px;padding-left:22px;display:flex;flex-direction:column;gap:9px; font-size:.89rem;color:var(--muted);line-height:1.6} .ppasosl code{background:var(--sutil-2);padding:1px 6px;border-radius:5px;font-size:.85em} .ppasosl a{color:var(--purple)} .pdrop{border:2px dashed var(--border);border-radius:var(--radius);padding:38px 20px; text-align:center;cursor:pointer;transition:.2s;margin-top:16px} .pdrop:hover,.pdrop.is-over{border-color:var(--purple);background:rgba(139,92,246,.05)} .pdrop input{display:none} .pdrop p{font-size:.92rem;color:var(--muted);margin:0} .pdrop small{display:block;font-size:.76rem;color:var(--faint);margin-top:7px} .pelegir{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .pelegir .pbtn{width:100%;text-align:left;display:flex;align-items:center;gap:10px;padding:12px 15px} .pelegir small{margin-left:auto;color:var(--faint)} .pmapeo{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:13px} .pmapeo__f{display:flex;flex-direction:column;gap:5px;padding:11px 13px;border-radius:11px; background:var(--sutil);border:1px solid transparent;transition:.2s} .pmapeo__f.is-ok{border-color:rgba(74,222,128,.28)} .pmapeo__f label{font-size:.78rem;color:var(--muted)} .ptable--mini{font-size:.75rem} .ptable--mini td,.ptable--mini th{padding:6px 9px;max-width:170px;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .pavisos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px; font-size:.85rem;color:var(--muted);line-height:1.55} .pexito{text-align:center;padding:26px 16px} .pexito span{font-size:2.6rem;display:block;margin-bottom:12px} .pexito h3{font-family:var(--font-display);font-size:1.2rem;margin:0 0 6px} .pexito p{color:var(--muted);font-size:.88rem;margin:0} .pexito .pacciones{justify-content:center} /* ---------- Captación de leads ---------- */ .pestado{display:inline-block;font-size:.74rem;font-weight:600;padding:3px 10px;border-radius:999px; background:color-mix(in srgb, var(--c) 16%, transparent);color:var(--c); border:1px solid color-mix(in srgb, var(--c) 34%, transparent);white-space:nowrap} .pembudo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .pfase-e{display:flex;align-items:center;gap:12px;font-size:.85rem} .pfase-e__n{flex:0 0 118px;color:var(--muted)} .pfase-e__b{flex:1;height:10px;border-radius:999px;background:var(--pista);overflow:hidden} .pfase-e__b i{display:block;height:100%;border-radius:999px;transition:width .7s cubic-bezier(.2,.7,.3,1)} .pfase-e b{flex:0 0 46px;text-align:right;font-variant-numeric:tabular-nums} .palerta{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;margin:0 0 18px; border-radius:var(--radius);background:rgba(251,191,36,.09);border:1px solid rgba(251,191,36,.3)} .palerta > span{font-size:1.5rem;flex:0 0 auto;line-height:1} .palerta b{display:block;font-size:.95rem;margin-bottom:4px} .palerta p{font-size:.85rem;color:var(--muted);margin:0;line-height:1.6} /* Lista de alertas de la portada y de /leads */ .palertas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .palertas .palerta{margin:0} .palerta--alta{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.32)} .palerta--media{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.3)} .palerta--ok{background:rgba(74,222,128,.07);border-color:rgba(74,222,128,.28)} .palerta a{font-size:.82rem;color:var(--purple);text-decoration:none; display:inline-block;margin-top:7px} .palerta a:hover{text-decoration:underline} .palertas__mas{text-align:center;font-size:.84rem;padding-top:4px} /* Pie de una alerta: el enlace y el boton de "ya esta hecho" */ .palerta__pie{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px} .palerta__btn{font:inherit;font-size:.8rem;font-weight:600;cursor:pointer; padding:7px 14px;border-radius:999px;border:1px solid var(--purple); background:transparent;color:var(--purple);transition:background .2s,color .2s} .palerta__btn:hover:not(:disabled){background:var(--purple);color:#fff} .palerta__btn:disabled{opacity:.55;cursor:default} .palerta--alta .palerta__btn{border-color:rgba(248,113,113,.7);color:#f87171} .palerta--alta .palerta__btn:hover:not(:disabled){background:#f87171;color:#fff} .palerta__btn--flojo{border-color:var(--line);color:var(--muted)} .palerta--alta .palerta__btn--flojo{border-color:var(--line);color:var(--muted)} .palerta__btn--flojo:hover:not(:disabled), .palerta--alta .palerta__btn--flojo:hover:not(:disabled){background:var(--line);color:var(--text)} .palertas__mas a{color:var(--muted);text-decoration:none} .pavisoc{padding:13px 16px;margin:0 0 18px;border-radius:12px; background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.32); font-size:.86rem;color:var(--muted);line-height:1.6} .ptel{color:var(--purple);text-decoration:none;font-variant-numeric:tabular-nums} .ptel:hover{text-decoration:underline} .pcodigo{background:var(--campo);border:1px solid var(--border);border-radius:10px; padding:13px 15px;font-size:.76rem;line-height:1.6;color:var(--muted); overflow-x:auto;white-space:pre;margin:0} .phistl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px; font-size:.83rem;color:var(--muted)} .phistl li{display:flex;align-items:center;gap:8px;flex-wrap:wrap; padding-bottom:9px;border-bottom:1px solid var(--linea)} .phistl li:last-child{border-bottom:0;padding-bottom:0} .phistl small{margin-left:auto} /* ---------- Ficha del cliente ---------- Antes era todo el mismo fondo oscuro y costaba saber qué estabas leyendo. Ahora cada dato es su propia tarjetita y cada grupo lleva una línea de color que lo separa del anterior. */ /* Cada grupo es un
plegado. Con los siete abiertos, la ficha ocupaba pantalla y media y no se encontraba nada. */ .pgrupo{margin:0 0 8px;border:1px solid var(--border);border-radius:12px; background:var(--sutil);overflow:hidden;transition:border-color .2s} .pgrupo:last-child{margin-bottom:0} .pgrupo[open]{border-color:rgba(139,92,246,.34);background:transparent} .pgrupo__cab{display:flex;align-items:center;gap:10px;cursor:pointer; padding:12px 15px;list-style:none;user-select:none;transition:background .2s} /* Safari pinta su propio triangulito si no se le quita esto */ .pgrupo__cab::-webkit-details-marker{display:none} .pgrupo__cab:hover{background:var(--sutil-2)} .pgrupo__cab:focus-visible{outline:2px solid var(--purple);outline-offset:-2px} /* La flecha, girada cuando está abierto */ .pgrupo__cab::before{ content:"";flex:0 0 auto;width:7px;height:7px;margin-right:2px; border-right:2px solid var(--purple);border-bottom:2px solid var(--purple); transform:rotate(-45deg);transition:transform .22s} .pgrupo[open] .pgrupo__cab::before{transform:rotate(45deg)} .pgrupo__t{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--purple);font-weight:700;flex:1} /* Cuántos datos hay dentro: así se sabe si merece la pena abrirlo */ .pgrupo__n{flex:0 0 auto;font-size:.7rem;font-weight:600;color:var(--faint); background:var(--sutil-2);border-radius:999px;padding:2px 9px;min-width:24px;text-align:center} .pgrupo .pdatos, .pgrupo .pnotasf, .pgrupo__cuerpo{margin:0 15px 15px} /* El archivo de terminados va apagado: está ahí para consultarlo, no para competir con lo que sigue en marcha. */ .pgrupo--arch{margin-top:18px;opacity:.72;transition:opacity .2s} .pgrupo--arch:hover,.pgrupo--arch[open]{opacity:1} .pgrupo--arch .pintro{margin-bottom:14px} .pgrupo[open] .pdatos{animation:pgAbre .22s ease} @keyframes pgAbre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .pdatos{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px} .pdato{background:var(--sutil);border:1px solid var(--pista); border-radius:11px;padding:10px 13px;transition:.2s} .pdato:hover{background:var(--pista);border-color:rgba(139,92,246,.3)} .pdato dt{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase; color:var(--faint);margin-bottom:5px} .pdato dd{margin:0;font-size:.9rem;font-weight:500;overflow-wrap:break-word;line-height:1.45} .pdato dd a{color:var(--blue);text-decoration:none} .pdato dd a:hover{text-decoration:underline} .pnotasf{font-size:.88rem;color:var(--muted);line-height:1.7;margin:0;white-space:pre-line; background:var(--sutil);border:1px solid var(--pista); border-radius:11px;padding:13px 15px} .pextra{margin-top:16px;display:flex;flex-direction:column;gap:6px} .pextra textarea{width:100%;padding:10px 13px;border-radius:11px;border:1px solid var(--border); background:var(--campo);color:var(--text);font-family:inherit;font-size:.85rem; line-height:1.5;resize:vertical} .pextra textarea:focus{outline:0;border-color:var(--purple)} .pextra code{background:var(--sutil-2);padding:1px 6px;border-radius:5px} /* ---------- Pendientes ---------- */ .ppend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px} .ppend li{display:flex;align-items:center;gap:12px;padding-bottom:10px; border-bottom:1px solid var(--linea)} .ppend li:last-child{border-bottom:0;padding-bottom:0} .ppend li > div{flex:1;min-width:0} .ppend b{font-size:.88rem;display:block} .ppend small{display:block;font-size:.78rem;color:var(--faint);margin-top:2px} /* ---------- Línea de tiempo ---------- */ .ptimeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0} .ptl{display:flex;gap:14px;align-items:flex-start;padding:14px 0; border-bottom:1px solid var(--linea);position:relative} .ptl:last-child{border-bottom:0} .ptl.is-pend{background:linear-gradient(90deg,rgba(251,191,36,.06),transparent 60%)} .ptl__f{flex:0 0 96px;text-align:right} .ptl__f b{display:block;font-size:.79rem;font-variant-numeric:tabular-nums} .ptl__f small{display:block;font-size:.72rem;color:var(--faint);margin-top:2px} .ptl__c{flex:1;min-width:0;border-left:2px solid var(--border);padding-left:14px} .ptl.is-pend .ptl__c{border-left-color:var(--aviso)} .ptl__cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .ptl__cab b{font-size:.9rem} .ptl__c p{font-size:.85rem;color:var(--muted);margin:6px 0 0;line-height:1.6;white-space:pre-line} .ptl__c > a{font-size:.8rem;color:var(--purple);text-decoration:none;display:inline-block;margin-top:6px} .ptl__c > small{display:block;margin-top:7px} .ptl > .pbtn{flex:0 0 auto;opacity:0;transition:.2s} .ptl:hover > .pbtn{opacity:1} /* ---------- Móvil ---------- */ @media (max-width:760px){ .pcols{grid-template-columns:1fr} .pfase{flex-wrap:wrap} .pfase .pbarwrap{flex:1 1 100%} .proas,.pimpacto{gap:16px;padding:18px} .proas__n span{font-size:2.1rem} .pkpis{grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:9px} .pkpi{padding:12px 14px} .pkpi__v{font-size:1.22rem} .ppieza__mini{flex-basis:60px;height:80px} .pmodal{padding:0} .pmodal__caja{width:100%;min-height:100vh;border-radius:0;border:0} .pmodal__cab{border-radius:0} .palta b{min-width:100%} .pcab h2{flex-basis:100%} } /* ============================================================ ============================================================ AIRE Y CLARIDAD ------------------------------------------------------------ Esta parte va la ÚLTIMA a propósito: son ajustes que pisan a lo de arriba. La idea es la de las apps de banco buenas — fondo gris muy claro, tarjetas blancas flotando encima, sin bordes, con mucho espacio entre bloques y un único color de marca usado con cuentagotas. El bloque anterior sigue mandando en los detalles; aquí solo se cambian el color de fondo, la separación y las esquinas. Nada de esto llega a la web pública: la portada no carga panel.css. ============================================================ ============================================================ */ /* ------------------------------------------------------------ 1 · LOS DIBUJOS (NX.ico) Un icono ocupa 1,15 veces la letra que tiene al lado. Así crece y mengua con el texto en vez de quedarse fijo, que es lo que hacía que en móvil se vieran desproporcionados. ------------------------------------------------------------ */ .nxi{ width:1.15em;height:1.15em;flex:0 0 auto; vertical-align:-.2em; } .nxi--llena{color:var(--aviso)} .pestrellas{display:inline-flex;gap:2px;align-items:center;color:var(--faint)} /* La pastilla de color de las tarjetas grandes. Es el equivalente al círculo con el icono dentro de las apps de banco: da un punto de color y separa el dibujo del título. */ .pico{ display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;flex:0 0 auto;border-radius:13px; background:var(--grad-soft);color:var(--purple); transition:background .25s,color .25s,transform .25s; } .pico .nxi{width:21px;height:21px;vertical-align:0} .pcard:hover .pico{transform:scale(1.06)} /* Sitios donde el icono era un emoji suelto y mandaba el font-size */ .parch__i{font-size:inherit;color:var(--faint);display:inline-flex} .parch__i .nxi{width:22px;height:22px} .ppieza__mini .nxi{width:26px;height:26px;color:var(--faint)} .palerta > span{display:inline-flex;align-items:center} .palerta > span .nxi{width:20px;height:20px} /* ------------------------------------------------------------ 2 · EL FONDO Gris muy claro y NEUTRO. Antes tiraba a lila y, con las tarjetas blancas encima, el blanco parecía sucio. ------------------------------------------------------------ */ :root{ --sombra-card:0 1px 2px rgba(0,0,0,.32); --sombra-card-alta:0 14px 40px rgba(0,0,0,.45); } :root[data-tema="claro"]{ --bg:#f2f2f5; --bg-3:#e9e9ef; --card-hover:#fbfbfd; --linea:rgba(24,18,49,.07); --sombra-card:0 1px 2px rgba(24,18,49,.05),0 10px 28px rgba(24,18,49,.055); --sombra-card-alta:0 2px 4px rgba(24,18,49,.06),0 18px 44px rgba(24,18,49,.1); } /* En modo oscuro la tarjeta tiene que ser una superficie SÓLIDA, no un velo translúcido: apiladas unas sobre otras, los velos se suman y cada tarjeta acaba de un gris distinto. */ :root:not([data-tema="claro"]) .papp .pcard, :root:not([data-tema="claro"]) .papp .pwrap, :root:not([data-tema="claro"]) .papp .pkpi{background:var(--bg-2)} /* ------------------------------------------------------------ 3 · LAS TARJETAS Sin borde: se separan del fondo por la sombra, como una hoja de papel encima de la mesa. Borde y sombra a la vez es lo que daba ese aire de plantilla vieja. ------------------------------------------------------------ */ .papp .pcard, .papp .pwrap, .papp .pkpi{ border:0; border-radius:20px; box-shadow:var(--sombra-card); } .papp .pcard{padding:20px} .papp .pcard:hover{ transform:translateY(-2px); box-shadow:var(--sombra-card-alta); } .papp .pkpi:hover{transform:none;box-shadow:var(--sombra-card-alta)} .papp .pkpi--ok{box-shadow:var(--sombra-card),inset 3px 0 0 var(--ok)} .papp .pkpi--mal{box-shadow:var(--sombra-card),inset 3px 0 0 var(--mal)} /* El título de una tarjeta, con su pastilla de icono al lado */ .papp .pcard h3{ font-family:var(--font-display);font-size:1.02rem;font-weight:600; gap:12px;margin-bottom:10px;line-height:1.3; } .papp .pcard p{font-size:.87rem;line-height:1.6} /* ------------------------------------------------------------ 4 · LOS TÍTULOS DE SECCIÓN Grandes y en el color del texto, no en gris. Es lo que hace que se lea de un vistazo dónde empieza cada bloque, sin necesidad de rayas ni cajas. ------------------------------------------------------------ */ .papp .psection{margin-bottom:42px} .papp .psection > h2{ font-family:var(--font-display); font-size:1.32rem;font-weight:600;letter-spacing:-.01em; color:var(--text);margin-bottom:16px;gap:11px; } .papp .psection > h2 small{font-size:.8rem;color:var(--faint)} .papp .psection > h2 .nxi{color:var(--purple)} .papp__head{margin-bottom:30px} .papp__head h1{font-family:var(--font-display);letter-spacing:-.015em} /* ------------------------------------------------------------ 5 · TABLAS Sin líneas verticales. Las filas se separan solo por una línea finísima, y la última no lleva ninguna. ------------------------------------------------------------ */ .papp .ptable th{ border-bottom:1px solid var(--linea); background:transparent;font-size:.68rem; } .papp .ptable td{border-bottom:1px solid var(--linea);padding:14px} .papp .ptable tr:last-child td{border-bottom:0} .papp .ptable td b{font-weight:600} /* ------------------------------------------------------------ 6 · BOTONES Pastilla entera, como el botón grande de cualquier app de banco. Y con altura de dedo: 38px mínimo. ------------------------------------------------------------ */ .papp .pbtn,.pcab .pbtn,.pmodal .pbtn{ display:inline-flex;align-items:center;gap:7px; padding:9px 16px;border-radius:999px;min-height:38px; border-color:transparent;background:var(--sutil-2); } .papp .pbtn:hover,.pcab .pbtn:hover,.pmodal .pbtn:hover{ border-color:transparent;background:var(--bg-3);color:var(--text); } .papp .pbtn .nxi,.pcab .pbtn .nxi,.pmodal .pbtn .nxi{width:16px;height:16px} .papp .pbtn--danger{background:rgba(248,113,113,.1)} .papp .pbtn--ok{background:rgba(74,222,128,.12)} /* El botón principal pierde el destello que le cruza por encima: en una herramienta que se usa ocho horas, ese brillo cansa. */ .papp .btn--solid::before,.pmodal .btn--solid::before{display:none} .papp .btn--solid:hover,.pmodal .btn--solid:hover{transform:translateY(-1px)} .papp .btn--sm{padding:11px 22px} /* ------------------------------------------------------------ 7 · CHIPS ------------------------------------------------------------ */ .papp .pchip{ display:inline-flex;align-items:center;gap:5px; padding:4px 11px;background:var(--sutil-2);color:var(--muted); } .papp .pchip .nxi{width:13px;height:13px} /* ------------------------------------------------------------ 8 · LA BARRA DE ARRIBA ------------------------------------------------------------ */ .pvolverweb{display:inline-flex;align-items:center;gap:7px} .pvolverweb .nxi{width:15px;height:15px} .ptema .nxi{width:18px;height:18px;vertical-align:0} .patras .nxi{width:17px;height:17px} /* ------------------------------------------------------------ 9 · EL BUSCADOR ------------------------------------------------------------ */ .papp .pbuscador input{border-radius:999px;border-color:transparent;box-shadow:var(--sombra-card)} /* En oscuro, «sin borde y con sombra» dejaba el buscador INVISIBLE: la caja se pintaba con --campo, que es el mismo negro del fondo al 50%, sin borde y con una sombra negra sobre negro. Solo se veía el texto gris flotando, y parecía que no había buscador. Es el mismo problema que las tarjetas unas secciones más arriba: en oscuro hace falta una superficie sólida y un borde que se vea. En claro se queda como estaba, que ahí la pastilla blanca sobre gris con sombra sí se distingue (es el aire de imagin). */ :root:not([data-tema="claro"]) .papp .pbuscador input{ background:var(--bg-2);border-color:var(--border)} /* ------------------------------------------------------------ 10 · MÓVIL Es donde más se nota. Menos margen lateral perdido, esquinas algo menos redondas (a lo ancho de la pantalla, 20px parecen demasiados) y hueco abajo para la barra de destinos. ------------------------------------------------------------ */ @media (max-width:760px){ .papp{padding-bottom:calc(74px + env(safe-area-inset-bottom))} .papp .container{width:100%;padding-inline:16px} .papp .pcard,.papp .pwrap,.papp .pkpi{border-radius:17px} .papp .psection{margin-bottom:32px} .papp .psection > h2{font-size:1.18rem} .papp .pcard h3{font-size:.97rem} .pico{width:38px;height:38px;border-radius:12px} .pico .nxi{width:19px;height:19px} } /* ------------------------------------------------------------ 11 · BARRA DE DESTINOS (solo móvil) Los sitios a los que de verdad vas, siempre abajo y siempre en el mismo orden, al alcance del pulgar. En ordenador no aparece: allí ya tienes la portada entera a la vista. ------------------------------------------------------------ */ .pnavbaja{display:none} @media (max-width:760px){ .pnavbaja{ display:flex;position:fixed;inset:auto 0 0 0;z-index:900; background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-top:1px solid var(--linea); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); } .pnavbaja a{ flex:1;display:flex;flex-direction:column;align-items:center;gap:3px; padding:6px 2px;color:var(--faint);text-decoration:none; font-size:.66rem;font-weight:500; transition:color .2s; } .pnavbaja a .nxi{width:22px;height:22px;vertical-align:0} .pnavbaja a.is-aqui{color:var(--purple);font-weight:600} .pnavbaja a.is-aqui .nxi{stroke-width:2} /* Mientras se previsualiza a otro usuario ya hay una banda fija abajo; las dos juntas taparían media pantalla. */ body.es-preview .pnavbaja{display:none} } /* ------------------------------------------------------------ 12 · REMATES ------------------------------------------------------------ */ /* La cabecera de pantalla solo se pinta cuando de verdad está pegada arriba. Antes llevaba el fondo puesto siempre y, sobre el gris del panel, se veía una banda blanca suelta detrás del título aunque la página estuviera arriba del todo. */ .pcab{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none} .pcab.is-pegada{ background:var(--nav-bg); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); } .papp .pcab h2{font-family:var(--font-display);font-size:clamp(1.3rem,4vw,1.8rem);letter-spacing:-.015em} /* La pastilla de estado tenía el relleno declarado solo para cuando va dentro de una tarjeta. Suelta, en un título, salía pegada al texto y parecía un subrayado de rotulador. */ .papp .estado{ display:inline-flex;align-items:center; padding:4px 12px;border-radius:999px; font-size:.72rem;font-weight:600;letter-spacing:.01em; vertical-align:middle; } /* Las pestañas pasan de subrayado a pastillas dentro de una bandeja gris. Es lo mismo que hace el selector de cualquier app de banco y en el móvil se acierta mucho mejor con el dedo: el destino es toda la pastilla, no una línea de 2 píxeles. */ .papp .ptabs,.ptabs{ border-bottom:0;gap:2px;padding:4px; background:var(--sutil-2);border-radius:999px; width:max-content;max-width:100%; } .ptab{ border-bottom:0;border-radius:999px;padding:9px 17px; display:inline-flex;align-items:center;gap:8px;font-weight:500; } .ptab.is-sel{ border-bottom-color:transparent; background:var(--card);color:var(--text);font-weight:600; box-shadow:0 1px 3px rgba(24,18,49,.1); } :root:not([data-tema="claro"]) .ptab.is-sel{background:var(--bg-2);box-shadow:0 1px 3px rgba(0,0,0,.4)} .ptab .nxi{width:17px;height:17px;vertical-align:0} .ptab__b{background:var(--sutil-2)} /* La rejilla de tarjetas respira un poco más */ .papp .pgrid{gap:14px;margin-bottom:0} .papp .pkpis{gap:12px;margin-bottom:28px} /* La cabecera pegada vive dentro del contenedor, que tiene 16px de margen a cada lado. Al quedarse pegada, el contenido seguía pasando por esos dos huecos y se veía asomar por debajo. Se le estira el fondo hasta el borde de la pantalla. */ .papp .pcab{margin-inline:-16px;padding-inline:16px} @media (min-width:761px){.papp .pcab{margin-inline:0;padding-inline:0}} /* El distintivo de rol era una pastilla con degradado y borde morado: para un dato que solo dice "eres admin", demasiado ruido. Ahora es gris y solo se enciende en la vista previa, que sí conviene que llame la atención. */ .papp__rol{ border-color:transparent;background:var(--sutil-2); color:var(--muted);font-size:.68rem; } .papp__rol.is-preview{background:var(--grad);color:#fff} /* La coletilla del título de sección se baja a su propia línea en el móvil: al lado del título partía las dos en dos trozos. */ @media (max-width:760px){ .papp .psection > h2{flex-wrap:wrap;gap:4px 11px} .papp .psection > h2 small{flex-basis:100%} } /* En el móvil, «Volver a la web» partía en dos líneas y descuadraba toda la barra. Se queda solo la flecha, igual que el botón de atrás: el sitio al que lleva se sigue entendiendo. */ @media (max-width:760px){ .pvolverweb span{ position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap; } .pvolverweb{ width:38px;height:38px;justify-content:center;padding:0;border-radius:999px; } .pvolverweb::after{display:none} .nav__links{gap:2px} } /* ------------------------------------------------------------ 13 · ENTRAR CON GOOGLE / GITHUB Botones blancos y sobrios, que es como los espera todo el mundo. Google pide expresamente que su botón lleve su logo a color sobre fondo claro y no se le cambie el dibujo, así que ese va tal cual; el de GitHub coge el color del texto y se adapta solo al modo oscuro. ------------------------------------------------------------ */ .pauthsoc{display:flex;flex-direction:column;gap:10px;margin:0 0 6px} .pauthsoc[hidden]{display:none} .pauthsoc__b{ display:flex;align-items:center;justify-content:center;gap:11px; width:100%;min-height:48px;padding:12px 18px; border:1px solid var(--border);border-radius:999px; background:var(--card);color:var(--text); font-family:var(--font-body);font-size:.94rem;font-weight:600; cursor:pointer;transition:border-color .2s,background .2s,transform .2s; } .pauthsoc__b:hover{border-color:var(--purple);background:var(--card-hover);transform:translateY(-1px)} .pauthsoc__b:active{transform:none} .pauthsoc__b svg{width:19px;height:19px;flex:0 0 auto} /* En modo claro la tarjeta ya es blanca; se le da un blanco puro y una sombrita para que el botón no se funda con el fondo de la ficha. */ :root[data-tema="claro"] .pauthsoc__b{background:#fff;box-shadow:0 1px 2px rgba(24,18,49,.06)} .pauthsoc__pie{ font-size:.76rem;color:var(--faint);line-height:1.5;text-align:center;margin:2px 0 0; } /* La rayita con el "o con tu email" en medio */ .pauthsoc__o{display:flex;align-items:center;gap:12px;margin:8px 0 2px} .pauthsoc__o::before,.pauthsoc__o::after{ content:"";flex:1;height:1px;background:var(--border); } .pauthsoc__o span{ font-size:.74rem;color:var(--faint);text-transform:uppercase;letter-spacing:.09em; } @media (max-width:480px){ .pauthsoc__b{font-size:.88rem;padding:12px 14px} } /* Un aviso vacío seguía ocupando su línea y su margen, así que entre "o con tu email" y el formulario quedaba un hueco de la nada. */ .auth__msg:empty{display:none} /* La letra pequeña que explica qué contraseña vale. Va debajo del campo y no dentro del recuadro amarillo de aviso: aquello es para advertir, esto solo son las reglas. */ .auth__ayuda{ display:block;margin:8px 0 14px; font-size:.78rem;color:var(--faint);line-height:1.5; } /* ------------------------------------------------------------ 14 · EL COLOR DE CADA ROL ------------------------------------------------------------ Los colores por rol ya existían en style.css, pero la regla `.papp .pchip` del bloque de arriba los pisaba a todos y los dejaba grises: en una lista de usuarios había que leer la palabra para saber quién era quién. Van aquí, DESPUÉS, y con la misma fuerza (`.papp .pchip--x`), para que ganen. El color no es decoración: es lo que te deja localizar un cliente entre trabajadores sin leer. verde cliente morado equipo degradado administrador azul lead (todavía no es cliente) Cada uno lleva un aro finísimo de su propio color. Sobre las tarjetas blancas del panel, un fondo tan claro solo no se distingue del papel; el aro le da el borde justo. ------------------------------------------------------------ */ .papp .pchip--cliente, .pmodal .pchip--cliente{ background:rgba(74,222,128,.16);color:var(--ok); box-shadow:inset 0 0 0 1px rgba(74,222,128,.34); } .papp .pchip--equipo, .pmodal .pchip--equipo{ background:rgba(139,92,246,.18);color:var(--lila); box-shadow:inset 0 0 0 1px rgba(139,92,246,.36); } .papp .pchip--lead, .pmodal .pchip--lead{ background:rgba(56,189,248,.16);color:var(--info); box-shadow:inset 0 0 0 1px rgba(56,189,248,.34); } /* El administrador va con el degradado de marca y texto blanco: es el único rol que lo puede todo, así que se ve desde lejos. */ .papp .pchip--admin, .pmodal .pchip--admin{ background:var(--grad);color:#fff;box-shadow:none; } /* En modo claro los verdes y azules del tema oscuro se apagan sobre blanco, así que el texto tira a oscuro y el fondo se aclara. Los tonos salen de las variables, que ya cambian solas. */ :root[data-tema="claro"] .papp .pchip--cliente{background:rgba(21,128,61,.1)} :root[data-tema="claro"] .papp .pchip--equipo{background:rgba(109,40,217,.1)} :root[data-tema="claro"] .papp .pchip--lead{background:rgba(3,105,161,.1)} /* Las tablas de usuarios y de clientes tienen la columna del rol estrecha; sin esto el chip parte en dos líneas. */ .papp .ptable .pchip{white-space:nowrap} /* ---- Estado de la relación con el cliente ---- Paleta propia, separada de la de los roles: el color dice cómo va la relación, no quién es la persona. Ver RELACION en vistas/admin-clientes.js. */ .papp .pchip--info{ background:rgba(56,189,248,.16);color:var(--info); box-shadow:inset 0 0 0 1px rgba(56,189,248,.34); } .papp .pchip--aviso{ background:rgba(251,191,36,.18);color:var(--aviso); box-shadow:inset 0 0 0 1px rgba(251,191,36,.38); } .papp .pchip--mal{ background:rgba(248,113,113,.16);color:var(--mal); box-shadow:inset 0 0 0 1px rgba(248,113,113,.34); } .papp .pchip--gris{ background:var(--sutil-2);color:var(--faint); box-shadow:inset 0 0 0 1px var(--border); } :root[data-tema="claro"] .papp .pchip--info{background:rgba(3,105,161,.1)} :root[data-tema="claro"] .papp .pchip--aviso{background:rgba(161,98,7,.11)} :root[data-tema="claro"] .papp .pchip--mal{background:rgba(185,28,28,.1)} /* ---- Empresa ---- No es un rol, es otra clase de fila: no es una persona. Va en NARANJA por descarte razonado: en esa misma columna conviven el degradado del admin, el morado del equipo, el verde del cliente y el azul del lead. El naranja es el único cálido de todo el conjunto, así que no se confunde con ninguno ni a media pantalla de distancia. En gris se perdía justo con lo que más interesa distinguir. */ .papp .pchip--empresa{ background:rgba(249,115,22,.18);color:#fb923c;font-weight:600; box-shadow:inset 0 0 0 1px rgba(249,115,22,.42); } :root[data-tema="claro"] .papp .pchip--empresa{ background:rgba(194,65,12,.11);color:#c2410c; box-shadow:inset 0 0 0 1px rgba(194,65,12,.3); } .papp .pchip--empresa .nxi{color:currentColor;opacity:.85} /* ============================================================ 14. ORDEN DE LAS PIEZAS Y RESUMEN DE GESTION ============================================================ */ .pordena { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .pordena__t { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-right: 2px; } .papp .pbtn--on { background: rgba(139, 92, 246, .14); border-color: var(--purple); color: var(--purple); font-weight: 600; } .ptop { margin-top: 18px; } .ptop ol { list-style: none; margin: 8px 0 0; padding: 0; } .ptop li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-top: 1px solid var(--linea); } .ptop li b { min-width: 52px; font-variant-numeric: tabular-nums; } .ptop li span { flex: 1; } /* Packs plegables en la lista de piezas */ .ppack { margin: 0 0 14px; border-top: 1px solid var(--linea); } .ppack__cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 2px; cursor: pointer; list-style: none; } .ppack__cab::-webkit-details-marker { display: none; } .ppack__cab::before { content: ""; width: 7px; height: 7px; flex: none; border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint); transform: rotate(-45deg); transition: transform .18s ease; } .ppack[open] > .ppack__cab::before { transform: rotate(45deg); } .ppack__n { font-weight: 650; font-size: 1.02rem; } .ppack__c { padding: 2px 0 10px; } /* Carpetas del historial */ .pcarpeta { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .pcarpeta:hover { transform: translateY(-2px); } .pcarpeta__n { display: flex; gap: 16px; margin: 10px 0 4px; font-size: .92rem; } .pcarpeta__n span { display: inline-flex; align-items: center; gap: 5px; } .pcarpeta__abrir { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: .88rem; font-weight: 600; color: var(--purple); } /* ============================================================ 15. AGENDA ============================================================ */ .pcal { margin: 0 0 22px; } .pcal__cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .pcal__cab b { font-size: 1.05rem; min-width: 170px; text-transform: capitalize; } .pcal__dias, .pcal__rej { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .pcal__dias { margin-bottom: 6px; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); text-align: center; } .pdia { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 74px; padding: 8px; border: 1px solid var(--linea); border-radius: 12px; background: var(--card); cursor: pointer; font: inherit; color: inherit; text-align: left; transition: border-color .15s ease, background .15s ease; } .pdia:hover { background: var(--card-hover); } .pdia--fuera { opacity: .38; } .pdia--hoy { border-color: var(--purple); } .pdia--sel { background: var(--sutil-2); border-color: var(--purple); } .pdia__n { font-weight: 600; font-size: .9rem; } .pdia__c { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .pdia__mas { font-size: .7rem; color: var(--faint); } .pmarca { display: inline-block; width: 100%; max-width: 26px; height: 6px; border-radius: 3px; background: var(--gris); } i.pmarca { flex: 0 0 18px; width: 18px; max-width: 18px; } /* El color lo manda el ESTADO: verde va, rojo no va. Solo mientras nadie ha contestado dice de quién es, que es cuando importa saberlo. */ .pmarca--si { background: var(--ok); } .pmarca--hecho { background: var(--ok); opacity: .55; } .pmarca--no { background: var(--mal); } .pmarca--david { background: #d926a9; } .pmarca--equipo { background: #8e2f74; } .pmarca--cliente { background: #2563eb; } .pmarca--ocupado { background: var(--gris); } /* Rayado: para no depender solo del color. */ .pmarca--rayada { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.55) 0 2px, transparent 2px 4px); } .pcal__ley { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: .78rem; color: var(--faint); } .pcal__ley span { display: inline-flex; align-items: center; gap: 6px; } .pcal__ley__sep { padding-left: 14px; border-left: 1px solid var(--linea); font-weight: 600; } /* Leyenda y botones en la misma línea: cada renglón que se ahorra es un renglón menos que baja el calendario por debajo de la pantalla. */ .pcal__pie { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; } .pcal__pie .pcal__ley { margin-top: 0; } .pcal__acc { display: flex; gap: 8px; margin-left: auto; } .pcal__pista { margin: 6px 0 0; font-size: .76rem; } /* Interruptor "Sesión / No puedo" de la ventana de poner algo. El estado encendido se repite aquí porque el .pbtn--on de arriba pide estar dentro de .papp, y los modales cuelgan del body. */ .pseg { display: inline-flex; gap: 6px; margin: 0 0 16px; } .pmodal .pbtn--on { background: rgba(139, 92, 246, .14); border-color: var(--purple); color: var(--purple); font-weight: 600; } @media (max-width: 700px) { .pcal__acc { margin-left: 0; } } .pagenda { list-style: none; margin: 0; padding: 0; } .pagenda__i { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--linea); } .pagenda__h { font-variant-numeric: tabular-nums; font-size: .86rem; color: var(--faint); min-width: 92px; } .pagenda__t { flex: 1; display: flex; flex-direction: column; gap: 2px; } .pagenda__i--ocupado .pagenda__t b { color: var(--faint); font-weight: 500; } /* Misma lectura que en el calendario: el color dice de quién es. */ .pagenda__i--si, .pagenda__i--hecho, .pagenda__i--no, .pagenda__i--david, .pagenda__i--equipo, .pagenda__i--cliente, .pagenda__i--ocupado { padding-left: 12px; } .pagenda__i--si { box-shadow: inset 3px 0 0 var(--ok); } .pagenda__i--hecho { box-shadow: inset 3px 0 0 var(--ok); } .pagenda__i--no { box-shadow: inset 3px 0 0 var(--mal); } .pagenda__i--david { box-shadow: inset 3px 0 0 #d926a9; } .pagenda__i--equipo { box-shadow: inset 3px 0 0 #8e2f74; } .pagenda__i--cliente { box-shadow: inset 3px 0 0 #2563eb; } .pagenda__i--ocupado { box-shadow: inset 3px 0 0 var(--gris); } /* La pastilla de estado dentro de la ficha. */ .pestado { display: inline-block; margin: 0 0 14px; padding: 4px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #fff; background: var(--gris); } .pestado--si { background: var(--ok); } .pestado--hecho { background: var(--ok); opacity: .7; } .pestado--no { background: var(--mal); } .pestado--david { background: #d926a9; } .pestado--equipo { background: #8e2f74; } .pestado--cliente { background: #2563eb; } @media (max-width: 700px) { .pdia { min-height: 58px; padding: 6px; } .pcal__cab b { min-width: 0; flex: 1; } .pagenda__h { min-width: 74px; } } /* Vista semanal de la agenda */ .pcal__modo { display: inline-flex; gap: 4px; margin-left: auto; } /* Sigue pudiendo arrastrarse en pantallas estrechas, pero sin barra: la rejilla ya se ve cortada y se entiende sola. */ .psem { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .psem::-webkit-scrollbar { display: none; } .psem__horas { position: relative; flex: none; width: 52px; border-right: 1px solid var(--linea); margin-top: 46px; } .psem__h { position: absolute; right: 8px; transform: translateY(-50%); font-size: .72rem; color: var(--faint); font-variant-numeric: tabular-nums; } .psem__cols { display: grid; grid-template-columns: repeat(7, minmax(96px, 1fr)); gap: 6px; flex: 1; } .psem__col { display: flex; flex-direction: column; } .psem__cab { display: flex; flex-direction: column; align-items: center; gap: 2px; height: 46px; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; } .psem__cab span { font-size: .7rem; text-transform: uppercase; color: var(--faint); } .psem__cab b { font-size: 1rem; } .psem__cab--sel b { color: var(--purple); } .psem__col--hoy .psem__cab b { background: var(--purple); color: #fff; border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; } .psem__cuerpo { position: relative; border: 1px solid var(--linea); border-radius: 10px; /* El alto de cada hora lo calcula el JS según la pantalla, así que las rayas del fondo lo leen de la variable en vez de fijarlo. */ background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--altoh, 46px) - 1px), var(--linea) calc(var(--altoh, 46px) - 1px) var(--altoh, 46px)); cursor: crosshair; } .psem__b { position: absolute; overflow: hidden; text-align: left; border: 0; border-radius: 7px; padding: 4px 6px; cursor: pointer; font: inherit; color: #fff; line-height: 1.15; /* Los botones centran su contenido por defecto y aqui el texto tiene que empezar arriba, a la altura de su hora. */ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; /* Sobre el rayado, el texto solo se lee con algo de sombra. */ text-shadow: 0 1px 2px rgba(0,0,0,.45); } .psem__b b { display: block; font-size: .74rem; font-weight: 600; } .psem__b small { font-size: .66rem; opacity: .85; } .psem__b--si { background: var(--ok); } .psem__b--hecho { background: var(--ok); opacity: .6; } .psem__b--no { background: var(--mal); } .psem__b--david { background: #d926a9; } .psem__b--equipo { background: #8e2f74; } .psem__b--cliente { background: #2563eb; } .psem__b--ocupado { background: var(--gris); } .psem__b--rayada { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.45) 0 3px, transparent 3px 7px); } /* Una propuesta todavía no es un plan: se ve más floja y con el borde de puntos, como un dibujo a lápiz al lado de uno a tinta. El color sigue diciendo de quién es. */ /* Sin contestar: borde de puntos, como un dibujo a lápiz al lado de uno a tinta. Va con el color del autor, no lo sustituye. */ .psem__b--david, .psem__b--equipo, .psem__b--cliente { outline: 2px dashed var(--card); outline-offset: -3px; } /* Fuera del horario de trabajo: ni se ofrece ni se pide. */ .psem__cerrado { position: absolute; left: 0; right: 0; background: var(--sutil-2); border-radius: 6px; pointer-events: none; } @media (max-width: 700px) { .psem__cols { grid-template-columns: repeat(7, 86px); } } /* Acceso a la agenda desde la portada del cliente */ .pacciones--arriba { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; } /* ============================================================ 16. EL MENÚ DE LAS TRES RAYITAS ------------------------------------------------------------ Donde va lo que se usa de vez en cuando. Nació por el botón de instalar: al administrador le vale tenerlo a la vista, pero a un cliente que ya la tiene instalada se le quedaría ahí clavado un botón inútil, y eso hace que una web parezca a medio hacer. ============================================================ */ .pmenu{position:relative;display:inline-flex} .pmenu__btn{ display:inline-grid;place-items:center;width:38px;height:38px; border:1px solid var(--border);border-radius:11px;background:var(--boton); color:var(--muted);cursor:pointer;transition:color .2s,border-color .2s,background .2s} .pmenu__btn:hover{color:var(--text);border-color:var(--purple);background:var(--card)} .pmenu__caja{ position:absolute;top:calc(100% + 8px);right:0;z-index:80; min-width:232px;padding:6px; background:var(--bg-2);border:1px solid var(--border);border-radius:14px; box-shadow:var(--sombra); display:flex;flex-direction:column;gap:2px} .pmenu__item{ display:flex;align-items:center;gap:10px;width:100%; padding:10px 12px;border:0;border-radius:10px;background:none; font:inherit;font-size:.88rem;color:var(--text);text-align:left; text-decoration:none;cursor:pointer;transition:background .15s} .pmenu__item:hover{background:var(--sutil-2)} /* Cerrar sesión, la última y con una raya encima: no es del mismo grupo que lo demás y no conviene pulsarla sin querer. */ .pmenu__item--salir{margin-top:4px;border-top:1px solid var(--linea);border-radius:0 0 10px 10px;color:var(--muted)} .pmenu__item--salir:hover{color:var(--mal)} .pmenu__tit{display:block;padding:8px 12px 6px;font-size:.7rem;letter-spacing:.08em; text-transform:uppercase;color:var(--faint)} /* Un display: en una regla propia PISA al "hidden" del HTML, que solo es display:none del navegador. Sin estas tres lineas el menu salia siempre abierto y pulsar las rayitas no hacia nada. Le pasa lo mismo a .patras y a .pauthsoc, que ya lo llevan resuelto asi. */ .pmenu[hidden], .pmenu__caja[hidden], .pmenu__item[hidden]{display:none} /* Y lo mismo para cualquier boton de la barra que nazca oculto: .btn trae su propio display y tapaba al "hidden". Es la razon por la que el boton de instalar salia siempre, se pudiera instalar o no. */ .btn[hidden]{display:none} .pmenu__item .nxi{width:18px;height:18px;flex:0 0 18px;color:var(--muted)} /* Los pasos del iPhone dentro de la ventana. */ .ppasos-lista{margin:0;padding-left:20px;line-height:1.7;font-size:.9rem} .ppasos-lista li{margin-bottom:8px} @media (max-width:600px){ .pmenu__caja{min-width:0;width:min(78vw,270px)} } /* ============================================================ COCINA — lo poco que el módulo necesita y no existía ya ------------------------------------------------------------ Casi todo (tablas, pestañas, indicadores, pastillas) es lo mismo que usan los otros cinco módulos. Aquí solo van las cuatro piezas que no tenían clase: el nombre de un plato que se puede pulsar, el aviso rojo de una línea de receta mal puesta, la fila apagada de algo que ya no se usa y la cabecera del módulo. ============================================================ */ /* Un texto que se pulsa y NO es un botón con marco. Se usa para el nombre de cada plato: en una tabla, un botón de verdad en cada fila convierte la carta en una pared de cajas grises. */ .papp .plink{ padding:0;border:0;background:none;font:inherit;color:var(--text); text-align:left;cursor:pointer; border-bottom:1px solid transparent;transition:color .18s,border-color .18s} .papp .plink:hover{color:var(--purple);border-bottom-color:var(--purple)} /* El aviso de que una línea de receta no cuadra. Va en rojo a propósito: esa línea está contando como 0 € y el plato parece más barato de lo que es, que es el único error de este módulo que engaña de verdad. */ .papp .pmal{color:var(--mal)} /* Lo que ya no se usa: se ve, pero apagado. Borrarlo perdería el histórico de precios y las recetas que lo llevaban. */ .papp tr.is-off{opacity:.5} .papp tr.is-off td b{font-weight:500} /* Cabecera del módulo dentro del panel del servicio. OJO con `position:static`: esta caja también lleva la clase .pcab, y .pcab es PEGAJOSA. O sea que se pegaba arriba en el mismo sitio que la cabecera de la pantalla, y al bajar se montaban las dos una encima de otra: "Cocina y carta" escrito sobre "VALERTINA · objetivo 30%". Pegajosa tiene que haber una sola, y es la de arriba. */ .papp .pcab--mod{ position:static; z-index:auto; padding:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:0; display:flex;align-items:center;justify-content:space-between;gap:16px; flex-wrap:wrap;margin:0 0 4px} .papp .pcab--mod h3{margin:0;font-size:1.05rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .papp .pcab--mod h3 small{font-weight:400} /* ---------- Alérgenos ---------- Las etiquetas de alérgeno se leen en fila y muchas veces seguidas, así que van más apretadas que un chip normal y sin icono: en un plato con cinco, los iconos convierten la celda en un mosaico ilegible. Tres estados y tres colores, y no es decoración: neutro -> lo lleva verde -> revisado y NO lo lleva ámbar -> falta revisar, que no es lo mismo que "no lleva" El ámbar es el importante. Si se pintara igual que el verde, alguien serviría un plato dando por hecho algo que nadie ha comprobado. */ .papp .palerg{ display:inline-flex;align-items:center;gap:5px; padding:3px 9px;margin:2px 0;border-radius:999px; background:var(--sutil-2);color:var(--muted); font-size:.76rem;white-space:nowrap} .papp .palerg .nxi{width:13px;height:13px} .papp .palerg--ok{background:rgba(74,222,128,.16);color:var(--ok)} .papp .palerg--falta{background:rgba(234,179,8,.18);color:var(--aviso);font-weight:600} /* Los catorce botones del filtro. Se envuelven solos: en el móvil salen en cuatro filas y en el escritorio en una o dos. */ .palerg__filtro{display:flex;flex-wrap:wrap;gap:8px} .palerg__filtro .pbtn.is-sel{ background:var(--purple);border-color:var(--purple);color:#fff} /* ---------- Pedidos a proveedores ---------- */ .ppedcab{display:flex;align-items:center;justify-content:space-between;gap:14px; flex-wrap:wrap;margin:0 0 8px} /* Campos de "cuánto llegó" y "precio del albarán", dentro de la tabla. Van estrechos a propósito: si ocuparan lo de un campo normal, la fila se partiría en dos y repasar veinte líneas sería un suplicio. */ .papp .pmini{ width:92px;padding:6px 9px;border-radius:9px;text-align:right; border:1px solid var(--border);background:var(--campo);color:var(--text); font-family:inherit;font-size:.84rem} .papp .pmini:focus{outline:0;border-color:var(--purple);background:var(--campo-foco)} /* El texto del pedido, listo para copiar */ .papp .pcopiar{ width:100%;padding:12px 14px;border-radius:11px;resize:vertical; border:1px solid var(--border);background:var(--sutil);color:var(--text); font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;line-height:1.6} /* Un campo suelto en una barra de acciones (el mes de "Qué conviene"), en línea en vez de con la etiqueta encima como en los formularios. */ .papp .pcampo--linea{ display:flex;align-items:center;gap:10px;margin:0} .papp .pcampo--linea span{font-size:.82rem;color:var(--muted)} .papp .pcampo--linea select{width:auto;min-width:150px} /* ============================================================ VARIOS NEGOCIOS EN LA MISMA CUENTA (pastillas, ya sin uso en la portada: se quedan porque el patrón sirve si algún día hace falta un cambio rápido de negocio dentro de una pantalla) ------------------------------------------------------------ Un dueño con cuatro bares entra una vez y salta de uno a otro. Va arriba del todo y con el nombre entero visible, porque es lo que contesta a "¿de cuál estoy viendo los datos?" — la pregunta que hay que poder responder de un vistazo antes de tocar nada. ============================================================ */ .papp .pempresas{margin:0 0 18px} .papp .pempresas__t{ display:block;margin-bottom:8px; font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)} .papp .pempresas__l{display:flex;flex-wrap:wrap;gap:8px} .papp .pempresa{ display:inline-flex;align-items:center;gap:8px; padding:9px 16px;border-radius:999px; border:1px solid var(--border);background:var(--bg-2); font:inherit;font-size:.86rem;font-weight:500;color:var(--muted); cursor:pointer;transition:color .18s,border-color .18s,background .18s} .papp .pempresa:hover{color:var(--text);border-color:var(--purple)} .papp .pempresa .nxi{width:16px;height:16px;opacity:.75} /* El elegido va con el degradado de la marca, no con un gris más oscuro: entre varias pastillas grises no se distingue cuál está puesta, y equivocarse de negocio aquí lo estropea todo. */ .papp .pempresa.is-sel{ background:var(--grad);border-color:transparent;color:#fff;font-weight:600} .papp .pempresa.is-sel .nxi{opacity:1} /* El de crear va con borde de puntos y sin relleno: se lee como "aquí hay un hueco por llenar" y no compite con el negocio elegido. */ .papp .pempresa--mas{ border-style:dashed;background:none;color:var(--faint)} .papp .pempresa--mas:hover{color:var(--purple);border-color:var(--purple)} .papp .pempresas__l small{align-self:center;font-size:.8rem} /* La tarjeta de cada negocio en el vestíbulo del cliente. Es lo primero que ve al entrar, así que se comporta como una carpeta: se pulsa entera y dice claramente que se entra. */ .papp .pcard--emp{cursor:pointer} .papp .pcard--emp h3{font-size:1.05rem} .papp .pcard--emp .pcard__ir{margin-top:14px;font-weight:600;color:var(--purple)} /* ============================================================ BARRA LATERAL DE HERRAMIENTAS ------------------------------------------------------------ Una tira estrecha de iconos pegada a la izquierda que se abre al pasar el raton por encima, como la de Contasimple. Se abre POR ENCIMA del contenido y no lo empuja: si al abrirse moviera la pagina, el texto que estabas leyendo saltaria de sitio cada vez que pasas el raton cerca del borde. El hueco que ocupa el contenido es siempre el de la tira cerrada. Y no lleva transicion de anchura en el hueco del cuerpo por lo mismo: lo unico que se mueve es la propia barra. ============================================================ */ /* 300 y no 236: "Pedidos a proveedores" con su etiqueta "Pronto" al lado pide unos 295 px y se salia por el borde. Ensanchar la ABIERTA no mueve nada de la pantalla, porque el hueco que se reserva al contenido es siempre el de la tira cerrada; la abierta flota por encima. Ojo: la cuenta a ojo ya fallo una vez (se puso en 276 y seguia sin caber). Por eso ademas de ensanchar, la fila de abajo esta hecha para que la etiqueta NO se pueda salir aunque el nombre crezca. */ :root{ --rail: 62px; --rail-abierto: 300px; } .prail{ position:fixed; left:0; top:0; bottom:0; z-index:120; width:var(--rail); overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:14px 0 16px; background:var(--bg-2); border-right:1px solid var(--linea); transition:width .18s ease, box-shadow .18s ease} .prail:hover, .prail:focus-within{ width:var(--rail-abierto); box-shadow:var(--sombra) } .prail__l,.prail__pie{display:flex;flex-direction:column;gap:2px;padding:0 9px} /* Cada destino. El icono se queda quieto en su sitio al abrirse la barra: si se moviera, el ojo perderia la referencia y habria que volver a buscar el que ibas a pulsar. */ .prail__i{ display:flex; align-items:center; gap:14px; width:100%; padding:11px 11px; border:0; border-radius:12px; background:none; font:inherit; font-size:.87rem; color:var(--muted); text-align:left; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .15s, color .15s} .prail__i:hover{background:var(--sutil-2); color:var(--text)} .prail__i .nxi{width:21px;height:21px;flex:0 0 21px} /* El nombre cede sitio antes que la etiqueta: min-width:0 es lo que le permite encogerse dentro del flex (sin eso empuja y desborda), y si un dia no cabe se corta con puntos suspensivos en vez de tirar la etiqueta fuera de la barra. */ .prail__i span{opacity:0; transition:opacity .15s; min-width:0; overflow:hidden; text-overflow:ellipsis} .prail:hover .prail__i span, .prail:focus-within .prail__i span{opacity:1} /* Donde estas ahora. Con la barra cerrada solo se ve el icono, asi que el color tiene que bastar para saberlo sin leer nada. */ .prail__i.is-aqui{background:var(--sutil-2); color:var(--purple); font-weight:600} .prail__i.is-aqui .nxi{stroke-width:2.1} /* Los titulillos de grupo. Con la barra cerrada no pintan nada y ademas no caben: se convierten en una rayita separadora. */ .prail__t{ display:block; margin:14px 11px 6px; height:1px; background:var(--linea); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--faint); overflow:hidden; text-indent:-999px} .prail:hover .prail__t, .prail:focus-within .prail__t{ height:auto; background:none; text-indent:0; margin-top:16px} .prail__i--mas{color:var(--faint)} .prail__i--mas:hover{color:var(--purple)} /* Lo que todavia no existe. No es un enlace apagado en gris: va con el violeta de la marca porque no es un error ni algo roto, es lo que viene. En gris se lee como "esto esta estropeado"; en rojo, peor. */ .prail__i--pronto{cursor:default; color:var(--faint)} .prail__i--pronto:hover{background:none; color:var(--faint)} .prail__i--pronto .nxi{opacity:.55} .prail__pronto{ flex:0 0 auto; /* nunca se encoge ni se parte */ margin-left:auto; padding:2px 7px; border-radius:999px; background:var(--purple); color:#fff; font-size:.56rem; font-style:normal; font-weight:700; letter-spacing:.05em; text-transform:uppercase; line-height:1.7; opacity:0; transition:opacity .15s} /* El hueco entre el nombre y la etiqueta, mas corto que el del icono: el de 14 se comia justo los pixeles que faltaban. */ .prail__i--pronto{gap:9px} .prail__i--pronto .nxi{margin-right:5px} /* Con la barra cerrada solo caben 62 px: la etiqueta no entra y taparia el icono. Aparece al abrirse, igual que los nombres. */ .prail:hover .prail__pronto, .prail:focus-within .prail__pronto{opacity:1} /* El hueco del contenido. Solo el de la tira cerrada: la barra abierta flota encima. */ body.con-rail .papp{padding-left:calc(var(--rail) + 18px)} body.con-rail .ppreview{left:var(--rail)} /* La tarjeta de cada herramienta en el catalogo */ .papp .pcard--herr h3{font-size:.98rem} .papp .pcard--herr .btn{margin-top:14px} /* En movil no hay raton que pasar por encima: la tira se va abajo y se convierte en una barra de iconos, que es lo que ahi funciona. */ @media (max-width:760px){ .prail{ left:0; right:0; top:auto; bottom:0; width:auto; height:auto; flex-direction:row; justify-content:space-between; align-items:center; padding:6px 4px calc(6px + env(safe-area-inset-bottom)); border-right:0; border-top:1px solid var(--linea); overflow-x:auto; box-shadow:0 -6px 26px rgba(0,0,0,.3)} .prail:hover,.prail:focus-within{width:auto;box-shadow:0 -6px 26px rgba(0,0,0,.3)} .prail__l,.prail__pie{flex-direction:row;padding:0;gap:2px} .prail__i{flex-direction:column;gap:4px;padding:7px 11px;font-size:.66rem} .prail__i span{opacity:1} .prail__t{display:none} /* Abajo no hay raton que pasar por encima, asi que la etiqueta se ensena siempre, pero pequena y pegada al nombre. */ .prail__pronto{opacity:1; margin:0; padding:1px 6px; font-size:.52rem} body.con-rail .papp{padding-left:0;padding-bottom:78px} body.con-rail .ppreview{left:0;bottom:70px} /* Abajo se apilan las dos: la barra de destinos (70) y la banda encima. El hueco tiene que contar con las dos o la banda tapa el contenido igual que antes, solo que mas arriba. */ body.es-preview.con-rail .papp{padding-bottom:calc(var(--banda) + 90px)} body.es-preview .prail{padding-bottom:0} } /* ============================================================ EL MAPA DE CLIENTES ------------------------------------------------------------ Los colores de los puntos van aquí y no dentro del JavaScript porque el panel tiene dos temas. mapa.js pone la clase y el color sale de estas variables, así que cambiar un verde se hace en un sitio y vale para el mapa, el chip y la leyenda. ============================================================ */ :root{ --mapa-activo:#4ade80; --mapa-negociacion:#fbbf24; --mapa-prospecto:#38bdf8; --mapa-pausado:#94a3b8; --mapa-perdido:#f87171; --mapa-antiguo:#94a3b8; --mapa-icono:invert(1) opacity(.8); } :root[data-tema="claro"]{ --mapa-activo:#15803d; --mapa-negociacion:#a16207; --mapa-prospecto:#0369a1; --mapa-pausado:#525b6b; --mapa-perdido:#b91c1c; --mapa-antiguo:#525b6b; --mapa-icono:none; } /* El fondo va en el propio .pmapa: maplibre convierte ESTE elemento en su contenedor, no crea otro dentro. Puesto en un hijo, la regla no llegaba a aplicarse y se veía un rectángulo gris mientras cargaba. */ .pmapa{ width:100%;height:100%; background:var(--bg-3); font:inherit; } /* ------------------------------------------------------------ LOS TRES TAMAÑOS ------------------------------------------------------------ mini círculo, centrado, para echar un vistazo al entrar grande banda de lado a lado full encima de todo El que cambia de forma es el marco (.pmapa__caja), no el mapa: así el mapa siempre ocupa el 100% de lo que le den y no hay que tocarle el tamaño a mano en tres sitios. ------------------------------------------------------------ */ .pmapa__caja{ position:relative; border:1px solid var(--linea); overflow:hidden; transition:width .32s ease,height .32s ease,border-radius .32s ease; } .pmapa__caja.is-mini{ width:300px;height:300px;border-radius:50%; /* Pegado a la IZQUIERDA, no centrado. Centrado, al ampliarlo crecia hacia los dos lados a la vez y el mapa parecia saltar de sitio. Desde la izquierda crece en una sola direccion y la vista sigue el movimiento sin perderse. */ margin:0; box-shadow:0 18px 40px rgba(0,0,0,.28); } .pmapa__caja.is-grande{ width:100%;height:440px;border-radius:16px; } .pmapa__caja.is-full{ position:fixed;inset:0;z-index:120; width:auto;height:auto;border-radius:0;border:0; } /* El mapa de la ficha del cliente: uno solo y quieto */ .pmapa--ficha{ height:240px;border-radius:14px;overflow:hidden; border:1px solid var(--linea);margin-top:12px} /* El botón de volver. En pantalla completa flota encima del mapa, porque la barra de botones se queda debajo y no se ve. */ .pmapa__mando{display:none} .pmapa__caja.is-full .pmapa__mando{ display:block;position:absolute;top:16px;left:16px;z-index:5} .pmapa__caja.is-full .pmapa__mando .pbtn{ background:var(--card);box-shadow:var(--sombra)} /* ------------------------------------------------------------ EL AVISO DE LA RUEDA ------------------------------------------------------------ Girar la rueda a secas mueve la página, no el mapa. Es a propósito: si no, leer la ficha se convierte en un zoom sin querer. Pero un mapa que no reacciona parece un mapa roto, así que hay que decir por qué y cómo se hace. La librería lo trae de fábrica como un velo negro encima de todo el mapa con letras blancas gigantes. Tapa las chinchetas y asusta más de lo que ayuda. Aquí se queda en una pastilla abajo, con los colores del panel. OJO CON EL `.pmapa` DE DELANTE, no sobra: la hoja de la librería se carga sola cuando hace falta el mapa, o sea DESPUÉS de esta. A igualdad de peso gana la última, así que sin ese `.pmapa` extra las reglas de abajo se pierden y vuelve el velo negro. Comprobado: el redondeo sí entraba y el fondo no. ------------------------------------------------------------ */ .pmapa .maplibregl-cooperative-gesture-screen{ background:none;color:inherit; align-items:flex-end; padding:0 0 22px; font-size:inherit; transition:opacity .25s ease .25s; } .pmapa .maplibregl-cooperative-gesture-screen.maplibregl-show{ transition:opacity .12s ease; } .pmapa .maplibregl-cooperative-gesture-screen .maplibregl-desktop-message, .pmapa .maplibregl-cooperative-gesture-screen .maplibregl-mobile-message{ background:var(--card); color:var(--text); border:1px solid var(--linea); border-radius:999px; box-shadow:0 10px 24px rgba(0,0,0,.3); padding:9px 16px; font-family:inherit;font-size:.85rem;font-weight:600; line-height:1.2; } /* En el círculo pequeño no cabe la pastilla entera: se achica y sube, o se sale por el redondeo y se corta a la mitad. */ .pmapa__caja.is-mini .pmapa .maplibregl-cooperative-gesture-screen{padding-bottom:40px} .pmapa__caja.is-mini .pmapa .maplibregl-cooperative-gesture-screen .maplibregl-desktop-message, .pmapa__caja.is-mini .pmapa .maplibregl-cooperative-gesture-screen .maplibregl-mobile-message{ font-size:.72rem;padding:7px 12px; } /* ------------------------------------------------------------ LAS CHINCHETAS ------------------------------------------------------------ Un círculo con el logo dentro, levantado del suelo. Lo que da la sensación de altura son tres cosas juntas: el palito que lo ancla al sitio, la sombra ancha por debajo y el aro de color. Sin el palito parece una pegatina flotando en cualquier parte. ------------------------------------------------------------ */ .nxpin{ position:relative;width:46px; display:flex;flex-direction:column;align-items:center; cursor:pointer; } .nxpin__c{ width:46px;height:46px;border-radius:50%; background:var(--card); border:3px solid var(--mapa-activo); box-shadow:0 8px 18px rgba(0,0,0,.42),0 2px 4px rgba(0,0,0,.3); display:flex;align-items:center;justify-content:center; overflow:hidden; transition:transform .18s ease,box-shadow .18s ease; } .nxpin__c img{width:100%;height:100%;object-fit:cover;display:block} .nxpin__c--letra{ font-family:"Space Grotesk",system-ui,sans-serif; font-weight:700;font-size:1.15rem;color:var(--text); background:var(--card); } /* El palito: baja del círculo al punto exacto. Es lo que dice "está AQUÍ" y no "está por esta zona". */ .nxpin__palo{ width:3px;height:16px;margin-top:-2px; background:linear-gradient(var(--mapa-activo),rgba(0,0,0,0)); border-radius:2px; } .nxpin::after{ content:"";position:absolute;bottom:-4px;left:50%; width:22px;height:7px;transform:translateX(-50%); background:rgba(0,0,0,.35);border-radius:50%;filter:blur(3px); } .nxpin:hover .nxpin__c{ transform:translateY(-4px) scale(1.06); box-shadow:0 14px 26px rgba(0,0,0,.5),0 3px 6px rgba(0,0,0,.35); } .nxpin--activo .nxpin__c{border-color:var(--mapa-activo)} .nxpin--negociacion .nxpin__c{border-color:var(--mapa-negociacion)} .nxpin--prospecto .nxpin__c{border-color:var(--mapa-prospecto)} .nxpin--pausado .nxpin__c{border-color:var(--mapa-pausado)} .nxpin--perdido .nxpin__c{border-color:var(--mapa-perdido)} .nxpin--antiguo .nxpin__c{border-color:var(--mapa-antiguo)} .nxpin--activo .nxpin__palo{background:linear-gradient(var(--mapa-activo),rgba(0,0,0,0))} .nxpin--negociacion .nxpin__palo{background:linear-gradient(var(--mapa-negociacion),rgba(0,0,0,0))} .nxpin--prospecto .nxpin__palo{background:linear-gradient(var(--mapa-prospecto),rgba(0,0,0,0))} .nxpin--pausado .nxpin__palo{background:linear-gradient(var(--mapa-pausado),rgba(0,0,0,0))} .nxpin--perdido .nxpin__palo{background:linear-gradient(var(--mapa-perdido),rgba(0,0,0,0))} .nxpin--antiguo .nxpin__palo{background:linear-gradient(var(--mapa-antiguo),rgba(0,0,0,0))} /* El punto aproximado se ve distinto a propósito: es el centro del pueblo, no la puerta del local. Pintarlo igual sería decir que sabemos algo que no sabemos. */ .nxpin--aprox .nxpin__c{border-style:dashed;opacity:.85} /* En el círculo pequeño las chinchetas se achican, o cuatro juntas tapan media Valencia. */ .pmapa__caja.is-mini .nxpin{width:34px} .pmapa__caja.is-mini .nxpin__c{width:34px;height:34px;border-width:2px} .pmapa__caja.is-mini .nxpin__c--letra{font-size:.9rem} .pmapa__caja.is-mini .nxpin__palo{height:11px} /* ------------------------------------------------------------ LA PASTILLA: la chincheta CON logo ------------------------------------------------------------ Un círculo obliga a encoger el logo hasta que deja de leerse. "LA BARRAQUITA" metido en 46 píxeles no lo lee nadie, y una chincheta que no se lee no distingue a un cliente de otro, que era justo para lo que se puso el logo. La gracia es que NO hay que decidir nada por cliente: se le fija la altura al logo y se deja el ancho libre, así que la pastilla se encoge o se estira sola. Un logo redondo, como el del Dr. Sergio, sale prácticamente circular; uno apaisado se ensancha. El tope de ancho no es un capricho: sin él, un logo muy alargado tapa medio pueblo y se come a las chinchetas de al lado. ------------------------------------------------------------ */ .nxpin--logo{width:auto} .nxpin--logo .nxpin__c{ width:auto;min-width:46px;max-width:140px; height:46px; /* El relleno lateral tiene que ser EL MISMO hueco que queda arriba y abajo: alto util 40, logo 28, sobran 12, o sea 6 por lado. Con cualquier otro numero un logo cuadrado sale ovalado, y el del Dr. Sergio es redondo. Medido: con 9px salia 52x46. */ padding:0 6px; border-radius:999px; } .nxpin--logo .nxpin__c img{ width:auto;height:28px;max-width:122px; object-fit:contain; } /* En el círculo pequeño todo baja de talla, o cuatro pastillas juntas tapan el mapa entero. */ .pmapa__caja.is-mini .nxpin--logo .nxpin__c{ min-width:34px;max-width:104px;height:34px;padding:0 4px} .pmapa__caja.is-mini .nxpin--logo .nxpin__c img{height:21px;max-width:88px} /* ------------------------------------------------------------ DECISIONES ------------------------------------------------------------ Lo que el cliente tiene que elegir y todavia no ha elegido. La abierta lleva una franja amarilla a la izquierda y la resuelta una verde: se distingue de un vistazo lo que sigue en el aire sin tener que leer nada, que es de lo que se trata. La opcion elegida se queda con color y las descartadas se apagan. No se borran: saber que se descarto, y por que, vale tanto como saber que se eligio. ------------------------------------------------------------ */ .pdec{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px} .pdec__d{ border:1px solid var(--linea);border-radius:14px; padding:14px 16px;background:var(--sutil); border-left:4px solid var(--linea); } .pdec__d.is-abierta{border-left-color:var(--mapa-negociacion,#f0b429)} .pdec__d.is-ok{border-left-color:var(--mapa-activo,#4ade80)} .pdec__cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .pdec__cab b{font-size:1rem} .pdec__cab .pbtn--danger{margin-left:auto} .pdec__det{margin:6px 0 0;color:var(--muted);font-size:.86rem} .pdec__ops{list-style:none;margin:12px 0 0;padding:0; display:flex;flex-direction:column;gap:8px} .pdec__o{ border:1px solid var(--linea);border-radius:11px; padding:10px 12px;background:var(--card); transition:opacity .18s ease,border-color .18s ease; } .pdec__o p{margin:5px 0 0;color:var(--muted);font-size:.84rem} .pdec__ot{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .pdec__oacc{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap} .pdec__oacc .pbtn--danger{margin-left:auto} .pdec__o.is-elegida{border-color:var(--mapa-activo,#4ade80)} /* Descartada: se apaga, pero se sigue leyendo. Tachada o al 30% no se podria releer por que se descarto, que es justo para lo que sirve. */ .pdec__o.is-fuera{opacity:.62} @media (max-width:640px){ .pdec__d{padding:12px} .pdec__cab .pbtn--danger,.pdec__oacc .pbtn--danger{margin-left:0} } /* ------------------------------------------------------------ EL LOGO DE LA EMPRESA ------------------------------------------------------------ Se enseña dentro del MISMO círculo que usa la chincheta, no en un cuadrado. Así lo que se ve en la ficha es exactamente lo que va a salir en el mapa, recortes incluidos: un logo apaisado dentro de un círculo pierde los lados, y más vale enterarse aquí que descubrirlo luego en el mapa. ------------------------------------------------------------ */ .plogo{display:flex;gap:18px;align-items:center;flex-wrap:wrap} .plogo__marco{ /* Mismo criterio que la chincheta: altura fija y ancho libre, para que la vista previa se deforme igual que se va a deformar en el mapa. Con el ancho clavado, aquí se vería cuadrado y allí alargado, y la vista previa dejaría de servir para nada. El min-width mantiene el círculo cuando solo hay una inicial. */ width:auto;min-width:76px;max-width:240px; height:76px;flex:none; /* 12 y no 14: es el hueco que queda arriba y abajo (alto util 70, logo 46). Con 14 un logo redondo salia 79x76, ligeramente ovalado. */ padding:0 12px; border-radius:999px; background:var(--bg-3); border:3px solid var(--mapa-activo); box-shadow:0 8px 18px rgba(0,0,0,.28); display:flex;align-items:center;justify-content:center; overflow:hidden; } .plogo__img{width:auto;height:46px;max-width:212px;object-fit:contain;display:block} /* pintarImagenes() marca así lo que no ha podido firmar. Mejor un círculo vacío que el icono de imagen rota del navegador. */ .plogo__img.is-nofoto{display:none} .plogo__ini{ font-family:"Space Grotesk",system-ui,sans-serif; font-weight:700;font-size:1.7rem;color:var(--text); } .plogo__txt{flex:1 1 260px;min-width:0} .plogo__txt p{margin:0 0 4px} .plogo__txt .pacciones{margin-top:12px} /* ------------------------------------------------------------ LOS GLOBOS Y LOS MANDOS DEL MAPA maplibre trae su hoja de estilos y lo pinta todo en blanco. Aquí se repinta con las variables del panel. ------------------------------------------------------------ */ .pmapa .maplibregl-popup-content{ background:var(--card);color:var(--text); border-radius:12px;box-shadow:var(--sombra); padding:12px 14px;font-size:.86rem} .pmapa .maplibregl-popup-tip{ border-top-color:var(--card);border-bottom-color:var(--card)} .pmapa .maplibregl-ctrl-group{ background:var(--card);box-shadow:var(--sombra);border-radius:10px} .pmapa .maplibregl-ctrl-group button{background:transparent} .pmapa .maplibregl-ctrl-group button+button{border-top-color:var(--linea)} .pmapa .maplibregl-ctrl-icon{filter:var(--mapa-icono)} .pmapa .maplibregl-ctrl-attrib{ background:var(--card);color:var(--faint);font-size:.66rem} .pmapa .maplibregl-ctrl-attrib a{color:var(--muted)} .pmapa__pop b{display:block;margin-bottom:2px} .pmapa__pop small{display:block;color:var(--faint);font-size:.76rem} .pmapa__pop .pmapa__aprox{color:var(--aviso);margin-top:4px} .pmapa__pop a{ display:inline-block;margin-top:8px;font-weight:600; color:var(--purple);text-decoration:none} .pmapa__pop a:hover{text-decoration:underline} /* ------------------------------------------------------------ LA BARRA DE ARRIBA La leyenda es también el filtro: cada color se apaga al pulsarlo. ------------------------------------------------------------ */ .pmapa__barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px} .pmapa__leyenda{display:flex;flex-wrap:wrap;gap:8px} .pmapa__acc{display:flex;gap:6px;margin-left:auto} .pmapa__acc .pbtn{padding:6px 12px;font-size:.76rem} .pmapa__f{ display:inline-flex;align-items:center;gap:7px; padding:6px 12px;border-radius:999px;cursor:pointer; background:var(--sutil);border:1px solid var(--linea); color:var(--muted);font-size:.78rem;font-weight:600; transition:background .18s ease,color .18s ease,opacity .18s ease} .pmapa__f:hover{background:var(--sutil-2)} .pmapa__f.is-off{opacity:.42} .pmapa__f i{width:10px;height:10px;border-radius:50%;flex:0 0 auto} .pmapa__f b{font-weight:600;color:var(--text)} .pmapa__f.is-off b{color:var(--faint)} /* Los que no salen en el mapa. No se esconden: si no se ve que faltan, nadie los rellena nunca. */ .pmapa__sin{ margin-top:12px;padding-top:12px;border-top:1px solid var(--linea); font-size:.8rem;color:var(--faint)} .pmapa__sin a{color:var(--purple);text-decoration:none;font-weight:600} .pmapa__sin a:hover{text-decoration:underline} /* ------------------------------------------------------------ LA LISTA DE LOCALES DENTRO DE LA FICHA ------------------------------------------------------------ */ .plocal{ display:flex;align-items:flex-start;gap:12px; padding:14px 16px;border-radius:14px; background:var(--sutil);border:1px solid var(--linea);margin-bottom:10px} .plocal__c{flex:1;min-width:0} .plocal__c b{display:block;font-size:.92rem} .plocal__c small{display:block;color:var(--faint);font-size:.78rem;margin-top:2px} .plocal__acc{display:flex;gap:6px;flex:0 0 auto} .plocal__pin{width:10px;height:10px;border-radius:50%;margin-top:6px;flex:0 0 auto} .plocal__pin--sin{background:transparent;border:2px dashed var(--faint)} .plocal__falta{color:var(--aviso) !important} .plocal .pchip{margin:4px 0 2px} @media (max-width:640px){ .pmapa__caja.is-mini{width:230px;height:230px} .pmapa__caja.is-grande{height:320px} .pmapa__acc{margin-left:0;width:100%} } /* ---------- Etiqueta de sector ---------- Un punto del color del sector y su nombre. El color viene en --sc desde NX.sectores, para que la rosca y la etiqueta digan lo mismo. */ .psector{ display:inline-flex;align-items:center;gap:6px; padding:3px 10px 3px 8px;border-radius:999px; font-size:.72rem;font-weight:600;letter-spacing:.01em;white-space:nowrap; color:var(--text);background:color-mix(in srgb, var(--sc, #94a3b8) 16%, transparent); border:1px solid color-mix(in srgb, var(--sc, #94a3b8) 45%, transparent); vertical-align:middle;margin-left:6px; } .psector i{width:8px;height:8px;border-radius:50%;background:var(--sc, #94a3b8);flex:0 0 8px} .psector--libre{border-style:dashed} .psector--sin{color:var(--faint);background:var(--sutil-2);border:1px dashed var(--border)} td .psector:first-child{margin-left:0} /* ---------- Barras que hablan ---------- La cifra de cada barra está siempre dibujada pero invisible; se ve al pulsar la barra (o al pasar el ratón). Con el móvil, pulsar. */ .csvg .cbar{cursor:pointer;outline:none} .csvg .cbar .cv{font-size:12px;font-weight:700;fill:var(--text);opacity:0;transition:opacity .15s;pointer-events:none; paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round} .csvg .cbar:hover .cv,.csvg .cbar:focus-visible .cv,.csvg .cbar.is-sel .cv{opacity:1} .csvg .cbar.is-sel rect:not(.cbar__toque){filter:brightness(1.15)} .csvg .cbar:hover rect:not(.cbar__toque){filter:brightness(1.1)} /* ---------- La rosca, con brillo ---------- Cada trozo lleva su degradado y, debajo, una copia desenfocada que hace de resplandor. El aro gris de fondo marca el hueco que falta. */ .panillo__svg{width:170px;height:170px;overflow:visible} .panillo__svg .an__fondo{stroke:var(--sutil-2)} .panillo__svg .an__brillo{opacity:.55} :root[data-tema="claro"] .panillo__svg .an__brillo{opacity:.35} .panillo__svg .an__t{transition:opacity .2s} .panillo__svg:hover .an__t{opacity:.55} .panillo__svg:hover .an__t:hover{opacity:1} .panillo__svg .cc{font-size:28px;font-weight:700;letter-spacing:-.02em} .panillo__svg .ccp{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase} .panillo__l i{width:12px;height:12px;border-radius:4px} .panillo__l li{font-size:.88rem} .panillo__l b{font-family:var(--font-display);font-size:.95rem} /* ---------- Barras vivas ---------- Al entrar, cada barra crece desde el suelo, una detrás de otra. Solo una vez, al pintarse: después se quedan quietas. Detrás de cada una, una copia desenfocada hace de resplandor. */ .csvg--barras .cbar rect:not(.cbar__toque){ transform-box:fill-box;transform-origin:50% 100%; animation:barraSube .75s cubic-bezier(.2,.65,.3,1) both; animation-delay:calc(var(--i, 0) * 55ms); } .csvg--barras .cbar .cbar__glow{opacity:.55;pointer-events:none} :root[data-tema="claro"] .csvg--barras .cbar .cbar__glow{opacity:.35} .csvg--barras .cbar .cv{animation:cifraEntra .4s ease both;animation-delay:calc(var(--i, 0) * 55ms + .5s)} @keyframes barraSube{from{transform:scaleY(0)}to{transform:scaleY(1)}} @keyframes cifraEntra{from{transform:translateY(6px)}to{transform:none}} /* la rosca entra girando un poco y aclarándose */ .panillo__svg{animation:roscaEntra .7s cubic-bezier(.2,.65,.3,1) both} @keyframes roscaEntra{from{opacity:0;transform:rotate(-25deg) scale(.92)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .csvg--barras .cbar rect:not(.cbar__toque),.csvg--barras .cbar .cv,.panillo__svg{animation:none} } /* ---------- Líneas de referencia y barras flojas ---------- El objetivo del mes en morado punteado, los gastos fijos en rojo. Las barras que no llegan al objetivo salen apagadas. */ .csvg .clinea line{stroke-width:1.5;stroke-dasharray:6 5} .csvg .clinea text{font-size:10px;font-weight:600;paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round} .csvg .clinea--objetivo line{stroke:#a78bfa} .csvg .clinea--objetivo text{fill:#a78bfa} .csvg .clinea--gastos line{stroke:#f87171} .csvg .clinea--gastos text{fill:#f87171} .csvg .cbar--floja rect:not(.cbar__toque):not(.cbar__glow){opacity:.38} .csvg .cbar--floja .cbar__glow{opacity:.12} .pobjetivo{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:.86rem;color:var(--muted);margin:0 0 14px} .pobjetivo b{color:var(--text)} .pobjetivo .pbar__mini{flex:1 1 220px;height:8px;border-radius:999px;background:var(--sutil-2);overflow:hidden} .pobjetivo .pbar__mini i{display:block;height:100%;border-radius:999px;background:var(--grad)} .pmeses{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 12px;margin-top:8px} .pmeses label{display:flex;flex-direction:column;gap:3px;font-size:.74rem;color:var(--faint)} .pmeses input{width:100%} @media (max-width:760px){.pmeses{grid-template-columns:repeat(3,1fr)}} /* ---------- Gastos: apuntes estimados, totales y las casillas de Hacienda ---------- */ .papp .pok{color:var(--ok)} .pfila--estimada td{opacity:.62} .pfila--estimada td .pbtn{opacity:1} .pfila--total td{border-top:2px solid var(--border)} .phac{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 16px} .phac__q{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px} .phac__q--futuro{opacity:.7} .phac__q h4{margin:0 0 8px;font-size:.9rem} .phac__q h4 small{display:block;font-weight:400;margin-top:2px} .phac__q p{margin:4px 0;font-size:.84rem;display:flex;justify-content:space-between;align-items:center;gap:8px} .phac__q p span{color:var(--muted)} @media (max-width:760px){.phac{grid-template-columns:repeat(2,1fr)}} /* ---------- "Hacia dónde vas": tarjetas con título, cifra y una frase ---------- */ .pplan{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px} .pplan__item{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 18px} .pplan__item--ok{box-shadow:inset 3px 0 0 var(--ok)} .pplan__item--mal{box-shadow:inset 3px 0 0 var(--mal)} .pplan__item h4{margin:0 0 6px;font-size:.8rem;color:var(--muted);letter-spacing:.02em;text-transform:uppercase;font-weight:600} .pplan__item .pplan__cifra{margin:0 0 8px;font-family:var(--font-display);font-size:1.6rem;font-weight:600;letter-spacing:-.02em;color:var(--text)} .pplan__item p{margin:0;font-size:.9rem;color:var(--muted);line-height:1.6} .pplan__item p b{color:var(--text)} /* ============================================================ SERVICIOS SAAS — la rejilla de aplicaciones (9/9/2026) ------------------------------------------------------------ David pidió verlo "como ODOO": cuadrados grandes con su icono y el nombre debajo, en vez de tablas. Se pinta con marcado propio y no con .psection porque la piel nueva agrupa las secciones seguidas en un acordeón, y aquí el filtro de sector ya hace ese papel: salían las dos cosas a la vez. El color de cada sector entra por --sc, igual que en .psector, así el cuadrado de una herramienta lleva el color de su sector sin repetir ninguna paleta. ============================================================ */ /* --- Paso 1: los círculos de los sectores --- David: "quiero que cada profesión se vea en un circulito, sin nada más de información, y así clico en hostelería y hostelería tiene sus servicios". Por eso aquí no hay contadores ni descripciones: solo el círculo y el nombre. Los números van en el paso 2. */ .psaas__sectores{ display:grid;gap:18px; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); margin:20px 0 26px; } .psaas__sector{ display:flex;flex-direction:column;align-items:center;gap:12px; padding:20px 10px;border:0;background:none;cursor:pointer; color:var(--text);font:inherit;border-radius:16px; transition:background .16s ease; } .psaas__sector:hover{background:var(--card)} .psaas__sector b{font-size:.94rem;font-weight:600;line-height:1.3;text-align:center} .psaas__sector:hover .psaas__bola{ transform:translateY(-3px); box-shadow:0 10px 24px color-mix(in srgb, var(--sc, #94a3b8) 30%, transparent); } .psaas__bola{ display:grid;place-items:center; width:88px;height:88px;border-radius:50%; background:color-mix(in srgb, var(--sc, #94a3b8) 16%, transparent); border:1px solid color-mix(in srgb, var(--sc, #94a3b8) 40%, transparent); color:var(--sc, #94a3b8); transition:transform .16s ease,box-shadow .16s ease; } .psaas__bola .nxi{width:38px;height:38px} /* La versión pequeña, para el título del paso 2 */ .psaas__bola--sm{width:34px;height:34px;display:inline-grid;vertical-align:middle;margin-right:8px} .psaas__bola--sm .nxi{width:18px;height:18px} /* --- El filtro de sector (ya no se usa en el paso 1; se deja por si vuelve a hacer falta una fila de sectores en alguna pantalla) --- */ .psaas__filtros{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px} .psaas__filtro{ display:inline-flex;align-items:center;gap:8px; padding:9px 14px;border-radius:999px;cursor:pointer; border:1px solid var(--linea);background:var(--card); color:var(--text);font:inherit;font-size:.88rem;font-weight:500; transition:border-color .18s ease,background .18s ease; } .psaas__filtro:hover{border-color:color-mix(in srgb, var(--sc, #94a3b8) 55%, transparent)} .psaas__filtro > i{width:9px;height:9px;border-radius:50%;background:var(--sc, #94a3b8);flex:0 0 9px} .psaas__filtro > em{font-style:normal;color:var(--faint);font-size:.78rem} .psaas__filtro.is-sel{ border-color:color-mix(in srgb, var(--sc, #94a3b8) 60%, transparent); background:color-mix(in srgb, var(--sc, #94a3b8) 14%, transparent); } .psaas__filtro.is-sel > em{color:var(--muted)} .psaas__quien{margin:0 0 12px;color:var(--muted)} .psaas__quien b{color:var(--text)} /* --- La rejilla de aplicaciones --- */ .psaas__apps{ display:grid;gap:14px; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); margin:18px 0 22px; } .psaas__app{ display:flex;flex-direction:column;align-items:center;text-align:center; gap:9px;padding:20px 12px 16px; border:1px solid var(--linea);border-radius:16px; background:var(--card);color:var(--text);text-decoration:none; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; } .psaas__app:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--sc, #94a3b8) 55%, transparent); box-shadow:var(--sombra-card-alta, 0 8px 22px rgba(0,0,0,.10)); } /* Sin negocio de pruebas no se puede entrar: se ve apagado a propósito. Un cuadrado que no responde al pulsarlo parece una avería. */ .psaas__app.is-off{opacity:.5;cursor:not-allowed} .psaas__app.is-off:hover{transform:none;box-shadow:none;border-color:var(--linea)} .psaas__ico{ display:grid;place-items:center; width:58px;height:58px;border-radius:15px; background:color-mix(in srgb, var(--sc, #94a3b8) 15%, transparent); color:var(--sc, #94a3b8); } .psaas__ico .nxi{width:28px;height:28px} .psaas__nom{font-size:.94rem;line-height:1.25;color:var(--text)} @media (max-width:600px){ .psaas__apps{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px} .psaas__ico{width:50px;height:50px} .psaas__ico .nxi{width:24px;height:24px} }