/* ===========================================================================
Portal de clientes BGU
---------------------------------------------------------------------------
Los colores, las medidas y la tipografía son los mismos de bgu.com.mx, para
que el portal no se sienta otra empresa. Lo que NO se copió es la fachada:
aquí no hay portada, ni carrusel, ni animaciones de entrada. Esto es una
herramienta de trabajo — quien la abre viene a reportar una fuga, no a que
lo convenzan de nada.
=========================================================================== */
:root{
--cyan:#00B6DA;
--cyan-600:#00728A;
--green:#7DC10E;
--green-600:#699f0a;
--gray:#5D5D5D;
--ink:#243039;
--ink-soft:#4a5560;
--line:#e3e8ec;
--tint:#f4f9fb;
--white:#fff;
--rojo:#c0392b;
--ambar:#8a6508;
--grad-brand:linear-gradient(90deg,var(--green) 0%,var(--cyan) 100%);
--wrap:920px;
--r-sm:10px;
--r-md:18px;
--shadow-sm:0 2px 10px rgba(36,48,57,.06);
--shadow-md:0 14px 40px -18px rgba(36,48,57,.28);
--font:'Lato',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
/* Las mismas fuentes del sitio público, servidas desde aquí. El subdominio es
otro origen, así que no reaprovecha la caché de bgu.com.mx; se cargan solo
los dos grosores que este portal usa de verdad (normal y negrita), no los
cuatro del sitio. */
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
src:url('fuentes/lato-400.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
src:url('fuentes/lato-700.woff2') format('woff2')}
*,*::before,*::after{box-sizing:border-box}
body{
margin:0;
font-family:var(--font);
font-size:16px;
line-height:1.6;
color:var(--ink);
background:var(--tint);
-webkit-font-smoothing:antialiased;
}
a{color:var(--cyan-600)}
/* --- Cabecera ------------------------------------------------------------ */
.cabecera{
background:var(--white);
border-bottom:1px solid var(--line);
box-shadow:var(--shadow-sm);
}
.cabecera .interior{
max-width:var(--wrap);margin:0 auto;padding:.9rem 1.2rem;
display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.cabecera img{display:block;height:44px;width:auto}
.cabecera .quien{margin-left:auto;text-align:right;font-size:.86rem;color:var(--gray);line-height:1.35}
.cabecera .quien strong{display:block;color:var(--ink);font-size:.95rem}
.cabecera .quien a{margin-left:.6rem}
/* --- Estructura ---------------------------------------------------------- */
.envoltura{max-width:var(--wrap);margin:0 auto;padding:1.8rem 1.2rem 3rem}
h1{font-size:1.6rem;margin:0 0 .3rem;letter-spacing:-.01em}
h2{font-size:1.15rem;margin:2rem 0 .8rem}
.entradilla{margin:0 0 1.8rem;color:var(--ink-soft)}
.tarjeta{
background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
padding:1.6rem;box-shadow:var(--shadow-sm);
}
/* --- Formularios --------------------------------------------------------- */
.campo{margin-bottom:1.3rem}
.campo label{display:block;font-weight:700;margin-bottom:.35rem;font-size:.94rem}
.campo .ayuda{display:block;font-weight:400;color:var(--gray);font-size:.85rem;margin-top:.15rem}
/* La lista es explícita y no `input` a secas para no pintar también las
casillas de verificación, que se estilan solas y bien. */
input[type=text],input[type=email],input[type=password],input[type=search],
input[type=date],input[type=number],input[type=tel],select,textarea{
width:100%;padding:.7rem .85rem;font:inherit;color:var(--ink);
background:var(--white);border:1px solid #cfd8de;border-radius:var(--r-sm);
transition:border-color .15s ease,box-shadow .15s ease;
}
textarea{min-height:150px;resize:vertical}
input:focus,select:focus,textarea:focus{
outline:none;border-color:var(--cyan);
box-shadow:0 0 0 3px rgba(0,182,218,.18);
}
/* El foco visible NO se quita nunca. Quien navega con teclado —y quien usa
lector de pantalla— depende de ver dónde está parado. */
a:focus-visible,button:focus-visible,.boton:focus-visible{
outline:3px solid var(--cyan);outline-offset:2px;
}
.boton{
display:inline-block;padding:.75rem 1.5rem;border:0;border-radius:999px;
font:inherit;font-weight:700;color:var(--white);background:var(--green);
cursor:pointer;text-decoration:none;transition:background-color .15s ease;
}
.boton:hover{background:var(--green-600)}
.boton.secundario{background:transparent;color:var(--ink-soft);border:1px solid #cfd8de}
.boton.secundario:hover{background:var(--tint)}
.boton[disabled]{opacity:.55;cursor:not-allowed}
/* --- Recados ------------------------------------------------------------- */
.recado{
padding:.9rem 1.1rem;border-radius:var(--r-sm);margin-bottom:1.5rem;
border-left:4px solid;font-size:.95rem;
}
.recado.bien{background:#f1f9e8;border-color:var(--green);color:#3d5c07}
.recado.error{background:#fdeeec;border-color:var(--rojo);color:#8e2b20}
.recado.aviso{background:#fdf6e3;border-color:var(--ambar);color:#7a5c08}
/* --- Aviso de urgencia ---------------------------------------------------
Aparece bajo el selector al elegir «Urgente».
Es un bloque que se queda, y no una ventana emergente, a propósito. Un
pop-up se cierra de un clic —muchas veces antes de leerlo— y a los diez
segundos ya no existe. Este sigue ahí, en rojo, mientras la persona termina
de escribir y aprieta enviar. Y la casilla no es adorno: sin ella el
servidor no acepta la solicitud, y la aceptación queda en la bitácora. */
.alerta-urgencia{
margin-top:.9rem;padding:1.1rem 1.2rem;
background:#fdeeec;border:2px solid var(--rojo);border-left-width:6px;
border-radius:var(--r-sm);color:#8e2b20;font-size:.9rem;line-height:1.55;
}
.alerta-urgencia[hidden]{display:none}
.alerta-urgencia p{margin:0 0 .6rem}
.alerta-urgencia .titulo{
display:flex;gap:.5rem;align-items:baseline;
font-weight:700;font-size:1.06rem;line-height:1.35;color:var(--rojo);
}
/* El triángulo va por CSS y no en el texto: así el lector de pantalla lee la
advertencia y no un símbolo suelto que no significa nada dicho en voz alta. */
.alerta-urgencia .titulo::before{content:'\26A0';font-size:1.15rem;flex:0 0 auto}
.alerta-urgencia .enterado{
display:flex;gap:.65rem;align-items:flex-start;
margin:0;padding:.75rem .85rem;
background:var(--white);border:1px solid #f0c4bd;border-radius:var(--r-sm);
font-weight:700;font-size:.88rem;cursor:pointer;
}
.alerta-urgencia .enterado input{
flex:0 0 auto;width:1.1rem;height:1.1rem;margin:.1rem 0 0;
accent-color:var(--rojo);cursor:pointer;
}
/* --- Lista de solicitudes ------------------------------------------------ */
.solicitudes{list-style:none;margin:0;padding:0}
.solicitudes li{
background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
padding:1.1rem 1.3rem;margin-bottom:.9rem;box-shadow:var(--shadow-sm);
}
.solicitudes a.titulo{
font-weight:700;color:var(--ink);text-decoration:none;font-size:1.03rem;
}
.solicitudes a.titulo:hover{text-decoration:underline}
.solicitudes .meta{color:var(--gray);font-size:.87rem;margin-top:.2rem}
.solicitudes .folio{
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:.82rem;color:var(--gray);
}
/* --- Etiquetas de estado y urgencia -------------------------------------- */
/* El estado no se distingue SOLO por color: cada etiqueta lleva su texto. Un
punto verde y uno ámbar son el mismo punto gris para quien no distingue esos
colores, y es el 8 % de los hombres. */
.etiqueta{
display:inline-block;padding:.2rem .7rem;border-radius:999px;
font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
background:#eef3f6;color:var(--ink-soft);
}
.etiqueta.recibida{background:#e6f6fb;color:#00738c}
.etiqueta.en_proceso{background:#eef3f6;color:#3f5261}
.etiqueta.agendada{background:#f0eefb;color:#4a3f8c}
.etiqueta.cotizada{background:#fdf6e3;color:#7a5c08}
.etiqueta.concluida{background:#f1f9e8;color:#4a7a08}
.etiqueta.en_revision{background:#fdeeec;color:#8e2b20}
.etiqueta.cerrada{background:#eef3f6;color:var(--gray)}
.etiqueta.cancelada{background:#f6eeee;color:#8e2b20}
.etiqueta.urgente{background:#fdeeec;color:#8e2b20}
.etiqueta.pronto{background:#fdf6e3;color:#7a5c08}
/* --- El panel de BGU -----------------------------------------------------
Se distingue del resto del detalle a propósito: quien lo ve tiene poder
para cambiar lo que el cliente lee, y esa diferencia tiene que notarse sin
pensarlo. El borde punteado dice «esto no es parte de la solicitud, es la
herramienta». */
.panel-bgu{
margin-top:1.2rem;background:#fbfdfe;border:2px dashed #bcd7e2;
}
.panel-bgu h2{margin-top:0}
.panel-bgu > .ayuda{
display:block;color:var(--gray);font-size:.85rem;margin:-.5rem 0 1.2rem;
}
.casilla{
display:flex;gap:.6rem;align-items:flex-start;
margin:.5rem 0 0;font-size:.9rem;font-weight:400;cursor:pointer;
}
.casilla input{flex:0 0 auto;width:1.05rem;height:1.05rem;margin:.15rem 0 0;cursor:pointer}
/* --- La historia de la solicitud ----------------------------------------- */
.historia{list-style:none;margin:0;padding:0}
.historia li{
position:relative;padding:0 0 1.4rem 1.4rem;
border-left:2px solid var(--line);
}
.historia li:last-child{padding-bottom:0;border-left-color:transparent}
/* El punto de la línea de tiempo. Va sobre el borde, por eso el -7px. */
.historia li::before{
content:'';position:absolute;left:-7px;top:.35rem;
width:12px;height:12px;border-radius:50%;
background:var(--cyan);border:2px solid var(--white);
}
.historia li.interna::before{background:var(--gray)}
.historia .cuando{
display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
font-size:.82rem;color:var(--gray);margin-bottom:.35rem;
}
.historia .marca-interna{
background:#eef3f6;color:var(--ink-soft);border-radius:999px;
padding:.05rem .5rem;font-size:.72rem;font-weight:700;text-transform:uppercase;
letter-spacing:.04em;
}
.historia .quien{font-size:.82rem;color:var(--gray);margin-top:.3rem}
.historia li.interna{background:#fafbfc;border-radius:var(--r-sm)}
/* --- Fotos --------------------------------------------------------------- */
.fotos{display:flex;flex-wrap:wrap;gap:.7rem;margin:.8rem 0 0;padding:0;list-style:none}
/* El ancho va en el , no en la ![]()
. Puesto en la imagen, un `width:50%`
se mide contra el , que al ser elemento de un flex sin ancho propio se
ajusta a su contenido: la imagen pide la mitad de sí misma y el resultado
fue una miniatura de 61 px en el celular. Con el ancho en el contenedor, la
imagen lo llena y todo cuadra. */
.fotos li{width:150px}
.fotos img,.fotos .caducada{
display:block;width:100%;height:112px;
border-radius:var(--r-sm);background:var(--tint);
}
.fotos img{object-fit:cover;border:1px solid var(--line)}
.fotos .caducada{
border:1px dashed #cfd8de;
display:flex;align-items:center;justify-content:center;text-align:center;
font-size:.78rem;color:var(--gray);padding:.5rem;
}
/* --- Detalle ------------------------------------------------------------- */
.datos{margin:0}
.datos dt{font-weight:700;font-size:.8rem;text-transform:uppercase;
letter-spacing:.06em;color:var(--gray);margin-top:1.1rem}
.datos dd{margin:.15rem 0 0}
.descripcion{white-space:pre-wrap} /* respeta los renglones que escribió el cliente */
/* --- Pie ----------------------------------------------------------------- */
.pie{
max-width:var(--wrap);margin:0 auto;padding:1.5rem 1.2rem 2.5rem;
color:var(--gray);font-size:.84rem;border-top:1px solid var(--line);
}
.pie a{color:var(--gray)}
/* --- Acceso -------------------------------------------------------------- */
.acceso{max-width:420px;margin:3.5rem auto}
.acceso .marca{text-align:center;margin-bottom:1.8rem}
.acceso .marca img{height:64px;width:auto}
.acceso .nota{
margin:1.4rem 0 0;padding-top:1.2rem;border-top:1px solid var(--line);
font-size:.87rem;color:var(--gray);
}
@media (max-width:620px){
.envoltura{padding-top:1.2rem}
h1{font-size:1.35rem}
.tarjeta{padding:1.2rem}
.cabecera .quien{margin-left:0;text-align:left;width:100%}
/* dos por renglón: la mitad, menos la mitad del hueco de .7rem */
.fotos li{width:calc(50% - .35rem)}
.fotos img,.fotos .caducada{height:100px}
}
/* --- La visita agendada ---------------------------------------------------
Es la tarjeta que el cliente tiene que mirar y contestar, así que se
distingue del resto por color: ámbar mientras falta su respuesta, verde
cuando ya confirmó. El texto lo dice igual — el color solo acompaña. */
.tarjeta.visita{margin-top:1.2rem;border-left:5px solid}
.tarjeta.visita.pendiente{background:#fefbf2;border-color:var(--ambar)}
.tarjeta.visita.ok{background:#f7fcf2;border-color:var(--green)}
.tarjeta.visita h2{margin:0 0 .4rem}
.tarjeta.visita .cuando-grande{
margin:0 0 .8rem;font-size:1.25rem;font-weight:700;color:var(--ink);
line-height:1.3;
}
.tarjeta.visita .dato{margin:0 0 .4rem;font-size:.92rem}
.tarjeta.visita .confirmada{margin:.8rem 0 0;font-size:.9rem;font-weight:700;color:#4a7a08}
.respuesta-visita .no-puedo{margin-top:1rem}
.respuesta-visita .no-puedo summary{
cursor:pointer;font-size:.9rem;color:var(--gray);
padding:.4rem 0;list-style-position:inside;
}
.respuesta-visita .no-puedo summary:hover{color:var(--ink)}
.respuesta-visita .no-puedo[open] summary{font-weight:700;color:var(--ink)}
/* --- Los campos de la visita, en el panel de BGU ------------------------- */
.bloque-agenda{
border:1px solid var(--line);border-radius:var(--r-sm);
padding:1rem 1.1rem .3rem;margin:0 0 1.3rem;background:var(--white);
}
.bloque-agenda[hidden]{display:none}
.bloque-agenda legend{font-weight:700;font-size:.9rem;padding:0 .4rem}
.bloque-agenda > .ayuda{display:block;color:var(--gray);font-size:.85rem;margin-bottom:1rem}
/* Las tres en fila en pantalla ancha, apiladas en el celular. La fecha pide
más espacio que las horas porque el selector nativo del navegador es más
ancho. */
.fila-fecha{display:flex;gap:.8rem;flex-wrap:wrap}
.fila-fecha .campo{flex:1 1 9rem;min-width:8rem}
/* --- Arrastrar y soltar archivos -----------------------------------------
El campo nativo se esconde con `.campo-oculto` SOLO cuando el JavaScript ya
montó la caja. Si el script no corre, el campo se queda visible y el
formulario funciona igual — por eso la clase la pone el script y no el HTML. */
.campo-oculto{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.soltar{
border:2px dashed #cfd8de;border-radius:var(--r-md);
padding:1.8rem 1.2rem;text-align:center;background:var(--tint);
transition:border-color .15s ease,background-color .15s ease;
}
.soltar.encima{border-color:var(--cyan);background:#e8f8fc}
.soltar.con-archivos{padding:1.1rem 1.2rem}
.soltar-texto{margin:0 0 .4rem;font-weight:700;color:var(--ink-soft)}
.soltar-o{margin:0 0 .7rem;font-size:.85rem;color:var(--gray)}
/* En el celular no se arrastra nada: el botón es lo único que se usa, así que
el texto de arrastrar estorba y se quita. */
@media (hover:none){
.soltar-texto,.soltar-o{display:none}
.soltar{padding:1.1rem}
}
.soltar-lista{list-style:none;margin:.7rem 0 0;padding:0}
.soltar-lista li{
display:flex;align-items:center;gap:.7rem;
padding:.55rem .8rem;margin-bottom:.4rem;
background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
font-size:.88rem;
}
/* El nombre se encoge y corta con puntos suspensivos; el peso y la × nunca. */
.soltar-nombre{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soltar-peso{flex:0 0 auto;color:var(--gray);font-size:.82rem}
.soltar-quitar{
flex:0 0 auto;width:1.7rem;height:1.7rem;padding:0;
border:1px solid var(--line);border-radius:50%;background:var(--white);
color:var(--gray);font-size:1.1rem;line-height:1;cursor:pointer;
}
.soltar-quitar:hover{background:#fdeeec;border-color:var(--rojo);color:var(--rojo)}
.soltar-aviso{margin:.5rem 0 0;font-size:.85rem;color:var(--rojo)}
/* --- Cotizaciones --------------------------------------------------------- */
.tarjeta.cotizacion{margin-top:1.2rem;border-left:5px solid}
.tarjeta.cotizacion.pendiente{background:#fefbf2;border-color:var(--ambar)}
.tarjeta.cotizacion h2{margin:0 0 1rem}
.tarjeta.cotizacion h3{font-size:1.05rem}
.tarjeta.cotizacion h4{font-size:.98rem;margin:0 0 .3rem}
/* El árbol de decisión.
«Aprobar» va suelto y arriba; las otras tres viven dentro de un .
Quien viene a aprobar no tropieza con ellas, y quien no aprueba las
encuentra todas juntas sin cambiar de página. */
.decision .no-apruebo{margin-top:1.2rem}
.decision .no-apruebo summary{
cursor:pointer;font-size:.92rem;color:var(--gray);padding:.5rem 0;
list-style-position:inside;
}
.decision .no-apruebo summary:hover{color:var(--ink)}
.decision .no-apruebo[open] summary{font-weight:700;color:var(--ink)}
.decision .opciones{margin-top:.8rem}
.decision .opcion{
padding:1.1rem;margin-bottom:.9rem;
background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
}
.decision .opcion:last-child{margin-bottom:0}
.decision .opcion textarea{min-height:90px;margin-bottom:.8rem}
.decision .opcion .ayuda{display:block;color:var(--gray);font-size:.86rem;margin:0 0 .7rem}
.lista-cotizaciones{list-style:none;margin:0;padding:0}
.lista-cotizaciones li{
padding:1rem 1.1rem;margin-bottom:.8rem;
border:1px solid var(--line);border-radius:var(--r-sm);background:var(--tint);
}
.lista-cotizaciones li:last-child{margin-bottom:0}
.lista-cotizaciones li.dec-aprobada{background:#f7fcf2;border-color:#cfe6a8}
/* Las reemplazadas se apagan: siguen ahí porque hacen falta para saber qué
pasó, pero no compiten por la atención con la que está viva. */
.lista-cotizaciones li.dec-descartada{opacity:.6}
.lista-cotizaciones .fila{
display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap;margin-bottom:.25rem;
}
.lista-cotizaciones .meta{color:var(--gray);font-size:.85rem}
.lista-cotizaciones .respuesta-cliente{
margin:.5rem 0 0;padding:.6rem .8rem;
background:var(--white);border-left:3px solid var(--cyan);border-radius:var(--r-sm);
font-size:.9rem;
}
/* --- Conformidad del trabajo --------------------------------------------- */
.tarjeta.conclusion{margin-top:1.2rem;border-left:5px solid}
.tarjeta.conclusion.pendiente{background:#fefbf2;border-color:var(--ambar)}
.tarjeta.conclusion h2{margin:0 0 .8rem}
.respuesta-conclusion .no-quedo{margin-top:1.1rem}
.respuesta-conclusion .no-quedo summary{
cursor:pointer;font-size:.92rem;color:var(--gray);padding:.5rem 0;
list-style-position:inside;
}
.respuesta-conclusion .no-quedo summary:hover{color:var(--ink)}
.respuesta-conclusion .no-quedo[open] summary{font-weight:700;color:var(--ink)}
.lista-conclusiones{list-style:none;margin:0;padding:0}
.lista-conclusiones li{
padding:1rem 1.1rem;margin-bottom:.8rem;
border:1px solid var(--line);border-radius:var(--r-sm);background:var(--tint);
}
.lista-conclusiones li:last-child{margin-bottom:0}
.lista-conclusiones li.dec-aprobada{background:#f7fcf2;border-color:#cfe6a8}
.lista-conclusiones li.dec-con_observaciones{background:#fdf3f1;border-color:#f0c4bd}
.lista-conclusiones .fila{
display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap;margin-bottom:.25rem;
}
.lista-conclusiones .meta{color:var(--gray);font-size:.85rem}
.lista-conclusiones .respuesta-cliente{
margin:.5rem 0 0;padding:.6rem .8rem;
background:var(--white);border-left:3px solid var(--rojo);border-radius:var(--r-sm);
font-size:.9rem;
}
/* ===========================================================================
Directorio de proveedores
---------------------------------------------------------------------------
Solo lo ve la oficina, así que aquí no se busca tranquilizar a nadie: se
busca densidad. Quien abre esta pantalla quiere comparar diez proveedores
sin hacer scroll, no leer una ficha bonita.
=========================================================================== */
/* --- Filtros -------------------------------------------------------------- */
.filtros-dir{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1.4rem}
/* --- El listado ----------------------------------------------------------- */
.proveedores{list-style:none;margin:0;padding:0}
.proveedores li{
padding:1rem 1.1rem;margin-bottom:.7rem;
border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);
}
.proveedores .fila-cabeza{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.proveedores a.titulo{font-weight:700;font-size:1.05rem;text-decoration:none;color:var(--ink)}
.proveedores a.titulo:hover{text-decoration:underline}
.proveedores .meta{color:var(--ink-soft);font-size:.9rem;margin-top:.25rem}
.proveedores .servicios{color:var(--gray);font-size:.83rem;margin-top:.3rem}
.proveedores .pie-fila{color:var(--gray);font-size:.82rem;margin-top:.35rem}
/* --- La barra de «qué tan llena está la ficha» ----------------------------
El número solo no sirve para nada: 40% no le dice a nadie qué hacer. Por eso
siempre va acompañado del primer dato que falta, que sí es accionable. */
.completitud{display:flex;align-items:center;gap:.55rem;margin-top:.6rem;font-size:.8rem}
.completitud .barra{
flex:0 0 90px;height:6px;border-radius:3px;background:#eef2f5;overflow:hidden;
}
.completitud .barra > span{display:block;height:100%;background:var(--green);border-radius:3px}
.completitud .cifra{color:var(--ink-soft);font-weight:700;flex:0 0 auto}
.completitud .faltan{color:var(--gray)}
.completitud.grande{font-size:.95rem;margin:0}
.completitud.grande .barra{flex:0 0 180px;height:9px;border-radius:5px}
/* --- Etiquetas propias del directorio ------------------------------------- */
.etiqueta.provisional{background:#fdf6e3;color:#7a5c08}
/* Solicitudes de la etapa de pruebas (migración 17). Gris a propósito: no es
una alerta ni un estado del trabajo, es una nota al margen que dice «esto no
ocurrió». Si fuera roja competiría con «en revisión», que sí es urgente. */
.etiqueta.prueba{background:#eef3f6;color:#3f5261;border:1px dashed #8098A8}
.etiqueta.preferido{background:#f1f9e8;color:#4a7a08}
.etiqueta.doc-vigente{background:#f1f9e8;color:#4a7a08}
.etiqueta.doc-porvencer{background:#fdf6e3;color:#7a5c08}
.etiqueta.doc-vencido{background:#fdeeec;color:#8e2b20}
.etiqueta.doc-sinvence{background:#eef3f6;color:var(--gray)}
/* --- La ficha y su formulario ---------------------------------------------
`auto-fit` y no un número fijo de columnas: la misma rejilla sirve para el
teléfono (una columna) y para el escritorio (tres) sin escribir una sola
consulta de medios. */
.rejilla-campos{
display:grid;gap:0 1.2rem;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.rejilla-campos .ancho-total,
.ficha-datos .ancho-total{grid-column:1/-1}
.ficha-datos{display:grid;gap:1rem 1.2rem;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ficha-datos dt{margin:0}
.ficha-datos dd{margin:.15rem 0 0;word-break:break-word}
.rejilla-casillas{
display:grid;gap:.2rem 1.2rem;
grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.campo.con-error input,
.campo.con-error select,
.campo.con-error textarea{border-color:var(--rojo)}
.error-campo{display:block;color:var(--rojo);font-size:.85rem;margin-top:.25rem}
.campo label .req{color:var(--rojo)}
/* --- Contactos y papeles --------------------------------------------------- */
.contactos,.documentos{list-style:none;margin:0 0 1.2rem;padding:0}
.contactos li,.documentos li{
display:flex;gap:1rem;align-items:flex-start;justify-content:space-between;
padding:.8rem .9rem;margin-bottom:.5rem;
border:1px solid var(--line);border-radius:var(--r-sm);background:var(--tint);
}
.contactos .meta,.documentos .meta{color:var(--gray);font-size:.85rem;margin-top:.15rem}
.contactos .pie-fila,.documentos .pie-fila{font-size:.85rem;margin-top:.25rem}
/* Un botón que parece enlace: borrar no es la acción principal de esta
pantalla y no tiene por qué competir visualmente con «Guardar». */
.enlace-baja{
background:none;border:0;padding:.2rem .1rem;cursor:pointer;
color:var(--gray);font-size:.82rem;font-family:inherit;text-decoration:underline;
}
.enlace-baja:hover{color:var(--rojo)}
.agregar{border-top:1px solid var(--line);padding-top:.9rem}
.agregar summary{cursor:pointer;font-weight:700;font-size:.92rem;color:var(--cyan-600)}
.agregar summary:hover{text-decoration:underline}
.agregar[open] summary{margin-bottom:1rem}
/* Cada servicio son dos decisiones distintas —«lo hace» y «recibe el aviso»—,
así que se ven como dos, con la segunda claramente subordinada a la primera. */
.servicio-opcion{margin-bottom:.6rem}
.servicio-opcion .sub-preferido{
margin:.1rem 0 0 1.7rem;font-size:.82rem;color:var(--gray);align-items:center;
}
.servicio-opcion .sub-preferido input{width:.9rem;height:.9rem;margin-top:0}
.servicio-opcion .sub-preferido em{font-style:normal;color:#9aa5ad}
.servicio-opcion .sub-preferido em.huerfana{color:var(--ambar);font-weight:700}
.servicio-opcion .sub-preferido[hidden]{display:none}
/* --- Material del proveedor: PDFs ------------------------------------------ */
.materiales{list-style:none;margin:0 0 1.2rem;padding:0}
.materiales li{
display:flex;gap:.9rem;align-items:flex-start;
padding:.8rem .9rem;margin-bottom:.5rem;
border:1px solid var(--line);border-radius:var(--r-sm);background:var(--tint);
}
.materiales .meta{color:var(--gray);font-size:.85rem;margin-top:.15rem}
.materiales .pie-fila{color:var(--gray);font-size:.8rem;margin-top:.25rem}
.materiales a{text-decoration:none}
.materiales a:hover strong{text-decoration:underline}
/* Un cuadrito que dice PDF en vez de un icono en imagen: no hay archivo que
cargar, se ve igual en cualquier pantalla y no hay nada que pueda faltar. */
.icono-pdf{
flex:0 0 auto;width:38px;height:46px;border-radius:4px;
background:var(--rojo);color:#fff;
font-size:.62rem;font-weight:700;letter-spacing:.06em;
display:flex;align-items:center;justify-content:center;
}
/* --- Galería de fotos ------------------------------------------------------
`auto-fill` con un mínimo: en el teléfono salen dos por renglón y en el
escritorio cuatro, sin una sola consulta de medios. */
.galeria{
display:grid;gap:.9rem;margin-bottom:1.2rem;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.galeria figure{margin:0;border:1px solid var(--line);border-radius:var(--r-sm);
overflow:hidden;background:var(--tint)}
/* `aspect-ratio` con `object-fit:cover` para que la retícula quede pareja
aunque las fotos vengan verticales y horizontales mezcladas. */
.galeria img{
display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
background:#e9eef1;
}
.galeria figcaption{
padding:.5rem .6rem;font-size:.8rem;color:var(--ink-soft);
display:flex;flex-direction:column;gap:.15rem;
}
.galeria figcaption span{color:var(--gray)}
.galeria figcaption form{margin-top:.2rem}
input[type=file]{
width:100%;padding:.6rem;font:inherit;font-size:.9rem;
border:1px dashed #cfd8de;border-radius:var(--r-sm);background:var(--tint);
}
/* =========================================================================
MODO OSCURO
=========================================================================
POR QUÉ ESTÁ AL FINAL Y NO INTEGRADO ARRIBA
El CSS tenía 57 líneas con colores escritos a mano. Convertirlas todas a
variables habría sido más elegante, pero significaba tocar el archivo
entero para añadir una función opcional — y cualquier error se habría visto
en el modo claro, que es el que usa todo el mundo. Así, todo lo de arriba
queda intacto: si algo aquí está mal, solo el modo oscuro se ve mal.
POR QUÉ UNA CLASE Y NO SOLO `@media (prefers-color-scheme: dark)`
Con la consulta de medios a secas no se puede dar la opción de forzarlo.
Como el usuario tiene que poder elegir, un script mínimo en el ``
decide y pone `class="oscuro"` en el ``. Ese script va ANTES de la
hoja de estilos, para que la página no aparezca blanca un instante antes
de oscurecerse.
La consecuencia: sin JavaScript no hay modo oscuro. El modo claro funciona
igual que siempre, así que nadie se queda fuera.
DEUDA DE NOMBRE, a propósito: aquí `--white` deja de ser blanco y pasa a
significar «la superficie de una tarjeta». Debería llamarse `--superficie`.
No se renombra hoy porque son 40 usos repartidos por todo el archivo y no
es el momento de mezclar dos cambios.
========================================================================= */
html.oscuro{
color-scheme:dark; /* pinta barras de scroll y campos nativos */
--cyan:#3FD0EE; --cyan-600:#5BD8F0;
--green:#8FD117; --green-600:#A3E52B;
--gray:#93A0AA;
--ink:#E8EDF1; --ink-soft:#AEBAC4;
--line:#2C363F;
--tint:#12181D; /* fondo de la página */
--white:#1B232A; /* superficie de tarjeta — ver nota arriba */
--rojo:#F2705E; --ambar:#E0A82E;
--shadow-sm:0 2px 10px rgba(0,0,0,.35);
--shadow-md:0 14px 40px -18px rgba(0,0,0,.65);
/* Familias de color de los avisos y etiquetas. En claro están escritas a
mano en cada regla; aquí se centralizan para poder sobreescribirlas. */
--sup-2:#232D36; --sup-2-txt:#C7D2DB;
--verde-bg:#1F2D14; --verde-txt:#A6DE5C;
--rojo-bg:#331917; --rojo-txt:#F2A196;
--ambar-bg:#2E2614; --ambar-txt:#E5C978;
--cian-bg:#102A33; --cian-txt:#6FD3EC;
--morado-bg:#221F3A; --morado-txt:#B0A6F0;
--borde:#5C6E7F;
}
/* --- Campos y botones ---------------------------------------------------- */
html.oscuro input[type=text],html.oscuro input[type=email],
html.oscuro input[type=password],html.oscuro input[type=search],
html.oscuro input[type=date],html.oscuro input[type=number],
html.oscuro input[type=tel],html.oscuro select,html.oscuro textarea,
html.oscuro input[type=file]{border-color:var(--borde)}
html.oscuro .boton{color:#0E1418} /* verde brillante pide letra oscura */
html.oscuro .boton.secundario{color:var(--ink-soft);border-color:var(--borde)}
/* --- Recados ------------------------------------------------------------- */
html.oscuro .recado.bien {background:var(--verde-bg);color:var(--verde-txt)}
html.oscuro .recado.error{background:var(--rojo-bg); color:var(--rojo-txt)}
html.oscuro .recado.aviso{background:var(--ambar-bg);color:var(--ambar-txt)}
/* --- Etiquetas de estado ------------------------------------------------- */
html.oscuro .etiqueta{background:var(--sup-2);color:var(--sup-2-txt)}
html.oscuro .etiqueta.recibida {background:var(--cian-bg); color:var(--cian-txt)}
html.oscuro .etiqueta.en_proceso {background:var(--sup-2); color:var(--sup-2-txt)}
html.oscuro .etiqueta.agendada {background:var(--morado-bg);color:var(--morado-txt)}
html.oscuro .etiqueta.cotizada {background:var(--ambar-bg); color:var(--ambar-txt)}
html.oscuro .etiqueta.concluida {background:var(--verde-bg); color:var(--verde-txt)}
html.oscuro .etiqueta.en_revision{background:var(--rojo-bg); color:var(--rojo-txt)}
html.oscuro .etiqueta.cerrada {background:var(--sup-2); color:var(--gray)}
html.oscuro .etiqueta.cancelada {background:var(--rojo-bg); color:var(--rojo-txt)}
html.oscuro .etiqueta.urgente {background:var(--rojo-bg); color:var(--rojo-txt)}
html.oscuro .etiqueta.pronto {background:var(--ambar-bg); color:var(--ambar-txt)}
html.oscuro .etiqueta.provisional {background:var(--ambar-bg);color:var(--ambar-txt)}
html.oscuro .etiqueta.preferido {background:var(--verde-bg);color:var(--verde-txt)}
html.oscuro .etiqueta.doc-vigente {background:var(--verde-bg);color:var(--verde-txt)}
html.oscuro .etiqueta.doc-porvencer{background:var(--ambar-bg);color:var(--ambar-txt)}
html.oscuro .etiqueta.doc-vencido {background:var(--rojo-bg); color:var(--rojo-txt)}
html.oscuro .etiqueta.doc-sinvence {background:var(--sup-2); color:var(--gray)}
/* --- Avisos de urgencia y tarjetas de estado ----------------------------- */
html.oscuro .aviso-urgente{background:#2A1512;color:var(--rojo-txt)}
html.oscuro .tarjeta.urgente{border-color:#6B3A32}
html.oscuro .tarjeta.visita.pendiente,
html.oscuro .tarjeta.cotizacion.pendiente,
html.oscuro .tarjeta.conclusion.pendiente{background:var(--ambar-bg)}
html.oscuro .tarjeta.visita.ok{background:var(--verde-bg)}
html.oscuro .tarjeta.visita .confirmada{color:var(--verde-txt)}
html.oscuro .lista-cotizaciones li.dec-aprobada,
html.oscuro .lista-conclusiones li.dec-aprobada{background:var(--verde-bg);border-color:#4A6B2A}
html.oscuro .lista-conclusiones li.dec-con_observaciones{background:var(--ambar-bg);border-color:#6B5A2A}
/* --- Historia, zonas de arrastre y varios -------------------------------- */
html.oscuro .historia .marca-interna{background:var(--sup-2);color:var(--sup-2-txt)}
html.oscuro .historia li.interna{background:var(--sup-2)}
html.oscuro .soltar{border-color:var(--borde)}
html.oscuro .soltar.encima{background:var(--cian-bg)}
html.oscuro .soltar-quitar:hover{background:var(--rojo-bg)}
html.oscuro .servicio-opcion .sub-preferido em{color:var(--gray)}
html.oscuro .completitud .barra{background:var(--sup-2)}
html.oscuro .agregar{background:var(--sup-2)}
html.oscuro .aviso-sin-preferido{background:var(--ambar-bg);border-color:#6B5A2A}
/* --- El control de tema en la cabecera ----------------------------------- */
/* --- El control de tema ---------------------------------------------------
Tres iconos y nada más: sol, luna y el círculo mitad lleno del «auto».
Hasta el 25/09/2026 eran tres palabras dentro de una píldora gris con fondo
blanco y sombra: seis elementos visuales para una decisión que se toma una
vez y no se vuelve a tocar. En una cabecera que ya lleva el nombre de la
persona, el menú, «Manual», la pastilla de Administración y «Salir», era lo
que más pesaba y lo que menos se usa.
POR QUÉ SIGUEN SIENDO TRES y no un botón que rota. Con tres se ve de un
vistazo en cuál estás y se llega a cualquiera con un clic. Uno solo ahorra
treinta y cuatro píxeles y cobra una adivinanza cada vez que se toca.
El activo se distingue por COLOR —cyan— y los otros dos se quedan en gris.
Es la misma señal que ya usa el menú de secciones, así que no hay nada nuevo
que aprender. El `title` de cada botón dice su nombre al pasar el ratón,
para quien no reconozca el dibujo.
------------------------------------------------------------------------ */
.tema{display:inline-flex;gap:2px;align-items:center;
margin-left:.7rem;vertical-align:middle}
.tema button{
border:0;background:transparent;color:var(--gray);cursor:pointer;
padding:5px;border-radius:7px;line-height:0;
display:grid;place-items:center;
}
.tema button:hover{color:var(--ink);background:var(--tint)}
.tema button[aria-pressed="true"]{color:var(--cyan)}
.tema button:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
/* 17 px: el mismo peso óptico que el texto de al lado. A 20 el control volvía
a ser lo primero que se ve, que es justo lo que se estaba quitando. */
.tema svg{width:17px;height:17px;display:block}
/* --- La banda de «modo pruebas» ------------------------------------------
Tenía sus colores en línea dentro de `plantilla.php`. Con estilos en línea
no hay forma de adaptarla al modo oscuro —ganan siempre— y una franja color
crema a pantalla completa sobre fondo oscuro deslumbra justo en la
situación que el modo oscuro busca evitar. */
.banda-pruebas{
background:#fdf6e3;border-bottom:1px solid #e8d9a8;color:#7a5c08;
padding:.5rem 1.2rem;font-size:.85rem;text-align:center;
}
html.oscuro .banda-pruebas{
background:var(--ambar-bg);border-bottom-color:#6B5A2A;color:var(--ambar-txt);
}
/* Nota de solicitud de prueba, en el expediente (migración 17). Comparte el
tono de .banda-pruebas: el mismo mensaje merece el mismo color. */
.aviso-prueba{
margin:0 0 1.4rem;
padding:.7rem .9rem;
border:1px dashed var(--borde, #8098A8);
border-radius:8px;
background:#fdf6e3;
color:#5c4708;
font-size:.9rem;
line-height:1.45;
}
html.oscuro .etiqueta.prueba{background:var(--sup-2);color:var(--sup-2-txt);border-color:var(--borde)}
html.oscuro .aviso-prueba{background:var(--ambar-bg);color:var(--ambar-txt);border-color:var(--borde)}
/* ---------------------------------------------------------------------------
La puerta a la administración
---------------------------------------------------------------------------
Solo la ve el personal de oficina con nivel en el CRM; para un cliente esta
regla no llega a usarse nunca porque el HTML ni siquiera se imprime.
Va del color de la franja que se ve del otro lado, y no del color de la
marca, a propósito: así la puerta se parece al cuarto al que lleva. El
portal y el CRM comparten logotipo y colores —son la misma casa— y ese
parecido, al navegar, es justo lo que hay que romper.
------------------------------------------------------------------------ */
.cabecera .quien a.puerta-crm{
display:inline-block; margin-left:.6rem; padding:.18rem .6rem;
font-size:.78rem; font-weight:700; letter-spacing:.04em;
color:#F2F6F9; background:var(--ink); border-radius:999px;
text-decoration:none; white-space:nowrap;
}
.cabecera .quien a.puerta-crm:hover{ background:#121A20; text-decoration:none }
html.oscuro .cabecera .quien a.puerta-crm{ background:#080C10; color:#E8EDF1 }
html.oscuro .cabecera .quien a.puerta-crm:hover{ background:#0F161C }
@media print{ .cabecera .quien a.puerta-crm{ display:none } }
/* --- Menú de secciones (27/08/2026) --------------------------------------
Va en la cabecera y no dentro de las pantallas: una liga a otra sección
metida en el contenido solo se ve desde el lado del que ya saliste.
El elemento activo se distingue por DOS cosas —fondo y subrayado cyan— y no
solo por el color del texto: quien no distingue bien los colores necesita la
segunda señal, y el subrayado se la da. */
.menu{display:flex;gap:.15rem;flex-wrap:wrap;margin-left:.5rem}
.menu a{
padding:.4rem .85rem;border-radius:999px;
font-size:.9rem;font-weight:700;color:var(--gray);
text-decoration:none;white-space:nowrap;
}
.menu a:hover{background:var(--tint);color:var(--ink);text-decoration:none}
.menu a.aqui{
background:var(--tint);color:var(--ink);
box-shadow:inset 0 -2px 0 var(--cyan);
}
.menu a:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
/* Sin sesión no hay bloque `.quien` que empuje nada a la derecha, así que el
control del tema lo hace por su cuenta. */
.tema-sola{margin-left:auto}
@media print{ .menu{display:none} }
/* ===========================================================================
EL DISEÑO DEL 04/10/2026 (body.pv)
---------------------------------------------------------------------------
El mismo lenguaje del CRM —saludo arriba en grande, tarjetas redondeadas,
pastillas de estado y UNA sola superficie oscura por pantalla— pero sin el
menú de cinco colores, que es de la oficina. La marca va más presente: la
franja verde-azul arriba y el botón verde de siempre.
Todo cuelga de `body.pv`, que pone `cabeceraHtml()`. El CRM carga esta misma
hoja y su no lleva esa clase, así que nada de aquí lo toca. Para
regresar al diseño anterior basta con quitar la clase de la plantilla.
=========================================================================== */
body.pv{ --tinta:#17232B; --pv-r:20px; --pv-sombra:0 1px 2px rgba(23,35,43,.04),0 10px 28px -18px rgba(23,35,43,.22) }
html.oscuro body.pv{ --pv-sombra:0 1px 2px rgba(0,0,0,.3),0 10px 28px -18px rgba(0,0,0,.7) }
body.pv .solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* --- Cabecera ------------------------------------------------------------ */
body.pv .cabecera{border-top:3px solid transparent;border-image:linear-gradient(90deg,var(--green),var(--cyan)) 1;box-shadow:none}
body.pv .cabecera .interior{max-width:1200px;gap:1.4rem;padding:.75rem 1.5rem}
body.pv .cabecera img{height:42px}
body.pv .menu{gap:.25rem;margin-left:.4rem}
body.pv .menu a{padding:.5rem 1rem;border-radius:999px;font-size:.94rem}
body.pv .menu a.aqui{background:#E0F6FB;color:#0B6F85}
html.oscuro body.pv .menu a.aqui{background:var(--cian-bg);color:var(--cian-txt)}
/* --- Estructura ---------------------------------------------------------- */
body.pv .envoltura{max-width:1200px;padding:2.2rem 1.5rem 3.5rem}
body.pv .tarjeta{border-radius:var(--pv-r);box-shadow:var(--pv-sombra)}
body.pv .tarjeta h2{font-size:1.18rem;margin-top:0}
body.pv .boton{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.6rem 1.4rem}
html:not(.oscuro) body.pv .boton:not(.secundario){color:var(--tinta)}
body.pv .boton.secundario{background:var(--white)}
body.pv .boton.secundario:hover{background:var(--tint)}
/* El saludo: lo primero y lo más grande, igual que el Tablero del CRM. */
body.pv .pv-saludo{display:flex;align-items:flex-end;gap:1.2rem;flex-wrap:wrap;margin-bottom:2rem}
body.pv .pv-saludo-texto{flex:1 1 420px;min-width:0}
body.pv .pv-saludo h1{margin:0;font-size:clamp(2rem,4.2vw,2.75rem);line-height:1.1;letter-spacing:-.025em}
body.pv .pv-saludo p{margin:.6rem 0 0;font-size:1.06rem;color:var(--ink-soft)}
body.pv .pv-volver{display:inline-block;margin-bottom:1rem;font-weight:700;font-size:.92rem;text-decoration:none;color:var(--ink-soft)}
body.pv .pv-volver:hover{color:var(--ink)}
/* --- Pastillas (los mismos tonos que el CRM) ----------------------------- */
body.pv .chip{display:inline-flex;align-items:center;gap:.35rem;padding:.22rem .7rem;border-radius:999px;
font-size:.78rem;font-weight:700;line-height:1.35;white-space:nowrap;background:#EEF2F5;color:#5B6B76}
body.pv .chip.bien,body.pv .chip.verde{background:#EEF7DD;color:#4E7A06}
body.pv .chip.mal {background:#FDE4E4;color:#B42328}
body.pv .chip.atencion{background:#FFF4CC;color:#7A5A00}
body.pv .chip.cian {background:#E0F6FB;color:#0B6F85}
body.pv .chip.indigo {background:#ECEBFD;color:#4A47C4}
body.pv .chip.naranja {background:#FFEEE2;color:#A9490B}
html.oscuro body.pv .chip{background:var(--sup-2);color:var(--sup-2-txt)}
html.oscuro body.pv .chip.bien,html.oscuro body.pv .chip.verde{background:var(--verde-bg);color:var(--verde-txt)}
html.oscuro body.pv .chip.mal {background:var(--rojo-bg);color:var(--rojo-txt)}
html.oscuro body.pv .chip.atencion{background:var(--ambar-bg);color:var(--ambar-txt)}
html.oscuro body.pv .chip.cian {background:var(--cian-bg);color:var(--cian-txt)}
html.oscuro body.pv .chip.indigo {background:var(--morado-bg);color:var(--morado-txt)}
html.oscuro body.pv .chip.naranja {background:#33200F;color:#FFB07A}
/* El cuadrito del servicio. */
body.pv .pv-ins{width:46px;height:46px;flex:none;border-radius:14px;display:inline-flex;align-items:center;
justify-content:center;font-weight:700;font-size:.92rem;background:#EEF2F5;color:#4A5560}
body.pv .pv-ins.cian {background:#E0F6FB;color:#0B6F85}
body.pv .pv-ins.indigo {background:#ECEBFD;color:#4A47C4}
body.pv .pv-ins.naranja{background:#FFEEE2;color:#A9490B}
body.pv .pv-ins.verde {background:#EEF7DD;color:#4E7A06}
body.pv .pv-ins.morado {background:#F6E8F8;color:#8C2F99}
body.pv .pv-ins.grande {width:64px;height:64px;border-radius:18px;font-size:1.2rem}
body.pv .pv-ins.apagada{background:var(--tint);color:var(--gray)}
html.oscuro body.pv .pv-ins {background:var(--sup-2);color:var(--sup-2-txt)}
html.oscuro body.pv .pv-ins.cian {background:var(--cian-bg);color:var(--cian-txt)}
html.oscuro body.pv .pv-ins.indigo {background:var(--morado-bg);color:var(--morado-txt)}
html.oscuro body.pv .pv-ins.naranja{background:#33200F;color:#FFB07A}
html.oscuro body.pv .pv-ins.verde {background:var(--verde-bg);color:var(--verde-txt)}
html.oscuro body.pv .pv-ins.morado {background:#2E1932;color:#E2A6EA}
/* --- Tarjetas de cifras --------------------------------------------------- */
body.pv .pv-tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;margin-bottom:2rem}
body.pv .pv-kpi{background:var(--white);border:1px solid var(--line);border-radius:var(--pv-r);box-shadow:var(--pv-sombra);
padding:1.35rem 1.45rem;display:flex;flex-direction:column;gap:.35rem;color:var(--ink);text-decoration:none}
body.pv .pv-kpi .et{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:#5B6B76}
html.oscuro body.pv .pv-kpi .et{color:var(--gray)}
body.pv .pv-kpi .cifra{font-size:2.5rem;font-weight:700;letter-spacing:-.03em;line-height:1.1}
body.pv .pv-kpi .cifra.chica{font-size:1.55rem;margin-top:.3rem;line-height:1.2}
/* `.pie` es también la clase del pie de página (con borde y márgenes): aquí se
le quita todo eso. El CRM tuvo el mismo choque. */
body.pv .pv-kpi .pie{max-width:none;margin:0;padding:0;border-top:0;font-size:.88rem;color:var(--gray);line-height:1.45}
/* La superficie oscura. Una sola por pantalla: la que pide al cliente algo. */
body.pv .pv-kpi.oscura{background:var(--tinta);border-color:var(--tinta);color:#fff;box-shadow:0 18px 36px -20px rgba(23,35,43,.6)}
body.pv .pv-kpi.oscura .et{color:#FFD866}
body.pv .pv-kpi.oscura .pie{color:#C9D3DA}
body.pv .pv-kpi.oscura .ir{margin-top:auto;padding-top:.4rem;font-weight:700;font-size:.92rem}
body.pv .pv-kpi.oscura:hover{transform:translateY(-1px)}
html.oscuro body.pv .pv-kpi.oscura{background:#0B1115;border-color:#3A4651}
/* --- Dos columnas --------------------------------------------------------- */
body.pv .pv-dos{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:flex-start}
body.pv .pv-principal{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:1.5rem}
body.pv .pv-lado{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:1.5rem}
body.pv .pv-principal > *,body.pv .pv-lado > *{margin-top:0 !important;margin-bottom:0 !important}
/* --- Listas de solicitudes ----------------------------------------------- */
body.pv .pv-lista{padding:0;overflow:hidden;margin-bottom:1.5rem}
body.pv .pv-dos .pv-lista{margin-bottom:0}
body.pv .pv-lista-cabeza{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:1.15rem 1.4rem .8rem}
body.pv .pv-lista-cabeza h2{margin:0;font-size:1.15rem}
body.pv .pv-sub{font-size:.88rem;color:var(--gray)}
body.pv .pv-ver{margin-left:auto;font-weight:700;font-size:.88rem}
body.pv .pv-fila{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1rem 1.4rem;
border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
body.pv .pv-fila:hover{background:var(--tint)}
body.pv .pv-fila-texto{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:.1rem}
body.pv .pv-fila-texto strong{font-size:1rem}
body.pv .pv-fila-texto > span{font-size:.88rem;color:var(--gray)}
body.pv .pv-fila .etiqueta{font-size:.7rem;vertical-align:2px;margin-left:.3rem}
body.pv .pv-fila-estado{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem}
body.pv .pv-fila .pv-estado{min-width:150px;justify-content:center}
body.pv .pv-lado-fila{min-width:150px;text-align:right;font-size:.8rem;color:var(--gray);line-height:1.45}
body.pv .pv-fila.vieja{color:var(--ink-soft)}
body.pv .pv-mini{min-height:38px;padding:.3rem 1rem;font-size:.86rem}
body.pv .pv-nada{margin:0;padding:.4rem 1.4rem 1.3rem;color:var(--gray);font-size:.94rem}
body.pv .pv-vacio{text-align:center;padding:2.5rem 1.5rem}
body.pv .pv-vacio p{margin:0 0 .5rem;color:var(--gray)}
body.pv .pv-vacio .fuerte{font-weight:700;color:var(--ink)}
body.pv .pv-vacio .boton{margin-top:1rem}
/* La barrita de avance de cinco pasos. */
body.pv .pv-barrita{display:inline-flex;gap:3px}
body.pv .pv-barrita .seg{display:block;width:20px;height:6px;border-radius:3px;background:var(--line)}
body.pv .pv-barrita .seg.h{background:var(--cyan)}
body.pv .pv-barrita .seg.a{background:#F5B400}
body.pv .pv-barrita .seg.ok{background:var(--green)}
body.pv .pv-punto{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block;background:var(--gray)}
body.pv .pv-punto.ambar{background:#F5B400}
body.pv .pv-punto.cian{background:var(--cyan)}
body.pv .pv-punto.verde{background:var(--green)}
/* Filtros y buscador. */
body.pv .pv-filtros{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1.5rem}
body.pv .pv-pill{display:inline-flex;align-items:center;gap:.5rem;min-height:40px;padding:0 1rem;border-radius:999px;
font-weight:700;font-size:.9rem;text-decoration:none;color:var(--ink-soft);background:var(--white);border:1px solid var(--line)}
body.pv .pv-pill:hover{color:var(--ink);border-color:#CFD8DE}
body.pv .pv-pill .n{font-size:.78rem;padding:.05rem .5rem;border-radius:999px;background:var(--tint);color:var(--ink-soft)}
body.pv .pv-pill.aqui{background:var(--tinta);border-color:var(--tinta);color:#fff}
body.pv .pv-pill.aqui .n{background:rgba(255,255,255,.18);color:#fff}
html.oscuro body.pv .pv-pill.aqui{background:var(--ink);border-color:var(--ink);color:#0E1418}
html.oscuro body.pv .pv-pill.aqui .n{background:rgba(0,0,0,.15);color:#0E1418}
body.pv .pv-buscar{margin-left:auto;flex:0 1 300px;position:relative}
body.pv .pv-buscar svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--gray)}
body.pv .pv-buscar input{border-radius:999px;padding-left:2.6rem;min-height:44px}
body.pv .pv-buscado{margin:-.6rem 0 1.2rem;font-size:.9rem;color:var(--gray)}
/* Visitas. */
body.pv .pv-visita{display:flex;gap:.9rem;align-items:center;padding:.7rem 0;border-top:1px solid var(--line);font-size:.92rem;line-height:1.4}
body.pv .pv-visita .gris{color:var(--gray)}
body.pv .pv-dia{width:52px;flex:none;text-align:center;border-radius:12px;background:var(--tint);color:var(--ink-soft);padding:.35rem 0;line-height:1.1;display:flex;flex-direction:column}
body.pv .pv-dia span{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
body.pv .pv-dia strong{font-size:1.35rem}
body.pv .pv-dia.primera{background:#ECEBFD;color:#4A47C4}
html.oscuro body.pv .pv-dia.primera{background:var(--morado-bg);color:var(--morado-txt)}
body.pv .pv-contacto,body.pv .pv-suave{background:#F7FBFC}
html.oscuro body.pv .pv-contacto,html.oscuro body.pv .pv-suave{background:var(--sup-2)}
body.pv .pv-contacto p{margin:0 0 1rem;font-size:.92rem;color:var(--ink-soft)}
body.pv .pv-contacto .boton{display:flex;justify-content:flex-start;margin-top:.6rem;font-size:.92rem}
/* --- La ficha de una solicitud ------------------------------------------- */
body.pv .pv-ficha{display:flex;gap:1.1rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:1.6rem}
body.pv .pv-ficha-texto{flex:1 1 420px;min-width:0}
body.pv .pv-ficha h1{margin:0;font-size:clamp(1.8rem,3.6vw,2.4rem);line-height:1.1;letter-spacing:-.025em}
body.pv .pv-ficha-sub{margin:.5rem 0 .8rem;color:var(--ink-soft)}
body.pv .pv-chips{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
body.pv .pv-camino{display:flex;gap:.6rem;flex-wrap:wrap;padding:1.2rem 1.4rem;margin-bottom:1.5rem}
body.pv .pv-paso{flex:1 1 0;min-width:100px;display:flex;flex-direction:column;gap:.45rem}
body.pv .pv-paso .barra{height:6px;border-radius:3px;background:var(--line)}
body.pv .pv-paso.h .barra{background:var(--cyan)}
body.pv .pv-paso.a .barra{background:#F5B400}
body.pv .pv-paso.ok .barra{background:var(--green)}
body.pv .pv-paso .nom{font-size:.85rem;font-weight:700;color:var(--gray)}
body.pv .pv-paso.h .nom,body.pv .pv-paso.a .nom,body.pv .pv-paso.ok .nom{color:var(--ink)}
body.pv .pv-paso .cu{font-size:.78rem;color:var(--gray)}
body.pv .pv-reporte .datos dt:first-of-type{margin-top:0}
/* Lo que el cliente tiene que contestar va arriba de todo en su columna, aunque
en el archivo venga después del reporte. */
body.pv .pv-sol > .tarjeta.pendiente{order:-1}
/* …y la primera de esas es la superficie oscura de la pantalla. Si hubiera dos
(una fecha y una cotización a la vez), la segunda se queda clara: dos
superficies oscuras ya no dicen «empieza aquí». */
body.pv.es-cliente .pv-sol > .tarjeta.pendiente:not(.pendiente ~ .pendiente){
background:var(--tinta);border-color:var(--tinta);color:#E3E9ED;box-shadow:0 18px 36px -20px rgba(23,35,43,.6)}
html.oscuro body.pv.es-cliente .pv-sol > .tarjeta.pendiente:not(.pendiente ~ .pendiente){background:#0B1115;border-color:#3A4651}
body.pv.es-cliente .pv-sol > .tarjeta.pendiente:not(.pendiente ~ .pendiente) :is(h2,h3,h4,strong,.cuando-grande,dt){color:#fff}
body.pv.es-cliente .pv-sol > .tarjeta.pendiente:not(.pendiente ~ .pendiente) h2{color:#FFD866;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase}
body.pv.es-cliente .pv-sol > .tarjeta.pendiente:not(.pendiente ~ .pendiente) :is(.ayuda,dd,p){color:#C9D3DA}
body.pv.es-cliente .pv-sol > .tarjeta.pendiente:not(.pendiente ~ .pendiente) a:not(.boton){color:#9FE3F2}
body.pv.es-cliente .pv-sol > .tarjeta.pendiente:not(.pendiente ~ .pendiente) summary{color:#C9D3DA}
body.pv.es-cliente .pv-sol > .tarjeta.pendiente:not(.pendiente ~ .pendiente) summary:hover,
body.pv.es-cliente .pv-sol > .tarjeta.pendiente:not(.pendiente ~ .pendiente) [open] > summary{color:#fff}
body.pv.es-cliente .pv-sol > .tarjeta.pendiente:not(.pendiente ~ .pendiente) .boton.secundario{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
body.pv.es-cliente .pv-sol > .tarjeta.pendiente:not(.pendiente ~ .pendiente) .boton.secundario:hover{background:rgba(255,255,255,.08)}
body.pv.es-cliente .pv-sol > .tarjeta.pendiente:not(.pendiente ~ .pendiente) .boton:not(.secundario){color:var(--tinta)}
/* Las opciones de «No la apruebo» son tarjetas claras dentro de la oscura:
ahí se escribe, y escribir sobre fondo oscuro cansa. */
body.pv.es-cliente .pv-sol > .tarjeta.pendiente:not(.pendiente ~ .pendiente) .opcion{color:var(--ink)}
body.pv.es-cliente .pv-sol > .tarjeta.pendiente:not(.pendiente ~ .pendiente) .opcion :is(h4,strong){color:var(--ink)}
body.pv.es-cliente .pv-sol > .tarjeta.pendiente:not(.pendiente ~ .pendiente) .opcion :is(.ayuda,p){color:var(--gray)}
body.pv.es-cliente .pv-sol > .tarjeta.pendiente:not(.pendiente ~ .pendiente) .opcion .boton.secundario{color:var(--ink-soft);border-color:#CFD8DE;background:var(--white)}
body.pv.es-cliente .pv-sol > .tarjeta.pendiente:not(.pendiente ~ .pendiente) .recado{color:#7a5c08}
body.pv.es-cliente .pv-sol > .tarjeta.pendiente:not(.pendiente ~ .pendiente) label{color:#fff}
body.pv.es-cliente .pv-sol > .tarjeta.cotizacion.pendiente dd strong{font-size:2rem !important;letter-spacing:-.02em}
body.pv.es-cliente .pv-sol > .tarjeta.pendiente:not(.pendiente ~ .pendiente) .soltar :is(p,.soltar-texto){color:var(--ink-soft)}
/* --- Levantar una solicitud ---------------------------------------------- */
body.pv .pv-form{display:flex;flex-direction:column;gap:1.2rem;max-width:860px}
body.pv .pv-paso-form{margin:0;min-width:0;padding:1.5rem}
body.pv fieldset.pv-paso-form{border:1px solid var(--line)}
body.pv .pv-paso-form.con-error{border-color:var(--rojo)}
body.pv .pv-preg{display:flex;align-items:center;gap:.75rem;margin:0 0 1rem;padding:0;font-size:1.18rem;font-weight:700;float:left;width:100%}
body.pv .pv-preg + *{clear:both}
body.pv .pv-num{width:30px;height:30px;flex:none;border-radius:50%;background:var(--tinta);color:#fff;
display:inline-flex;align-items:center;justify-content:center;font-size:.88rem}
html.oscuro body.pv .pv-num{background:var(--ink);color:#0E1418}
body.pv .pv-paso-form > .ayuda{display:block;clear:both;margin-top:.8rem;color:var(--gray);font-size:.86rem}
body.pv .pv-paso-form input[type=text],body.pv .pv-paso-form textarea{background:#F7FAFC;border-radius:12px;padding:.8rem .95rem}
html.oscuro body.pv .pv-paso-form input[type=text],html.oscuro body.pv .pv-paso-form textarea{background:var(--tint)}
body.pv .pv-paso-form input:focus,body.pv .pv-paso-form textarea:focus{background:var(--white)}
body.pv .pv-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.75rem;clear:both}
body.pv .pv-tile,body.pv .pv-prio{position:relative;display:flex;border:1.5px solid var(--line);border-radius:16px;
background:var(--white);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
body.pv .pv-tile{flex-direction:column;align-items:flex-start;gap:.6rem;padding:1rem;min-height:96px;font-weight:700;font-size:.95rem}
body.pv .pv-tile .pv-ins{width:38px;height:38px;border-radius:11px;font-size:.8rem}
body.pv .pv-tile input,body.pv .pv-prio input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
body.pv .pv-tile:hover,body.pv .pv-prio:hover{border-color:#9FDDEB}
body.pv .pv-tile:has(input:checked){border-color:var(--cyan);background:#F2FBFD;box-shadow:0 0 0 3px rgba(0,182,218,.18)}
html.oscuro body.pv .pv-tile:has(input:checked){background:var(--cian-bg)}
body.pv .pv-tile:has(input:focus-visible),body.pv .pv-prio:has(input:focus-visible){outline:3px solid var(--cyan);outline-offset:2px}
body.pv .pv-prios{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.75rem;clear:both}
body.pv .pv-prio{flex-direction:column;gap:.2rem;padding:1rem 1.1rem}
body.pv .pv-prio strong{font-size:1rem}
body.pv .pv-prio span{font-size:.86rem;color:var(--gray)}
body.pv .pv-prio.normal:has(input:checked) {border-color:var(--green);background:#F6FBEE;box-shadow:0 0 0 3px rgba(125,193,14,.2)}
body.pv .pv-prio.pronto:has(input:checked) {border-color:#F5B400;background:#FFFAE8;box-shadow:0 0 0 3px rgba(245,180,0,.2)}
body.pv .pv-prio.urgente:has(input:checked){border-color:var(--rojo);background:#FFF3F3;box-shadow:0 0 0 3px rgba(192,57,43,.18)}
html.oscuro body.pv .pv-prio.normal:has(input:checked) {background:var(--verde-bg)}
html.oscuro body.pv .pv-prio.pronto:has(input:checked) {background:var(--ambar-bg)}
html.oscuro body.pv .pv-prio.urgente:has(input:checked){background:var(--rojo-bg)}
body.pv .pv-paso-form .alerta-urgencia{margin-top:1rem}
body.pv .pv-fotos{margin:1.2rem 0 0}
body.pv .pv-fotos .ayuda{display:block;color:var(--gray);font-size:.85rem;margin-top:.3rem}
body.pv .error-campo{color:var(--rojo) !important}
/* La barra de enviar: se queda pegada abajo mientras se llena el formulario. */
body.pv .pv-enviar{position:sticky;bottom:1rem;z-index:20;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
background:var(--tinta);border-radius:999px;padding:.55rem .55rem .55rem 1.4rem;box-shadow:0 18px 36px -16px rgba(23,35,43,.55)}
html.oscuro body.pv .pv-enviar{background:#0B1115;border:1px solid #3A4651}
body.pv .pv-enviar .boton{order:2;margin-left:auto}
body.pv .pv-cancelar{color:#fff;font-weight:700;font-size:.92rem;text-decoration:none}
body.pv .pv-cancelar:hover{text-decoration:underline;color:#fff}
/* --- El pie --------------------------------------------------------------- */
body.pv footer.pie{max-width:1200px}
/* --- El menú de abajo, solo en el celular y solo para el cliente --------- */
body.pv .pv-abajo{display:none}
@media (max-width:720px){
body.pv.es-cliente .menu{display:none}
body.pv.es-cliente .pv-abajo{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
background:var(--white);border-top:1px solid var(--line);padding:.35rem .5rem calc(.6rem + env(safe-area-inset-bottom))}
body.pv.es-cliente .pv-abajo a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
min-height:50px;font-size:.72rem;font-weight:700;color:var(--gray);text-decoration:none}
body.pv.es-cliente .pv-abajo a.aqui{color:var(--cyan-600)}
body.pv.es-cliente{padding-bottom:76px}
body.pv.es-cliente .pv-enviar{bottom:84px}
body.pv .envoltura{padding:1.5rem 1rem 2.5rem}
/* La cabecera en un solo renglón: logotipo, quién eres y el tema. Apilada
ocupaba un tercio de la pantalla antes de enseñar nada. */
body.pv .cabecera .interior{padding:.6rem 1rem;flex-wrap:nowrap;gap:.6rem}
body.pv .cabecera img{height:34px}
body.pv .cabecera .quien{margin-left:auto;width:auto;min-width:0;text-align:right;font-size:.72rem;line-height:1.3}
body.pv .cabecera .quien strong{font-size:.84rem}
body.pv .cabecera .quien a{margin-left:.35rem}
body.pv .tema{margin-left:0;flex-direction:column;gap:0}
body.pv .tema button{padding:3px}
body.pv .pv-saludo{margin-bottom:1.4rem}
body.pv .pv-saludo .pv-nueva{width:100%}
body.pv .pv-tarjetas{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
body.pv .pv-kpi{padding:1rem 1.1rem}
body.pv .pv-kpi.oscura{grid-column:1/-1}
body.pv .pv-kpi .cifra{font-size:2rem}
body.pv .pv-kpi .cifra.chica{font-size:1.1rem}
body.pv .pv-kpi:not(.oscura) .pie{display:none}
body.pv .pv-fila{padding:.9rem 1rem;gap:.7rem}
body.pv .pv-fila-texto{flex-basis:calc(100% - 60px)}
body.pv .pv-fila .pv-barrita,body.pv .pv-lado-fila,body.pv .pv-mini{display:none}
body.pv .pv-fila .pv-estado{min-width:0;margin-left:58px}
body.pv .pv-fila-estado{align-items:flex-start;margin-left:58px}
body.pv .pv-lista-cabeza{padding:1rem 1rem .7rem}
body.pv .pv-sub{display:none}
body.pv .pv-buscar{flex:1 1 100%;margin-left:0}
body.pv .pv-ins.grande{width:48px;height:48px;border-radius:14px;font-size:1rem}
body.pv .pv-camino{gap:.4rem;padding:1rem}
body.pv .pv-paso{min-width:0}
body.pv .pv-paso .nom{font-size:.7rem}
body.pv .pv-paso .cu{display:none}
body.pv .pv-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
body.pv .pv-paso-form{padding:1.2rem}
body.pv .pv-preg{font-size:1.05rem}
}
@media print{ body.pv .pv-abajo,body.pv .pv-enviar{display:none} }
/* --- Ajustes después de verlo en el servidor (04/10/2026) -----------------
Daniel comparó contra el lienzo y tenía razón en tres cosas: la letra de los
títulos se veía más delgada, el recuadro de contacto no era el del lienzo, y
la cabecera seguía siendo la de antes. Además: la entrada y las pantallas de
la oficina también llevan el diseño. */
/* La letra. `antialiased` (que el portal trae desde el principio) adelgaza
Lato en la Mac, y el lienzo la dibuja con el suavizado normal del sistema.
Los títulos, además, heredaban el interlineado de párrafo (1.6). */
body.pv{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
body.pv :is(h1,h2,h3){line-height:1.2}
body.pv h1{font-size:clamp(1.9rem,3.6vw,2.5rem);letter-spacing:-.025em;margin-bottom:.4rem}
body.pv .tarjeta h2,body.pv .pv-lista-cabeza h2{font-size:1.1875rem;letter-spacing:-.005em}
body.pv .entradilla{font-size:1.06rem;color:var(--ink-soft)}
/* El recuadro «¿Algo que no cabe…?», como en el lienzo. */
body.pv .pv-contacto h2{margin:0 0 .4rem}
body.pv .pv-contacto p{font-size:.906rem;line-height:1.5;margin:0 0 .9rem}
body.pv .pv-contacto .boton{display:flex;justify-content:flex-start;gap:.6rem;margin-top:.6rem;
padding:0 1.25rem;font-size:.94rem;color:var(--ink)}
body.pv .pv-contacto .boton svg{flex:none}
html.oscuro body.pv .pv-atajos .boton svg{color:var(--ink-soft)}
/* La cabecera: tu nombre y el círculo con tus iniciales; al tocarlo, el panel. */
body.pv .pv-derecha{margin-left:auto;display:flex;align-items:center;gap:.75rem}
body.pv .puerta-crm{display:inline-flex;align-items:center;min-height:36px;padding:0 .95rem;border-radius:999px;
background:var(--tinta);color:#fff;font-weight:700;font-size:.82rem;text-decoration:none}
body.pv .puerta-crm:hover{background:#121A20;color:#fff}
html.oscuro body.pv .puerta-crm{background:#080C10;color:#E8EDF1;border:1px solid var(--borde)}
body.pv .pv-cuenta{position:relative}
body.pv .pv-cuenta summary{list-style:none;display:flex;align-items:center;gap:.7rem;cursor:pointer;
padding:.25rem .4rem .25rem .7rem;border-radius:999px}
body.pv .pv-cuenta summary::-webkit-details-marker{display:none}
body.pv .pv-cuenta summary:hover,body.pv .pv-cuenta[open] summary{background:var(--tint)}
body.pv .pv-cuenta summary:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
body.pv .pv-quien{text-align:right;line-height:1.3}
body.pv .pv-quien strong{display:block;font-size:.9rem;color:var(--ink)}
body.pv .pv-quien span{font-size:.8rem;color:var(--gray)}
body.pv .pv-avatar{width:40px;height:40px;flex:none;border-radius:50%;background:var(--tinta);color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}
html.oscuro body.pv .pv-avatar{background:var(--ink);color:#0E1418}
body.pv .pv-flecha{color:var(--gray);transition:transform .15s ease}
body.pv .pv-cuenta[open] .pv-flecha{transform:rotate(180deg)}
body.pv .pv-panel{position:absolute;right:0;top:calc(100% + .5rem);z-index:80;min-width:260px;
background:var(--white);border:1px solid var(--line);border-radius:16px;padding:.5rem;
box-shadow:0 18px 40px -18px rgba(23,35,43,.45);display:flex;flex-direction:column}
body.pv .pv-panel-cabeza{padding:.6rem .75rem .75rem;border-bottom:1px solid var(--line);margin-bottom:.35rem;line-height:1.35}
body.pv .pv-panel-cabeza strong{display:block;font-size:.95rem}
body.pv .pv-panel-cabeza span{font-size:.8rem;color:var(--gray);word-break:break-all}
body.pv .pv-panel > a{display:flex;align-items:center;min-height:42px;padding:0 .75rem;border-radius:10px;
color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:700}
body.pv .pv-panel > a:hover{background:var(--tint)}
body.pv .pv-panel-tema{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:0 .75rem;
font-size:.92rem;font-weight:700;color:var(--ink)}
body.pv .pv-panel-tema:has(.tema:empty){display:none}
body.pv .pv-panel-tema .tema{margin:0;flex-direction:row;gap:2px}
body.pv .pv-panel-tema .tema button{padding:6px}
body.pv .pv-panel > a.pv-salir{color:var(--rojo);border-top:1px solid var(--line);border-radius:0 0 10px 10px;margin-top:.35rem}
/* --- La entrada ----------------------------------------------------------- */
body.pv .pv-entrada{max-width:1040px;padding-top:3rem}
body.pv .pv-entrada-caja{display:flex;flex-wrap:wrap;background:var(--white);border:1px solid var(--line);
border-radius:28px;box-shadow:var(--pv-sombra);overflow:hidden}
body.pv .pv-entrada-marca{flex:1 1 380px;background:var(--tinta);color:#C9D3DA;padding:3rem 2.8rem;
display:flex;flex-direction:column;gap:1.4rem;position:relative}
body.pv .pv-entrada-marca::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
background:linear-gradient(90deg,var(--green),var(--cyan))}
html.oscuro body.pv .pv-entrada-marca{background:#0B1115}
body.pv .pv-entrada-marca .et{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#FFD866}
body.pv .pv-entrada-lema{margin:0;font-size:clamp(1.7rem,3vw,2.2rem);line-height:1.15;font-weight:700;letter-spacing:-.02em;color:#fff}
body.pv .pv-entrada-marca ul{list-style:none;margin:.4rem 0 0;padding:0;display:flex;flex-direction:column;gap:1rem}
body.pv .pv-entrada-marca li{display:flex;gap:.85rem;align-items:flex-start;font-size:.98rem;line-height:1.5}
body.pv .pv-entrada-marca li svg{flex:none;width:38px;height:38px;padding:9px;border-radius:11px;
background:rgba(255,255,255,.08);color:#9FE3F2}
body.pv .pv-entrada-marca li strong{color:#fff}
body.pv .pv-entrada-form.acceso{flex:1 1 380px;max-width:none;margin:0;padding:3rem 2.8rem}
body.pv .pv-entrada-form .marca{text-align:left;margin-bottom:1.6rem}
body.pv .pv-entrada-form h1{font-size:clamp(2rem,4vw,2.6rem)}
body.pv .pv-entrada-form form.tarjeta{border:0;box-shadow:none;padding:0;background:transparent}
body.pv .pv-entrada-form .campo input{min-height:48px;border-radius:12px;background:#F7FAFC}
html.oscuro body.pv .pv-entrada-form .campo input{background:var(--tint)}
body.pv .pv-entrada-form .boton{min-height:50px;font-size:1rem}
/* Las otras pantallas de una sola caja (olvidé mi contraseña, poner una
nueva, cambiarla): el mismo saludo grande y la caja redondeada. */
body.pv .acceso:not(.pv-entrada-form){max-width:460px}
body.pv .acceso:not(.pv-entrada-form) .marca h1{font-size:clamp(1.8rem,3.4vw,2.2rem)}
body.pv .acceso:not(.pv-entrada-form) form.tarjeta{border-radius:24px;padding:1.8rem}
body.pv .acceso .campo input{border-radius:12px;min-height:46px}
/* --- Las pantallas de la oficina (directorio de proveedores) -------------- */
body.pv .proveedores li{border-radius:16px;padding:1.1rem 1.3rem;box-shadow:var(--pv-sombra);margin-bottom:.8rem}
body.pv .proveedores a.titulo{font-size:1.05rem}
body.pv .filtros-dir{background:var(--white);border:1px solid var(--line);border-radius:var(--pv-r);
padding:1.1rem 1.3rem;box-shadow:var(--pv-sombra)}
body.pv .filtros-dir .boton{min-height:44px}
@media (max-width:720px){
body.pv .tema-sola{margin-left:auto;flex-direction:row;gap:2px}
/* Dos tarjetas por renglón: la que se queda sola se estira (la oscura ya
ocupa su renglón entero, por eso la cuenta cambia cuando está). */
body.pv .pv-tarjetas:not(:has(> .oscura)) > :last-child:nth-child(odd),
body.pv .pv-tarjetas:has(> .oscura) > :last-child:nth-child(even){grid-column:1/-1}
body.pv .pv-quien{display:none}
body.pv .pv-cuenta summary{padding:.2rem}
body.pv .pv-avatar{width:36px;height:36px;font-size:.8rem}
body.pv .puerta-crm{min-height:32px;padding:0 .7rem;font-size:.75rem}
body.pv .pv-panel{min-width:240px}
body.pv:not(.es-cliente) .cabecera .interior{flex-wrap:wrap}
body.pv:not(.es-cliente) .menu{order:3;width:100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap}
body.pv .pv-entrada{padding-top:1rem}
body.pv .pv-entrada-caja{border-radius:22px}
body.pv .pv-entrada-marca{padding:1.6rem 1.4rem;gap:.8rem}
body.pv .pv-entrada-marca ul{display:none}
body.pv .pv-entrada-lema{font-size:1.35rem}
body.pv .pv-entrada-form.acceso{padding:1.8rem 1.4rem}
}
/* =========================================================================
Verificación en dos pasos (dos-pasos.php) — entrega 2 del 2FA, 13/10/2026.
Solo medidas con nombre de :root; el QR va siempre sobre blanco, también
en modo oscuro, porque muchas cámaras no leen un QR claro sobre oscuro.
========================================================================= */
body.pv .dos-pasos{max-width:680px}
body.pv .dos-pasos .tarjeta{margin-bottom:1.2rem}
body.pv .dos-pasos .tarjeta h2{margin:0 0 .8rem;font-size:1.1rem}
body.pv .dp-pasos{margin:0 0 1rem;padding-left:1.3rem;line-height:1.55}
body.pv .dp-pasos li{margin-bottom:.45rem}
body.pv .dp-nota{color:var(--gray);font-size:.88rem}
body.pv .dp-qr-fila{display:grid;grid-template-columns:200px 1fr;gap:1.4rem;align-items:start}
body.pv .dp-qr-fila p:first-child{margin-top:0}
body.pv .dp-qr{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:.4rem;line-height:0}
body.pv .dp-qr svg{width:100%;height:auto}
body.pv .dp-clave code{display:inline-block;font-size:1.05rem;letter-spacing:.06em;padding:.45rem .7rem;
background:var(--tint);border:1px solid var(--line);border-radius:var(--r-sm);word-break:break-all}
body.pv .dp-entrada-codigo{font-size:1.3rem;letter-spacing:.25em;max-width:12rem;font-variant-numeric:tabular-nums}
body.pv .dp-cancelar{margin-top:.8rem}
body.pv .dp-encendida{font-weight:700;color:var(--green-600);margin-top:0;font-size:1.05rem}
body.pv .dp-alerta{border-left:4px solid var(--ambar);padding:.4rem .8rem;background:var(--tint)}
body.pv .dp-codigos{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem 1.6rem;margin:1rem 0;padding-left:2rem;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:1.1rem;letter-spacing:.05em}
body.pv .dp-acciones{display:flex;flex-wrap:wrap;gap:.6rem}
body.pv .dp-pie-impreso{display:none}
@media (max-width:560px){
body.pv .dp-qr-fila{grid-template-columns:1fr}
body.pv .dp-qr{max-width:220px;margin:0 auto}
}
@media print{
body.pv .cabecera,body.pv .menu,body.pv .pie,body.pv .dp-no-imprimir,body.pv .dos-pasos > h1,body.pv .dos-pasos > .entradilla{display:none}
body.pv .dp-respaldo{border:0;box-shadow:none}
body.pv .dp-pie-impreso{display:block;color:#555;font-size:.85rem}
}
/* --- Entrada con código (2FA entrega 3, 13/10/2026): acceso-codigo.php ---- */
body.pv .pv-entrada-form .dp-entrada-codigo{max-width:none;text-align:center}
body.pv .pv-recordar{margin:0 0 1.1rem}
body.pv .pv-recordar .ayuda{display:block;color:var(--gray);font-size:.82rem;margin-top:.1rem}
body.pv .pv-perdi{margin-top:1.2rem;font-size:.9rem;color:var(--gray)}
body.pv .pv-perdi summary{cursor:pointer;color:var(--ink);font-weight:600;padding:.3rem 0}
body.pv .pv-perdi[open] summary{margin-bottom:.3rem}
body.pv .pv-perdi p{margin:.5rem 0;line-height:1.5}
body.pv .pv-volver{margin-top:1rem;text-align:center}
body.pv .pv-volver button{background:none;border:0;padding:.4rem;color:var(--gray);font:inherit;font-size:.9rem;cursor:pointer;text-decoration:underline}
body.pv .pv-volver button:hover{color:var(--ink)}