/* ============================================================ cdpg-ui.css — Tema premium compartido (CDPG 2026) Glassmorphism refinado · Inter · naranja de marca minimalista. Se enlaza al final del de cada página para sobreescribir. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); :root{ --cd-accent:#ea580c; --cd-accent-d:#c2410c; --cd-accent-soft:rgba(234,88,12,.10); --cd-teal:#0d9488; --cd-ink:#171b23; --cd-muted:#6b7280; --cd-faint:#9aa2ae; --cd-line:rgba(23,27,35,.08); --cd-glass:rgba(255,255,255,.62); --cd-glass-strong:rgba(255,255,255,.80); --cd-glass-brd:rgba(255,255,255,.75); --cd-sh:0 6px 26px rgba(23,27,35,.06); --cd-sh-lg:0 16px 40px rgba(234,88,12,.12); --cd-ok:#16a34a; --cd-warn:#dc2626; --cd-info:#0ea5e9; --cd-r:18px; } /* ---------- Base ---------- */ html,body{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif !important; letter-spacing:-.01em; color:var(--cd-ink); } body{ background:linear-gradient(165deg,#ffffff 0%,#fffaf4 46%,#fbfaf7 100%) !important; background-attachment:fixed !important; min-height:100vh; } body::before{ content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(600px circle at 8% -4%, rgba(234,88,12,.09), transparent 55%), radial-gradient(560px circle at 98% 8%, rgba(13,148,136,.07), transparent 58%), radial-gradient(680px circle at 70% 112%, rgba(234,88,12,.05), transparent 60%); } /* ---------- Encabezado (glass, texto oscuro, acento naranja) ---------- */ header{ background:var(--cd-glass-strong) !important; color:var(--cd-ink) !important; border-bottom:1px solid var(--cd-line) !important; box-shadow:var(--cd-sh) !important; -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); position:sticky; top:0; z-index:50; } header h1, header h2, header .t, header .titulo, header .title, header span, header div, header small, header p{ color:var(--cd-ink) !important; } header .u, header .sub, header .subtitle{ color:var(--cd-muted) !important; } header button, header a.btn, header .btn{ background:rgba(255,255,255,.6) !important; color:var(--cd-ink) !important; border:1px solid var(--cd-line) !important; border-radius:11px !important; transition:.2s; } header button:hover, header a.btn:hover, header .btn:hover{ background:#fff !important; border-color:rgba(234,88,12,.35) !important; color:var(--cd-accent-d) !important; } /* ---------- Tarjetas / paneles glass ---------- */ .card, .panel, .box, .tablebox, .contenedor, .cont, .seccion, .caja{ background:var(--cd-glass) !important; border:1px solid var(--cd-glass-brd) !important; border-radius:var(--cd-r) !important; box-shadow:var(--cd-sh) !important; -webkit-backdrop-filter:blur(15px) saturate(150%); backdrop-filter:blur(15px) saturate(150%); transition:box-shadow .25s, transform .18s; } .card:hover, .panel:hover, .box:hover{ box-shadow:0 12px 32px rgba(23,27,35,.08) !important; } /* ---------- Tablas ---------- */ table{ border-collapse:collapse; } th{ font-family:inherit; text-transform:uppercase; letter-spacing:.05em; font-size:10.5px !important; color:var(--cd-faint) !important; font-weight:700 !important; border-bottom:1px solid var(--cd-line) !important; } td{ border-bottom:1px solid var(--cd-line) !important; } tbody tr{ transition:background .15s; } tbody tr:hover{ background:rgba(234,88,12,.05) !important; } /* ---------- Inputs / selects ---------- */ input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea{ font-family:inherit; border-radius:11px !important; border:1px solid var(--cd-line) !important; background:rgba(255,255,255,.75) !important; transition:border-color .18s, box-shadow .18s; } input:focus, select:focus, textarea:focus{ outline:none !important; border-color:rgba(234,88,12,.5) !important; box-shadow:0 0 0 3px var(--cd-accent-soft) !important; } /* ---------- Botones (suavizado, sin forzar color) ---------- */ button, .btn, a.btn, input[type=button], input[type=submit]{ font-family:inherit; border-radius:11px !important; transition:transform .15s, box-shadow .2s, filter .2s; cursor:pointer; } button:hover, .btn:hover, a.btn:hover{ filter:brightness(1.03); transform:translateY(-1px); } button:active, .btn:active{ transform:translateY(0); } /* Acentos de marca coherentes */ a{ color:var(--cd-accent-d); } ::selection{ background:rgba(234,88,12,.18); } /* ---------- Scrollbar refinada ---------- */ *{ scrollbar-width:thin; scrollbar-color:rgba(234,88,12,.35) transparent; } *::-webkit-scrollbar{ width:10px; height:10px; } *::-webkit-scrollbar-thumb{ background:rgba(234,88,12,.28); border-radius:99px; border:2px solid transparent; background-clip:content-box; } *::-webkit-scrollbar-thumb:hover{ background:rgba(234,88,12,.5); background-clip:content-box; } /* ============================================================ MOBILE — celulares (iOS y Android). Se aplica a todas las pantallas que enlazan este archivo. ============================================================ */ /* Nunca romper el ancho de pantalla ni hacer zoom raro */ html{ -webkit-text-size-adjust:100%; } body{ overflow-x:hidden; } img, video, canvas{ max-width:100%; height:auto; } /* Respeta el notch del iPhone */ @supports (padding:max(0px)){ body{ padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); } } @media (max-width:820px){ /* --- Header: que se acomode en varias líneas en vez de desbordar --- */ header{ flex-wrap:wrap !important; gap:8px !important; padding:10px 12px !important; height:auto !important; position:sticky !important; top:0; } header .brand, header .brand span{ font-size:15px !important; } header .hactions, header .top-right, header .acciones{ flex-wrap:wrap !important; gap:6px !important; width:100%; justify-content:flex-start !important; } header .hbtn, header button, header .btn, header a.btn{ font-size:12.5px !important; padding:8px 11px !important; } /* datos que no aportan en pantalla chica */ .clock .date, .weather .wlab, .prole{ display:none !important; } /* --- Contenedores --- */ .wrap, .container, main{ padding-left:12px !important; padding-right:12px !important; } /* --- Grillas: una o dos columnas, nunca apretadas --- */ .grid, .kpis, .qgroups, .tiles{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)) !important; gap:10px !important; } /* --- Tablas anchas: scroll horizontal suave en vez de romper --- */ .scroll, .tabla-wrap, .panel{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; } table{ font-size:12.5px !important; } th, td{ padding:7px 8px !important; } /* --- Formularios: 16px evita que iOS haga zoom al tocar el campo --- */ input, select, textarea{ font-size:16px !important; max-width:100%; } input[type=number]{ -moz-appearance:textfield; } /* --- Botones cómodos para el dedo --- */ button, .btn, a.btn, .hbtn, .tab, .chip, .segbtn{ min-height:40px; } /* --- Modales / popups a lo ancho --- */ .modal, .card-modal, .swal2-popup{ width:94vw !important; max-width:94vw !important; } .drawer{ width:100% !important; } } @media (max-width:480px){ .grid, .kpis, .qgroups{ grid-template-columns:1fr 1fr !important; } .tiles{ grid-template-columns:repeat(auto-fill, minmax(72px,1fr)) !important; } header .brand small{ display:none !important; } h1{ font-size:18px !important; } h2{ font-size:15px !important; } /* el texto del botón instalar se achica, queda el ícono */ #cdpgInstall .cdpg-inst-txt{ display:none; } } /* Cuando corre como app instalada, saca el margen del navegador */ @media (display-mode:standalone){ body{ padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); } } /* ============================================================ COMPONENTES REUTILIZABLES "SaaS 2026" (estilo Stripe/Linear/Vercel) Clases con prefijo .cd- → aplicables en cualquier pantalla nueva sin pisar estilos existentes. Uso:
… ============================================================ */ /* --- Tarjeta flotante estándar (rounded-2xl + borde 1px + sombra suave) --- */ .cd-card{ background:#fff; border:1px solid #E2E8F0; border-radius:16px; box-shadow:0 1px 2px rgba(23,27,35,.04), 0 4px 18px rgba(23,27,35,.05); padding:18px; transition:box-shadow .22s, transform .18s; } .cd-card:hover{ box-shadow:0 8px 30px rgba(23,27,35,.09); } .cd-card-h{ font-size:13px; font-weight:700; color:var(--cd-ink); margin:0 0 14px; display:flex; align-items:center; gap:8px; } .cd-card-h svg{ width:17px; height:17px; color:var(--cd-accent); } .cd-muted{ color:var(--cd-muted); } .cd-faint{ color:var(--cd-faint); } /* --- Badges / etiquetas de estado (fondo pastel + texto oscuro) --- */ .cd-badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; font-size:11px; font-weight:700; border-radius:999px; letter-spacing:.01em; line-height:1.5; } .cd-badge.ok, .cd-badge.despachado{ background:#DCFCE7; color:#15803D; } .cd-badge.info, .cd-badge.preparado { background:#E0F2FE; color:#0369A1; } .cd-badge.warn, .cd-badge.alerta { background:#FEE2E2; color:#B91C1C; } .cd-badge.pend, .cd-badge.pendiente { background:var(--cd-accent-soft); color:var(--cd-accent-d); } .cd-badge.neutral{ background:rgba(23,27,35,.05); color:var(--cd-muted); } /* --- Chip de tendencia (▲ +12%) --- */ .cd-trend{ display:inline-flex; align-items:center; gap:3px; font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px; } .cd-trend.up{ background:#DCFCE7; color:#15803D; } .cd-trend.down{ background:#FEE2E2; color:#B91C1C; } .cd-trend.flat{ background:rgba(23,27,35,.05); color:var(--cd-muted); } /* --- Tabla moderna dentro de tarjeta (sin cuadrícula dura, cebreado suave) --- */ .cd-table{ width:100%; border-collapse:collapse; font-size:13.5px; } .cd-table thead th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--cd-faint); font-weight:700; padding:10px 12px; border-bottom:1px solid #E2E8F0; } .cd-table tbody td{ padding:12px; border-bottom:1px solid #F1F5F9; } .cd-table tbody tr:last-child td{ border-bottom:0; } .cd-table tbody tr:nth-child(even){ background:rgba(23,27,35,.015); } .cd-table tbody tr:hover{ background:var(--cd-accent-soft); } /* --- Botones --- */ .cd-btn{ display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-weight:700; font-size:13px; padding:9px 15px; border-radius:12px; cursor:pointer; border:1px solid transparent; transition:.2s; } .cd-btn.primary{ background:linear-gradient(140deg,var(--cd-accent),var(--cd-accent-d)); color:#fff; box-shadow:0 6px 16px rgba(234,88,12,.22); } .cd-btn.primary:hover{ filter:brightness(1.04); transform:translateY(-1px); } .cd-btn.ghost{ background:rgba(255,255,255,.65); color:var(--cd-muted); border-color:rgba(23,27,35,.08); } .cd-btn.ghost:hover{ background:#fff; color:var(--cd-accent-d); border-color:rgba(234,88,12,.35); } /* --- Encabezado de sección --- */ .cd-section-h{ font-size:12px; font-weight:700; color:var(--cd-faint); text-transform:uppercase; letter-spacing:.09em; margin:6px 2px 12px; display:flex; align-items:center; gap:8px; } .cd-section-h::after{ content:''; flex:1; height:1px; background:var(--cd-line); }