/* ============================================================================ Portal de clientes Hormimax · estilos. Imagen de Hormimax: rojo #D42B1E, tipografía Inter. Tema claro de base y tema oscuro opcional. Pensado primero para celular. ============================================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Dos temas con los mismos nombres de color. El claro es el de base; el oscuro se activa con data-tema="oscuro" en . Ningún componente debe llevar un color escrito a mano: si falta uno, se agrega acá en los dos temas. */ :root { color-scheme: light; --rojo: #D42B1E; --rojo-osc: #b01f14; --rojo-texto: #b8241a; --fondo: #f3f4f7; --tarjeta: #ffffff; --campo: #f7f8fa; --flotante: #ffffff; --barra: rgba(255,255,255,.94); --borde: #d5d9e0; --borde-fuerte: #9aa3b1; --linea: rgba(17,24,39,.11); --linea-suave: rgba(17,24,39,.07); --relleno: rgba(17,24,39,.08); --relleno-suave: rgba(17,24,39,.035); --fuerte: #0f1419; --texto: #1f2937; --tenue: #566070; --muy-tenue: #6f7988; --apagado: #9aa3b1; --verde: #0a7f58; --ambar: #9a5200; --sombra: rgba(17,24,39,.16); --velo: rgba(17,24,39,.45); --halo-1: rgba(212,43,30,.07); --halo-2: rgba(212,43,30,.035); } :root[data-tema="oscuro"] { color-scheme: dark; --rojo-texto: #ff8a80; --fondo: #111417; --tarjeta: #1e2228; --campo: #13161a; --flotante: #181c21; --barra: rgba(17,20,23,.92); --borde: #2d3139; --borde-fuerte: #4b5563; --linea: rgba(255,255,255,.07); --linea-suave: rgba(255,255,255,.05); --relleno: rgba(255,255,255,.08); --relleno-suave: rgba(255,255,255,.03); --fuerte: #ffffff; --texto: #e5e7eb; --tenue: #9ca3af; --muy-tenue: #6b7280; --apagado: #4b5563; --verde: #34d399; --ambar: #fbbf24; --sombra: rgba(0,0,0,.5); --velo: rgba(0,0,0,.6); --halo-1: rgba(212,43,30,.12); --halo-2: rgba(212,43,30,.06); } html, body { min-height: 100%; } body { font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; background: var(--fondo); color: var(--texto); font-size: 14px; line-height: 1.5; } body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(ellipse 80% 60% at 20% 50%, var(--halo-1) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 80% 50%, var(--halo-2) 0%, transparent 60%); } body::after { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 50; background: linear-gradient(90deg, var(--rojo), #ff6b5b, var(--rojo)); } a { color: var(--rojo-texto); text-decoration: none; } a:hover { text-decoration: underline; } [hidden] { display: none !important; } /* ── Pantallas de acceso (ingreso, crear clave, recuperar) ── */ .pc-centro { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px 16px; } .pc-tarjeta { width: 100%; max-width: 430px; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 20px; box-shadow: 0 25px 60px var(--sombra); overflow: hidden; } .pc-tarjeta.ancha { max-width: 560px; } .pc-cab { padding: 30px 36px 22px; text-align: center; background: #fff; border-bottom: 1px solid rgba(0,0,0,.08); } /* El logo viene en un lienzo cuadrado con margen blanco: se recorta al centro */ .pc-cab img { width: 250px; max-width: 100%; height: 84px; object-fit: cover; } .pc-cab p { margin-top: 10px; font-size: 12.5px; color: #6b7280; letter-spacing: .5px; text-transform: uppercase; } .pc-cuerpo { padding: 28px 36px 32px; } .pc-cuerpo h1 { font-size: 18px; font-weight: 600; margin-bottom: 6px; color: var(--fuerte); } .pc-cuerpo .pc-sub { color: var(--tenue); font-size: 13px; margin-bottom: 20px; } .pc-campo { margin-bottom: 16px; } .pc-campo label { display: block; font-size: 12px; font-weight: 600; color: var(--tenue); margin-bottom: 6px; letter-spacing: .6px; text-transform: uppercase; } .pc-campo input[type=text], .pc-campo input[type=email], .pc-campo input[type=password] { width: 100%; padding: 13px 14px; background: var(--campo); border: 1.5px solid var(--borde); border-radius: 10px; color: var(--texto); font: inherit; outline: none; transition: border-color .2s, box-shadow .2s; } .pc-campo input:focus { border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(212,43,30,.15); } .pc-campo input::placeholder { color: var(--apagado); } .pc-ayuda { font-size: 12px; color: var(--muy-tenue); margin-top: 5px; } .pc-boton { width: 100%; padding: 14px; margin-top: 6px; border: none; border-radius: 10px; color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; background: linear-gradient(135deg, var(--rojo) 0%, var(--rojo-osc) 100%); box-shadow: 0 4px 18px rgba(212,43,30,.35); transition: transform .15s, box-shadow .15s; } .pc-boton:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(212,43,30,.5); } .pc-boton:disabled { opacity: .6; cursor: default; } .pc-boton.secundario { background: transparent; border: 1.5px solid var(--borde); box-shadow: none; color: var(--texto); } .pc-boton.chico { width: auto; padding: 8px 14px; font-size: 13px; margin: 0; } .pc-msj { margin-top: 14px; padding: 11px 14px; border-radius: 8px; font-size: 13px; text-align: center; } .pc-msj.error { background: rgba(212,43,30,.12); border: 1px solid rgba(212,43,30,.3); color: var(--rojo-texto); } .pc-msj.bien { background: rgba(52,211,153,.10); border: 1px solid rgba(52,211,153,.3); color: var(--verde); } .pc-msj.aviso { background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.3); color: var(--ambar); } .pc-pie { text-align: center; padding: 0 36px 24px; font-size: 12.5px; color: var(--muy-tenue); } .pc-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--tenue); margin: 4px 0 14px; } .pc-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--rojo); } .pc-condiciones { max-height: 230px; overflow-y: auto; background: var(--campo); border: 1px solid var(--borde); border-radius: 10px; padding: 12px 14px; font-size: 12.5px; color: var(--tenue); margin-bottom: 12px; } .pc-condiciones h3 { font-size: 14px; color: var(--texto); margin-bottom: 4px; } .pc-condiciones h4 { font-size: 12.5px; color: var(--texto); margin: 10px 0 3px; } .pc-condiciones p { margin-bottom: 6px; } /* ── Aplicación (después de ingresar) ── */ .pc-barra { position: sticky; top: 4px; z-index: 20; background: var(--barra); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); } .pc-barra-in { max-width: 1180px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; } .pc-marca { background: #fff; border: 1px solid var(--linea); border-radius: 8px; padding: 5px 10px; display: flex; align-items: center; } .pc-marca img { width: 118px; height: 34px; object-fit: cover; display: block; } .pc-quien { margin-left: auto; text-align: right; line-height: 1.25; min-width: 0; } .pc-quien b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-quien span { font-size: 11.5px; color: var(--tenue); } .pc-cont { max-width: 1180px; margin: 0 auto; padding: 22px 16px 60px; } .pc-titulo { font-size: 21px; font-weight: 600; color: var(--fuerte); } .pc-titulo small { display: block; font-size: 13px; font-weight: 400; color: var(--tenue); margin-top: 2px; } .pc-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 20px 0 28px; } .pc-tema { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 4px; } .pc-tema .ico { font-size: 22px; color: var(--rojo); margin-bottom: 4px; } .pc-tema b { font-size: 15px; color: var(--fuerte); } .pc-tema span { font-size: 12.5px; color: var(--tenue); } .pc-tema .pronto { align-self: flex-start; margin-top: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--ambar); background: rgba(251,191,36,.10); border-radius: 10px; padding: 2px 8px; } .pc-tema.sin { opacity: .45; } .pc-tema.sin .ico { color: var(--muy-tenue); } .pc-seccion { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .pc-seccion h2 { font-size: 16px; font-weight: 600; color: var(--fuerte); } .pc-seccion .cuenta { font-size: 12.5px; color: var(--tenue); } .pc-buscar { margin-left: auto; padding: 9px 12px; width: 280px; max-width: 100%; background: var(--campo); border: 1.5px solid var(--borde); border-radius: 9px; color: var(--texto); font: inherit; font-size: 13px; outline: none; } .pc-buscar:focus { border-color: var(--rojo); } .pc-obras { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .pc-obra { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; } .pc-obra b { display: block; font-size: 13.5px; color: var(--fuerte); } .pc-obra span { display: block; font-size: 12px; color: var(--tenue); } .pc-obra .emp { color: var(--muy-tenue); font-size: 11.5px; margin-top: 3px; } .pc-obra.inactiva { opacity: .55; } .pc-vacio { color: var(--tenue); text-align: center; padding: 30px 10px; } .pc-modal { position: fixed; inset: 0; z-index: 60; background: var(--velo); display: flex; align-items: center; justify-content: center; padding: 16px; } .pc-modal .pc-tarjeta { max-width: 420px; } @media (max-width: 520px) { .pc-cab, .pc-cuerpo { padding-left: 22px; padding-right: 22px; } .pc-pie { padding-left: 22px; padding-right: 22px; } .pc-buscar { width: 100%; margin-left: 0; } .pc-quien span { display: none; } } /* ── Cambio de tema ── */ .pc-tema-flotante { position: fixed; top: 14px; right: 14px; z-index: 40; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--borde); background: var(--tarjeta); color: var(--texto); font-size: 15px; cursor: pointer; box-shadow: 0 6px 18px var(--sombra); } .pc-tema-flotante:hover { border-color: var(--borde-fuerte); } .pc-estado.rojo { background: rgba(212,43,30,.14); color: var(--rojo-texto); } .pc-relleno-fuerte { background: var(--borde-fuerte); } html { transition: background-color .15s; } /* ── Navegación entre secciones ── */ a.pc-marca { text-decoration: none; } .pc-nav { border-top: 1px solid var(--linea-suave); } .pc-nav-in { max-width: 1180px; margin: 0 auto; padding: 0 10px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .pc-nav-in::-webkit-scrollbar { display: none; } .pc-nav a { flex: none; padding: 10px 12px; font-size: 13px; font-weight: 500; color: var(--tenue); border-bottom: 2px solid transparent; white-space: nowrap; text-decoration: none; } .pc-nav a:hover { color: var(--texto); } .pc-nav a.activo { color: var(--fuerte); border-bottom-color: var(--rojo); } .pc-nav a .fa { margin-right: 4px; opacity: .8; } a.pc-tema { text-decoration: none; transition: border-color .15s, transform .15s; } a.pc-tema:hover { border-color: rgba(212,43,30,.55); transform: translateY(-1px); text-decoration: none; } .pc-tema .entrar { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--rojo-texto); } a.pc-obra { display: block; text-decoration: none; transition: border-color .15s; } a.pc-obra:hover { border-color: rgba(212,43,30,.55); text-decoration: none; } a:focus-visible, button:focus-visible, tr[tabindex]:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--rojo-texto); outline-offset: 2px; } /* ── Elegir empresa (quien tiene acceso a varias) ── */ a.pc-boton { text-decoration: none; display: inline-block; } a.pc-boton:hover { text-decoration: none; } .pc-empresas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 20px; } .pc-empresa { text-align: left; font: inherit; color: var(--texto); background: var(--tarjeta); border: 1.5px solid var(--linea); border-radius: 14px; padding: 18px 16px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: border-color .15s, transform .15s; } .pc-empresa:hover:not(:disabled) { border-color: rgba(212,43,30,.6); transform: translateY(-1px); } .pc-empresa:disabled { opacity: .6; cursor: default; } .pc-empresa .ico { font-size: 22px; color: var(--rojo); margin-bottom: 6px; } .pc-empresa b { font-size: 15px; color: var(--fuerte); } .pc-empresa span { font-size: 12.5px; color: var(--tenue); } .pc-empresa.actual { border-color: rgba(52,211,153,.45); } .pc-empresa.actual span { color: var(--verde); } /* ── Título con acciones a la derecha (exportar) ── */ .pc-titulo-fila { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; } .pc-titulo-fila .pc-boton { flex: none; } /* ── Lista en la que se puede buscar escribiendo ── */ .pc-busca { position: relative; } .pc-busca input { padding-right: 30px !important; text-overflow: ellipsis; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 11px center !important; } .pc-busca input:focus { cursor: text; } .pc-busca input:disabled { opacity: .7; cursor: default; } .pc-busca-lista { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; list-style: none; max-height: 300px; overflow-y: auto; background: var(--flotante); border: 1.5px solid var(--borde); border-radius: 10px; box-shadow: 0 14px 34px var(--sombra); padding: 4px; } .pc-busca-lista li { padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--texto); cursor: pointer; } .pc-busca-lista li:hover, .pc-busca-lista li.marcado { background: rgba(212,43,30,.18); } .pc-busca-lista li.actual { color: var(--fuerte); font-weight: 600; } .pc-busca-lista li.actual::after { content: ' ✓'; color: var(--rojo-texto); } .pc-busca-lista li.nada { color: var(--tenue); cursor: default; background: none; } /* ── Filtros ── */ .pc-filtros { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 12px; } .pc-filtros .f { flex: 1 1 220px; min-width: 0; } .pc-filtros .f.corto { flex: 0 1 170px; } .pc-filtros label { display: block; font-size: 11px; font-weight: 600; color: var(--tenue); margin-bottom: 4px; letter-spacing: .5px; text-transform: uppercase; } .pc-filtros select, .pc-filtros input { width: 100%; padding: 9px 11px; background: var(--campo); border: 1.5px solid var(--borde); border-radius: 9px; color: var(--texto); font: inherit; font-size: 13px; outline: none; } .pc-filtros select:focus, .pc-filtros input:focus { border-color: var(--rojo); } .pc-filtros select:disabled { opacity: .7; } .pc-chip { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 5px 6px 5px 12px; border-radius: 16px; background: rgba(212,43,30,.14); border: 1px solid rgba(212,43,30,.35); color: var(--rojo-texto); font-size: 12.5px; } .pc-chip button { width: 22px; height: 22px; border: none; border-radius: 50%; background: var(--relleno); color: var(--fuerte); font-size: 15px; line-height: 1; cursor: pointer; } /* ── Tablas ── */ .pc-tabla-caja { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 14px; overflow-x: auto; } .pc-tabla { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; } .pc-tabla th { text-align: left; padding: 11px 14px; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--tenue); border-bottom: 1px solid var(--borde); white-space: nowrap; } .pc-tabla td { padding: 11px 14px; border-bottom: 1px solid var(--linea-suave); vertical-align: middle; } .pc-tabla tbody tr:last-child td { border-bottom: none; } .pc-tabla tr[data-id] { cursor: pointer; } .pc-tabla tr[data-id]:hover td { background: var(--relleno-suave); } .pc-tabla .num { text-align: right; white-space: nowrap; } .pc-tabla .ir { color: var(--muy-tenue); width: 24px; text-align: right; } .pc-tabla .tenue, .tenue { color: var(--tenue); } .pc-tabla b { color: var(--fuerte); font-weight: 600; } .pc-tabla tr.cargo td { color: var(--tenue); font-size: 12.5px; } .pc-tabla tr.cargo b { color: var(--tenue); } .pc-tabla.cargando { opacity: .5; } .pc-tabla.compacta th, .pc-tabla.compacta td { padding: 8px 14px; } .pc-estado { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; } .pc-estado.verde { background: rgba(52,211,153,.12); color: var(--verde); } .pc-estado.ambar { background: rgba(251,191,36,.12); color: var(--ambar); } .pc-estado.gris { background: var(--relleno); color: var(--tenue); } .pc-marca-chica { font-size: 10.5px; color: var(--tenue); border: 1px solid var(--borde); border-radius: 8px; padding: 0 6px; white-space: nowrap; } /* ── Programación ── */ .pc-rapidos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .pc-rapidos button { font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 16px; border: 1.5px solid var(--borde); background: transparent; color: var(--tenue); cursor: pointer; } .pc-rapidos button:hover { color: var(--texto); border-color: var(--borde-fuerte); } .pc-rapidos button.activo { color: var(--fuerte); border-color: var(--rojo); background: rgba(212,43,30,.14); } .pc-dia { margin-top: 22px; scroll-margin-top: calc(var(--pc-barra, 110px) + 6px); } .pc-dia:first-child { margin-top: 6px; } /* El título del día se queda pegado bajo la barra mientras se recorren sus cargas: con muchas obras no se pierde qué día se está mirando */ .pc-dia > h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 15px; font-weight: 600; color: var(--fuerte); padding: 10px 0 8px; border-bottom: 1px solid var(--borde); margin-bottom: 10px; position: sticky; top: var(--pc-barra, 110px); z-index: 5; background: var(--fondo); box-shadow: 0 8px 10px -8px var(--sombra); } .pc-orden .fecha { display: block; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--rojo-texto); margin-bottom: 2px; } .pc-dia > h2 small { font-size: 12.5px; font-weight: 400; color: var(--tenue); } .pc-dia > h2 .hoy { font-size: 10.5px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #fff; background: var(--rojo); border-radius: 9px; padding: 1px 8px; } .pc-dia .pc-orden { margin-bottom: 10px; } .pc-tabla a { white-space: nowrap; } /* Lista o calendario */ .pc-vistas { display: inline-flex; border: 1.5px solid var(--borde); border-radius: 10px; overflow: hidden; flex: none; } .pc-vistas button { font: inherit; font-size: 13px; padding: 8px 14px; border: none; background: transparent; color: var(--tenue); cursor: pointer; } .pc-vistas button + button { border-left: 1.5px solid var(--borde); } .pc-vistas button:hover { color: var(--texto); } .pc-vistas button.activo { background: rgba(212,43,30,.16); color: var(--fuerte); font-weight: 600; } .pc-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .pc-cal-nav { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; } .pc-cal-nav h2 { font-size: 17px; font-weight: 600; color: var(--fuerte); min-width: 170px; text-transform: capitalize; } .pc-cal-nav button { font: inherit; font-size: 13px; min-width: 36px; height: 36px; padding: 0 10px; border-radius: 9px; border: 1.5px solid var(--borde); background: transparent; color: var(--texto); cursor: pointer; } .pc-cal-nav button:hover { border-color: var(--borde-fuerte); } .pc-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .pc-cal .cab { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muy-tenue); text-align: center; padding: 4px 0; } .pc-cal-dia { font: inherit; text-align: left; color: var(--texto); min-height: 96px; padding: 7px 8px; background: var(--tarjeta); border: 1.5px solid var(--linea-suave); border-radius: 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: default; } .pc-cal-dia .n { font-size: 12px; color: var(--tenue); font-variant-numeric: tabular-nums; } .pc-cal-dia.fuera { opacity: .38; } .pc-cal-dia.vacio { background: transparent; } .pc-cal-dia.con { cursor: pointer; } .pc-cal-dia.con:hover { border-color: rgba(212,43,30,.55); } .pc-cal-dia.hoy .n { color: var(--fuerte); font-weight: 700; } .pc-cal-dia.hoy .n::after { content: ' · hoy'; color: var(--rojo-texto); font-weight: 600; } .pc-cal-dia.elegido { border-color: var(--rojo); box-shadow: 0 0 0 2px rgba(212,43,30,.25); } .pc-cal-dia .m3 { font-size: 15px; font-weight: 700; color: var(--fuerte); font-variant-numeric: tabular-nums; line-height: 1.2; } .pc-cal-dia .m3 small { font-size: 11px; font-weight: 400; color: var(--tenue); } .pc-cal-dia .c { font-size: 11.5px; color: var(--tenue); } .pc-cal-dia .o { font-size: 11px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-cal-dia .av { height: 4px; border-radius: 2px; background: var(--relleno); overflow: hidden; margin-top: auto; } .pc-cal-dia .av i { display: block; height: 100%; background: var(--verde); } .pc-cal-leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 11.5px; color: var(--tenue); } .pc-cal-leyenda i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 5px; } @media (max-width: 760px) { .pc-cal { gap: 3px; } .pc-cal-dia { min-height: 62px; padding: 5px 4px; border-radius: 8px; align-items: center; text-align: center; } .pc-cal-dia .c, .pc-cal-dia .o, .pc-cal-dia .m3 small { display: none; } .pc-cal-dia .m3 { font-size: 12.5px; } .pc-cal-dia.hoy .n::after { content: ''; } .pc-cal-dia.hoy .n { background: var(--rojo); color: #fff; border-radius: 9px; padding: 0 6px; } .pc-cal-dia .av { width: 100%; } .pc-cal-nav h2 { min-width: 0; flex: 1; font-size: 15px; } } /* ── Órdenes de compra ── */ .pc-ordenes { display: grid; gap: 14px; } .pc-orden { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; } .pc-orden > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; } .pc-orden h2 { font-size: 15px; font-weight: 600; color: var(--fuerte); } .pc-orden header p { font-size: 12.5px; color: var(--tenue); } .pc-orden .pc-tabla-caja { border: none; border-top: 1px solid var(--linea-suave); border-radius: 0; background: transparent; } .pc-orden > footer { padding: 10px 16px; border-top: 1px solid var(--linea-suave); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px 22px; } .pc-avance { padding: 0 16px 14px; } .pc-avance .barra { height: 7px; border-radius: 4px; background: var(--relleno); overflow: hidden; } .pc-avance .barra i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--rojo), #ff6b5b); } .pc-avance .cifras { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12.5px; color: var(--tenue); } .pc-avance .cifras b { color: var(--fuerte); } /* ── Facturación ── */ .pc-tabla tr.nota td { background: rgba(251,191,36,.04); } .pc-montos { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 4px; } .pc-montos > div { background: var(--campo); border: 1px solid var(--borde); border-radius: 9px; padding: 8px 12px; } .pc-montos span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muy-tenue); } .pc-montos b { font-size: 14.5px; color: var(--fuerte); font-variant-numeric: tabular-nums; white-space: nowrap; } .pc-montos .total { border-color: rgba(212,43,30,.45); } .pc-montos .total b { font-size: 16px; } a.pc-lineas-l, .pc-lineas a.l { text-decoration: none; color: var(--texto); } .pc-lineas a.l:hover { border-color: rgba(212,43,30,.55); text-decoration: none; } /* ── Estado de cuenta ── */ .pc-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 18px 0 14px; } .pc-cifra { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 14px; padding: 14px 16px; } .pc-cifra span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--tenue); } .pc-cifra b { display: block; font-size: 22px; font-weight: 700; color: var(--fuerte); font-variant-numeric: tabular-nums; margin-top: 2px; white-space: nowrap; } .pc-cifra small { font-size: 12px; color: var(--tenue); } .pc-cifra.vencido b { color: var(--rojo-texto); } .pc-cifra.vencido.cero b { color: var(--verde); } .pc-tramos { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; } .pc-tramos h2 { font-size: 13px; font-weight: 600; color: var(--fuerte); margin-bottom: 10px; } .pc-tramo { display: grid; grid-template-columns: 150px 1fr 130px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--tenue); padding: 3px 0; } .pc-tramo .b { height: 8px; border-radius: 4px; background: var(--linea); overflow: hidden; } .pc-tramo .b i { display: block; height: 100%; border-radius: 4px; } .pc-tramo b { text-align: right; color: var(--texto); font-variant-numeric: tabular-nums; font-weight: 600; } .pc-tramo.v .b i { background: #ff6b5b; } .pc-tramo.p .b i { background: var(--verde); } .pc-tabla tr.vencido td[data-t="Vencimiento"] { color: var(--rojo-texto); } @media (max-width: 520px) { .pc-tramo { grid-template-columns: 116px 1fr 104px; } .pc-cifra b { font-size: 19px; } } /* ── Detalle de un despacho ── */ .pc-modal { overflow-y: auto; align-items: flex-start; } .pc-modal .pc-tarjeta { margin: auto; } .pc-modal .pc-tarjeta.ancha { max-width: 560px; } .pc-det-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .pc-lineas .l { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; background: var(--campo); border: 1px solid var(--borde); border-radius: 9px; margin-bottom: 6px; font-size: 13.5px; } .pc-lineas .l b { color: var(--fuerte); white-space: nowrap; } .pc-lineas .l.cargo { font-size: 12.5px; color: var(--tenue); } .pc-lineas .l.cargo b { color: var(--tenue); } .pc-datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 16px; margin: 16px 0 4px; } .pc-datos dt { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muy-tenue); } .pc-datos dd { font-size: 13.5px; color: var(--texto); } .pc-sub-t { font-size: 13px; font-weight: 600; color: var(--fuerte); margin: 18px 0 8px; } .pc-linea-t { list-style: none; border-left: 2px solid var(--borde); margin-left: 6px; } .pc-linea-t li { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 5px 0 5px 16px; font-size: 13px; color: var(--muy-tenue); } .pc-linea-t li::before { content: ''; position: absolute; left: -6px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--tarjeta); border: 2px solid var(--borde); } .pc-linea-t li.hecho { color: var(--texto); } .pc-linea-t li.hecho::before { background: var(--rojo); border-color: var(--rojo); } .pc-linea-t .n { flex: 1; } .pc-linea-t b { font-weight: 600; font-variant-numeric: tabular-nums; } .pc-linea-t li:not(.hecho) b { font-weight: 400; } .pc-linea-t .d { font-size: 11.5px; color: var(--tenue); min-width: 52px; text-align: right; } /* En pantallas angostas las tablas se leen como fichas: cada fila es una tarjeta con sus rótulos */ @media (max-width: 760px) { .pc-tabla thead { display: none; } .pc-tabla, .pc-tabla tbody, .pc-tabla tr, .pc-tabla td { display: block; } .pc-tabla tr { padding: 10px 14px; border-bottom: 1px solid var(--linea); position: relative; } .pc-tabla tbody tr:last-child { border-bottom: none; } .pc-tabla td, .pc-tabla.compacta td { padding: 2px 0; border: none; text-align: right; overflow: hidden; } .pc-tabla td::before { content: attr(data-t); float: left; margin-right: 14px; color: var(--muy-tenue); font-size: 11.5px; font-weight: 400; } .pc-tabla td.ir { display: none; } .pc-tabla .num { text-align: right; } .pc-tabla td[data-t="Producto"] { font-weight: 600; color: var(--fuerte); } .pc-filtros .f.corto { flex: 1 1 130px; } } /* ── Camiones en ruta ── */ .pc-ruta { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 16px; margin-top: 16px; align-items: start; } .pc-mapa-caja { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 14px; padding: 6px; position: sticky; top: calc(var(--pc-barra, 110px) + 10px); } .pc-mapa { height: min(68vh, 620px); min-height: 340px; border-radius: 10px; overflow: hidden; background: var(--campo); z-index: 0; } .pc-mapa .leaflet-popup-content { font-family: inherit; font-size: 12.5px; line-height: 1.5; margin: 10px 14px; } .pc-mapa .leaflet-container { font-family: inherit; } .pc-pin { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; color: #fff; font-size: 15px; box-shadow: 0 3px 10px rgba(0,0,0,.35); } .pc-pin.camion { background: #D42B1E; } .pc-pin.camion.viejo { background: #8a8f98; } .pc-pin.obra { background: #111417; font-size: 13px; } .pc-camiones { display: grid; gap: 12px; } .pc-camion { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 14px; padding: 14px 16px; cursor: pointer; } .pc-camion:hover { border-color: var(--borde-fuerte); } .pc-camion:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; } .pc-camion > header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; } .pc-camion > header b { font-size: 14.5px; font-weight: 600; color: var(--fuerte); } .pc-llega { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 10px 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--linea-suave); } .pc-llega::before { content: 'Llega aprox.'; flex-basis: 100%; font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--tenue); } .pc-llega b { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--fuerte); font-variant-numeric: tabular-nums; } .pc-llega b.tarde { font-size: 19px; color: var(--ambar); } .pc-llega span { font-size: 13px; color: var(--tenue); } .pc-camion dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; } .pc-camion dl .ancho { grid-column: 1 / -1; } .pc-camion dt { font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--muy-tenue); } .pc-camion dd { font-size: 13px; color: var(--texto); overflow-wrap: anywhere; } .pc-camion dd .tenue { color: var(--tenue); } .pc-camion > footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linea-suave); font-size: 12.5px; } .pc-camion > footer a { color: var(--rojo-texto); text-decoration: none; font-weight: 500; } .pc-camion > footer a:hover { text-decoration: underline; } .pc-ruta-vacio { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 14px; margin-top: 16px; padding: 44px 20px; } .pc-ruta-vacio .fa { display: block; font-size: 34px; color: var(--apagado); margin-bottom: 12px; } .pc-ruta-vacio b { display: block; font-size: 15px; font-weight: 600; color: var(--fuerte); margin-bottom: 6px; text-wrap: balance; } .pc-ruta-vacio span { display: block; max-width: 460px; margin: 0 auto; font-size: 13px; text-wrap: pretty; } @media (max-width: 900px) { .pc-ruta { grid-template-columns: minmax(0, 1fr); } .pc-mapa-caja { position: static; } .pc-mapa { height: 46vh; min-height: 280px; } }