/* ============================================ PORTAL DOCUMENTAL - Estilos propios (no depende del CSS del sitio principal) ============================================ */ :root{ /* Color — paleta de marca: cian #00A1B8 (estructura) + naranja #FA9B02 (acento) */ --pt-tinta: #141414; /* texto principal */ --pt-gris: #595959; /* texto secundario (sobre blanco) */ --pt-marca-cian: #00A1B8; /* color de marca 1 */ --pt-marca-naranja: #FA9B02; /* color de marca 2 */ --pt-navy-900: #0A0A0A; /* negro (estructura). El nombre se quedó de cuando era azul marino */ --pt-navy-800: #161616; --pt-navy-700: #1F1F1F; /* negro de encabezado/pestañas/botón */ --pt-azul: #FA9B02; /* acento naranja (hover, enlaces, foco) */ --pt-azul-600: #D98500; /* naranja oscuro */ --pt-azul-claro: #A8E4EE; /* cian claro (texto sobre el chrome) */ --pt-fondo: #F2F8F9; --pt-blanco: #fff; /* blanco real: texto sobre el chrome oscuro */ --pt-superficie: #fff; /* fondo de tarjetas/inputs (cambia en tema oscuro) */ --pt-superficie-2: #EDF4F4; --pt-borde: #E2EAEC; --pt-verde: #157039; --pt-verde-suave: #DDF3E4; --pt-rojo: #B3261E; --pt-rojo-suave: #FBE3E1; --pt-ambar: #8A4B08; --pt-ambar-suave: #FCEFD3; /* Los mismos tres colores, pero para TEXTO y bordes finos. En claro coinciden con los de arriba; en oscuro se aclaran para poder leerse sobre las superficies del tema. */ --pt-verde-txt: #157039; --pt-rojo-txt: #B3261E; --pt-ambar-txt: #8A4B08; /* Elevación (sombras suaves, sin bordes duros) */ --pt-sombra-1: 0 1px 2px rgba(0,0,0,.07), 0 3px 10px rgba(0,0,0,.06); --pt-sombra-2: 0 4px 10px rgba(0,0,0,.10), 0 14px 30px rgba(0,0,0,.14); --pt-sombra-3: 0 10px 24px rgba(0,0,0,.18), 0 24px 60px rgba(0,0,0,.22); /* Movimiento */ --pt-curva: cubic-bezier(.16, 1, .3, 1); /* ease-out expo */ --pt-rapido: .18s var(--pt-curva); --pt-normal: .3s var(--pt-curva); /* Capas */ --pt-z-encabezado: 10; --pt-z-modal: 100; --pt-z-toast: 200; --pt-fuente-titulos: 'Lora', Georgia, serif; --pt-fuente-texto: 'Krub', Arial, sans-serif; } /* ============ TEMA OSCURO ============ Se activa con html[data-tema="oscuro"] (lo fija tema.js y un script en el para evitar parpadeo). Solo redefine tokens: el resto del CSS, que ya usa variables, hereda el cambio. --pt-blanco se queda blanco a propósito (es el texto sobre el chrome negro); las superficies usan --pt-superficie. */ html[data-tema="oscuro"]{ --pt-tinta: #EDEDED; --pt-gris: #B3B3B3; /* secundario más claro: legible, sin camuflarse */ --pt-navy-900: #050505; --pt-navy-800: #111111; --pt-navy-700: #2A2A2A; /* chrome (cabecera/botones) */ --pt-azul: #FBAE33; /* acento naranja (más claro para leer en oscuro) */ --pt-azul-600: #E79A1A; --pt-azul-claro: #8FCAD6; --pt-fondo: #0B0B0B; --pt-superficie: #161616; --pt-superficie-2: #1F1F1F; --pt-borde: #363636; /* bordes visibles para separar componentes */ --pt-verde-suave: #14361F; --pt-rojo-suave: #3A1714; --pt-ambar-suave: #3A2A0C; /* Semaforo aclarado: sobre las superficies oscuras pasa de 2.2:1 a 6:1 de contraste, que ya se lee. Los rellenos solidos no cambian. */ --pt-verde-txt: #57C98A; --pt-rojo-txt: #EF8078; --pt-ambar-txt: #E8A33C; --pt-sombra-1: 0 1px 2px rgba(0,0,0,.35), 0 3px 10px rgba(0,0,0,.3); --pt-sombra-2: 0 4px 10px rgba(0,0,0,.4), 0 14px 30px rgba(0,0,0,.45); --pt-sombra-3: 0 10px 24px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.55); color-scheme: dark; } /* Títulos: en claro son negros; en oscuro deben aclararse para leerse. Los títulos sobre el chrome ya usan color:var(--pt-blanco) y siguen blancos. */ html[data-tema="oscuro"] h1, html[data-tema="oscuro"] h2, html[data-tema="oscuro"] h3, html[data-tema="oscuro"] .pt-chats__cab h3, html[data-tema="oscuro"] .pt-leyes > h3{ color: #E6E6E6; } /* Textos que en claro son negros y quedarían ilegibles sobre superficie oscura: etiquetas de formulario, botones fantasma, leyes e insignias. */ html[data-tema="oscuro"] .pt-campo > span, html[data-tema="oscuro"] .pt-campo > legend{ color: #DEDEDE; } html[data-tema="oscuro"] .pt-ley__txt strong, html[data-tema="oscuro"] .pt-ley__ic, html[data-tema="oscuro"] .pt-notif__objetivo{ color: #D0D0D0; } /* Insignias: tonos apagados (nada de neón), legibles sobre su fondo */ html[data-tema="oscuro"] .pt-insignia--activa{ color: #A7D2B6; } html[data-tema="oscuro"] .pt-insignia--inactiva{ color: #E2C492; } /* Inputs: fondo más oscuro que la tarjeta + borde claro → se ven como campos, no se camuflan con la superficie. */ html[data-tema="oscuro"] .pt-campo input, html[data-tema="oscuro"] .pt-campo select, html[data-tema="oscuro"] .pt-campo textarea, html[data-tema="oscuro"] .pt-chat-entrada textarea{ background-color: #0E0E0E; border-color: #3D3D3D; } /* Botón fantasma: fondo y borde sutiles para que se lea como botón */ html[data-tema="oscuro"] .pt-boton--fantasma{ color: #E4E4E4; background-color: rgba(255, 255, 255, .05); border-color: #454545; } html[data-tema="oscuro"] .pt-boton--fantasma:hover{ background-color: rgba(255, 255, 255, .12); border-color: var(--pt-azul); } /* Ojo de "ver contraseña": claro y nítido */ html[data-tema="oscuro"] .pt-ver-clave{ color: #D0D0D0; opacity: 1; } html{ box-sizing: border-box; font-size: 62.5%; } *, *:before, *:after{ box-sizing: inherit; } [hidden]{ display: none !important; } /* ============ ICONOS SVG ============ */ .pt-svg{ display: inline-block; vertical-align: -0.18em; flex-shrink: 0; } /* Icono + texto dentro de botones */ .pt-boton .pt-svg{ vertical-align: -0.2em; margin-right: .15rem; } body{ margin: 0; min-height: 100vh; background-color: var(--pt-fondo); font-family: var(--pt-fuente-texto); font-size: 1.6rem; line-height: 1.55; color: var(--pt-tinta); -webkit-font-smoothing: antialiased; } h1, h2, h3{ font-family: var(--pt-fuente-titulos); color: var(--pt-navy-800); letter-spacing: .06rem; margin: 0; text-wrap: balance; } button{ font-family: inherit; } :focus-visible{ outline: 3px solid rgba(21,156,149,.5); outline-offset: 2px; border-radius: .6rem; } /* ============ ANIMACIONES ============ */ @keyframes pt-aparecer{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: translateY(0); } } @keyframes pt-emerger{ from{ opacity: 0; transform: translateY(14px) scale(.98); } to{ opacity: 1; transform: translateY(0) scale(1); } } /* ============ BOTONES ============ */ .pt-boton{ display: inline-block; padding: 1rem 1.8rem; border: none; border-radius: .9rem; font-size: 1.5rem; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center; transition: background-color var(--pt-rapido), color var(--pt-rapido), box-shadow var(--pt-rapido), transform var(--pt-rapido); } .pt-boton:hover{ transform: translateY(-1px); } .pt-boton:active{ transform: translateY(0) scale(.98); } .pt-boton--primario{ background-color: var(--pt-navy-700); color: var(--pt-blanco); box-shadow: 0 2px 6px rgba(0,0,0,.22); } .pt-boton--primario:hover{ background-color: var(--pt-azul); box-shadow: 0 4px 12px rgba(0,0,0,.28); } .pt-boton--fantasma{ background-color: transparent; color: var(--pt-navy-700); border: 1px solid var(--pt-borde); } .pt-boton--fantasma:hover{ background-color: #E7EFF7; border-color: var(--pt-azul-claro); } .pt-boton--peligro{ background-color: transparent; color: var(--pt-rojo-txt); border: 1px solid #EBC7C4; } .pt-boton--peligro:hover{ background-color: var(--pt-rojo-suave); border-color: var(--pt-rojo-txt); } .pt-boton--mini{ padding: .55rem 1.1rem; font-size: 1.3rem; border-radius: .7rem; } .pt-boton[disabled]{ opacity: .6; cursor: wait; transform: none; } /* ============ PÁGINA DE LOGIN ============ */ .pt-cuerpo-login{ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; background: #0B0B0B; /* fondo sólido oscuro: entrada seria al portal */ } .pt-error{ background-color: var(--pt-rojo-suave); color: var(--pt-rojo-txt); border-radius: .9rem; padding: 1rem 1.4rem; font-size: 1.4rem; margin-bottom: 1.5rem; animation: pt-aparecer .25s var(--pt-curva) backwards; } /* ============ CAMPOS DE FORMULARIO ============ */ .pt-campo{ display: block; margin-bottom: 1.6rem; } .pt-campo > span, .pt-campo > legend{ display: block; font-size: 1.4rem; font-weight: 600; margin-bottom: .5rem; color: var(--pt-navy-800); } .pt-campo input, .pt-campo select, .pt-campo textarea{ width: 100%; padding: 1.1rem 1.3rem; border: 1px solid var(--pt-borde); border-radius: 1rem; font-family: inherit; font-size: 1.5rem; background-color: var(--pt-superficie); color: var(--pt-tinta); transition: border-color var(--pt-rapido), box-shadow var(--pt-rapido); } .pt-campo input:hover, .pt-campo select:hover, .pt-campo textarea:hover{ border-color: var(--pt-azul-claro); } .pt-campo input:focus, .pt-campo select:focus, .pt-campo textarea:focus{ outline: none; border-color: var(--pt-azul); box-shadow: none; } fieldset.pt-campo{ border: 1px solid var(--pt-borde); border-radius: 1rem; padding: 1.2rem 1.4rem; } /* Campo de contraseña con botón mostrar/ocultar */ .pt-campo-clave{ position: relative; } .pt-campo-clave input{ padding-right: 4.6rem; } .pt-ver-clave{ position: absolute; top: 50%; right: .6rem; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--pt-gris); line-height: 1; padding: .5rem; border-radius: .7rem; opacity: .8; transition: opacity var(--pt-rapido), background-color var(--pt-rapido), color var(--pt-rapido); } .pt-ver-clave .pt-svg{ vertical-align: 0; } .pt-ver-clave:hover{ color: var(--pt-navy-700); } .pt-ver-clave:hover{ opacity: 1; background-color: var(--pt-fondo); } .pt-usuario-chip .pt-boton{ background-color: rgba(255,255,255,.14); color: var(--pt-blanco); } .pt-usuario-chip .pt-boton:hover{ background-color: rgba(255,255,255,.28); } .pt-pestanas button.activa{ opacity: 1; } .pt-pestanas button.activa::after{ transform: scaleX(1); } /* ============ CONTENIDO ============ */ .pt-contenido{ max-width: 110rem; margin: 0 auto; padding: 2.8rem 2rem 7rem; } .pt-contenido > section{ animation: pt-aparecer .35s var(--pt-curva) backwards; } .pt-barra-seccion{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2.2rem; } .pt-barra-seccion h2{ font-size: 2.8rem; } .pt-nota{ color: var(--pt-gris); font-size: 1.3rem; } .pt-vacio{ text-align: center; color: var(--pt-gris); padding: 5rem 2rem; border: 2px dashed var(--pt-borde); border-radius: 1.4rem; background-color: var(--pt-superficie); } /* Desactivada: se distingue por COLOR (ámbar), no por opacidad/lavado, para que el texto se siga leyendo bien también en modo oscuro. */ .pt-carpeta--inactiva{ background-color: var(--pt-ambar-suave); border: 1px solid var(--pt-ambar-txt); } .pt-carpeta__etapa .pt-svg{ color: var(--pt-azul-600); flex-shrink: 0; } /* ============ INSIGNIAS ============ */ .pt-insignia{ display: inline-flex; align-items: center; gap: .5rem; font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05rem; border-radius: 99rem; padding: .3rem 1.1rem; } .pt-insignia::before{ content: ''; width: .7rem; height: .7rem; border-radius: 50%; background-color: currentColor; } .pt-insignia--activa{ background-color: var(--pt-verde-suave); color: var(--pt-verde-txt); } .pt-insignia--inactiva{ background-color: var(--pt-ambar-suave); color: var(--pt-ambar-txt); } .pt-insignia--rol{ background-color: #E2EBF4; color: var(--pt-navy-700); } .pt-insignia--rol::before{ display: none; } /* ============ ZONA DE SUBIDA ============ */ .pt-zona-subida{ border: 2px dashed var(--pt-azul-claro); border-radius: 1.4rem; background-color: var(--pt-superficie); text-align: center; padding: 2.8rem 2rem; margin-bottom: 2.6rem; transition: background-color var(--pt-rapido), border-color var(--pt-rapido), box-shadow var(--pt-rapido); } .pt-zona-subida:hover{ border-color: var(--pt-azul); background-color: var(--pt-superficie-2); } .pt-zona-subida.arrastrando{ background-color: #E3EEF8; border-color: var(--pt-navy-700); border-style: solid; box-shadow: var(--pt-sombra-2); } .pt-zona-subida p{ margin: 0 0 1.2rem; } .pt-check-descarga{ display: inline-flex; align-items: center; gap: .5rem; margin-top: .4rem; font-size: .9rem; color: var(--pt-texto-suave, #595959); cursor: pointer; } .pt-check-descarga input{ width: 1.05rem; height: 1.05rem; cursor: pointer; } /* Interruptor de descarga por archivo (columna "Descarga") */ .pt-switch{ position: relative; display: inline-block; width: 4.4rem; height: 2.4rem; padding: 0; border: none; border-radius: 999px; cursor: pointer; background-color: var(--pt-borde); transition: background-color var(--pt-rapido); } .pt-switch:hover{ filter: brightness(.97); } .pt-switch:focus-visible{ outline: 2px solid var(--pt-navy-700); outline-offset: 2px; } .pt-switch--si{ background-color: var(--pt-verde); } .pt-switch__bola{ position: absolute; top: .3rem; left: .3rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background-color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--pt-rapido); } .pt-switch--si .pt-switch__bola{ transform: translateX(2rem); } /* ============ TABLAS ============ */ .pt-tabla-envoltura{ background-color: var(--pt-superficie); border-radius: 1.4rem; overflow: auto; /* scroll propio: el encabezado sticky se ancla aquí, no en la página (así no choca con la barra superior) */ max-height: 72vh; box-shadow: var(--pt-sombra-1); } .pt-tabla{ width: 100%; border-collapse: collapse; font-size: 1.4rem; } /* Encabezado PEGAJOSO (queda fijo al hacer scroll dentro de la tabla), estilo corporativo/legal: azul pizarra oscuro y texto claro. */ .pt-tabla th{ text-align: left; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .06rem; color: var(--pt-blanco); background-color: var(--pt-navy-900); padding: 1.3rem 1.6rem; border-bottom: 2px solid var(--pt-navy-800); white-space: nowrap; position: sticky; top: 0; z-index: 1; } .pt-tabla td{ padding: 1.2rem 1.6rem; border-bottom: 1px solid var(--pt-borde); vertical-align: middle; transition: background-color var(--pt-rapido); } /* Números y valores monetarios: alineados a la derecha */ .pt-tabla th.pt-num, .pt-tabla td.pt-num{ text-align: right; font-variant-numeric: tabular-nums; } .pt-tabla tbody tr{ transition: background-color var(--pt-rapido); } .pt-tabla tbody tr:hover td{ background-color: var(--pt-superficie-2); } .pt-tabla tr:last-child td{ border-bottom: none; } .pt-tabla .pt-celda-acciones{ display: flex; gap: .5rem; align-items: center; justify-content: flex-end; flex-wrap: nowrap; /* Ver · Descargar · Eliminar en una sola línea */ white-space: nowrap; } .pt-tabla .pt-celda-acciones .pt-boton{ flex: 0 0 auto; } .pt-icono-archivo{ color: var(--pt-navy-700); margin-right: .8rem; } .pt-icono-archivo .pt-svg{ vertical-align: -0.3em; } /* ============ DETALLE DE CARPETA ============ */ .pt-detalle-cabecera{ background-color: var(--pt-superficie); border-radius: 1.4rem; padding: 2rem 2.2rem; margin-bottom: 2.2rem; box-shadow: var(--pt-sombra-1); } .pt-detalle-cabecera h2{ font-size: 2.4rem; margin-bottom: .5rem; } .pt-estado-tramite{ display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: .6rem; } .pt-estado-tramite p{ margin: 0; font-size: 1.45rem; } #form-descripcion{ margin-top: 1.2rem; max-width: 60rem; animation: pt-aparecer .25s var(--pt-curva) backwards; } /* ============ ESTADO FORMAL DEL PROCESO (Ley 2445/2025) ============ Dropdown para cambiar la etapa (solo personal) + timeline de 9 pasos. */ .pt-proceso{ margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px dashed var(--pt-borde); } /* ============================================================ >>> SIN USO — REVISAR Y ELIMINAR MANUALMENTE <<< Estilos del timeline de 9 etapas y su barra de dropdown: esa interfaz se reemplazó por los procesos con semáforo. Ninguna clase .pt-proceso__barra ni .pt-timeline* se genera ya en el HTML. (.pt-proceso a secas SÍ se usa: no borrarla.) Bloque muerto: desde aquí hasta el marcador de cierre. ============================================================ */ .pt-proceso__barra{ display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.8rem; } .pt-proceso__barra .pt-campo{ margin: 0; flex: 1 1 30rem; min-width: 24rem; } .pt-proceso__barra .pt-boton{ flex: 0 0 auto; } /* En pantallas anchas, las 9 etapas se reparten en 3 columnas (3 por columna), llenando columna por columna (1-2-3, 4-5-6, 7-8-9). El riel verde vertical se conserva dentro de cada columna y se oculta al pie de cada una (cada 3ª fila). */ @media (min-width: 760px){ .pt-timeline{ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: 2.8rem; max-width: none; } .pt-timeline__paso:last-child::before{ display: block; } /* reactiva el riel… */ .pt-timeline__paso:nth-child(3n)::before{ display: none; } /* …salvo al pie de columna */ .pt-timeline__paso:nth-child(3n){ padding-bottom: 0; } } /* Estilos de la pestaña "Deudor", eliminada de la interfaz: ninguna clase .pt-deudor* se genera ya en el HTML. */ .pt-deudor{ animation: pt-aparecer .25s var(--pt-curva) backwards; } /* ============================================================ >>> FIN DEL BLOQUE SIN USO (timeline + deudor) <<< ============================================================ */ /* ============ MODAL ============ */ .pt-modal{ position: fixed; inset: 0; background-color: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; padding: 2rem; z-index: var(--pt-z-modal); animation: pt-aparecer .2s var(--pt-curva) backwards; } .pt-modal__caja{ background-color: var(--pt-superficie); border-radius: 1.6rem; padding: 2.6rem; width: 100%; max-width: 50rem; max-height: 90vh; overflow-y: auto; box-shadow: var(--pt-sombra-3); animation: pt-emerger .32s var(--pt-curva) backwards; } .pt-modal__caja h3{ font-size: 2.2rem; margin-bottom: 2rem; } .pt-modal__acciones{ display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2.2rem; } /* Renglón de apoyo entre el contenido del modal y sus botones: va antes de .pt-modal__acciones, que ya trae su propio margen superior. */ .pt-modal__extra{ margin: 1.6rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--pt-borde); } .pt-lista-chequeo{ display: flex; flex-direction: column; gap: .4rem; max-height: 16rem; overflow-y: auto; } .pt-lista-chequeo label{ display: flex; align-items: center; gap: .8rem; font-size: 1.45rem; padding: .5rem .7rem; border-radius: .8rem; cursor: pointer; transition: background-color var(--pt-rapido); } .pt-lista-chequeo label:hover{ background-color: var(--pt-superficie-2); } .pt-lista-chequeo input{ width: 1.7rem; height: 1.7rem; accent-color: var(--pt-navy-700); } .pt-interruptor{ display: flex; align-items: center; gap: .8rem; font-size: 1.45rem; margin: 1.5rem 0; cursor: pointer; } .pt-interruptor input{ width: 1.8rem; height: 1.8rem; accent-color: var(--pt-navy-700); } /* Vista previa del correo. El mensaje mide 600 px fijos (lo que cabe en el panel de lectura de Outlook), así que la caja se hace un poco más ancha que el resto de modales y el interior se desplaza si no cabe. La vista NO hereda el tema oscuro: un correo se ve igual para quien lo recibe, y enseñarlo oscuro aquí mentiría sobre cómo va a llegar. */ .pt-modal__caja--correo{ max-width: 72rem; } .pt-correo-vista{ max-height: 46vh; overflow: auto; border: 1px solid var(--pt-borde); border-radius: 10px; background: #EDF1F3; margin: 1.2rem 0 .4rem; color-scheme: light; } .pt-correo-vista table{ color-scheme: light; } /* «Mantener la sesión» pertenece al campo de contraseña, no al botón: va pegada arriba y con aire abajo, para que se lea como una opción de la contraseña y no como un paso suelto antes de entrar. */ .pt-recordar{ margin: .2rem 0 2.4rem; } /* ============ FORMULARIO DE USUARIOS ============ */ .pt-form-usuario{ background-color: var(--pt-superficie); border-radius: 1.4rem; padding: 2rem; margin-bottom: 2.6rem; display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: end; box-shadow: var(--pt-sombra-1); } @media (min-width: 800px){ .pt-form-usuario{ grid-template-columns: repeat(4, 1fr) auto; } } .pt-form-usuario .pt-campo{ margin-bottom: 0; } /* ============ CENTRO DE NOTIFICACIONES ============ */ .pt-sub-pestanas{ display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; } .pt-sub-pestanas button{ display: inline-flex; align-items: center; gap: .55rem; background-color: var(--pt-superficie); border: 1px solid var(--pt-borde); color: var(--pt-gris); font-size: 1.45rem; font-weight: 600; padding: .8rem 1.6rem; border-radius: 99rem; cursor: pointer; transition: background-color var(--pt-rapido), color var(--pt-rapido), border-color var(--pt-rapido), transform var(--pt-rapido); } .pt-sub-pestanas button:hover{ border-color: var(--pt-azul-claro); transform: translateY(-1px); } .pt-sub-pestanas button.activa{ background-color: var(--pt-navy-700); border-color: var(--pt-navy-700); color: var(--pt-blanco); } .pt-notif-lista{ background-color: var(--pt-superficie); border-radius: 1.4rem; box-shadow: var(--pt-sombra-1); overflow: hidden; } .pt-notif-dia{ background-color: var(--pt-superficie-2); color: var(--pt-gris); font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05rem; margin: 0; padding: 1rem 1.8rem; border-bottom: 1px solid var(--pt-borde); } .pt-notif{ display: flex; align-items: flex-start; gap: 1.3rem; padding: 1.4rem 1.8rem; border-bottom: 1px solid #EAF0F6; animation: pt-aparecer .25s var(--pt-curva) backwards; } .pt-notif:last-child{ border-bottom: none; } .pt-notif__icono{ flex-shrink: 0; color: var(--pt-navy-700); width: 3.4rem; height: 3.4rem; display: flex; align-items: center; justify-content: center; background-color: var(--pt-fondo); border-radius: 50%; font-size: 1.7rem; } .pt-notif__texto{ flex: 1; min-width: 0; } .pt-notif__texto p{ margin: 0; font-size: 1.45rem; color: var(--pt-tinta); word-break: break-word; } .pt-notif__objetivo{ color: var(--pt-navy-700); font-weight: 600; } .pt-notif__hora{ color: var(--pt-gris); font-size: 1.25rem !important; margin-top: .2rem !important; } .pt-chat__cab .pt-nota{ color: var(--pt-azul-claro); font-size: 1.3rem; } .pt-chat__cab .pt-nota strong{ color: var(--pt-blanco); } .pt-chat-vacio{ text-align: center; color: var(--pt-gris); font-size: 1.4rem; padding: 2rem 1rem; } /* ============ TOAST ============ */ .pt-toast{ position: fixed; bottom: 2.6rem; left: 50%; transform: translateX(-50%) translateY(2.4rem); background-color: var(--pt-navy-900); color: var(--pt-blanco); padding: 1.3rem 2.4rem; border-radius: 1.1rem; font-size: 1.45rem; box-shadow: var(--pt-sombra-3); opacity: 0; pointer-events: none; transition: opacity .3s var(--pt-curva), transform .3s var(--pt-curva); z-index: var(--pt-z-toast); max-width: 90vw; } .pt-toast.visible{ opacity: 1; transform: translateX(-50%) translateY(0); } .pt-toast--error{ background-color: var(--pt-rojo); } /* ============ DETALLE DE CARPETA + MENÚ LATERAL DE LEYES ============ */ /* El detalle de carpeta aprovecha los costados: contenedor más ancho (lo activa el controlador solo en esa vista). */ .pt-contenido--ancha{ max-width: 152rem; } /* El detalle de la carpeta es una sola columna: el calendario de audiencias dejó de ser barra derecha y es una pestaña más. */ .pt-carpeta-cuerpo{ display: block; } .pt-carpeta-principal{ min-width: 0; } .pt-leyes{ flex: 0 0 280px; order: 1; background-color: var(--pt-superficie); border-radius: 1.4rem; box-shadow: var(--pt-sombra-1); padding: 1.8rem; position: sticky; top: 1.6rem; } /* Panel del calendario de audiencias, dentro de las pestañas de la carpeta. El mes no se estira a todo el ancho: a partir de cierto tamaño las celdas dejan de leerse como calendario. */ .pt-panel-cal .pt-calendario{ max-width: 52rem; border: none; box-shadow: none; padding: 0; } .pt-leyes > h3{ display: flex; align-items: center; gap: .6rem; margin: 0 0 .4rem; font-family: var(--pt-fuente-titulos); color: var(--pt-navy-700); font-size: 1.7rem; } .pt-leyes__lista{ display: flex; flex-direction: column; gap: .6rem; margin-top: 1.4rem; } .pt-ley{ display: flex; align-items: flex-start; gap: .8rem; padding: .9rem 1rem; border: 1px solid var(--pt-borde); border-radius: 1rem; text-decoration: none; color: var(--pt-tinta); background-color: var(--pt-superficie); transition: border-color var(--pt-rapido), background-color var(--pt-rapido), transform var(--pt-rapido), box-shadow var(--pt-rapido); } .pt-ley:hover{ border-color: var(--pt-azul-claro); background-color: var(--pt-superficie-2); transform: translateY(-1px); box-shadow: var(--pt-sombra-1); } .pt-ley__ic{ color: var(--pt-navy-700); flex-shrink: 0; margin-top: .1rem; } .pt-ley__txt{ display: flex; flex-direction: column; line-height: 1.3; } .pt-ley__txt strong{ color: var(--pt-navy-700); font-size: 1.42rem; } .pt-ley__txt span{ color: var(--pt-gris); font-size: 1.25rem; } @media (max-width: 820px){ .pt-leyes{ flex-basis: 100%; position: static; order: 4; /* en el celular las leyes van al final, después del contenido */ } } /* ============ CHATS DEL TRÁMITE ============ */ .pt-chats{ background-color: var(--pt-superficie); border-radius: 1.4rem; box-shadow: var(--pt-sombra-1); padding: 1.8rem; margin-top: 2.2rem; } .pt-chats__cab{ display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.2rem; } .pt-chats__ic{ color: var(--pt-navy-700); flex-shrink: 0; } .pt-chats__cab h3{ margin: 0; font-family: var(--pt-fuente-titulos); color: var(--pt-navy-700); font-size: 1.8rem; } .pt-chat-historial{ display: flex; flex-direction: column; gap: .9rem; max-height: 380px; overflow-y: auto; padding: 1.2rem; background-color: var(--pt-superficie-2); border-radius: 1rem; margin-bottom: 1.2rem; } .pt-chat-msg{ max-width: 78%; align-self: flex-start; background-color: var(--pt-superficie); border: 1px solid var(--pt-borde); border-radius: 1rem; padding: .8rem 1.1rem; animation: pt-aparecer .2s var(--pt-curva) backwards; } .pt-chat-msg--mio{ align-self: flex-end; background-color: var(--pt-navy-700); border-color: var(--pt-navy-700); color: var(--pt-blanco); } .pt-chat-msg__meta{ font-size: 1.15rem; color: var(--pt-gris); margin-bottom: .25rem; } .pt-chat-msg--mio .pt-chat-msg__meta{ color: rgba(255, 255, 255, .82); } .pt-chat-msg__meta .pt-insignia{ font-size: 1rem; } .pt-chat-msg__texto{ font-size: 1.45rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; } .pt-chat-entrada{ display: flex; gap: .8rem; align-items: flex-end; } .pt-chat-entrada textarea{ flex: 1; resize: vertical; font: inherit; padding: .9rem 1.1rem; border: 1px solid var(--pt-borde); border-radius: .9rem; background-color: var(--pt-superficie); color: var(--pt-tinta); } .pt-chat-entrada textarea:focus{ outline: none; border-color: var(--pt-azul); } .pt-chat-vacio{ color: var(--pt-gris); text-align: center; padding: 1.6rem; } /* ---- Adjuntos en el chat ---- */ .pt-chat-clip{ align-self: flex-end; padding: .9rem 1.1rem; line-height: 0; cursor: pointer; } .pt-chat-clip .pt-svg{ margin: 0; vertical-align: middle; } .pt-chat-adjunto{ display: inline-flex; align-items: center; gap: .7rem; margin-bottom: .8rem; padding: .5rem .6rem .5rem 1rem; background-color: var(--pt-superficie-2); border: 1px dashed var(--pt-borde); border-radius: .9rem; font-size: 1.3rem; color: var(--pt-tinta); animation: pt-aparecer .2s var(--pt-curva) backwards; } .pt-chat-adjunto .pt-svg{ color: var(--pt-azul-600); } .pt-chat-msg__adjunto{ display: flex; align-items: center; gap: .7rem; margin-top: .6rem; padding: .6rem .8rem; background-color: var(--pt-superficie-2); border: 1px solid var(--pt-borde); border-radius: .8rem; font-size: 1.3rem; } .pt-chat-msg--mio .pt-chat-msg__adjunto{ background-color: rgba(255,255,255,.12); border-color: rgba(255,255,255,.25); color: var(--pt-blanco); } .pt-chat-msg--mio .pt-chat-msg__adjunto .pt-boton--fantasma{ color: var(--pt-blanco); border-color: rgba(255,255,255,.4); background: none; } .pt-chat-msg__adjunto-info{ display: flex; flex-direction: column; line-height: 1.25; min-width: 0; word-break: break-word; } .pt-chat-msg__adjunto-info small{ color: var(--pt-gris); font-size: 1.1rem; } .pt-chat-msg--mio .pt-chat-msg__adjunto-info small{ color: rgba(255,255,255,.75); } /* ============ CONMUTADOR DE TEMA (claro / oscuro) ============ */ /* En el portal va dentro del chip de usuario; solo icono, cuadrado. */ .pt-boton--tema{ display: inline-flex; align-items: center; justify-content: center; padding: .7rem; line-height: 0; } .pt-boton--tema .pt-svg{ margin: 0; vertical-align: middle; } /* En el login flota arriba a la derecha, sobre el degradado. */ .pt-tema-flotante{ position: fixed; top: 1.6rem; right: 1.6rem; z-index: var(--pt-z-encabezado); display: inline-flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background-color: rgba(255,255,255,.14); color: var(--pt-blanco); cursor: pointer; line-height: 0; transition: background-color var(--pt-rapido), transform var(--pt-rapido); } .pt-tema-flotante:hover{ background-color: rgba(255,255,255,.28); transform: translateY(-1px); } .pt-tema-flotante .pt-svg{ vertical-align: middle; } /* ============ RESPONSIVE (móvil) ============ */ @media (max-width: 640px){ .pt-encabezado{ padding: 1rem 1.3rem; } .pt-encabezado h1{ font-size: 1.9rem; } .pt-usuario-chip{ gap: .6rem; font-size: 1.25rem; flex-wrap: wrap; justify-content: flex-end; } .pt-pestanas{ padding: 0 1rem; overflow-x: auto; } .pt-pestanas button{ padding: 1.1rem 1.2rem; white-space: nowrap; } .pt-contenido{ padding: 2rem 1.2rem 5rem; } .pt-barra-seccion h2{ font-size: 2rem; } .pt-detalle-cabecera{ padding: 1.6rem 1.4rem; } .pt-detalle-cabecera h2{ font-size: 2rem; } .pt-tarjeta-login{ padding: 2.2rem 1.6rem; } .pt-tarjeta-login h1{ font-size: 2.8rem; } .pt-proceso__barra .pt-campo{ min-width: 0; flex: 1 1 100%; } .pt-modal__caja{ padding: 1.8rem 1.6rem; } .pt-tema-flotante{ width: 4rem; height: 4rem; top: 1.2rem; right: 1.2rem; } } /* ============ MOVIMIENTO REDUCIDO ============ */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ============ AUDIENCIAS: CALENDARIO Y LISTA ============ */ .pt-audiencias-cab{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.2rem 0 .4rem; } .pt-audiencias-cab h3{ display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.7rem; } .pt-calendario{ background: var(--pt-superficie); border: 1px solid var(--pt-borde); border-radius: 1rem; padding: 1.2rem; box-shadow: var(--pt-sombra-1); } .pt-cal__barra{ display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; } .pt-cal__semana, .pt-cal__rejilla{ display: grid; grid-template-columns: repeat(7, 1fr); gap: .2rem; text-align: center; } .pt-cal__semana span{ font-size: 1.1rem; font-weight: 600; color: var(--pt-gris); padding: .3rem 0; } .pt-cal__dia{ border: 1px solid transparent; background: transparent; border-radius: .6rem; padding: .55rem 0; font: inherit; font-size: 1.3rem; color: var(--pt-tinta); cursor: pointer; transition: background var(--pt-rapido); } .pt-cal__dia:hover:not(.pt-cal__dia--vacio){ background: var(--pt-superficie-2); } .pt-cal__dia--vacio{ cursor: default; } .pt-cal__dia--hoy{ border-color: var(--pt-azul); font-weight: 700; } .pt-cal__dia--audiencia{ background: var(--pt-navy-700); color: var(--pt-blanco); font-weight: 700; } .pt-cal__dia--audiencia:hover{ background: var(--pt-navy-800); } .pt-cal__pie{ margin-top: .8rem; display: flex; align-items: center; gap: .5rem; } .pt-cal__punto{ width: 1.1rem; height: 1.1rem; border-radius: .35rem; background: var(--pt-navy-700); display: inline-block; flex: none; } /* Día en solo lectura (deudor/acreedor): sin cursor de acción ni hover */ .pt-cal__dia--solo{ cursor: default; } .pt-cal__dia--solo:hover:not(.pt-cal__dia--vacio){ background: transparent; } .pt-cal__dia--audiencia.pt-cal__dia--solo:hover{ background: var(--pt-navy-700); } /* Próximas audiencias bajo el calendario */ .pt-cal-prox{ margin-top: 1.2rem; border-top: 1px solid var(--pt-borde); padding-top: 1rem; } .pt-cal-prox h4{ margin: 0 0 .6rem; font-family: var(--pt-fuente-titulos); color: var(--pt-navy-700); font-size: 1.45rem; } html[data-tema="oscuro"] .pt-cal-prox h4{ color: #E6E6E6; } .pt-cal-prox__item{ display: flex; flex-direction: column; gap: .1rem; padding: .5rem 0; font-size: 1.3rem; } .pt-cal-prox__item + .pt-cal-prox__item{ border-top: 1px dashed var(--pt-borde); } .pt-cal-prox__item span{ color: var(--pt-gris); } .pt-cal-prox__item a{ color: var(--pt-azul); word-break: break-all; } .pt-audiencias-lista{ display: flex; flex-direction: column; gap: .8rem; margin-top: 1.2rem; } .pt-audiencia{ display: flex; align-items: center; gap: 1rem; background: var(--pt-superficie); border: 1px solid var(--pt-borde); border-radius: 1rem; padding: 1rem 1.2rem; } .pt-audiencia__ic{ color: var(--pt-navy-700); flex: none; } .pt-audiencia__txt{ flex: 1; display: flex; flex-direction: column; gap: .15rem; min-width: 0; } .pt-audiencia__txt span{ color: var(--pt-gris); font-size: 1.3rem; } .pt-audiencia__txt a{ font-size: 1.3rem; color: var(--pt-azul); word-break: break-all; } .pt-audiencia-fecha-hora{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } /* ============ RECORDATORIOS ============ */ .pt-recordatorio{ display: flex; align-items: center; gap: 1rem; background: var(--pt-superficie); border: 1px solid var(--pt-borde); border-radius: 1rem; padding: 1rem 1.2rem; margin-bottom: .8rem; } .pt-recordatorio--vigente{ border-left: .4rem solid var(--pt-azul); } .pt-recordatorio__ic{ color: var(--pt-navy-700); flex: none; } .pt-recordatorio__txt{ flex: 1; min-width: 0; } .pt-recordatorio__txt p{ margin: 0 0 .2rem; } /* Ventana emergente de recordatorios (esquina inferior derecha) */ .pt-popup-recordatorios{ position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: var(--pt-z-toast); width: min(34rem, calc(100vw - 3.2rem)); max-height: 60vh; overflow: auto; background: var(--pt-superficie); border: 1px solid var(--pt-borde); border-radius: 1.2rem; box-shadow: var(--pt-sombra-3); padding: 1.2rem 1.4rem; } .pt-popup-recordatorios__cab{ display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; color: var(--pt-navy-700); } .pt-popup-recordatorios__cab strong{ flex: 1; color: var(--pt-tinta); } .pt-popup-recordatorios__item{ border-top: 1px solid var(--pt-borde); padding: .8rem 0; } .pt-popup-recordatorios__item p{ margin: 0 0 .2rem; } /* ============ EDITAR DOCUMENTOS (orden manual) ============ */ .pt-barra-editar-docs{ display: flex; align-items: center; justify-content: flex-end; gap: .8rem; flex-wrap: wrap; margin: .8rem 0; } .pt-fila-arrastrable{ cursor: grab; } .pt-fila-arrastrable.arrastrando{ opacity: .5; } .pt-asa-arrastre{ display: inline-block; margin-right: .6rem; color: var(--pt-gris); cursor: grab; user-select: none; } /* ============ GENERAR EXPEDIENTE ============ */ .pt-modal__caja--ancha{ max-width: 64rem; } .pt-expediente-lista{ display: flex; flex-direction: column; gap: .4rem; max-height: 44vh; overflow: auto; margin: 1rem 0; border: 1px solid var(--pt-borde); border-radius: .8rem; padding: .6rem; } .pt-expediente-item{ display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem; border-radius: .6rem; cursor: pointer; transition: background var(--pt-rapido); } .pt-expediente-item:hover{ background: var(--pt-superficie-2); } .pt-expediente-item--elegido{ background: var(--pt-superficie-2); } .pt-expediente-item--no{ opacity: .55; cursor: not-allowed; } .pt-expediente-item__num{ width: 2.2rem; height: 2.2rem; flex: none; border-radius: 50%; background: var(--pt-navy-700); color: var(--pt-blanco); font-size: 1.2rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .pt-expediente-item:not(.pt-expediente-item--elegido) .pt-expediente-item__num{ background: transparent; } .pt-expediente-item__nombre{ flex: 1; min-width: 0; word-break: break-word; } /* ============ LEYES JUNTO A LA LISTA DE CARPETAS (todos los roles) ============ */ .pt-carpetas-cuerpo{ display: flex; gap: 1.8rem; align-items: flex-start; flex-wrap: wrap; } .pt-carpetas-principal{ flex: 1 1 520px; min-width: 0; order: 1; /* las carpetas primero; las leyes a la derecha */ } .pt-carpetas-cuerpo .pt-leyes{ order: 2; } @media (max-width: 900px){ .pt-carpetas-cuerpo .pt-leyes{ position: static; flex: 1 1 100%; } } /* ============ SEMÁFOROS DE PROCESOS (días hábiles) ============ */ .pt-semaforo{ display: inline-block; border-radius: 50%; flex: none; vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); } .pt-semaforo--verde{ background: #22c55e; } .pt-semaforo--naranja{ background: #f59e0b; } .pt-semaforo--rojo{ background: #ef4444; } .pt-semaforo--pausado{ background: #8b8b8b; } .pt-semaforo-resumen{ display: flex; align-items: center; gap: .6rem; margin: .8rem 0 .2rem; font-size: 1.5rem; flex-wrap: wrap; } .pt-semaforo-cadena{ display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 .2rem; font-size: 1.3rem; color: var(--pt-gris); } .pt-semaforo-cadena__paso{ display: inline-flex; align-items: center; gap: .4rem; background: var(--pt-superficie-2); border-radius: 999px; padding: .3rem .9rem; } .pt-semaforo-cadena__paso.hecho{ text-decoration: line-through; opacity: .75; } .pt-semaforo-cadena__flecha{ color: var(--pt-gris); } /* Tarjetas de gestión de estados (operador) */ .pt-estado-tramite-card{ background: var(--pt-superficie); border-radius: 1.4rem; box-shadow: var(--pt-sombra-1); padding: 1.6rem 1.8rem; margin-bottom: 1.4rem; } .pt-estado-tramite-card--pausada{ opacity: .85; } .pt-estado-tramite-card__cab{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .pt-estado-tramite-card__cab h3{ font-family: var(--pt-fuente-titulos); } .pt-estado-tramite-card__actual{ display: flex; align-items: center; gap: .6rem; margin: .8rem 0; flex-wrap: wrap; } .pt-proceso-lista{ border-top: 1px solid var(--pt-borde); margin-top: .6rem; } .pt-proceso-fila{ display: flex; align-items: center; gap: .9rem; padding: .8rem 0; border-bottom: 1px solid var(--pt-borde); } .pt-proceso-fila__txt{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; } .pt-fila-estado:hover td{ background: var(--pt-superficie-2); } /* ============ CALENDARIO DE VENCIMIENTOS (admin/monitor) ============ */ .pt-calv-resumen{ display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: center; background: var(--pt-superficie); border-radius: 1.2rem; box-shadow: var(--pt-sombra-1); padding: 1.2rem 1.6rem; margin-bottom: 1.4rem; } .pt-calv-resumen span{ display: inline-flex; align-items: center; gap: .5rem; } .pt-calv__semana, .pt-calv__rejilla{ display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; max-width: 52rem; } .pt-calv__semana{ margin-top: 1rem; } .pt-calv__semana span{ text-align: center; font-size: 1.2rem; color: var(--pt-gris); padding: .2rem 0; } .pt-calv__dia{ min-height: 5.2rem; border: 1px solid var(--pt-borde); border-radius: .8rem; background: var(--pt-superficie); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .3rem; padding: .4rem .2rem; cursor: pointer; font: inherit; color: inherit; } .pt-calv__dia:hover:not(.pt-calv__dia--vacio){ background: var(--pt-superficie-2); } .pt-calv__dia--vacio{ border: none; background: transparent; cursor: default; } .pt-calv__dia--nohabil{ background: var(--pt-superficie-2); color: var(--pt-gris); opacity: .75; } .pt-calv__dia--hoy{ border-color: var(--pt-azul); font-weight: 700; } .pt-calv__dia--sel{ outline: 2px solid var(--pt-azul); } .pt-calv__num{ font-size: 1.3rem; } .pt-calv__puntos{ display: flex; gap: .25rem; flex-wrap: wrap; justify-content: center; align-items: center; } .pt-calv-dia-detalle{ margin-top: 1.6rem; background: var(--pt-superficie); border-radius: 1.2rem; box-shadow: var(--pt-sombra-1); padding: 1.4rem 1.8rem; max-width: 72rem; } .pt-calv-dia-detalle h3{ margin-bottom: .6rem; font-family: var(--pt-fuente-titulos); } /* ============ CHAT DE SOPORTE FLOTANTE (admin ↔ operadores) ============ */ .pt-soporte-burbuja{ position: fixed; right: 2rem; bottom: 2rem; width: 5.2rem; height: 5.2rem; border-radius: 50%; background: var(--pt-navy-700); color: var(--pt-blanco); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--pt-sombra-2); z-index: var(--pt-z-modal); } .pt-soporte-burbuja:hover{ background: var(--pt-navy-800); } /* Parpadeo rojo cuando llega un mensaje nuevo */ @keyframes pt-parpadeo-rojo{ 0%, 100%{ background: var(--pt-navy-700); } 50%{ background: #ef4444; } } .pt-soporte-burbuja--alerta{ animation: pt-parpadeo-rojo 1s infinite; } .pt-soporte-contador{ position: absolute; top: -0.4rem; right: -0.4rem; min-width: 2rem; height: 2rem; border-radius: 999px; background: #ef4444; color: #fff; font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 .5rem; } .pt-soporte-panel{ position: fixed; right: 2rem; bottom: 8rem; width: 34rem; height: 44rem; min-width: 28rem; min-height: 30rem; max-width: 90vw; max-height: 80vh; background: var(--pt-superficie); border-radius: 1.2rem; box-shadow: var(--pt-sombra-3); display: flex; flex-direction: column; overflow: hidden; resize: both; /* redimensionable */ z-index: var(--pt-z-modal); } .pt-soporte-panel__cab{ background: var(--pt-navy-700); color: var(--pt-blanco); padding: 1rem 1.4rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; flex: none; } .pt-soporte-panel__cab .pt-boton{ color: var(--pt-blanco); } .pt-soporte-lista{ flex: 1; overflow-y: auto; padding: 1rem; } .pt-soporte-lista__item{ display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; padding: 1rem; border: 1px solid var(--pt-borde); border-radius: .9rem; background: var(--pt-superficie); margin-bottom: .6rem; cursor: pointer; font: inherit; color: inherit; } .pt-soporte-lista__item:hover{ background: var(--pt-superficie-2); } .pt-soporte-mensajes{ flex: 1; } .pt-soporte-entrada{ flex: none; } /* Badge de no leídos en pestañas de chat y filas */ .pt-badge-noleidos{ display: inline-flex; align-items: center; justify-content: center; min-width: 1.8rem; height: 1.8rem; border-radius: 999px; background: #ef4444; color: #fff; font-size: 1.1rem; font-weight: 700; padding: 0 .45rem; margin-left: .4rem; } /* Modal de llamada */ .pt-llamada{ text-align: center; } .pt-llamada .pt-nota{ margin: 1rem 0 1.6rem; } /* ============ CAMPANA DE NOTIFICACIONES ============ */ .pt-campana-envoltura{ position: relative; } .pt-campana{ position: relative; } .pt-campana--alerta{ animation: pt-parpadeo-rojo 1s infinite; } .pt-campana-dropdown{ position: absolute; right: 0; top: calc(100% + .6rem); width: 36rem; max-width: 90vw; max-height: 46rem; background: var(--pt-superficie); color: var(--pt-tinta); border-radius: 1.2rem; box-shadow: var(--pt-sombra-3); display: flex; flex-direction: column; overflow: hidden; z-index: var(--pt-z-modal); } .pt-campana-dropdown__cab{ display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.4rem; border-bottom: 1px solid var(--pt-borde); flex: none; } .pt-campana-lista{ overflow-y: auto; padding: .6rem; } .pt-campana-item{ display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1rem; border-radius: .8rem; font-size: 1.35rem; } .pt-campana-item--nueva{ background: var(--pt-superficie-2); font-weight: 600; } .pt-campana-item .pt-nota{ display: block; font-weight: 400; } /* ============ BACKLOG: NAVEGACIÓN FIJA, BUSCADOR, PRESENCIA ============ */ /* Barra superior UNIFICADA: marca + sesión + pestañas bajan juntas, como un solo bloque, sin separarse al hacer scroll */ .pt-topbar{ position: sticky; top: 0; z-index: var(--pt-z-encabezado); box-shadow: var(--pt-sombra-1); } .pt-buscador{ display: flex; align-items: center; gap: .8rem; background: var(--pt-superficie); border: 1px solid var(--pt-borde); border-radius: 999px; padding: .7rem 1.4rem; max-width: 42rem; margin-bottom: 1.6rem; color: var(--pt-gris); } .pt-buscador input{ border: none; outline: none; background: transparent; font: inherit; color: var(--pt-tinta); width: 100%; } /* Indicador En línea / Desconectado */ .pt-conexion{ display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #8b8b8b; vertical-align: middle; } .pt-conexion--en-linea{ background: #22c55e; } /* Recordatorios apilados (una tarjeta a la vez) */ .pt-pila{ position: relative; } .pt-pila-sombra{ position: absolute; inset: 0; background: var(--pt-superficie-2); border: 1px solid var(--pt-borde); border-radius: 1rem; } .pt-pila-frente{ position: relative; } /* Chat de la carpeta ANCLADO (misma familia que el de soporte) */ .pt-chat-flotante{ position: fixed; left: 2rem; bottom: 2rem; width: 36rem; height: 46rem; min-width: 30rem; min-height: 32rem; max-width: 92vw; max-height: 82vh; background: var(--pt-superficie); border-radius: 1.2rem; box-shadow: var(--pt-sombra-3); display: flex; flex-direction: column; overflow: hidden; resize: both; z-index: var(--pt-z-modal); margin: 0; padding: 0; } .pt-chat-flotante__cab{ background: var(--pt-navy-700); color: var(--pt-blanco); padding: 1rem 1.4rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; flex: none; } .pt-chat-flotante__cab h3{ color: var(--pt-blanco); } .pt-chat-flotante__cab .pt-nota{ color: var(--pt-azul-claro); } .pt-chat-flotante__cab .pt-boton{ color: var(--pt-blanco); } .pt-chat-flotante #chat-mensajes{ flex: 1; } .pt-chat-flotante #form-mensaje{ flex: none; } .pt-chat-carpeta-burbuja{ left: 2rem; right: auto; background: var(--pt-azul-600); } .pt-chat-destinatario{ padding: .5rem 1.2rem; border-bottom: 1px solid var(--pt-borde); flex: none; } .pt-chat-destinatario select{ font: inherit; border: 1px solid var(--pt-borde); border-radius: .6rem; padding: .3rem .6rem; background: var(--pt-superficie); color: var(--pt-tinta); } /* Barra flotante de llamada en segundo plano */ .pt-llamada-mini{ position: fixed; top: 1.2rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .8rem; background: var(--pt-navy-800); color: var(--pt-blanco); border-radius: 999px; padding: .7rem 1.6rem; box-shadow: var(--pt-sombra-3); z-index: calc(var(--pt-z-toast) + 1); } .pt-llamada-mini .pt-boton{ color: var(--pt-blanco); } /* ============ REDISEÑO: CHATS Y LLAMADA DE SOPORTE ============ */ /* Historial: fondo suave y burbujas modernas con radios asimétricos */ .pt-chat-historial{ background: var(--pt-fondo); padding: 1.2rem; } .pt-chat-msg{ max-width: 82%; background: var(--pt-superficie); border: 1px solid var(--pt-borde); border-radius: 1.4rem 1.4rem 1.4rem .4rem; padding: .8rem 1.2rem; margin: .5rem 0; box-shadow: var(--pt-sombra-1); } .pt-chat-msg--mio{ margin-left: auto; background: var(--pt-navy-800); color: var(--pt-blanco); border: none; border-radius: 1.4rem 1.4rem .4rem 1.4rem; } .pt-chat-msg--mio .pt-chat-msg__meta{ color: var(--pt-azul-claro); } .pt-chat-msg__meta{ font-size: 1.15rem; color: var(--pt-gris); margin-bottom: .25rem; } .pt-chat-msg__texto{ font-size: 1.4rem; line-height: 1.45; word-wrap: break-word; } .pt-chat-msg--mio .pt-chat-msg__adjunto{ background: rgba(255,255,255,.12); border-color: transparent; } /* Entrada de mensaje: cápsula redondeada */ .pt-chat-entrada{ background: var(--pt-superficie); border-top: 1px solid var(--pt-borde); padding: .8rem 1rem; display: flex; align-items: flex-end; gap: .6rem; } .pt-chat-entrada textarea{ flex: 1; border: 1px solid var(--pt-borde); border-radius: 1.4rem; padding: .8rem 1.2rem; font: inherit; resize: none; background: var(--pt-fondo); color: var(--pt-tinta); } .pt-chat-entrada textarea:focus{ outline: 2px solid var(--pt-azul); border-color: transparent; } /* Cabeceras de los paneles flotantes: color plano de marca */ .pt-soporte-panel__cab, .pt-chat-flotante__cab{ background: var(--pt-navy-900); } .pt-soporte-lista__item{ border-radius: 1.1rem; } .pt-soporte-burbuja{ transition: transform .15s var(--pt-curva); } .pt-soporte-burbuja:hover{ transform: scale(1.07); } /* ---- Interfaz de la llamada ---- */ .pt-llamada{ text-align: center; padding-top: 2.4rem; } .pt-llamada::before{ content: ''; display: block; width: 7.2rem; height: 7.2rem; margin: 0 auto 1.2rem; border-radius: 50%; background: var(--pt-navy-800); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 3.2rem; animation: pt-pulso-llamada 1.6s ease-in-out infinite; } /* Latido sobrio (escala), sin halo de color brillante */ @keyframes pt-pulso-llamada{ 0%, 100%{ transform: scale(1); } 50%{ transform: scale(1.04); } } .pt-llamada .pt-modal__acciones{ flex-wrap: wrap; gap: .6rem; } .pt-boton-llamada{ display: inline-flex; align-items: center; gap: .5rem; } /* Botón de llamada PRESIONADO (mic/altavoz silenciado): marcado en ROJO y el icono lleva la raya encima (se cambia el trazo desde app.js). */ .pt-boton-llamada--activo, .pt-boton-llamada--activo:hover{ background: #ef4444 !important; border-color: #ef4444 !important; color: #fff !important; } .pt-llamada-mini .pt-boton-llamada--activo{ background: #ef4444 !important; color: #fff !important; } .pt-llamada-mini__estado{ display: inline-flex; align-items: center; gap: .5rem; } /* ============ CALENDARIO DE CARPETA: RANGOS DE LOS ESTADOS ============ Días dentro del plazo de un proceso (solo personal y monitor). */ .pt-cal__dia--rango{ background: var(--pt-ambar-suave); border-color: var(--pt-ambar-txt); } .pt-cal__dia--rango.pt-cal__dia--audiencia{ /* audiencia dentro de un rango: manda el color de audiencia */ background: var(--pt-navy-700); } .pt-cal__cuadro-rango{ display: inline-block; width: 10px; height: 10px; background: var(--pt-ambar-suave); border: 1px solid var(--pt-ambar-txt); border-radius: 3px; vertical-align: middle; } /* Barra de filtros (calendario de vencimientos, notificaciones, constancias) */ .pt-calv-filtros{ display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; background: var(--pt-superficie); border: 1px solid var(--pt-borde); border-radius: 1rem; padding: .8rem 1.4rem; margin: 0 0 1.2rem; } .pt-calv-filtros select{ font: inherit; border: 1px solid var(--pt-borde); border-radius: .6rem; padding: .35rem .7rem; background: var(--pt-superficie); color: var(--pt-tinta); max-width: 32rem; } /* ============ AJUSTES DEL LOTE: visor, soporte, leyes, usuarios ============ */ /* Visor de Word/Excel dentro del portal */ .pt-visor-caja{ display: flex; flex-direction: column; max-height: 88vh; width: min(96rem, 94vw); } .pt-visor-cab{ display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid var(--pt-borde); margin-bottom: 1rem; } .pt-visor-cab h3{ font-family: var(--pt-fuente-titulos); word-break: break-word; } .pt-visor-cuerpo{ overflow: auto; flex: 1; } .pt-visor-cuerpo table{ border-collapse: collapse; width: 100%; font-size: 1.3rem; } .pt-visor-cuerpo td, .pt-visor-cuerpo th{ border: 1px solid var(--pt-borde); padding: .3rem .6rem; } .pt-visor-hoja{ margin: 1.2rem 0 .6rem; color: var(--pt-navy-800); display: flex; align-items: center; gap: .5rem; } .pt-docx{ background: #fff; color: #111; padding: 1.6rem; border-radius: .8rem; } /* Cabecera del chat de soporte: botones ARRIBA, título DEBAJO */ .pt-soporte-panel__cab{ flex-direction: column; align-items: stretch; gap: .5rem; cursor: default; } .pt-soporte-panel__acciones{ display: flex; align-items: center; justify-content: space-between; gap: .6rem; } .pt-soporte-panel__titulo{ cursor: pointer; font-size: 1.5rem; } /* Leyes ABAJO y en HORIZONTAL */ .pt-leyes--horizontal{ position: static; flex: none; width: 100%; margin-top: 1.8rem; } .pt-leyes--horizontal .pt-leyes__lista{ display: grid; grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); gap: .8rem; } /* Barra de usuarios (buscador + Excel) y encabezados de grupo por rol */ .pt-usuarios-barra{ display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin: 1.6rem 0 1rem; } .pt-fila-grupo-rol td{ background: var(--pt-superficie-2); font-weight: 700; color: var(--pt-navy-800); text-transform: uppercase; letter-spacing: .03em; font-size: 1.2rem; } /* Enlace "¿Olvidaste tu contraseña?" en el login */ .pt-enlace-olvide{ display: block; margin: 1.2rem auto 0; background: none; border: none; color: var(--pt-azul); font: inherit; font-size: 1.35rem; cursor: pointer; text-decoration: underline; } /* Modal nativo