/* Inter, la misma tipografia de PracticarPro. Se sirve desde este servidor, no desde Google: es una aplicacion con datos de salud y no tiene por que filtrar la IP de cada usuario a un tercero en cada visita. Ademas funciona sin internet y no abre huecos en la politica de contenido. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fuentes/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fuentes/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --noche: #0A1628; /* menú lateral */ --noche-2: #101F38; --tinta: #0F2440; /* títulos */ --azul: #2563EB; --azul-fuerte: #1D4ED8; --azul-suave: #E8EFFD; --cielo: #38BDF8; /* Ámbar: el contraste sobre tanto azul. Va en los botones de acción y en los estados provisionales. La palabra "Pro" del logo NO es ámbar: es celeste (--cielo). El azul se queda con la estructura: menú, enlaces y pestaña activa. */ --ambar: #F59E0B; --ambar-fuerte: #D97D06; --ambar-claro: #FBBF24; --ambar-suave: #FEF6E7; --ambar-linea: #F6DFB0; --ambar-texto: #92610A; --sobre-ambar: #231405; --fondo: #F4F5F7; --panel: #FFFFFF; --texto: #3A4656; --apagado: #6B7687; --tenue: #98A2B3; --linea: #E5E7EB; --ok: #059669; --ok-suave: #ECFDF5; --avisa: #B45309; --avisa-suave: #FFFBEB; --error: #DC2626; --error-suave: #FEF2F2; --r: 12px; --sombra: 0 1px 2px rgba(15,23,42,.06); --sombra-alta: 0 8px 24px rgba(15,23,42,.08); --sans: 'Inter', "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif; /* La escala. Siete escalones y ninguno mas: veintidos tamanos distintos no son una escala, son una coleccion de decisiones sueltas. Cada uno con su oficio. */ --t-micro: .68rem; /* rotulos en mayuscula, siglas */ --t-xs: .76rem; /* pistas, encabezados de tabla, datos secundarios */ --t-sm: .84rem; /* celdas de tabla y texto corriente: el tamano base */ --t-base: .9rem; /* menu, subtitulos */ --t-md: .98rem; /* titulos de tarjeta y de seccion */ --t-lg: 1.08rem; /* la marca, titulos de ventana */ --t-xl: 1.5rem; /* el titulo de la pantalla */ --lateral: 238px; } * { box-sizing: border-box; } /* Lo escondido se queda escondido. Sin esto, cualquier clase con display:flex o grid le gana al atributo hidden y el elemento aparece igual: paso con el "Valor" de la ficha, visible y vacio antes de elegir nada. */ [hidden] { display:none !important; } /* Pulsado un enlace, una barra arriba dice que la pantalla viene en camino (navegacion.js): sin señal, la gente volvía a pulsar. */ body.cargando::before { content:""; position:fixed; top:0; left:0; height:3px; width:100%; z-index:9999; background:linear-gradient(90deg, transparent 0, var(--cielo) 35%, var(--azul) 65%, transparent 100%); background-size:50% 100%; background-repeat:no-repeat; animation:cargando 1s linear infinite; } body.cargando { cursor:progress; } @keyframes cargando { from { background-position:-50% 0; } to { background-position:150% 0; } } /* La escala vive aqui y solo aqui. Ver docs/interfaz.md. Todo lo demas va en rem, asi que mover el font-size de html encoge la interfaz entera. */ html { font-size:15px; } /* Densidad adaptativa, como PracticarPro: en un portatil de 14" cabe una jornada de trabajo sin barras de desplazamiento. No es un detalle estético: es que la recepcion de un CRC no trabaja en un monitor de 27 pulgadas. */ @media (max-width:1680px) { html { font-size:14px; } } @media (max-width:1440px) { html { font-size:13px; } } @media (max-width:1280px) { html { font-size:12px; } } body { margin:0; font-family:var(--sans); color:var(--texto); background:var(--fondo); font-size:var(--t-sm); line-height:1.5; -webkit-font-smoothing:antialiased; font-feature-settings:'cv11','ss01'; font-variant-numeric:tabular-nums; } a { color:var(--azul-fuerte); text-decoration:none; } .ico { flex-shrink:0; } /* ---------- Estructura ---------- */ .app { display:flex; min-height:100vh; } .lateral { width:var(--lateral); background:var(--noche); color:#CBD5E1; display:flex; flex-direction:column; flex-shrink:0; position:sticky; top:0; height:100vh; } .contenido { flex:1; min-width:0; display:flex; flex-direction:column; } /* Marca en el menú. El texto es una columna con su propio interlineado: heredar el del cuerpo (1.55) abría un hueco enorme entre CRCPro y el rol. */ .marca { display:flex; align-items:center; gap:.6rem; padding:1.1rem 1.15rem 1rem; } .marca .logo { display:block; } .marca .texto { display:flex; flex-direction:column; justify-content:center; gap:3px; line-height:1; } .palabra { display:block; font-size:var(--t-lg); font-weight:600; letter-spacing:-.4px; color:#fff; line-height:1; } .palabra b { color:var(--cielo); font-weight:800; } .marca .rol { display:block; font-size:var(--t-micro); letter-spacing:1.5px; text-transform:uppercase; color:var(--tenue); font-weight:700; line-height:1; margin:0; } /* Navegación. A sangre de lado a lado, como PracticarPro: el punto activo se marca con el fondo y el icono en celeste, no con una barrita de color al margen. */ .lateral nav { padding:.4rem 0 0; display:flex; flex-direction:column; } .lateral nav a { display:flex; align-items:center; gap:.85rem; padding:.6rem 1.15rem; color:#93A6BF; font-size:var(--t-base); font-weight:500; transition:background-color .12s; } .lateral nav a .ico { color:#64798F; transition:color .12s; } .lateral nav a:hover { background:var(--noche-2); color:#fff; } .lateral nav a:hover .ico { color:#fff; } .lateral nav a.activo { background:#1A2C4A; color:#fff; font-weight:600; } .lateral nav a.activo .ico { color:var(--cielo); } .lateral nav .grupo { font-size:var(--t-micro); letter-spacing:1.5px; text-transform:uppercase; color:#56697F; font-weight:700; padding:1.15rem 1.15rem .35rem; } .lateral .empuje { flex:1; min-height:1rem; } /* Lo de abajo (configuración) se separa con un filete y vuelve a ser una pastilla: se usa de vez en cuando, no es donde se trabaja. */ .lateral nav.inferior { padding:.5rem .7rem; border-top:1px solid rgba(255,255,255,.07); } .lateral nav.inferior a { padding:.5rem .65rem; border-radius:8px; } .lateral nav.inferior a:hover { background:var(--noche-2); } .lateral .pie { margin:0 .7rem .8rem; padding:.55rem .65rem; border-radius:10px; background:var(--noche-2); border:1px solid rgba(255,255,255,.07); display:flex; align-items:center; gap:.6rem; } .lateral .pie .inicial { width:30px; height:30px; border-radius:50%; background:var(--azul); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; } .lateral .pie .quien { min-width:0; flex:1; } .lateral .pie strong { display:block; color:#fff; font-size:var(--t-sm); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .lateral .pie small { color:var(--tenue); font-size:var(--t-micro); } .lateral .pie button { background:none; color:#7D8FA6; padding:.35rem; border-radius:7px; } .lateral .pie button:hover { background:var(--noche-2); color:#fff; } /* Barra superior */ .superior { background:var(--panel); border-bottom:1px solid var(--linea); padding:.7rem 1.4rem; display:flex; align-items:center; gap:1rem; } .superior .ruta { font-size:var(--t-xs); color:var(--apagado); } .superior .derecha { margin-left:auto; display:flex; align-items:center; gap:1rem; font-size:var(--t-base); } .superior .centro { display:flex; align-items:center; gap:.55rem; } .superior .centro img { height:28px; border-radius:5px; } .superior .centro strong { color:var(--tinta); } main { padding:1.4rem; max-width:1500px; width:100%; } h1 { font-size:var(--t-xl); color:var(--tinta); margin:0 0 .2rem; letter-spacing:-.6px; font-weight:800; } h2 { font-size:var(--t-md); color:var(--tinta); margin:1.5rem 0 .7rem; font-weight:700; letter-spacing:-.2px; } .subtitulo { color:var(--apagado); margin:0 0 1.25rem; font-size:var(--t-base); } .etiqueta { text-transform:uppercase; letter-spacing:1.2px; font-size:var(--t-micro); font-weight:700; color:var(--tenue); } /* Pestañas */ .pestanas { display:flex; gap:.25rem; border-bottom:1px solid var(--linea); margin:0 0 1.5rem; overflow-x:auto; } .pestanas a { display:flex; align-items:center; gap:.4rem; padding:.55rem .8rem; color:var(--apagado); font-size:var(--t-sm); font-weight:600; border-bottom:2px solid transparent; white-space:nowrap; } .pestanas a:hover { color:var(--tinta); } .pestanas a.activo { color:var(--tinta); border-bottom-color:var(--ambar); } /* Indicadores */ .indicadores { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); margin-bottom:1.5rem; } .dato { background:var(--panel); border:1px solid var(--linea); border-radius:var(--r); padding:.9rem 1.05rem; box-shadow:var(--sombra); } .dato .titulo { display:block; font-size:var(--t-micro); text-transform:uppercase; letter-spacing:1.1px; font-weight:700; color:var(--apagado); } .dato .cifra { font-size:var(--t-xl); font-weight:800; color:var(--tinta); letter-spacing:-.8px; line-height:1.25; } /* El pie de un indicador se llama .detalle y no .nota a proposito: .nota es el recuadro azul que explica algo, con su fondo y su relleno. Compartir el nombre le pintaba ese recuadro a un , y como el relleno de un elemento en linea no empuja nada, el recuadro quedaba ENCIMA de la cifra y la tapaba. Dos cosas distintas, dos nombres distintos. */ .dato .detalle { display:block; font-size:var(--t-xs); color:var(--tenue); } .dato.oscuro { background:var(--noche); border-color:var(--noche); } .dato.oscuro .titulo { color:#8FA3BC; } .dato.oscuro .cifra { color:#fff; } .dato.oscuro .detalle { color:#7D8FA6; } .dato.verde { background:var(--ok-suave); border-color:#A7F3D0; } .dato.verde .cifra { color:#047857; } .dato.ambar { background:var(--ambar-suave); border-color:var(--ambar-linea); } .dato.ambar .cifra { color:var(--ambar-texto); } .dato.rojo { background:var(--error-suave); border-color:#FECACA; } .dato.rojo .cifra { color:#B91C1C; } /* Tarjetas */ .tarjeta { background:var(--panel); border:1px solid var(--linea); border-radius:var(--r); padding:1.15rem 1.25rem; box-shadow:var(--sombra); } .tarjeta + .tarjeta { margin-top:1rem; } .rejilla { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); } .modulo { display:flex; gap:.9rem; align-items:flex-start; } /* Atajo a una sección. Es un enlace, así que tiene que responder al puntero y no heredar el color de enlace en su texto. El azul es estructura; el ámbar se reserva para las acciones. */ .modulo .caja { width:40px; height:40px; border-radius:10px; background:var(--azul-suave); color:var(--azul-fuerte); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .modulo strong { display:block; color:var(--tinta); font-size:var(--t-md); } a.modulo { transition:border-color .12s, box-shadow .12s; } a.modulo:hover { border-color:#BFD3FD; box-shadow:0 4px 14px rgba(37,99,235,.1); } a.modulo:hover .caja { background:var(--azul); color:#fff; } /* De qué se compone un servicio: se lee de un vistazo, debajo de su nombre. */ .examenes { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.35rem; } .examenes span { padding:.05rem .4rem; border-radius:5px; background:var(--azul-suave); color:var(--azul-fuerte); font-size:var(--t-micro); font-weight:600; } tr.apagada .examenes span { background:#EDF1F6; color:var(--tenue); } /* "Cualquier categoría" no es una sigla más: va sin pastilla, para que no se lea como una. */ .examenes span.todas { background:none; padding:0; color:var(--apagado); font-style:italic; } /* "Cualquiera" no es un hueco: es una regla que vale para todos, y se lee como tal. */ .cualquiera { color:var(--apagado); font-size:var(--t-xs); font-style:italic; } .racimo .casilla .dos { margin-left:.4rem; padding:.05rem .35rem; border-radius:5px; background:var(--ambar-suave); color:var(--ambar-texto); font-size:var(--t-micro); font-weight:700; letter-spacing:.2px; } .ejemplo { background:var(--fondo); border:1px solid var(--linea); border-radius:10px; padding:.85rem 1.05rem; margin-bottom:1.1rem; } .ejemplo ol { margin:.5rem 0 .4rem; padding-left:1.2rem; font-size:var(--t-sm); } .ejemplo li { margin:.25rem 0; } .ejemplo .pista { margin:0; } /* Vigencias: una fila por categoría, una columna por tramo de edad. Se lee como la tabla que es, no como una lista de formularios sueltos. */ .listado-vigencias td { vertical-align:top; } .listado-vigencias input { max-width:4.6rem; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; margin:0; } .listado-vigencias .signo { font-size:var(--t-xs); font-weight:500; color:var(--tenue); white-space:nowrap; } .listado-vigencias td { vertical-align:middle; } /* El ojito para ver la contraseña. Va dentro del campo, pegado al borde derecho, y el campo deja sitio para que el texto nunca pase por debajo. */ .con-ojo { position:relative; display:block; } .con-ojo input { width:100%; padding-right:2.9rem; } .ojo { position:absolute; right:.3rem; top:50%; transform:translateY(-50%); background:none; border:0; padding:.45rem; border-radius:8px; cursor:pointer; color:var(--tenue); display:flex; align-items:center; } .ojo svg { width:19px; height:19px; display:block; } .ojo:hover { background:rgba(15,36,64,.06); color:var(--texto); } .ojo:focus-visible { outline:2px solid var(--azul); outline-offset:1px; } /* Sobre el azul noche de la pantalla de ingreso el gris no se ve. */ .acceso .ojo { color:rgba(255,255,255,.45); } .acceso .ojo:hover { background:rgba(255,255,255,.1); color:#fff; } /* El campo de la contraseña dentro de .con-ojo pierde su margen: lo lleva el envoltorio. */ .acceso .con-ojo { margin:0 0 .85rem; } .acceso .con-ojo input { margin:0; } /* El "$" va fuera del campo: dentro estorba al escribir y al seleccionar, y el servidor acepta el texto con o sin él. */ .con-signo { display:flex; align-items:center; gap:.4rem; } .con-signo input { margin:0; } .signo { color:var(--tenue); font-weight:700; font-size:var(--t-base); } /* Lista de precios: se lee como una lista de precios, agrupada por servicio, no como un volcado de tabla. Un solo boton al final en vez de uno por fila: cargar quince precios no puede costar quince clics. */ /* La celda de la casilla se llama .celda-marcar, no .marca: .marca es el logo del menu, con display:flex, y una celda con display:flex deja de ser celda (sus lineas no cuadraban con las de la fila y la cabecera oscura no la cubria). */ th.celda-marcar, td.celda-marcar { width:2.6rem; text-align:center; padding-left:.9rem; padding-right:0; } th.celda-marcar input, td.celda-marcar input { display:block; margin:0 auto; padding:0; width:15px; height:15px; accent-color:var(--azul); cursor:pointer; } .raya { color:#C8D0DA; } .precio-celda { justify-content:flex-end; } .precio-celda input { margin:0; max-width:8.5rem; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; } .barra-lote { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-top:.9rem; } .barra-lote .pista { margin:0; } .barra-lote > button[type=submit] { margin-left:auto; } .lote-acciones { display:flex; gap:.4rem; flex-wrap:wrap; } @media (max-width: 720px) { .barra-lote > button[type=submit] { margin-left:0; width:100%; justify-content:center; } } .listado-precios tr.grupo td { background:var(--noche); color:#fff; font-weight:700; font-size:var(--t-xs); text-transform:uppercase; letter-spacing:1px; padding:.45rem .85rem; } .listado-precios tr.apagada td { color:var(--tenue); } .listado-precios form.precio { display:flex; gap:.4rem; align-items:center; } .listado-precios form.precio input { margin:0; max-width:8rem; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; } /* El generador de combinaciones: dos racimos de casillas, uno por lista. */ .marcables { display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1.1rem; margin-top:1.1rem; } .racimo { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; } .racimo .casilla { display:inline-flex; align-items:center; gap:.4rem; margin:0; padding:.35rem .7rem; border:1px solid var(--linea); border-radius:999px; background:var(--panel); font-size:var(--t-sm); cursor:pointer; } .racimo .casilla:hover { border-color:#BFD3FD; } .racimo .casilla:has(input:checked) { border-color:var(--azul); background:var(--azul-suave); color:var(--azul-fuerte); font-weight:600; } /* Una sigla ("CC", "A2", "A1 + B1"): nombre corto de verdad, no un identificador interno. Va en mayúscula porque asi se llama, no por adorno. */ .sigla { display:inline-block; min-width:2.4rem; text-align:center; margin-right:.6rem; padding:.1rem .4rem; border-radius:6px; background:var(--azul-suave); color:var(--azul-fuerte); font-size:var(--t-micro); font-weight:700; letter-spacing:.4px; vertical-align:.05rem; } tr.apagada .sigla { background:#EDF1F6; color:var(--tenue); } .sigla-campo { text-transform:uppercase; max-width:7rem; } /* El número de control de un certificado de porte de armas, como se imprime. */ .no-control { font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; font-weight:700; letter-spacing:.4px; font-size:.92em; color:var(--tinta); background:var(--fondo); border:1px solid var(--linea); border-radius:6px; padding:.05rem .4rem; white-space:nowrap; } .dato.oscuro .no-control { color:#fff; background:transparent; border-color:#3B4E68; } .campo-control { text-transform:uppercase; font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; letter-spacing:.4px; } .bloque-rangos { margin:0 0 2rem; } .tabla-cargos tr.area-cargos td { background:var(--fondo); color:var(--tinta); font-weight:700; font-size:var(--t-xs); letter-spacing:.6px; text-transform:uppercase; padding-top:.55rem; padding-bottom:.55rem; } .tabla-cargos td:first-child { max-width:22rem; } .manual-cargo h3 { margin:1rem 0 .4rem; } .manual-cargo h3:first-child { margin-top:0; } .manual-cargo ol { margin:0; padding-left:1.3rem; display:grid; gap:.35rem; } .manual-cargo p { margin:0; } .manual-cargo .columnas { margin-top:1.2rem; } .funciones-cargo { margin:.5rem 0 0; padding-left:1.3rem; display:grid; gap:.3rem; } .resumen-rango ul { list-style:none; margin:.35rem 0 .3rem; padding:0; display:grid; gap:.3rem; font-size:var(--t-sm); color:var(--texto); } .resumen-rango .sin-rango { color:var(--tenue); } /* Quitarle el número no pide uno nuevo. */ form:has(#nc-accion option[value="anular"]:checked) .numero-nuevo { visibility:hidden; } .bloque-rangos .cabeza-bloque { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:0 0 .7rem; } .bloque-rangos .cabeza-bloque h3 { margin:0; } .bloque-rangos .cabeza-bloque .pista { margin:.2rem 0 0; } /* Listas desplegables. Cada valor trae debajo su propio campo para renombrarlo: sin ventanas emergentes ni JavaScript, y se ve de una qué dice cada cosa. */ .listado-valores td { vertical-align:middle; } .listado-valores tr.apagada .principal { color:var(--tenue); } .listado-valores tr.renombrar td { border-bottom:1px solid var(--linea); padding:.15rem .85rem .7rem; background:#FBFCFE; } .listado-valores tr.renombrar form { display:flex; align-items:center; gap:.5rem; } .listado-valores tr.renombrar label { margin:0; font-size:var(--t-micro); text-transform:uppercase; letter-spacing:1px; font-weight:700; color:var(--tenue); white-space:nowrap; } .listado-valores tr.renombrar input { margin:0; max-width:22rem; } .fila-acciones { display:flex; gap:.3rem; justify-content:flex-end; flex-wrap:wrap; } .fila-acciones form { display:inline; } button.peligro, .boton.peligro { color:#B91C1C; border-color:#F3C6C6; } button.peligro:hover, .boton.peligro:hover { background:var(--error-suave); border-color:#E88; } button[disabled] { opacity:.35; cursor:not-allowed; } /* Sección acordada cuyo código todavía no existe. Dice qué va a haber ahí, sin fingir que ya está: una pantalla en blanco no se distingue de una rota. */ .enObra { background:var(--panel); border:1px solid var(--linea); border-radius:var(--r); box-shadow:var(--sombra); padding:1.6rem 1.5rem; } .enObra .marca-obra { width:38px; height:38px; border-radius:10px; background:var(--azul-suave); color:var(--azul-fuerte); display:flex; align-items:center; justify-content:center; margin-bottom:.8rem; } .enObra h2 { margin:0 0 .3rem; font-size:var(--t-md); } .enObra > p { color:var(--apagado); font-size:var(--t-base); margin:0 0 1.2rem; max-width:46rem; } .enObra ul { margin:0; padding:0; list-style:none; display:grid; gap:.55rem; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); } .enObra li { display:flex; gap:.6rem; align-items:flex-start; padding:.6rem .75rem; background:var(--fondo); border:1px solid var(--linea); border-radius:9px; font-size:var(--t-sm); color:var(--texto); } .enObra li b { color:var(--tinta); font-weight:600; } .enObra li .punto { width:6px; height:6px; border-radius:50%; background:var(--tenue); flex-shrink:0; margin-top:.45rem; } /* Primeros pasos del tablero: una lista de tareas con su estado, no adornos. */ .pasos { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; } .pasos li { display:flex; gap:.75rem; align-items:center; padding:.7rem .9rem; background:var(--panel); border:1px solid var(--linea); border-radius:10px; box-shadow:var(--sombra); } .pasos .estado { width:24px; height:24px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#EDF1F6; color:var(--tenue); } .pasos li.hecho .estado { background:var(--ok); color:#fff; } .pasos .que { flex:1; min-width:0; } .pasos .que strong { display:block; color:var(--tinta); font-size:var(--t-base); font-weight:600; } .pasos .que small { color:var(--apagado); font-size:var(--t-xs); } /* Tablas */ table { width:100%; border-collapse:separate; border-spacing:0; background:var(--panel); border:1px solid var(--linea); border-radius:var(--r); overflow:hidden; box-shadow:var(--sombra); } /* Mayuscula inicial y el resto en minuscula, como en PracticarPro: un encabezado A TODA VOZ grita sin decir nada mas, y las palabras largas se leen peor. */ th { text-align:left; background:var(--noche); color:#C7D3E3; font-size:var(--t-xs); letter-spacing:.2px; font-weight:600; padding:.6rem .85rem; } td { padding:.65rem .85rem; border-bottom:1px solid var(--linea); vertical-align:middle; font-size:var(--t-sm); } tbody tr:last-child td { border-bottom:0; } tbody tr:hover { background:#F8FAFC; } td .principal { color:var(--tinta); font-weight:600; } td small { color:var(--apagado); font-size:var(--t-xs); } td.derecha, th.derecha { text-align:right; } /* Botones */ /* La acción principal es ámbar: sobre una interfaz tan azul, un botón azul más se pierde. */ .boton, button { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .9rem; border:0; border-radius:8px; background:var(--ambar); color:var(--sobre-ambar); font-size:var(--t-sm); font-weight:700; font-family:inherit; cursor:pointer; } .boton:hover, button:hover { background:var(--ambar-fuerte); } .boton.secundario, button.secundario { background:#fff; color:var(--tinta); border:1px solid #CBD5E1; } .riesgo button, .boton.peligro { color:#fff; } .boton.secundario:hover, button.secundario:hover { background:var(--fondo); } .boton.oscuro, button.oscuro { background:var(--noche); color:#fff; } .boton.oscuro:hover, button.oscuro:hover { background:var(--noche-2); } .boton.pequeno, button.pequeno { padding:.32rem .65rem; font-size:var(--t-xs); } button.enlace { background:none; color:inherit; padding:0; font-weight:inherit; font-size:inherit; } button.enlace:hover { background:none; } .acciones { margin-top:1.25rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; } .acciones.arriba { margin:0 0 1.25rem; } /* Formularios */ label { display:block; font-weight:600; font-size:var(--t-xs); color:var(--tinta); margin:.9rem 0 .3rem; } .tarjeta label:first-of-type { margin-top:0; } input, select, textarea { width:100%; padding:.48rem .65rem; border:1px solid #CBD5E1; border-radius:8px; font-size:var(--t-base); font-family:inherit; color:var(--texto); background:#fff; } input:focus, select:focus, textarea:focus { outline:none; border-color:var(--azul); box-shadow:0 0 0 3px var(--azul-suave); } /* Una casilla o un radio no son un campo de texto: sin el relleno ni el ancho de arriba. Con ellos, la casilla de 15 px quedaba corrida dentro de su celda y las filas se veian desalineadas (Servicios y precios). */ input[type=checkbox], input[type=radio] { width:auto; padding:0; vertical-align:middle; } /* Lo unico que un textarea necesita y un input no: interlineado de lectura y poder crecer a lo alto -- nunca a lo ancho, que descuadraria la columna. */ textarea { line-height:1.55; resize:vertical; min-height:5rem; } .pista { color:var(--apagado); font-size:var(--t-xs); margin-top:.25rem; display:block; } .casilla { display:flex; align-items:center; gap:.55rem; font-weight:500; color:var(--texto); cursor:pointer; padding:.5rem .7rem; border:1px solid var(--linea); border-radius:9px; background:#fff; margin-bottom:.4rem; font-size:var(--t-sm); } .casilla:hover { border-color:#BFD3FD; background:#FBFDFF; } .casilla input { width:auto; } .columnas { display:grid; gap:0 1.25rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); } /* Avisos y estados */ .aviso { border-radius:10px; padding:.85rem 1.1rem; font-size:var(--t-base); border:1px solid; margin-bottom:1.25rem; } .aviso.ok { background:var(--ok-suave); border-color:#A7F3D0; color:#065F46; } .aviso.error { background:var(--error-suave); border-color:#FECACA; color:#991B1B; } .aviso.cuidado { background:var(--ambar-suave); border-color:var(--ambar-linea); color:var(--ambar-texto); } .lista-avisos { margin:0; padding-left:1.1rem; } .lista-avisos li + li { margin-top:.25rem; } /* La vista previa de la factura electronica. */ .factura-previa { border:1px solid var(--linea); border-radius:12px; padding:1rem; background:#fff; } .factura-cabeza { display:grid; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:.8rem; margin-bottom:.9rem; } .factura-cabeza .etiqueta { display:block; margin:0 0 .15rem; } .factura-cabeza small, .factura-cliente small { display:block; color:var(--apagado); font-size:var(--t-xs); } .factura-cabeza input { margin:0; } .factura-cliente { padding:.7rem .85rem; border-radius:10px; background:var(--fondo); margin-bottom:.9rem; } .factura-cliente .etiqueta { display:block; margin:0 0 .15rem; } .factura-cliente .pastilla { margin-top:.35rem; } .factura-previa tr.total td { background:var(--fondo); } .a-nombre { margin-bottom:.8rem; } .enlace-accion.fuerte { font-weight:700; } /* Gastos -> recaudos a terceros: una fila por registro, un tercero por columna. */ .titulo-bloque { margin:0 0 .6rem; font-size:var(--t-md); color:var(--tinta); } .tabla-terceros td small { display:block; } .tachado { text-decoration:line-through; color:var(--tenue); } .origen-por-orden { margin:0 0 .8rem; padding:.6rem .85rem; border-radius:10px; background:var(--azul-suave); color:var(--azul-fuerte); font-weight:600; } .aviso.avisa { background:var(--avisa-suave); border-color:#FDE68A; color:#92400E; } .pastilla { display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .6rem; border-radius:999px; font-size:var(--t-micro); font-weight:600; letter-spacing:.1px; white-space:nowrap; } .pastilla::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; } .pastilla.activo { background:var(--ok-suave); color:#047857; } .pastilla.prueba { background:var(--ambar-suave); color:var(--ambar-texto); } .pastilla.archivado { background:#EEF0F3; color:var(--apagado); } .pastilla.suspendido { background:var(--error-suave); color:#B91C1C; } /* Entrega de una contraseña recién generada. Es lo último que ve quien acaba de crear un acceso, así que se lee de un vistazo: qué pasó arriba, y los tres datos que hay que copiar abajo. La contraseña va grande y en su propia caja — es la que se pierde. */ .credenciales { background:var(--panel); border:1px solid var(--linea); border-radius:var(--r); box-shadow:var(--sombra-alta); margin-bottom:1.5rem; overflow:hidden; } .credenciales .encabezado { display:flex; gap:.8rem; align-items:flex-start; padding:1.05rem 1.3rem; border-bottom:1px solid var(--linea); background:var(--ok-suave); } .credenciales .marca-ok { width:30px; height:30px; border-radius:50%; background:var(--ok); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .credenciales .encabezado strong { display:block; color:#065F46; font-size:var(--t-md); letter-spacing:-.2px; } .credenciales .encabezado span { display:block; color:#0F766E; font-size:var(--t-sm); margin-top:.1rem; } .credenciales dl { margin:0; padding:1.1rem 1.3rem 1.3rem; display:grid; gap:.85rem; grid-template-columns:auto 1fr; align-items:center; } /* Lo que se le mandaría a Siigo, antes de mandarlo: rótulo y valor, sin tabla. */ .resumen-ds { display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr); gap:.5rem 1rem; margin:0 0 1.1rem; padding:.9rem 1.1rem; border:1px solid var(--linea); border-radius:var(--r); background:var(--fondo); } .resumen-ds dt { color:var(--apagado); font-size:var(--t-xs); font-weight:600; padding-top:.1rem; } .resumen-ds dd { margin:0; color:var(--tinta); } .resumen-ds dd small { display:block; color:var(--tenue); font-size:var(--t-xs); } .resumen-ds .total { font-weight:700; border-top:1px solid var(--linea); padding-top:.5rem; } .credenciales dt { text-transform:uppercase; letter-spacing:1.1px; font-size:var(--t-micro); font-weight:700; color:var(--tenue); white-space:nowrap; } .credenciales dd { margin:0; min-width:0; } /* user-select:all — un clic selecciona el valor entero, sin arrastrar el ratón. */ .credenciales .valor { display:inline-block; max-width:100%; overflow-wrap:anywhere; user-select:all; font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:var(--t-sm); color:var(--tinta); background:#F4F6F9; border:1px solid var(--linea); border-radius:7px; padding:.3rem .55rem; } .credenciales .valor.clave-nueva { font-size:var(--t-lg); font-weight:600; letter-spacing:.6px; padding:.5rem .8rem; background:var(--ambar-suave); border-color:var(--ambar-linea); color:#7C4A03; } code { background:#F1F5F9; border:1px solid var(--linea); padding:.15rem .45rem; border-radius:6px; font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:var(--t-base); color:var(--tinta); } /* Identificador interno junto a un nombre: se lee, no grita. */ .clave { display:inline-block; margin-top:.2rem; padding:.05rem .4rem; border-radius:5px; background:#EDF1F6; color:var(--apagado); font-size:var(--t-micro); font-weight:600; letter-spacing:.2px; } .riesgo { border:1px solid #FECACA; background:var(--error-suave); border-radius:var(--r); padding:1.3rem; } .riesgo h3 { margin:.2rem 0 .4rem; font-size:var(--t-md); color:#991B1B; } /* El logo del centro (Plataforma) y el reset. */ .logo-fila { display:flex; gap:1.2rem; align-items:flex-start; flex-wrap:wrap; margin-top:.6rem; } .logo-vista { min-width:10rem; padding:.7rem; border:1px dashed var(--linea); border-radius:10px; background:#fff; } .logo-vista img { display:block; max-width:14rem; max-height:5rem; } .logo-vista small { display:block; margin-top:.3rem; color:var(--apagado); font-size:var(--t-xs); } .cifras-reset { list-style:none; margin:.3rem 0 .6rem; padding:0; font-size:var(--t-sm); } .cifras-reset li { padding:.15rem 0; } .opcion-reset { align-items:flex-start; background:#fff; border:1px solid #FECACA; border-radius:10px; padding:.7rem .85rem; } .opcion-reset small { display:block; color:var(--apagado); font-weight:400; } .riesgo p { margin:0 0 1rem; font-size:var(--t-base); color:var(--texto); } .riesgo button { background:var(--error); color:#fff; } .riesgo button:hover { background:#B91C1C; } .vacio { color:var(--apagado); background:var(--panel); border:1px dashed #CBD5E1; border-radius:var(--r); padding:2.5rem; text-align:center; } /* Configuracion: indice a la izquierda, panel a la derecha (el patron de PracticarPro). El indice es UNA lamina con los puntos separados por un filete, no tarjetas sueltas; el punto activo se pinta con el azul noche del menu y su barra ambar. */ .config { display:grid; grid-template-columns:16.5rem 1fr; gap:1.15rem; align-items:start; } .config .indice { background:var(--panel); border:1px solid var(--linea); border-radius:var(--r); overflow:hidden; box-shadow:var(--sombra); } .config .indice a { display:flex; gap:.75rem; align-items:flex-start; padding:.7rem 1rem; border-top:1px solid #F1F3F6; transition:background-color .15s; } .config .indice a:first-child { border-top:0; } .config .indice a:hover { background:#F8FAFC; } .config .indice a:hover .ico { color:var(--azul); } .config .indice a.activo { background:var(--noche); border-left:3px solid var(--ambar); padding-left:calc(1rem - 3px); } .config .indice a.activo:hover { background:var(--noche); } .config .indice .ico { color:var(--tenue); margin-top:.1rem; flex-shrink:0; } .config .indice a.activo .ico { color:var(--ambar); } .config .indice strong { display:block; color:var(--tinta); font-size:var(--t-sm); font-weight:600; } .config .indice small { display:block; color:var(--tenue); font-size:var(--t-xs); line-height:1.35; margin-top:.1rem; } .config .indice a.activo strong { color:#fff; } .config .indice a.activo small { color:#CBD5E1; } .config .lamina { background:var(--panel); border:1px solid var(--linea); border-radius:var(--r); box-shadow:var(--sombra); padding:1.15rem 1.3rem; } .config .lamina > h2 { margin:0 0 .15rem; font-size:var(--t-lg); } .config .lamina .descripcion { color:var(--apagado); font-size:var(--t-sm); margin:0 0 1.1rem; } .config .lamina table, .config .lamina .tarjeta { box-shadow:none; } @media (max-width: 960px) { .config { grid-template-columns:1fr; } } footer { padding:0 1.4rem 2rem; color:var(--tenue); font-size:var(--t-xs); } /* ---------- Ingreso (el patron de PracticarPro) ---------- Sin tarjeta blanca: el logo, la marca y los campos van directos sobre el azul noche. Se entra escribiendo, no dando un clic previo que no decide nada. */ .acceso { width:100%; max-width:23.5rem; text-align:center; } .acceso .logo { display:block; margin:0 auto .9rem; } .acceso .palabra { font-size:var(--t-xl); font-weight:700; letter-spacing:-.5px; margin-bottom:.45rem; } .acceso .sub { color:rgba(255,255,255,.45); font-size:var(--t-base); margin:0 0 .4rem; } .acceso .tag { color:rgba(255,255,255,.32); font-size:var(--t-xs); margin:0 0 1.5rem; } .acceso form { text-align:left; } .acceso label { display:block; font-size:var(--t-micro); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.4); margin:0 0 .35rem; } .acceso input { width:100%; box-sizing:border-box; padding:.85rem 1.05rem; margin:0 0 .85rem; border:1.5px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.08); color:#fff; font:inherit; font-size:var(--t-md); outline:none; color-scheme:dark; -webkit-appearance:none; appearance:none; transition:border-color .2s, background-color .2s; } .acceso input::placeholder { color:rgba(255,255,255,.32); } .acceso input:focus { border-color:var(--ambar); background:rgba(255,255,255,.12); box-shadow:none; } /* Chrome y Safari pintan el autocompletado de blanco solido: sobre fondo oscuro no se lee. */ .acceso input:-webkit-autofill, .acceso input:-webkit-autofill:hover, .acceso input:-webkit-autofill:focus { -webkit-text-fill-color:#fff; caret-color:#fff; -webkit-box-shadow:0 0 0 1000px #14213a inset; box-shadow:0 0 0 1000px #14213a inset; transition:background-color 99999s ease-in-out 0s, color 99999s ease-in-out 0s; } /* El :not(.ojo) no es un adorno. Sin el, esta regla alcanzaba tambien al boton del ojito -- que vive DENTRO del campo y esta posicionado en absoluto -- y lo volvia un bloque ambar del ancho del campo, encima de la contrasena: no se veia lo que se escribia y hacer clic en el campo pulsaba el boton en vez de dar el foco. No se podia entrar. */ .acceso button:not(.ojo):not(.sede) { width:100%; margin-top:.5rem; padding:.85rem; border:0; border-radius:12px; background:var(--ambar); color:var(--sobre-ambar); font:inherit; font-size:var(--t-md); font-weight:700; cursor:pointer; transition:background-color .15s; } .acceso button:not(.ojo):not(.sede):hover { background:var(--ambar-claro); } .acceso .error { background:rgba(220,38,38,.12); border:1px solid rgba(248,113,113,.3); color:#FCA5A5; border-radius:10px; padding:.6rem .8rem; margin:0 0 .9rem; font-size:var(--t-sm); text-align:left; } .acceso .pista-acceso { color:rgba(255,255,255,.5); font-size:var(--t-sm); line-height:1.45; background:rgba(255,255,255,.05); border-radius:9px; padding:.6rem .8rem; margin:-.5rem 0 .9rem; text-align:left; } .acceso .pie-nota { color:rgba(255,255,255,.28); font-size:var(--t-xs); margin:1.4rem 0 0; } /* Aviso flotante: confirma que algo se guardó y se quita solo. Abajo a la derecha, como en PracticarPro. No lleva JavaScript — entra, espera y se va con una animación de CSS — y no tapa nada porque el contenedor no recibe el puntero. */ .avisos { position:fixed; right:1.25rem; bottom:1.25rem; z-index:60; display:flex; flex-direction:column; gap:.6rem; pointer-events:none; } .aviso-flotante { display:flex; align-items:center; gap:.6rem; margin:0; background:var(--noche); color:#fff; font-size:var(--t-sm); font-weight:500; padding:.7rem 1.05rem .7rem .85rem; border-radius:10px; border-left:4px solid var(--ok); box-shadow:0 10px 30px rgba(10,22,40,.3); max-width:22rem; animation:aviso-entra .28s ease-out both, aviso-sale .45s ease-in 3.6s both; } .aviso-flotante .ico { color:#34D399; } @keyframes aviso-entra { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } } @keyframes aviso-sale { to { opacity:0; transform:translateY(6px); visibility:hidden; } } /* Quien pidió menos movimiento lo ve aparecer y desaparecer, sin desplazamientos. */ @media (prefers-reduced-motion: reduce) { .aviso-flotante { animation:none; } } @media (max-width: 520px) { .avisos { right:.75rem; left:.75rem; bottom:.75rem; } .aviso-flotante { max-width:none; } } /* ---------- Acciones de una fila ---------- En PracticarPro no son botones con borde: son enlaces cortos, azul para lo normal y rojo para lo que destruye. Tres botones enmarcados por fila convierten una tabla en un panel de mandos; tres enlaces se leen y se olvidan hasta que hacen falta. */ .acciones-fila { display:flex; gap:.9rem; justify-content:flex-end; align-items:center; flex-wrap:wrap; } .acciones-fila form { display:inline; } .enlace-accion { background:none; border:0; padding:0; font:inherit; font-size:var(--t-xs); font-weight:600; color:var(--azul-fuerte); cursor:pointer; white-space:nowrap; } /* Al pasar el puntero, un fondo suave del color de la accion: azul lo normal, rojo lo que borra, verde lo que enciende. Antes heredaban el button:hover ambar de los botones de accion, y "Cerrar" o "Hacer principal" se volvian un bloque naranja. El margen negativo deja el texto donde estaba: el fondo crece hacia afuera, no empuja nada. */ .enlace-accion { padding:.2rem .45rem; margin:-.2rem -.45rem; border-radius:6px; transition:background-color .12s, color .12s; } .enlace-accion:hover { background:var(--azul-suave); text-decoration:none; } .enlace-accion.peligro:hover { background:var(--error-suave); color:#B91C1C; } .enlace-accion.bueno:hover { background:var(--ok-suave); } .enlace-accion:focus-visible { outline:2px solid #BFD3FD; outline-offset:1px; } .enlace-accion:disabled { opacity:.35; cursor:default; } .enlace-accion:disabled:hover { background:none; } .enlace-accion.peligro { color:#DC2626; } .enlace-accion.bueno { color:#047857; } /* ---------- Tabla compacta ---------- La densidad de PracticarPro: cabe una jornada de trabajo en una pantalla sin marear. */ table.densa td { padding:.5rem .8rem; font-size:var(--t-sm); } table.densa th { padding:.5rem .8rem; font-size:var(--t-xs); } table.densa td .principal { font-size:var(--t-sm); } table.densa td small { display:block; color:var(--tenue); font-size:var(--t-micro); margin-top:.1rem; } /* ---------- Ventana de edición ---------- La abre un enlace y la cierra otro: no hace falta JavaScript, así que funciona siempre y no hay un estado invisible que se pueda desincronizar. Editar deja de ser una fila extra apretada dentro de la tabla. */ /* Una ventana con racimos de casillas necesita mas ancho que una de dos campos. */ .ventana.ancha { max-width:44rem; } .velo { position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:1.25rem; background:rgba(10,22,40,.72); backdrop-filter:blur(3px); } .ventana { background:var(--panel); border-radius:16px; box-shadow:0 24px 60px rgba(10,22,40,.4); width:100%; max-width:34rem; max-height:calc(100vh - 2.5rem); overflow:auto; } .ventana .cabeza { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.35rem; border-bottom:1px solid var(--linea); } .ventana .cabeza h2 { margin:0; font-size:var(--t-lg); } .ventana .cabeza small { display:block; color:var(--apagado); font-size:var(--t-xs); font-weight:400; margin-top:.1rem; } .ventana .cerrar { color:var(--tenue); font-size:var(--t-xl); line-height:1; padding:.1rem .4rem; border-radius:8px; } .ventana .cerrar:hover { background:var(--fondo); color:var(--texto); } .ventana .cuerpo { padding:1.25rem 1.35rem; } .ventana .pie { display:flex; gap:.6rem; align-items:center; padding:1rem 1.35rem; border-top:1px solid var(--linea); background:#FBFCFE; border-radius:0 0 16px 16px; } .ventana .pie .boton.secundario { margin-left:auto; } /* Con caracter, sin ruido: una raya fina azul arriba, la ficha del icono en la cabeza y los campos agrupados con su titulo. El resto sigue blanco y quieto. */ .ventana.con-ficha { border-top:3px solid var(--azul); } .ventana .cabeza .titulos { flex:1; min-width:0; } .ficha-ventana { width:40px; height:40px; border-radius:11px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--azul-suave); color:var(--azul-fuerte); } /* Un grupo que no abre la ventana se separa de lo de arriba, sea otro grupo o sueltos. */ * + .grupo-ventana { margin-top:1.15rem; padding-top:1.05rem; border-top:1px solid var(--linea); } .grupo-ventana > h3 { margin:0 0 .15rem; font-size:var(--t-micro); text-transform:uppercase; letter-spacing:1.2px; font-weight:800; color:var(--azul-fuerte); } .grupo-ventana > .pista { margin:0 0 .2rem; } .grupo-ventana > .columnas:first-of-type label, .grupo-ventana > div:first-of-type > label { margin-top:.55rem; } /* Los documentos de la orden: dos tarjetas lado a lado, la de la ARL y el RAS. Lista la que ya tiene su PDF (borde verde), punteada la que falta. */ .documentos-orden { display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:1rem; margin-bottom:1.6rem; } /* El buscador de municipio: la lista cae debajo del campo, encima de lo que sigue. */ .municipio, .buscador { position:relative; } .municipio-lista, .buscador-lista { position:absolute; z-index:30; left:0; right:0; top:calc(100% + 4px); margin:0; padding:.3rem; list-style:none; background:#fff; border:1px solid var(--borde); border-radius:10px; box-shadow:0 10px 28px rgba(10,22,40,.14); max-height:16rem; overflow-y:auto; } .municipio-lista li, .buscador-lista li { padding:.5rem .65rem; border-radius:7px; font-size:var(--t-sm); color:var(--tinta); cursor:pointer; } .municipio-lista li[aria-selected="true"], .buscador-lista li[aria-selected="true"] { background:var(--azul-suave); color:var(--azul); } .municipio-lista li.sin-resultados, .buscador-lista li.sin-resultados { color:var(--apagado); cursor:default; font-style:italic; } .buscador-lista li small { display:block; color:var(--tenue); font-size:var(--t-xs); } .buscador-lista li.crear { color:var(--ok); font-weight:600; } /* Guardar como proveedor a quien no está en la lista: debajo del nombre, con sus datos opcionales. */ .nuevo-proveedor { margin:.2rem 0 .4rem; padding:.55rem .8rem; border:1px dashed var(--linea); border-radius:9px; background:var(--fondo); } .nuevo-proveedor summary { cursor:pointer; color:var(--azul-fuerte); font-size:var(--t-xs); font-weight:600; margin-top:.35rem; } .nuevo-proveedor .enlace-accion { margin-top:.3rem; } /* El buscador del proveedor y, a su lado, "Nuevo proveedor" (como en PracticarPro). */ .columnas.proveedor-y-nit { grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); } @media (max-width: 620px) { .columnas.proveedor-y-nit { grid-template-columns:1fr; } } .proveedor-fila { display:flex; gap:.5rem; align-items:flex-start; } .proveedor-fila .buscador { flex:1; min-width:0; } .boton-nuevo-proveedor { white-space:nowrap; flex-shrink:0; } @media (max-width: 520px) { .proveedor-fila { flex-direction:column; align-items:stretch; } } dialog.ventana-proveedor { border:0; padding:0; border-radius:16px; width:min(36rem, calc(100% - 2rem)); background:var(--panel); color:var(--texto); box-shadow:0 24px 60px rgba(10,22,40,.4); animation:confirmar-entra .18s ease-out; } dialog.ventana-proveedor::backdrop { background:rgba(10,22,40,.6); backdrop-filter:blur(3px); } .ventana-proveedor-cabeza { display:flex; align-items:flex-start; gap:.8rem; padding:1rem 1.25rem .85rem; border-bottom:1px solid var(--linea); border-top:3px solid var(--azul); border-radius:16px 16px 0 0; } .ventana-proveedor-cabeza h2 { margin:0; font-size:var(--t-lg); } .ventana-proveedor-cabeza small { display:block; color:var(--apagado); font-size:var(--t-xs); margin-top:.1rem; } .ventana-proveedor-cabeza .cerrar { margin-left:auto; background:none; color:var(--tenue); font-size:1.5rem; line-height:1; padding:.05rem .45rem; border-radius:8px; font-weight:400; } .ventana-proveedor-cabeza .cerrar:hover { background:var(--fondo); color:var(--texto); } .ventana-proveedor-ico { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--azul-suave); color:var(--azul-fuerte); flex-shrink:0; } .ventana-proveedor-cuerpo { padding:1rem 1.25rem; display:flex; flex-direction:column; gap:.2rem; } .ventana-proveedor-pie { display:flex; justify-content:flex-end; gap:.6rem; padding:.85rem 1.25rem 1.1rem; border-top:1px solid var(--linea); } .pista.mal { color:#B91C1C; } .aviso.con-boton { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; } .valores-terceros { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.6rem; margin:.4rem 0 1rem; } .valores-terceros > div { background:var(--fondo); border:1px solid var(--linea); border-radius:10px; padding:.55rem .8rem; } .valores-terceros .etiqueta { display:block; margin:0 0 .15rem; } .valores-terceros strong { font-size:var(--t-md); color:var(--tinta); } .tabla-estructura td strong { color:var(--ok); white-space:nowrap; } @media (prefers-reduced-motion: reduce) { dialog.ventana-proveedor { animation:none; } } .orden-elegida .columnas { margin-top:.6rem; } /* Los cupos de GSE en la ficha de armas: verde con cupos, ámbar si quedan pocos, rojo sin. */ .cupos-gse { display:flex; align-items:center; gap:.6rem; margin-top:.7rem; padding:.6rem .85rem; border-radius:10px; border:1px solid #A7F3D0; background:var(--ok-suave); color:#065F46; font-size:var(--t-sm); } .cupos-gse strong { font-size:1.1rem; } .cupos-gse .enlace-accion { margin-left:auto; } .cupos-gse.bajo { border-color:var(--ambar-linea); background:var(--ambar-suave); color:var(--ambar-texto); } .cupos-gse.agotado { border-color:#FECACA; background:var(--error-suave); color:#B91C1C; } /* Personas atendidas: el resultado se elige en la fila y se guarda todo de una vez. */ select.resultado-apto { width:auto; min-width:7.5rem; padding:.3rem 1.8rem .3rem .55rem; font-size:var(--t-sm); } .acciones-atendidos { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin:.9rem 0 1.6rem; } /* Los servicios de un convenio: un renglón por servicio, el precio al público al lado y el pactado. */ .servicios-convenio-cabeza, .servicio-convenio { display:grid; grid-template-columns:minmax(0,1fr) 7.5rem 10rem; gap:.9rem; align-items:center; } .servicios-convenio-cabeza { font-size:var(--t-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--apagado); padding:0 0 .35rem; border-bottom:1px solid var(--borde); } .servicio-convenio { padding:.4rem 0; border-bottom:1px solid var(--borde); } .servicio-convenio:last-child { border-bottom:0; } .servicio-convenio .casilla { margin:0; padding:.35rem 0; border:0; background:none; } .servicio-convenio .casilla:hover { background:none; color:var(--azul-fuerte); } .servicio-convenio .al-publico { color:var(--tenue); font-size:var(--t-sm); font-variant-numeric:tabular-nums; } .servicio-convenio .con-signo input { padding-top:.4rem; padding-bottom:.4rem; } /* Financiero. */ .acciones-caja { display:flex; gap:.6rem; flex-wrap:wrap; margin:0 0 1rem; } .filtros-linea { display:flex; gap:1rem; align-items:flex-end; flex-wrap:wrap; margin-bottom:1.1rem; } .filtros-linea > div { min-width:10rem; } .filtros-linea label { margin-top:0; } .pestanas-sede { margin-top:-.4rem; } /* Una tarjeta de cifra que lleva a su pantalla (la otra caja). */ a.dato { color:inherit; transition:border-color .12s; } a.dato:hover { border-color:var(--azul); } /* El icono de cada pestaña, como en PracticarPro: se reconoce la pantalla sin leer. */ .pestanas a .ico { color:var(--tenue); } .pestanas a.activo .ico { color:var(--azul); } /* La segunda fila: las partes de una pestaña (Caja general / Caja menor / Cuadre; Gastos / Facturas pendientes / Documentos soporte / Proveedores). Un control segmentado, para que se lea como un nivel por debajo de las pestañas y no como otra fila igual. */ .subpestanas { display:inline-flex; flex-wrap:wrap; gap:.25rem; padding:.25rem; margin:-.6rem 0 1.25rem; background:#E9EDF3; border-radius:11px; } .subpestanas a { display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .8rem; border-radius:8px; color:var(--apagado); font-size:var(--t-sm); font-weight:600; white-space:nowrap; } .subpestanas a:hover { color:var(--tinta); background:rgba(255,255,255,.6); } .subpestanas a.activo { background:var(--panel); color:var(--tinta); box-shadow:var(--sombra); } .subpestanas a .ico { color:var(--tenue); } .subpestanas a.activo .ico { color:var(--azul); } .subpestanas .cuenta { display:inline-block; min-width:1.3rem; padding:0 .35rem; border-radius:999px; background:var(--ambar-suave); color:var(--ambar-texto); font-size:var(--t-micro); font-weight:700; text-align:center; } .cifra-entrada { color:#047857; font-variant-numeric:tabular-nums; } .cifra-salida { color:#B91C1C; font-variant-numeric:tabular-nums; } tr.anulado td { color:var(--apagado); } tr.anulado .principal { text-decoration:line-through; } tr.total td { border-top:2px solid var(--borde); } tr.saldo-inicial td { color:var(--tenue); font-style:italic; } .cifra.cifra-texto { font-size:1.1rem; padding-top:.35rem; } .cuentas-banco { display:grid; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); gap:1rem; margin-bottom:1.4rem; } .cuentas-banco > .tarjeta { margin:0; } .cuenta-banco { display:flex; flex-direction:column; gap:.2rem; text-decoration:none; color:var(--tinta); margin:0; } .cuenta-banco:hover { border-color:var(--azul); } .cuenta-banco.es-elegida { border-color:var(--azul); box-shadow:0 0 0 3px var(--azul-suave); } .cuenta-banco.es-inactiva { opacity:.6; } .cuenta-banco .banco { font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.06em; color:var(--apagado); } .cuenta-banco strong { font-size:var(--t-md, 1rem); } .cuenta-banco .saldo { font-size:1.45rem; font-weight:800; font-variant-numeric:tabular-nums; } .cuenta-banco .saldo.negativo { color:#B91C1C; } .cuenta-banco small { color:var(--tenue); font-size:var(--t-xs); } .por-asignar { border-color:#FCD34D; background:#FFFBEB; margin-bottom:1.2rem; } .asignar-cuenta { display:flex; gap:.5rem; align-items:center; } .asignar-cuenta select { width:auto; min-width:10rem; padding:.3rem 1.8rem .3rem .55rem; } .recaudo-sedes { margin-top:1.4rem; } .extracto { margin-bottom:1.4rem; } .cabecera-extracto { display:flex; justify-content:space-between; align-items:center; gap:1rem; } .enlaces-seccion { display:flex; gap:1.2rem; margin:-.4rem 0 1rem; } /* La configuración de Siigo: lo guardado que no se puede cambiar sin las listas, y la matriz de la ANSV, que es ancha (seis categorías por dos géneros) y se desplaza sola sin mover la página. */ .guardado { color:var(--apagado); font-size:var(--t-sm); } .aviso-texto { display:block; color:#92400E; font-size:var(--t-xs); margin-top:.2rem; } .rejilla-ancha { overflow-x:auto; margin-bottom:.6rem; } th.al-centro, td.al-centro { text-align:center; } .matriz-ansv td:first-child { white-space:nowrap; } /* El título de una tarjeta de ficha (Talento humano): su propio renglón, no pegado al primer dato. */ .etiqueta.titulo-ficha { display:block; margin:0 0 .8rem; color:var(--tinta); } .etiqueta.titulo-ficha.aparte { margin-top:1.3rem; padding-top:1rem; border-top:1px solid var(--linea); } .rejilla-datos > div > small { display:block; color:var(--tenue); font-size:var(--t-micro); } /* Tipos de usuario: una columna por rol, las filas agrupadas. */ .matriz-roles tr.grupo-matriz td { background:var(--fondo); color:var(--tinta); font-size:var(--t-xs); } .matriz-roles th small { display:block; color:var(--cielo); font-weight:500; } .matriz-ansv input.edad { width:3.2rem; padding:.3rem .4rem; text-align:center; } .matriz-ansv td, .matriz-ansv th { padding:.4rem .35rem; } .matriz-ansv input.celda-ansv { width:5.4rem; padding:.3rem .45rem; text-align:right; } .cuenta-nueva { margin-top:.8rem; padding:.7rem .9rem .2rem; border:1px dashed var(--borde); border-radius:10px; background:#FAFBFD; } .antiguedad { display:grid; grid-template-columns:1fr 1fr; gap:.15rem .8rem; margin-top:.35rem; font-size:var(--t-xs); color:var(--apagado); } .antiguedad b { display:block; color:var(--tinta); font-size:var(--t-sm); font-variant-numeric:tabular-nums; } tr.fila-pago td { background:#F8FAFF; } /* Tres campos cortos en una fila (valor, IVA, retención): en dos columnas uno quedaba solo. */ .columnas.tres { grid-template-columns:repeat(3,minmax(0,1fr)); } @media (max-width: 640px) { .columnas.tres { grid-template-columns:1fr; } } .dos-columnas { display:grid; grid-template-columns:repeat(auto-fit,minmax(20rem,1fr)); gap:1rem; margin-bottom:1.4rem; } .dos-columnas > .tarjeta { margin:0; } .vigencias-nomina { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem; margin-bottom:1rem; } .vigencias-nomina small { display:block; color:var(--tenue); } table.compacta td { padding-top:.4rem; padding-bottom:.4rem; } .foto-saldos { margin-bottom:1rem; } .cifra-foto { font-size:1.45rem; font-weight:800; color:var(--tinta); font-variant-numeric:tabular-nums; } .conteo { display:grid; grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr)); gap:.6rem; margin:.8rem 0; } .conteo .etiqueta { grid-column:1 / -1; } .denominacion { display:flex; flex-direction:column; gap:.2rem; margin:0; font-size:var(--t-xs); color:var(--apagado); } .denominacion input { text-align:right; } .cerrar-dia { display:flex; gap:1rem; align-items:flex-end; flex-wrap:wrap; margin-top:1.2rem; } .cerrar-dia > div { flex:1; min-width:14rem; } .cerrar-dia label { margin-top:0; } .documento-orden { border-style:dashed; } /* En la rejilla, los dos recuadros arrancan a la misma altura (sin el margen de tarjeta tras tarjeta). */ .documentos-orden > .tarjeta { margin:0; } .cierre-orden { border-style:solid; } .resumen-cierre { margin:.2rem 0 .8rem; font-size:var(--t-sm); color:var(--tenue); } .resumen-cierre strong { color:var(--tinta); } .cierre-orden .acciones { margin-top:1rem; } .reabrir-orden { display:flex; gap:.8rem; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--borde); } .documento-orden.listo { border-style:solid; border-color:#A7F3D0; } .documento-orden.listo .ficha-ventana { background:var(--ok-suave); color:var(--ok); } .doc-cabeza { display:flex; gap:.75rem; align-items:center; margin-bottom:.6rem; } .doc-cabeza strong { display:block; color:var(--tinta); } .doc-cabeza small { display:block; color:var(--apagado); font-size:var(--t-xs); } .doc-listo { margin:.2rem 0 .7rem; font-size:var(--t-sm); color:var(--tinta); } .doc-listo small { color:var(--apagado); font-size:var(--t-xs); } .doc-falta { margin:.2rem 0 .6rem; font-size:var(--t-sm); color:var(--apagado); } .subir-documento { display:flex; gap:.6rem; align-items:flex-end; flex-wrap:wrap; margin-top:.4rem; } .subir-documento .adjunto { flex:1; min-width:12rem; } .adjunto input[type=file] { padding:.4rem; font-size:var(--t-xs); background:var(--fondo); } .adjunto .pista.mal { color:#B91C1C; } /* La historia de la orden, como una linea de tiempo corta. */ .historia-orden { list-style:none; margin:.4rem 0 1.6rem; padding:0 0 0 1.1rem; border-left:2px solid var(--linea); } .historia-orden li { position:relative; padding:.25rem 0 .7rem .6rem; font-size:var(--t-sm); color:var(--tinta); } .historia-orden li::before { content:''; position:absolute; left:-1.48rem; top:.55rem; width:9px; height:9px; border-radius:50%; background:var(--azul); box-shadow:0 0 0 3px var(--fondo); } .historia-orden small { display:block; color:var(--apagado); font-size:var(--t-xs); } /* "es-principal" y no "principal": .principal ya es el texto destacado de una celda. */ .pastilla.es-principal { background:var(--azul-suave); color:var(--azul-fuerte); } /* Filtros del directorio: una rejilla que se acomoda al ancho, y los botones abajo. */ .filtros-directorio { margin-bottom:1.2rem; } .rejilla-filtros { display:grid; grid-template-columns:repeat(auto-fill,minmax(11rem,1fr)); gap:0 1rem; } .rejilla-filtros label { margin-top:.4rem; } .acciones-filtros { display:flex; gap:.8rem; align-items:center; margin-top:1rem; flex-wrap:wrap; } .paginacion { display:flex; justify-content:space-between; align-items:center; margin:1rem 0; } .contratado .mostrador { margin-left:.5rem; color:var(--tenue); font-size:var(--t-micro); font-weight:600; } /* El contacto nuevo aparece debajo de la lista, en un recuadro, solo si se pide. */ .nuevo-contacto { margin-top:.6rem; padding:.2rem .9rem .9rem; border:1px dashed #BFD3FD; border-radius:10px; background:#F8FAFF; } @media (max-width: 560px) { .velo { padding:0; align-items:flex-end; } .ventana { max-width:none; border-radius:16px 16px 0 0; } } /* ---------- Confirmar ---------- La pregunta antes de algo que no se deshace (dialogo.js). Reemplaza a la ventana del navegador, que no se puede diseñar y anuncia "examinar.crcpro.co dice:" encima del mensaje. Con los colores de la aplicación: el botón es ámbar como toda acción, y si lo que viene borra algo lo dice el ícono de la papelera, no un rojo de alarma. */ dialog.confirmar { border:0; padding:1.5rem 1.5rem 1.25rem; border-radius:16px; width:min(25rem, calc(100% - 2rem)); background:var(--panel); color:var(--texto); box-shadow:0 24px 60px rgba(10,22,40,.35); animation:confirmar-entra .18s ease-out; } dialog.confirmar::backdrop { background:rgba(10,22,40,.55); backdrop-filter:blur(3px); } .confirmar-ico { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--azul-suave); color:var(--azul-fuerte); margin-bottom:.9rem; } .confirmar-ico svg { width:22px; height:22px; } dialog.confirmar h2 { margin:0 0 .35rem; font-size:var(--t-lg); } dialog.confirmar p { margin:0; font-size:var(--t-sm); line-height:1.55; color:var(--texto); } .confirmar-botones { display:flex; justify-content:flex-end; gap:.6rem; margin-top:1.4rem; } .confirmar-botones button { justify-content:center; } /* El foco, como el de los campos: azul suave y no el contorno negro del navegador. */ .confirmar-botones button:focus-visible { outline:none; box-shadow:0 0 0 3px #BFD3FD; } .confirmar-botones button.secundario:focus-visible { border-color:var(--azul); } @keyframes confirmar-entra { from { opacity:0; transform:translateY(8px) scale(.97); } to { opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce) { dialog.confirmar { animation:none; } } @media (max-width: 520px) { .confirmar-botones { flex-direction:column-reverse; } .confirmar-botones button { width:100%; } } /* ---------- Porte de Armas ---------- Cuantos cupos lleva cada orden: una barra que se llena y se pone verde al completarse. */ .celda-avance { min-width:9rem; } .avance { height:7px; border-radius:99px; background:var(--fondo); border:1px solid var(--linea); overflow:hidden; margin:.15rem 0 .25rem; } .avance span { display:block; height:100%; background:var(--azul); border-radius:99px; } .avance.completo span { background:var(--ok); } .celda-avance small { color:var(--apagado); font-size:var(--t-micro); } .pestanas.filtros { margin:0 0 1rem; } /* Los datos de la orden, en rejilla: se leen como la orden de papel. */ .rejilla-datos { display:grid; grid-template-columns:repeat(auto-fill,minmax(12rem,1fr)); gap:.9rem 1.4rem; margin-bottom:1.4rem; font-size:var(--t-sm); color:var(--tinta); } /* Un correo largo no se sale de su celda ni se monta sobre la de al lado: se parte. */ .rejilla-datos > div { min-width:0; overflow-wrap:anywhere; } .rejilla-datos .etiqueta { display:block; margin-bottom:.15rem; } /* La orden en la ficha: debajo del servicio, a todo lo ancho. */ .orden-elegida { grid-column:1 / -1; } /* Cada servicio contratado por la ARL, dentro de su ventana: su casilla y su tarifa. */ .contratado { border:1px solid var(--linea); border-radius:10px; padding:.7rem .9rem .9rem; margin-top:.6rem; background:#FBFCFE; } .contratado .casilla { font-weight:700; color:var(--tinta); } .contratado.agregar { border-style:dashed; background:var(--panel); } .contratado.agregar > label:first-child { margin-top:0; } .contratado .columnas label { margin-top:.6rem; } .con-signo input + .signo { margin-left:.35rem; } .orden-elegida label { margin-top:0; } /* Elegir sede al entrar: botones grandes, porque se pulsa una vez al día y con prisa. */ .sedes { display:flex; flex-direction:column; gap:.6rem; } /* Ojo: dentro de .acceso hay una regla que pinta de ambar todo boton. Excluye a .ojo y a .sede; sin eso, cada sede salia como un boton ambar macizo con su ciudad ilegible. */ .sede { display:block; width:100%; text-align:left; background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.14); border-radius:12px; padding:.85rem 1.05rem; color:#fff; cursor:pointer; transition:border-color .15s, background-color .15s; } .sede:hover { background:rgba(255,255,255,.12); border-color:var(--ambar); } .sede strong { display:block; font-size:var(--t-md); font-weight:600; } .sede small { display:block; color:rgba(255,255,255,.45); font-size:var(--t-xs); margin-top:.1rem; } .sede.consolidado { background:none; border-style:dashed; } /* Lo que se ahorra el convenio, y lo que paga de más si alguna vez se acuerda al revés. */ .ahorro { color:var(--ok); font-weight:600; font-size:var(--t-xs); } .recargo { color:var(--avisa); font-weight:600; font-size:var(--t-xs); } /* En el racimo de servicios por agregar, cada uno con su precio de mostrador a la derecha. */ .racimo .casilla .mostrador { margin-left:.5rem; color:var(--tenue); font-size:var(--t-micro); font-variant-numeric:tabular-nums; } /* El pin que abre la sede en Maps, junto a la dirección. */ .mapa { display:inline-flex; vertical-align:-2px; margin-left:.25rem; color:var(--azul); } /* Un organismo de transito: pocos, y cada uno con media docena de cifras. Un panel por cada uno en vez de una fila de tabla altisima. Los nombres son suyos (.organismo, .derechos, .cargo) y no se comparten con nada: ver docs/interfaz.md. */ .organismo { background:var(--panel); border:1px solid var(--linea); border-radius:var(--r); padding:1rem 1.15rem; box-shadow:var(--sombra); margin-bottom:.9rem; } .organismo.apagado { background:#FAFBFC; } .organismo.apagado .principal { color:var(--tenue); } .organismo .quien { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; } .organismo .principal { font-size:var(--t-md); } .organismo .quien small { display:block; color:var(--apagado); font-size:var(--t-xs); margin-top:.15rem; } /* Los cargos: rotulo arriba, cifra abajo, todos del mismo ancho para que se comparen de un vistazo. El RUNT va aparte con un filete porque no es un tramite. */ .derechos { display:grid; gap:.5rem; grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr)); margin-top:.9rem; } .derechos .cargo { background:var(--fondo); border-radius:9px; padding:.5rem .65rem; } .derechos .cargo span { display:block; font-size:var(--t-micro); color:var(--apagado); text-transform:uppercase; letter-spacing:.6px; font-weight:700; line-height:1.3; } .derechos .cargo strong { display:block; font-size:var(--t-base); color:var(--tinta); font-weight:700; font-variant-numeric:tabular-nums; margin-top:.15rem; } .derechos .cargo.aparte { background:var(--azul-suave); } .derechos .cargo .raya { font-weight:500; font-size:var(--t-xs); } /* Una rejilla de campos de precio no necesita 15rem por columna: con eso caben tres o cuatro en la ventana en vez de dos. */ .columnas.tarifas { grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); gap:.2rem 1rem; } /* Un indice en columna dentro de la lamina: once listas no caben en una fila de pestanas, y una lista a la que hay que arrastrarse a lo ancho es una lista que nadie usa. Mas claro que el indice de Configuracion, para que no compitan dos columnas oscuras. */ .con-indice { display:grid; grid-template-columns:12.5rem 1fr; gap:1.3rem; align-items:start; } .con-indice .suyo { min-width:0; } .con-indice .suyo h3 { margin:0 0 .15rem; font-size:var(--t-md); color:var(--tinta); font-weight:700; } .sublista { display:flex; flex-direction:column; border-right:1px solid var(--linea); padding-right:.3rem; margin-right:-.6rem; } .sublista a { padding:.42rem .6rem; border-radius:7px; color:var(--apagado); font-size:var(--t-sm); font-weight:500; border-left:3px solid transparent; } .sublista a:hover { background:#F5F8FC; color:var(--tinta); } .sublista a.activo { background:var(--azul-suave); color:var(--azul-fuerte); font-weight:700; border-left-color:var(--azul); border-radius:7px 7px 7px 0; } @media (max-width: 1100px) { .con-indice { grid-template-columns:1fr; } .sublista { flex-direction:row; flex-wrap:wrap; gap:.2rem; border-right:0; border-bottom:1px solid var(--linea); padding:0 0 .5rem; margin:0 0 .4rem; } .sublista a { border-left:0; } } /* Listas desplegables, como en PracticarPro (0088): el indice agrupado en una tarjeta, cada lista con su icono y su linea; a la derecha, agregar (uno o un lote), el buscador y la tabla. */ td a.principal:hover { color:var(--azul); text-decoration:underline; } .volver-a { margin:-.3rem 0 .9rem; } .cartera-empresa { margin-bottom:.7rem; border:1px solid var(--linea); border-radius:12px; background:var(--panel); overflow:hidden; } .cartera-empresa summary { display:flex; align-items:center; gap:1.4rem; padding:.85rem 1.1rem; cursor:pointer; } .cartera-empresa summary .nombre { flex:1; min-width:0; } .cartera-empresa summary small { display:block; color:var(--tenue); font-size:var(--t-xs); font-weight:500; } .cartera-empresa .cifra-grupo { text-align:right; white-space:nowrap; font-weight:600; color:var(--tinta); } .cartera-empresa .cifra-grupo.total { font-weight:800; } .cartera-empresa table { margin:0; border-radius:0; } .pagos-arl { margin:0 0 .9rem; } input.cifra-corta { width:6.4rem; text-align:right; } .rotulo-tabla { display:block; margin:1.5rem 0 .55rem; } .arbol-permisos, .arbol-permisos ul { list-style:none; margin:0; padding:0; } .arbol-permisos > li { padding:.7rem .9rem; margin-bottom:.5rem; border:1px solid var(--linea); border-radius:10px; background:var(--panel); } .arbol-permisos > li > .casilla-arbol { font-weight:700; color:var(--tinta); } .arbol-permisos ul { margin:.35rem 0 0 1.55rem; } .arbol-permisos ul li { padding:.18rem 0; } .casilla-arbol { display:flex; align-items:flex-start; gap:.55rem; margin:0; cursor:pointer; font-weight:500; } .casilla-arbol input { flex:none; margin-top:.2rem; } .casilla-arbol small { display:block; color:var(--tenue); font-weight:400; } .arbol-grupo > strong { color:var(--tinta); } .sublista a small { display:block; color:var(--tenue); font-weight:500; } .listas-config { display:grid; grid-template-columns:16rem minmax(0,1fr); gap:1.4rem; align-items:start; } .listas-panel { min-width:0; } .indice-listas { display:flex; flex-direction:column; gap:.8rem; } .grupo-listas { background:var(--panel); border:1px solid var(--linea); border-radius:12px; overflow:hidden; } .grupo-titulo { display:flex; align-items:center; gap:.4rem; padding:.55rem .85rem; background:var(--fondo); border-bottom:1px solid var(--linea); color:var(--apagado); font-size:var(--t-micro); font-weight:800; letter-spacing:.06em; text-transform:uppercase; } .indice-listas a { display:flex; gap:.7rem; align-items:flex-start; padding:.6rem .85rem; color:var(--tinta); border-top:1px solid var(--linea); } .indice-listas .grupo-titulo + a { border-top:0; } .indice-listas a svg { color:var(--tenue); margin-top:.15rem; flex-shrink:0; } .indice-listas a strong { display:block; font-size:var(--t-sm); font-weight:600; } .indice-listas a small { display:block; color:var(--apagado); font-size:var(--t-xs); margin-top:.05rem; } .indice-listas a:hover { background:#F5F8FC; } .indice-listas a:hover svg { color:var(--azul); } .indice-listas a.activo { background:var(--noche); color:#fff; box-shadow:inset 3px 0 0 var(--azul); } .indice-listas a.activo svg, .indice-listas a.activo small { color:#CBD5E1; } .listas-cabeza { display:flex; gap:.8rem; align-items:flex-start; margin-bottom:1rem; } .listas-cabeza h3 { margin:0; font-size:var(--t-lg); color:var(--tinta); } .listas-cabeza p { margin:.15rem 0 0; color:var(--apagado); font-size:var(--t-sm); } .listas-cabeza-ico { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--azul-suave); color:var(--azul-fuerte); flex-shrink:0; } .agregar-lista { background:var(--fondo); border:1px solid var(--linea); border-radius:12px; padding:.9rem 1rem; display:flex; flex-direction:column; gap:.7rem; margin-bottom:1rem; } .agregar-lista > .etiqueta { margin:0; } .agregar-fila { display:flex; gap:.6rem; align-items:flex-end; } .agregar-fila .nombre-nuevo, .agregar-fila textarea { flex:1; min-width:0; } .agregar-fila .sigla-nueva { width:7rem; flex-shrink:0; } .agregar-fila label { font-size:var(--t-xs); } .agregar-fila input, .agregar-fila textarea { margin:0; } .agregar-fila button { white-space:nowrap; flex-shrink:0; } .agregar-lote { border-top:1px dashed var(--linea); padding-top:.7rem; } .agregar-lote > label { font-size:var(--t-xs); color:var(--apagado); font-weight:500; } .agregar-lote textarea { min-height:2.6rem; resize:vertical; } button.boton-lote { background:var(--ok); color:#fff; } button.boton-lote:hover { background:#047857; } .buscar-lista { position:relative; display:flex; align-items:center; gap:.8rem; margin:0 0 .8rem; } .buscar-lista input[type="search"] { flex:1; margin:0; padding-left:2.3rem; } .buscar-lista-ico { position:absolute; left:.8rem; top:50%; transform:translateY(-50%); color:var(--tenue); display:flex; } .buscar-lista-cuenta { color:var(--apagado); font-size:var(--t-xs); white-space:nowrap; } @media (max-width: 1100px) { .listas-config { grid-template-columns:1fr; } } @media (max-width: 620px) { .agregar-fila { flex-direction:column; align-items:stretch; } .agregar-fila .sigla-nueva { width:auto; } } /* Una clausula del formulario de solicitud: titulo, acciones a la derecha y el texto debajo. El texto se lee de corrido, asi que va a ancho de lectura y no a ancho de pantalla. */ .bloque-legal { border:1px solid var(--linea); border-radius:var(--r); padding:.85rem 1.05rem; margin-bottom:.7rem; background:var(--panel); } .bloque-legal .quien { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; } .bloque-legal .principal { font-size:var(--t-base); } .bloque-legal p { margin:.5rem 0 0; color:var(--texto); font-size:var(--t-sm); line-height:1.6; max-width:58rem; } /* Una parte de la seccion que todavia no existe: se ve, para saber que viene, pero no se puede pulsar. Esconderla seria peor: nadie sabria que va a estar ahi. */ .pestanas .porVenir { display:flex; align-items:center; padding:.55rem .8rem; color:var(--tenue); font-size:var(--t-sm); font-weight:500; font-style:italic; cursor:default; border-bottom:2px solid transparent; white-space:nowrap; } /* ---------- La ficha de Nuevo registro ---------- Secciones en tarjeta, cada una con su titulo y su icono, como Matricula de PracticarPro. Un formulario de cuarenta campos sin bloques es una pared de cajas. */ .bloque { background:var(--panel); border:1px solid var(--linea); border-radius:var(--r); padding:1.05rem 1.25rem 1.2rem; box-shadow:var(--sombra); margin-bottom:1rem; } .bloque > h3 { display:flex; align-items:center; gap:.5rem; margin:0 0 .9rem; font-size:var(--t-micro); text-transform:uppercase; letter-spacing:1.2px; font-weight:700; color:var(--apagado); } .bloque > h3 .ico { color:var(--azul); } .bloque .columnas { gap:0 1.1rem; } .bloque table { box-shadow:none; } /* El servicio en una sola fila: que se pide, en que categoria (o dos, si es un combo) y cuanto vale. Todo lo que define la visita, a la vista de un golpe. */ .servicio-elegido { display:grid; grid-template-columns:minmax(16rem,2fr) repeat(2,minmax(8rem,1fr)) auto; gap:.9rem 1.1rem; align-items:end; } .servicio-elegido label { margin-top:0; } .casilla-categoria [data-direccion] { margin-top:.4rem; } .precio-servicio { display:flex; flex-direction:column; align-items:flex-end; padding-bottom:.35rem; min-width:7rem; } .precio-servicio span { font-size:var(--t-micro); text-transform:uppercase; letter-spacing:1.1px; font-weight:700; color:var(--apagado); } .precio-servicio strong { font-size:var(--t-lg); color:var(--tinta); font-weight:800; font-variant-numeric:tabular-nums; } /* El cobro: valor (editable, arranca en el de la lista) y medio de pago, en su propia fila. */ .cobro { grid-column:1 / -1; display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,18rem)); gap:0 1.25rem; margin-top:.4rem; padding-top:.9rem; border-top:1px dashed var(--borde); } .cobro label { margin-top:0; } .nota-cartera { grid-column:1 / -1; margin:.4rem 0 0; font-size:var(--t-sm); color:var(--tenue); } @media (max-width: 1100px) { .servicio-elegido { grid-template-columns:1fr 1fr; } } /* La foto a la izquierda de los datos, en tamano carne y siempre a la vista: si se esconde hasta elegir servicio, nadie la toma. Todo el recuadro es el boton. */ .con-foto { display:flex; gap:1.4rem; align-items:flex-start; } .con-foto .suyo { flex:1; min-width:0; } .retrato { flex-shrink:0; width:9rem; } .retrato .marco { position:relative; display:block; width:9rem; height:12rem; padding:0; border:2px dashed #CBD5E1; border-radius:10px; background:var(--fondo); overflow:hidden; cursor:pointer; transition:border-color .15s, background-color .15s; } .retrato .marco:hover { border-color:var(--azul); background:var(--azul-suave); } .retrato .marco img, .retrato .marco video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .retrato .vacio-foto { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; width:100%; height:100%; color:var(--tenue); font-size:var(--t-micro); font-weight:700; line-height:1.3; text-align:center; } .retrato .marco:hover .vacio-foto { color:var(--azul-fuerte); } .retrato .cambiar { position:absolute; inset:auto 0 0 0; background:rgba(15,36,64,.72); color:#fff; font-size:var(--t-micro); font-weight:700; padding:.2rem 0; } .retrato .marco.tomada { border-style:solid; border-color:var(--ok); } .retrato .quitar-foto { display:block; width:100%; text-align:center; margin-top:.35rem; } /* La camara, en su ventana. El escenario es oscuro para que la cara resalte, con el ovalo de guia como en una foto de documento. */ dialog.camara { border:0; padding:0; border-radius:16px; width:min(23rem, calc(100% - 2rem)); background:var(--panel); color:var(--texto); box-shadow:0 24px 60px rgba(10,22,40,.4); animation:confirmar-entra .18s ease-out; } dialog.camara::backdrop { background:rgba(10,22,40,.6); backdrop-filter:blur(3px); } .camara-cabeza { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1rem 1.25rem .85rem; border-bottom:1px solid var(--linea); } .camara-cabeza h2 { margin:0; font-size:var(--t-lg); } .camara-cabeza small { display:block; color:var(--apagado); font-size:var(--t-xs); margin-top:.1rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:16rem; } dialog.camara .cerrar { background:none; color:var(--tenue); font-size:1.5rem; line-height:1; padding:.05rem .45rem; border-radius:8px; font-weight:400; } dialog.camara .cerrar:hover { background:var(--fondo); color:var(--texto); } .camara-cuerpo { padding:1.1rem 1.25rem 1.2rem; display:flex; flex-direction:column; gap:.7rem; align-items:center; } .escenario { position:relative; width:15rem; max-width:100%; aspect-ratio:3/4; border-radius:14px; overflow:hidden; background:var(--noche); } .escenario video, .escenario img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .escenario video { transform:scaleX(-1); } /* como un espejo: moverse a la izquierda va a la izquierda */ .escenario .guia { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; } .escenario .guia span { width:62%; height:62%; border:2px dashed rgba(255,255,255,.6); border-radius:50%; } .escenario img:not([hidden]) ~ .guia { display:none; } .escenario-estado { position:absolute; inset:auto 0 .7rem; margin:0; text-align:center; color:rgba(255,255,255,.75); font-size:var(--t-xs); } .escenario-estado:empty { display:none; } dialog.camara select { width:100%; } .camara-error { margin:0; color:#B91C1C; font-size:var(--t-xs); text-align:center; line-height:1.45; } .camara-botones { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; } .camara-botones button[data-camara-usar] { background:var(--ok); color:#fff; } .camara-botones button[data-camara-usar]:hover { background:#047857; } .camara-archivo { margin:0; font-size:var(--t-xs); font-weight:500; color:var(--azul-fuerte); cursor:pointer; } .camara-archivo:hover { text-decoration:underline; } .camara-peso { margin:0; font-size:var(--t-micro); color:var(--tenue); } .camara-peso:empty { display:none; } @media (prefers-reduced-motion: reduce) { dialog.camara { animation:none; } } /* El cuestionario: veinte preguntas en dos columnas. En una sola, la pantalla no se acaba. */ .tanda { margin-bottom:1.1rem; } .tanda .etiqueta { display:block; } .cuestionario { display:grid; grid-template-columns:repeat(auto-fit,minmax(23rem,1fr)); gap:.35rem; margin-top:.5rem; } .pregunta { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0; padding:.45rem .75rem; border:1px solid var(--linea); border-radius:9px; background:var(--panel); font-size:var(--t-sm); font-weight:400; color:var(--texto); cursor:pointer; } .pregunta:hover { border-color:#BFD3FD; } .pregunta.grave { border-left:3px solid var(--avisa); } /* Marcada la respuesta que detiene: la pregunta se ve en rojo, y el botón Registrar se apaga. */ .pregunta.detiene { border-color:var(--error); background:var(--error-suave); } .pregunta > span:first-child { flex:1; min-width:0; } .pregunta .sino { display:flex; gap:.8rem; flex-shrink:0; } .pregunta .opcion { display:inline-flex; align-items:center; gap:.3rem; font-weight:600; } .pregunta input[type=radio] { width:auto; margin:0; } /* La firma, al final y con la barra del pad arriba a la derecha. */ .firma-bloque .cabeza-firma { display:flex; align-items:flex-start; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; margin-bottom:.9rem; } .firma-bloque .cabeza-firma h3 { margin:0; } .firma-bloque .descripcion { margin:.15rem 0 0; color:var(--apagado); font-size:var(--t-xs); } .pad-barra { display:flex; align-items:center; gap:.75rem; padding:.55rem .8rem .55rem .6rem; border:1px solid var(--linea); border-radius:12px; background:var(--panel); box-shadow:var(--sombra); } .pad-barra .pad-ico { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--fondo); color:var(--apagado); flex-shrink:0; } .pad-barra.conectado .pad-ico { background:var(--azul-suave); color:var(--azul-fuerte); } .pad-barra .quien strong { display:block; font-size:var(--t-sm); color:var(--tinta); } .pad-barra .quien small { display:flex; align-items:center; gap:.35rem; color:var(--apagado); font-size:var(--t-micro); } .pad-barra .quien small::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--tenue); flex-shrink:0; } .pad-barra.conectado .quien small::before { background:var(--ok); box-shadow:0 0 0 3px var(--ok-suave); } .pad-barra.firmando .quien small::before { background:var(--ambar); box-shadow:0 0 0 3px var(--ambar-suave); } /* El pad no contesta, no aparece o lo tiene SISEC: punto rojo hasta reconectarlo. */ .pad-barra.con-error .quien small::before { background:var(--error); box-shadow:0 0 0 3px var(--error-suave); } .pad { width:100%; height:9rem; background:#fff; border:1px dashed #BFD3FD; border-radius:9px; margin:.5rem 0; touch-action:none; cursor:crosshair; display:block; } /* La firma guardada, a tamano de lectura y con su linea debajo, como en el papel. */ .firma-vista { display:block; max-width:26rem; width:100%; border-bottom:1px solid var(--linea); margin:.4rem 0 .2rem; } /* El acudiente del menor: aparece solo si la fecha de nacimiento da menos de 18 anios. Un recuadro aparte, con borde ambar suave, para que no se confunda con la firma de la persona. */ .acudiente { margin-top:1.1rem; padding:.95rem 1.05rem 1rem; border:1px solid var(--ambar-linea); border-radius:12px; background:var(--ambar-suave); } .acudiente-cabeza { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:.4rem; } .acudiente-cabeza strong { display:inline-flex; align-items:center; gap:.4rem; color:var(--tinta); font-size:var(--t-sm); } .acudiente-cabeza span { color:var(--ambar-texto); font-size:var(--t-xs); } .acudiente-cabeza button { margin-left:auto; } .acudiente-datos label:first-child { margin-top:.4rem; } .acudiente .pad { background:#fff; } /* Cuando la edad no alcanza para lo elegido: se dice en el recuadro del servicio, al lado de lo que hay que cambiar, y no en una ventana. */ .aviso-edad { grid-column:1 / -1; margin:.2rem 0 0; padding:.55rem .8rem; border-radius:9px; background:var(--ambar-suave); border:1px solid var(--ambar-linea); color:var(--ambar-texto); font-size:var(--t-sm); font-weight:600; } /* Lo que acepta al firmar. Cada renglon se marca cuando la persona lo marca en el pad. */ .acepta { list-style:none; margin:.5rem 0 .5rem; padding:0; display:flex; flex-direction:column; gap:.35rem; color:var(--texto); font-size:var(--t-sm); line-height:1.45; } .acepta li { display:flex; align-items:flex-start; gap:.55rem; padding:.45rem .65rem; border:1px solid var(--linea); border-radius:9px; background:var(--panel); transition:border-color .15s, background-color .15s; } .acepta li .ico { flex-shrink:0; margin-top:.15rem; padding:2px; border-radius:5px; border:1.5px solid #CBD5E1; color:transparent; width:17px; height:17px; } .acepta li.marcada { border-color:#A7F3D0; background:var(--ok-suave); } .acepta li.marcada .ico { border-color:var(--ok); background:var(--ok); color:#fff; } /* El boton de guardar, separado de las tarjetas: se busca al final y tiene que verse. */ .acciones-finales { display:flex; gap:.7rem; align-items:center; margin:1.2rem 0 1.6rem; } .acciones-finales button { font-size:var(--t-md); padding:.65rem 1.6rem; } /* Saltar de un anio a otro en el calendario de festivos. */ .anios { display:flex; align-items:center; gap:1.1rem; margin:0 0 .9rem; font-size:var(--t-sm); } .anios strong { color:var(--tinta); font-size:var(--t-md); font-variant-numeric:tabular-nums; } .anios a { color:var(--apagado); font-weight:600; } .anios a:hover { color:var(--azul-fuerte); } /* El "%" va a la derecha del campo: es donde se lee un porcentaje. */ .con-signo.porcentaje { flex-direction:row-reverse; } .con-signo.porcentaje input { text-align:left; } .mapa:hover { color:var(--azul-fuerte); } /* La cabecera de una sección: título a la izquierda, acción principal a la derecha y arriba, que es donde se busca. Nunca un formulario suelto al final de la página. */ .cabecera-seccion { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.2rem; } .cabecera-seccion h2 { margin:0 0 .15rem; font-size:var(--t-lg); } .cabecera-seccion .descripcion { margin:0; max-width:52rem; } .cabecera-seccion .boton { flex-shrink:0; } .botones-cabecera { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:flex-end; flex-shrink:0; } /* Lo que no es obvio, dicho donde se necesita en vez de en un correo de soporte. */ .nota { background:var(--azul-suave); border:1px solid #CFDFFB; border-radius:10px; padding:.85rem 1.05rem; margin-top:1.1rem; font-size:var(--t-sm); color:#1E3A6B; line-height:1.55; } .nota strong { color:var(--azul-fuerte); } .nota code { background:rgba(255,255,255,.7); border-color:#CFDFFB; } /* Pegar la matriz de la ANSV: plegado debajo de la matriz, se abre cuando se necesita. */ .importar-ansv { margin-top:1rem; } .importar-ansv summary { cursor:pointer; font-weight:600; color:var(--azul-fuerte); } .importar-ansv form { margin-top:.8rem; } /* Quién eres y dónde trabajas, arriba a la derecha y en dos líneas, como en PracticarPro. */ .quien-donde { display:inline-flex; align-items:center; gap:.6rem; padding:.25rem .7rem .25rem .3rem; border-radius:10px; text-align:right; } .quien-donde:hover { background:var(--fondo); } .quien-donde img { height:30px; border-radius:6px; } .quien-donde > span { display:flex; flex-direction:column; line-height:1.25; } .quien-donde strong { color:var(--tinta); font-size:var(--t-sm); font-weight:600; } .quien-donde small { display:inline-flex; align-items:center; gap:.25rem; justify-content:flex-end; color:var(--apagado); font-size:var(--t-xs); } .quien-donde small .ico { color:var(--tenue); } /* ---------- Pantallas sin menú (errores) ---------- */ .centrado { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1.25rem; background:var(--noche); background-image:radial-gradient(900px 400px at 50% -10%, #17335c 0%, var(--noche) 62%); } .centrado .caja { width:100%; max-width:26rem; } .centrado .marca { justify-content:center; padding:0 0 1.5rem; } .centrado .tarjeta { border:0; box-shadow:var(--sombra-alta); } .centrado h1 { font-size:var(--t-lg); text-align:center; } .centrado .subtitulo { text-align:center; font-size:var(--t-base); } .centrado .pie-nota { text-align:center; color:#7D8FA6; font-size:var(--t-xs); margin-top:1.1rem; } .centrado .boton, .centrado button[type=submit] { width:100%; justify-content:center; } @media (max-width: 860px) { .app { flex-direction:column; } .lateral { width:100%; height:auto; position:static; } .lateral nav { flex-direction:row; flex-wrap:wrap; } .lateral .empuje { display:none; } .lateral .pie { border-top:0; } main, .superior { padding:1.1rem; } } /* ---------- Agenda ---------- Un renglón por turno: la hora con sus cupos a la izquierda y, al lado, las citas de ese turno una debajo de otra. Lo cerrado (atendida, cancelada) se apaga para que salte lo pendiente. */ .barra-agenda { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem 1rem; margin-bottom:1.2rem; } .barra-agenda label { margin-top:0; } table.agenda-dia td:first-child { width:9rem; vertical-align:top; } .cupo-turno { display:block; font-size:var(--t-micro); color:var(--ok); font-weight:600; margin-top:.15rem; } .cupo-turno.lleno { color:var(--apagado); } .cita-agenda { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.25rem 1rem; align-items:center; padding:.45rem 0; } .cita-agenda + .cita-agenda { border-top:1px dashed var(--linea); } .cita-agenda .cita-quien small { display:block; color:var(--tenue); font-size:var(--t-micro); margin-top:.1rem; } .cita-agenda .cita-marcas { display:flex; gap:.35rem; flex-wrap:wrap; justify-content:flex-end; } .cita-agenda .acciones-fila { grid-column:1 / -1; justify-content:flex-start; } .cita-agenda.cerrada { opacity:.62; } /* El horario de la semana: dos franjas por día, cada una "desde a hasta". */ table.horario-agenda { max-width:40rem; } .franja { display:flex; align-items:center; gap:.4rem; } .franja input { max-width:8.5rem; } .franja span { color:var(--tenue); font-size:var(--t-xs); } /* ---------- Tablero (plantillas-tablero.js): cómo va el mes ---------- */ .tb-cabeza { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem; } .tb-cabeza .subtitulo { margin-bottom:0; } .tb-filtros { display:flex; align-items:center; gap:.4rem; } .tb-filtros input, .tb-filtros select { width:auto; padding:.4rem .6rem; } .tb-flecha { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:8px; border:1px solid var(--linea); background:var(--panel); color:var(--tinta); font-size:1.2rem; line-height:1; } .tb-flecha:hover { border-color:var(--azul); color:var(--azul); } .tb-hero { display:grid; grid-template-columns:auto minmax(0,1.6fr) minmax(0,1fr); gap:2rem; align-items:center; background:var(--noche); color:#CBD5E1; border-radius:20px; padding:1.8rem 2rem; margin-bottom:1.25rem; } .tb-hero-anillo { display:flex; flex-direction:column; align-items:center; gap:.5rem; } .tb-hero-anillo small { color:#7D8FA6; font-size:var(--t-xs); } .tb-anillo { position:relative; } .tb-anillo svg { display:block; } .tb-anillo-centro { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } .tb-anillo-centro strong { font-size:2.6rem; font-weight:900; color:#fff; letter-spacing:-1.5px; line-height:1; } .tb-anillo-centro span { font-size:var(--t-xs); color:#9DB4E8; margin-top:.2rem; } .tb-hero-medio h2 { margin:0 0 .5rem; color:#fff; font-size:1.25rem; font-weight:700; letter-spacing:-.3px; line-height:1.35; } .tb-hero-medio h2 span { color:var(--cielo); } .tb-hero-medio p { margin:0 0 1rem; } .tb-mini { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; } .tb-mini > div { background:rgba(255,255,255,.06); border-radius:12px; padding:.7rem .85rem; } .tb-mini span { display:block; font-size:var(--t-micro); text-transform:uppercase; letter-spacing:1px; font-weight:700; color:#8FA3BC; } .tb-mini strong { display:block; font-size:1.45rem; font-weight:800; color:#fff; letter-spacing:-.6px; } .tb-mini small { color:#7D8FA6; font-size:var(--t-xs); } .tb-hero-servicios .tb-rotulo { display:block; font-size:var(--t-micro); text-transform:uppercase; letter-spacing:1px; font-weight:700; color:#8FA3BC; margin-bottom:.6rem; } .tb-hero .tb-leyenda li { color:#CBD5E1; } .tb-hero .tb-leyenda strong { color:#fff; } .tb-tendencia { display:inline-block; font-size:var(--t-xs); font-weight:600; color:var(--apagado); } .tb-hero .tb-tendencia { color:#9DB4E8; } .tb-tendencia.sube { color:#059669; } .tb-hero .tb-tendencia.sube { color:#34D399; } .tb-tendencia.baja { color:#DC2626; } .tb-hero .tb-tendencia.baja { color:#F87171; } .tb-apilada { display:flex; gap:2px; border-radius:999px; overflow:hidden; background:var(--linea); margin:.4rem 0 .7rem; } .tb-apilada span { display:block; min-width:4px; } .tb-leyenda { list-style:none; margin:0; padding:0; display:grid; gap:.35rem; } .tb-leyenda li { display:flex; align-items:center; gap:.5rem; font-size:var(--t-sm); color:var(--texto); } .tb-leyenda .tb-nombre { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tb-leyenda small { color:var(--tenue); font-size:var(--t-xs); min-width:2.6rem; text-align:right; } .tb-punto { display:inline-block; width:9px; height:9px; border-radius:50%; flex-shrink:0; background:var(--tono, var(--azul)); } .tb-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1rem; margin-bottom:1.25rem; } .tb-tarjeta { background:var(--panel); border:1px solid var(--linea); border-radius:18px; padding:1.15rem 1.25rem; display:flex; flex-direction:column; gap:.5rem; box-shadow:0 1px 2px rgba(15,23,42,.04), 0 6px 16px -10px rgba(15,23,42,.14); min-width:0; } .tb-titulo { display:flex; align-items:center; gap:.5rem; font-size:var(--t-xs); font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--tinta); } .tb-cifra { font-size:1.9rem; font-weight:900; color:var(--tinta); letter-spacing:-1px; line-height:1.1; } .tb-detalle { font-size:var(--t-xs); color:var(--tenue); } .tb-lista { list-style:none; margin:.2rem 0 0; padding:0; display:grid; gap:.3rem; } .tb-lista li { display:flex; justify-content:space-between; gap:.6rem; font-size:var(--t-sm); } .tb-lista li span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--texto); } .tb-lista li strong { color:var(--tinta); white-space:nowrap; } .tb-ir { margin-top:auto; padding-top:.3rem; font-size:var(--t-xs); font-weight:600; } .tb-dos { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:1rem; margin-bottom:1.25rem; } .tb-columnas { display:flex; align-items:flex-end; gap:3px; height:190px; padding-top:.6rem; } .tb-columna { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:3px; height:100%; } .tb-columna .tb-barra { display:block; width:100%; max-width:22px; border-radius:6px 6px 2px 2px; background:#A9BEF6; } .tb-columna.hoy .tb-barra { background:var(--azul); } .tb-columna.domingo .tb-barra { background:#D9E1EC; } .tb-columna .tb-valor { font-size:.62rem; font-weight:700; color:var(--apagado); min-height:.8rem; } .tb-columna .tb-dia { font-size:.62rem; color:var(--tenue); } .tb-columna.hoy .tb-dia { color:var(--azul); font-weight:800; } .tb-columna.futuro .tb-dia { color:#CBD5E1; } .tb-horizontal { list-style:none; margin:.3rem 0 0; padding:0; display:grid; gap:.65rem; } .tb-horizontal li { display:grid; grid-template-columns:minmax(0,7.5rem) minmax(0,1fr) auto; align-items:center; gap:.6rem; font-size:var(--t-sm); } .tb-horizontal .tb-nombre { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tb-pista { display:block; height:10px; border-radius:999px; background:#EEF2F7; overflow:hidden; } .tb-pista span { display:block; height:100%; border-radius:999px; background:#1E9BD7; } .tb-tabla { margin-bottom:1.25rem; } .tb-tabla table { margin:0; } .tb-tipo td { font-weight:700; color:var(--tinta); } .tb-tipo td:first-child { display:flex; align-items:center; gap:.5rem; } .tb-linea td:first-child { padding-left:2rem; color:var(--apagado); } .tb-porcion { display:inline-block; vertical-align:middle; width:4.5rem; height:6px; margin-right:.5rem; border-radius:999px; background:#EEF2F7; overflow:hidden; } .tb-porcion span { display:block; height:100%; } .tb-trio { display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1rem; margin-bottom:1.25rem; } .tb-chips { list-style:none; margin:.2rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.45rem; } .tb-chips li { display:inline-flex; align-items:center; gap:.45rem; padding:.3rem .65rem; border-radius:999px; background:var(--fondo); border:1px solid var(--linea); font-size:var(--t-sm); } .tb-chips li span { color:var(--apagado); font-weight:700; } .tb-vacio { margin:.4rem 0; color:var(--tenue); font-size:var(--t-sm); } .tb-atajos { display:flex; flex-wrap:wrap; gap:.5rem; } .tb-atajo { display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .8rem; border-radius:10px; background:var(--panel); border:1px solid var(--linea); color:var(--tinta); font-weight:600; font-size:var(--t-sm); } .tb-atajo:hover { border-color:var(--azul); color:var(--azul); } .tb-atajo .ico { color:var(--azul); } @media (max-width:1100px) { .tb-hero { grid-template-columns:auto minmax(0,1fr); } .tb-hero-servicios { grid-column:1 / -1; } .tb-dos { grid-template-columns:minmax(0,1fr); } } @media (max-width:700px) { .tb-hero { grid-template-columns:minmax(0,1fr); padding:1.3rem; } .tb-mini { grid-template-columns:minmax(0,1fr); } }