/* Panel /admin/ — «taller»: tinta y lima, sala de control densa y tranquila. Oscuro por defecto. */ /* Fuentes servidas desde aquí (sin CDN de terceros): solo el subconjunto latino, que cubre el español */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600 800; font-stretch: 100%; font-display: swap; src: url('./fonts/bricolage.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: 'Geist'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('./fonts/geist.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: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('./fonts/geist-mono.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; } /* Claro: papel. Lo que en oscuro es lima de relleno aquí es tinta, y la lima de texto pasa a oliva (#4D6A00): lima sobre papel no llega a AA. Todos los pares texto/fondo ≥ 4.5:1. */ :root { --f-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif; --f-ui: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif; --f-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --lima: #CDF24B; --bg: #F6F4EF; --card: #FFFFFF; --card-2: #F1EEE7; --line: #E5E1D8; --text: #17161A; --muted: #6B6760; --accent: #17161A; --on-accent: #FFFFFF; --accent-soft: #EEF7C9; --accent-ink: #4D6A00; --badge-on-accent: rgba(255,255,255,.22); --danger: #C2342F; --danger-soft: #FBE9E8; --ok: #1A7346; --ok-soft: #E3F1E9; --warn-ink: #9A5B00; --warn-soft: #FBF0DC; --warn-line: #EBD3A6; --bar: #8F897C; --bar-hoy: #4D6A00; --shadow: 0 1px 2px rgba(23,22,26,.04), 0 10px 26px -20px rgba(23,22,26,.3); --log-bg: #FAF8F4; --log-ink: #3F3B35; --radius: 14px; --dur: 160ms; --s1: 0.5rem; --s2: 0.875rem; --s3: 1.25rem; --s4: 2rem; --s5: 3rem; } [data-theme="dark"] { --bg: #0F0F12; --card: #17171C; --card-2: #1F1F26; --line: #2A2A33; --text: #EDECE8; --muted: #8D8B96; --accent: #CDF24B; --on-accent: #141417; --accent-soft: rgba(205,242,75,.12); --accent-ink: #CDF24B; --badge-on-accent: rgba(0,0,0,.18); --danger: #FF6B6B; --danger-soft: rgba(255,107,107,.13); --ok: #3DD68C; --ok-soft: rgba(61,214,140,.13); --warn-ink: #F5B841; --warn-soft: rgba(245,184,65,.13); --warn-line: rgba(245,184,65,.32); --bar: #6B6A76; --bar-hoy: #CDF24B; --shadow: 0 1px 2px rgba(0,0,0,.35); --log-bg: #0F0F12; --log-ink: #C9C8D0; } * { box-sizing: border-box; } /* El overlay de una view transition se tragaba los clics de sus ~250 ms */ ::view-transition { pointer-events: none; } /* La raíz crece con el viewport y todo va en rem: en un monitor ancho texto y aire suben juntos */ html { font-size: clamp(15px, 0.3vw + 11.4px, 17.5px); color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } body { margin: 0; font-family: var(--f-ui); font-size: 0.9375rem; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01', 'cv11'; transition: background-color var(--dur), color var(--dur); } .mono, code, kbd { font-family: var(--f-mono); font-feature-settings: normal; } a { color: inherit; } /* --- Shell: menú lateral + contenido --- */ #app { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; } #app[hidden] { display: none; } /* display:grid de autor gana al hidden del UA */ aside { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: var(--s3) var(--s2); border-right: 1px solid var(--line); gap: var(--s3); } .brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; white-space: nowrap; flex-shrink: 0; } .brand b { display: block; font-size: 0.9375rem; font-weight: 600; letter-spacing: -.01em; } .brand small { color: var(--muted); font-size: 0.75rem; } .logo { width: 2rem; height: 2rem; border-radius: 9px; background: var(--lima); color: #141417; flex: none; display: grid; place-items: center; font: 800 1.0625rem/1 var(--f-display); } .logo-lg { width: 3rem; height: 3rem; border-radius: 13px; font-size: 1.5rem; justify-self: center; } nav { display: flex; flex-direction: column; gap: 2px; } nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: background-color var(--dur), color var(--dur); } nav a:hover { background: var(--card-2); } aside nav a[aria-current="page"] { background: var(--card-2); box-shadow: inset 3px 0 0 var(--accent-ink); font-weight: 600; } .nav-badge { margin-left: auto; font: 500 0.6875rem/1.5 var(--f-mono); color: var(--muted); background: var(--card-2); border-radius: 6px; padding: 1px 6px; } .nav-badge.alerta { background: var(--danger-soft); color: var(--danger); } .nav-badge.vivo { background: var(--accent-soft); color: var(--accent-ink); } .nav-badge:not([hidden]) ~ .nav-badge { margin-left: 4px; } aside nav a[aria-current="page"] .nav-badge:not(.alerta):not(.vivo) { background: var(--card); } nav a svg { width: 1.05em; height: 1.05em; flex: none; opacity: .7; } nav a[aria-current="page"] svg { opacity: 1; } /* La máquina que trabaja: latido y cuota siempre a la vista */ .maquina { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); text-decoration: none; transition: border-color var(--dur); } .maquina:hover { border-color: var(--muted); } .maquina .q { display: flex; align-items: center; gap: 9px; font: 500 0.8125rem var(--f-mono); min-width: 0; } .maquina .q > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .maquina small { display: block; font: 0.75rem var(--f-ui); color: var(--muted); overflow: hidden; text-overflow: ellipsis; } .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); } .dot.ok { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ok) 20%, transparent); } .dot.ojo { background: var(--warn-ink); } .dot.mal { background: var(--danger); } .side-foot { display: flex; flex-direction: column; gap: 10px; padding: var(--s2) 6px 0; border-top: 1px solid var(--line); } .side-foot .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-actions { display: grid; grid-template-columns: 44px 1fr; gap: 8px; } .side-actions button { display: inline-flex; align-items: center; justify-content: center; padding: 8px 0; font-size: 0.8125rem; } .side-actions button svg { width: 1.1em; height: 1.1em; } /* Medidor: etiqueta y cifra arriba, barra fina debajo. El color dice cuánto queda; la cifra, cuánto es. */ .meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; font-size: 0.75rem; color: var(--muted); } .meter > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .meter b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } .meter .tr { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--card-2); overflow: hidden; } .meter .tr i { display: block; height: 100%; border-radius: 99px; background: var(--accent-ink); } .meter.ojo .tr i { background: var(--warn-ink); } .meter.mal .tr i { background: var(--danger); } .meter.mal b { color: var(--danger); } .content { padding: var(--s4) clamp(var(--s3), 2.4vw, var(--s5)) var(--s5); max-width: 86rem; width: 100%; } .page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s3); } .page-head .actions:empty { display: none; } h1 { margin: 0; font: 800 2.125rem/1.05 var(--f-display); letter-spacing: -.02em; overflow-wrap: anywhere; } .page-back { margin: 0 0 6px; font-size: 0.8125rem; color: var(--muted); } #page-back:first-letter { text-transform: uppercase; } .page-back a { color: var(--muted); text-decoration: none; } .page-back a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } /* minmax(0,…): la columna implícita `auto` tomaba el min-content y un JSON sin espacios del registro estiraba la página entera */ #view { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); } section h2 { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 var(--s2); } /* --- Componentes --- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); box-shadow: var(--shadow); min-width: 0; transition: background-color var(--dur), border-color var(--dur); } /* Título dentro de una tarjeta: frase normal, no la etiqueta en versalitas de las secciones */ .card-h { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--s2); font: 600 0.9375rem var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--text); } .card-h small { margin-left: auto; font-weight: 400; font-size: 0.75rem; color: var(--muted); } .card-h .link-sm { margin-left: auto; } .card-pie { margin: var(--s2) 0 0; padding-top: var(--s1); border-top: 1px solid var(--line); } .card-pie b { color: var(--text); font-weight: 600; } .cnt { font: 500 0.6875rem/1.5 var(--f-mono); background: var(--card-2); color: var(--muted); border-radius: 6px; padding: 1px 6px; } .cnt:empty { display: none; } .stack > * + * { margin-top: var(--s2); } .row { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; } .row.gap { justify-content: flex-start; gap: var(--s1); } .row.end { justify-content: flex-end; } .row.spaced, .spaced { margin-top: var(--s2); } .row.head-row { margin-bottom: 10px; } .row.head-row h2, .row.head-row p { margin: 0; } .actions { display: flex; gap: var(--s1); align-items: center; flex-wrap: wrap; } /* Enlaces externos en un grupo de acciones: con cuerpo de botón secundario */ .actions .link-sm, a.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font: 600 0.8125rem var(--f-ui); color: var(--text); text-decoration: none; white-space: nowrap; transition: border-color var(--dur); } .actions .link-sm:hover, a.btn:hover { border-color: var(--muted); text-decoration: none; } a.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; } a.btn.primary:hover { filter: brightness(1.06); } a.btn.sm, button.sm { padding: 6px 10px; font-size: 0.75rem; border-radius: 8px; } .card-sec { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); } /* Lo que ABRE una tarjeta va sin separador (vale para los .kpis, cuyo borde solo existe en móvil) */ .card > .card-sec:first-child, .card > .kpis:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .card > .card-sec:first-child > .sec-lead:first-child { margin-top: 0; } /* Plegable: lo secundario no ocupa alto hasta que se pide */ .fold > summary { cursor: pointer; list-style: none; font-size: 0.8125rem; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; } .fold > summary::-webkit-details-marker { display: none; } .fold > summary::before { content: '›'; transition: transform var(--dur); font-size: 0.9375rem; line-height: 1; } .fold[open] > summary::before { transform: rotate(90deg); } /* Solo opacity/transform: animar la altura de un
exige JS */ .fold[open] > :not(summary) { animation: despliega var(--dur) ease-out; } @keyframes despliega { from { opacity: 0; transform: translateY(-4px); } } .fold > summary:hover { color: var(--text); } .fold > .inline-form { margin-top: var(--s2); } .tarifa > summary { font-size: 0.875rem; color: var(--text); flex-wrap: wrap; } /* Summary con cuerpo de botón: las altas (demo, tarifa) viven plegadas y esta es su percha */ summary.fold-cta { background: var(--accent); color: var(--on-accent); font-size: 0.875rem; font-weight: 600; padding: 9px 15px; border-radius: 10px; width: max-content; } summary.fold-cta::before { content: none; } summary.fold-cta:hover { color: var(--on-accent); filter: brightness(1.06); } .fold[open] > summary.fold-cta { margin-bottom: var(--s2); } .card-sec > label:first-child { margin-top: 0; } .inline-form { display: flex; gap: var(--s1); max-width: 34rem; } .inline-form input, .inline-form select { flex: 1 1 auto; min-width: 0; } .inline-form button { flex: 0 0 auto; } /* Acuse de un campo que se guarda solo: lo dice su propio borde */ input.guardado, textarea.guardado, select.guardado { border-color: var(--ok); background: var(--ok-soft); } .stack.spaced { margin-top: var(--s2); } .link-sm { font-size: 0.8125rem; } .slug { font-weight: 600; color: var(--text); text-decoration: none; } a.slug:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; } .meta { color: var(--muted); font-size: 0.75rem; } .meta a { color: var(--muted); } .meta a:hover, a.meta:hover { color: var(--text); } /* Lo escribe el público: una URL larga sin espacios se salía de la tarjeta en móvil */ .text { margin: var(--s1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; } .quote { margin: var(--s1) 0 0; padding: 8px 12px; border-left: 3px solid var(--warn-ink); background: var(--warn-soft); font-size: 0.8125rem; color: var(--warn-ink); border-radius: 0 8px 8px 0; } .empty { color: var(--muted); font-style: italic; margin: 0; } /* Vacío de primera: centrado y con un icono delante; los «nada con esos filtros» se quedan discretos */ .card.empty { font-style: normal; text-align: center; padding: var(--s4) var(--s2); line-height: 1.6; } .card.empty .em { display: block; font-size: 1.75rem; margin-bottom: 4px; } .hint { font-size: 0.75rem; color: var(--muted); margin: 5px 0 0; line-height: 1.5; } code { font-size: .92em; } button { border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; font: 600 0.8125rem var(--f-ui); cursor: pointer; background: var(--card); color: var(--text); white-space: nowrap; transition: transform var(--dur), filter var(--dur), border-color var(--dur), background-color var(--dur); } button:hover { border-color: var(--muted); } button.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; } button.primary:hover { filter: brightness(1.06); } button.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; } button.danger:hover { border-color: var(--danger); } button.ghost { background: transparent; } button:active { transform: translateY(1px); } button:disabled { opacity: .45; cursor: default; transform: none; filter: none; border-color: var(--line); } :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; } input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 0.875rem; background: var(--bg); color: var(--text); } input:focus, select:focus, textarea:focus { border-color: var(--muted); } textarea { min-height: 70px; resize: vertical; } label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--muted); margin: var(--s2) 0 5px; } .label-inline { display: inline; margin: 0; font-size: 0.875rem; color: var(--text); } .check-lg { width: 1.25rem; height: 1.25rem; accent-color: var(--accent-ink); } .grid2 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s2); } .filters { display: flex; gap: var(--s2); align-items: flex-end; flex-wrap: wrap; } .filters > div { flex: 1 1 160px; max-width: 280px; } .filters label { margin-top: 0; } /* El contador con la MISMA caja que un control: su línea base clava con la de los selects */ .filters .count { margin-left: auto; align-self: flex-end; white-space: nowrap; padding: 9px 0; border: 1px solid transparent; font-size: 0.875rem; } /* Estados: color Y palabra, nunca solo color */ .chip { display: inline-block; border-radius: 99px; padding: 2px 9px; font-size: 0.6875rem; font-weight: 600; background: var(--card-2); color: var(--muted); white-space: nowrap; } .chip.activo, .chip.hecha, .chip.prod, .chip.ok { background: var(--ok-soft); color: var(--ok); } .chip.baja, .chip.cancelado, .chip.rechazada { background: var(--danger-soft); color: var(--danger); } .chip.nueva, .chip.suspendido, .chip.impago { background: var(--warn-soft); color: var(--warn-ink); } .chip.en-curso, .chip.demo, .chip.obras { background: var(--accent-soft); color: var(--accent-ink); } .pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 3px 9px; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; } .pill.nueva { background: var(--accent-soft); color: var(--accent-ink); } .pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.ojo { background: var(--warn-soft); color: var(--warn-ink); } .pill.mute { background: var(--card-2); color: var(--muted); } /* Monograma del sitio: su tono sale del slug, siempre el mismo */ .av { width: 1.875rem; height: 1.875rem; border-radius: 9px; flex: none; display: grid; place-items: center; background: oklch(45% 0.11 var(--h, 270)); color: #fff; font: 700 0.6875rem/1 var(--f-ui); letter-spacing: .02em; } .av-lg { width: 3rem; height: 3rem; border-radius: 13px; font: 800 1.125rem/1 var(--f-display); } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); } .kpi { padding: var(--s1) 0; } .kpi b { display: block; font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .kpi a { text-decoration: none; color: inherit; } .kpi span { font-size: 0.75rem; color: var(--muted); } /* --- Gráficas: columnas finas por día (≤24 px, punta de 4 px, base recta). La de hoy en acento; la cifra escrita solo en el máximo y hoy, el resto al pasar por encima. --- */ .cols { display: flex; align-items: stretch; height: 9.5rem; padding-top: 1.4rem; margin-top: var(--s2); margin-bottom: 1.4rem; border-bottom: 1px solid var(--line); } .col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; position: relative; } .col-bar { flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; } .col-bar i { position: relative; width: min(24px, 64%); border-radius: 4px 4px 0 0; background: var(--bar); transition: filter var(--dur); } .col.hoy .col-bar i { background: var(--bar-hoy); } .col-bar i[data-v]::before { content: attr(data-v); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; font: 600 0.6875rem var(--f-ui); color: var(--text); white-space: nowrap; } .col-eje { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 5px; font: 0.6875rem var(--f-mono); color: var(--muted); white-space: nowrap; } .col:hover .col-bar i { filter: brightness(1.25); } .col:hover::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); z-index: 2; padding: 4px 8px; border-radius: 7px; background: var(--text); color: var(--bg); font: 500 0.6875rem var(--f-ui); white-space: nowrap; pointer-events: none; } .col:first-child .col-eje, .col:first-child:hover::after { left: 0; transform: none; } .col:last-child .col-eje, .col:last-child:hover::after { left: auto; right: 0; transform: none; } .spark { display: block; width: 100%; height: 2.125rem; margin-top: auto; padding-top: var(--s1); color: var(--muted); } /* --- Hoy --- */ .hoy-g2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s3); align-items: start; } .hoy-g2b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s3); align-items: start; } .inbox { list-style: none; margin: 0; padding: 0; } .aten, .aten-vacia { display: grid; grid-template-columns: 1.875rem minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 0.875rem; } .aten:first-child, .aten-vacia { border-top: 0; padding-top: 2px; } .aten small, .aten-vacia small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ico { width: 1.875rem; height: 1.875rem; border-radius: 9px; display: grid; place-items: center; font-size: 0.875rem; font-weight: 700; background: var(--card-2); color: var(--muted); } .aten[data-nivel="mal"] .ico { background: var(--danger-soft); color: var(--danger); } .aten[data-nivel="ojo"] .ico { background: var(--warn-soft); color: var(--warn-ink); } .aten[data-nivel="acc"] .ico { background: var(--accent-soft); color: var(--accent-ink); } .ico.ok { background: var(--ok-soft); color: var(--ok); } .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; } .activo > .pulse, .ficha-tabs .pulse { background: var(--ok); animation: latido 1.6s ease-in-out infinite; } .vivo-job + .vivo-job { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); } .vivo-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s1); flex-wrap: wrap; font-size: 0.875rem; } .vivo-job > .meta { margin-top: 3px; } .vivo-barra { height: 4px; border-radius: 99px; background: var(--card-2); margin: 10px 0 0; overflow: hidden; } .vivo-barra i { display: block; height: 100%; border-radius: 99px; background: var(--accent-ink); } .vivo-log { margin: 10px 0 0; padding: 8px 10px; border-radius: 9px; background: var(--log-bg); font: 0.75rem/1.6 var(--f-mono); overflow: hidden; } .vivo-log .log-l { padding: 0; text-indent: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vivo-log .log-l::before { content: none; } .vivo-pie { display: flex; justify-content: space-between; align-items: center; gap: var(--s1); flex-wrap: wrap; margin-top: 10px; font-size: 0.75rem; } .vivo-pie .slug { font-size: 0.75rem; color: var(--accent-ink); } .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); } .tile { display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: var(--s2) var(--s3); } a.tile:hover { border-color: var(--muted); } .tile .lab { color: var(--muted); font-size: 0.8125rem; } .tile .val { font: 600 1.875rem/1.15 var(--f-ui); letter-spacing: -.02em; margin: 4px 0 2px; font-variant-numeric: tabular-nums; } .tile .d { font-size: 0.75rem; color: var(--muted); } .sube { color: var(--ok); font-weight: 600; } .tile .baja, .tile .mal { color: var(--danger); font-weight: 600; } .tile .ojo { color: var(--warn-ink); font-weight: 600; } .sug-mini { display: grid; grid-template-columns: 1.875rem minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); text-decoration: none; color: inherit; } .card-h + .sug-mini { border-top: 0; padding-top: 0; } .sug-mini:hover .sug-txt { text-decoration: underline; text-underline-offset: 3px; } .sug-txt { display: block; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sug-mini small { color: var(--muted); font-size: 0.75rem; } /* Ajuste con casilla: texto y control en una fila, la explicación debajo */ .opt { display: flex; align-items: flex-start; gap: var(--s2); margin: 0; cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--text); } .opt > input { flex: 0 0 auto; margin: 1px 0 0; } .opt .hint { display: block; font-weight: 400; } /* --- Sitios: una lista, una fila por sitio con su monograma --- */ .lista { padding: 4px var(--s3); } .site-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; } .site-row + .site-row { border-top: 1px solid var(--line); } .site-row:hover .slug { color: var(--accent-ink); } .site-id { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .site-id .meta { flex-basis: 100%; } /* --- Ficha del sitio --- */ .ficha { display: grid; gap: var(--s3); min-width: 0; } .ficha-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; } .ficha-id { display: flex; align-items: center; gap: 14px; min-width: 0; } .ficha-id p { margin: 5px 0 0; font-size: 0.8125rem; overflow-wrap: anywhere; } .ficha-id .url { color: var(--text); text-decoration: none; } .ficha-id .url:hover { text-decoration: underline; text-underline-offset: 3px; } .ficha-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .ficha-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .ficha-tabs button { display: flex; align-items: center; gap: 6px; padding: 9px 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); font-weight: 500; font-size: 0.875rem; } .ficha-tabs button:hover { color: var(--text); } .ficha-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--text); font-weight: 600; } .ficha-tabs button:focus-visible { outline-offset: -2px; } .g-ficha { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--s3); align-items: start; } .g-ficha:not(:has(> .rail)) { grid-template-columns: minmax(0, 1fr); } .tab-panel { display: grid; gap: var(--s3); min-width: 0; } .tab-panel[hidden] { display: none; } .rail { display: flex; flex-direction: column; gap: var(--s2); position: sticky; top: var(--s3); } .rail .card { padding: var(--s2) var(--s3) var(--s3); } .rail .card-h { margin-bottom: 10px; } .rail .meta { margin: 0; line-height: 1.5; } /* El carril resume: la tipografía y la firma del plan enteras están en la pestaña Diseño */ .rail .kv dd { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .retirar { align-self: flex-start; background: none; border: 0; padding: 4px 2px; color: var(--danger); } .retirar:hover { text-decoration: underline; text-underline-offset: 3px; background: none; } .paleta { display: flex; height: 2.125rem; border-radius: 10px; overflow: hidden; margin-bottom: 12px; box-shadow: inset 0 0 0 1px rgba(127,127,127,.25); } .paleta i { flex: 1; } .kv { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: 0.8125rem; } .kv dt { color: var(--muted); } .kv dd { margin: 0; overflow-wrap: anywhere; } /* Marco de navegador con la web dentro: el iframe va a su ancho real y se reduce (JS fija --k) */ .navegador { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); box-shadow: var(--shadow); } .navegador .barra { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); font: 0.75rem var(--f-mono); color: var(--muted); min-width: 0; } .luces { display: flex; gap: 5px; flex: none; } .luces i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); } .navegador .url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); text-decoration: none; } .navegador .url:hover { color: var(--text); } .seg { margin-left: auto; display: flex; flex: none; background: var(--card-2); border-radius: 9px; padding: 2px; } .seg button { border: 0; background: none; padding: 4px 10px; border-radius: 7px; font: 500 0.75rem var(--f-ui); color: var(--muted); } .seg button[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.12); } .marco { position: relative; height: clamp(16rem, 34vw, 26rem); overflow: hidden; background: var(--card-2); --k: .6; --alto: 26rem; } .marco iframe { position: absolute; top: 0; left: 0; width: 1280px; height: calc(var(--alto) / var(--k)); border: 0; background: #fff; transform: scale(var(--k)); transform-origin: 0 0; } .marco[data-modo="movil"] iframe { width: 390px; left: calc(50% - 390px * .75 / 2); height: calc(var(--alto) / .75); transform: scale(.75); border-inline: 1px solid var(--line); } /* Versiones como línea de tiempo: un punto por versión, relleno el de la que está en el aire */ .tl > .version + .version { border-top: 0; } .version { position: relative; padding: var(--s1) 0 var(--s1) 26px; align-items: flex-start; } .version::before { content: ''; position: absolute; left: 0; top: calc(var(--s1) + 1px); width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); } .version:has(.chip)::before { border-color: var(--ok); background: var(--ok); box-shadow: inset 0 0 0 3px var(--card); } .version:not(:last-child)::after { content: ''; position: absolute; left: 7px; width: 2px; top: calc(var(--s1) + 19px); bottom: calc(-1 * var(--s1) - 1px); background: var(--line); } .version > span:first-child { display: flex; align-items: baseline; gap: 6px var(--s1); flex-wrap: wrap; min-width: 0; flex: 1 1 auto; } .version-cuando .mono { color: var(--text); } .version-brief { flex-basis: 100%; font-style: italic; } .version-pend { flex-basis: 100%; } .version-pend ul { list-style: none; margin: var(--s1) 0 0; padding: 0; display: grid; gap: var(--s1); } .version-pend li { display: flex; gap: var(--s2); align-items: baseline; justify-content: space-between; font-size: 0.8125rem; } .version-pend li > span:first-child { min-width: 0; overflow-wrap: anywhere; } .version-pend li > :not(:first-child) { flex: none; } .ov-key { font-family: var(--f-mono); font-size: 0.75rem; background: var(--card-2); border-radius: 6px; padding: 2px 7px; } .ov-val { color: var(--muted); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30rem; display: inline-block; vertical-align: bottom; } .ov-val del { color: var(--danger); background: var(--danger-soft); border-radius: 4px; padding: 0 3px; } .ov-val ins { color: var(--ok); background: var(--ok-soft); border-radius: 4px; padding: 0 3px; text-decoration: none; } /* Tema: la dirección visual con la que se generó la web, como ficha de diseño */ .tema-dir { margin: 0 0 var(--s2); font-size: 0.9375rem; line-height: 1.55; color: var(--muted); } .tema-dir b { display: block; margin-bottom: .15rem; font: 700 1.25rem/1.2 var(--f-display); letter-spacing: -.01em; color: var(--text); } .tema-paleta { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0 0 var(--s2); padding: 0; list-style: none; } .tema-paleta li { display: flex; align-items: center; gap: .375rem; padding: .1875rem .5rem .1875rem .1875rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 500 0.6875rem/1 var(--f-mono); } /* Aro por dentro: un swatch casi blanco y otro casi negro tienen que verse en los dos temas */ .tema-color { width: 1.125rem; height: 1.125rem; border-radius: 999px; flex: none; box-shadow: inset 0 0 0 1px rgba(128,128,128,.45); } .tema-datos { display: grid; gap: .125rem; margin: 0; } .tema-datos dt { margin-top: var(--s1); text-transform: uppercase; letter-spacing: .1em; font-size: 0.6875rem; font-weight: 600; color: var(--muted); } .tema-datos dt:first-child { margin-top: 0; } .tema-datos dd { margin: 0; font-size: 0.875rem; line-height: 1.5; } .tema-mas, .tema-datos dd { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .tema-fold { margin-top: var(--s2); } .tema-plan { white-space: pre-wrap; font: 0.75rem/1.55 var(--f-mono); margin: .5rem 0 0; max-height: 45vh; overflow: auto; } /* --- Actividad: trabajos del worker. Lo que corre AHORA pesa más que lo terminado --- */ .job { padding: var(--s2) var(--s3); border-left: 3px solid transparent; } .job-head { display: flex; align-items: center; gap: var(--s2); } .job-tit { display: flex; align-items: baseline; gap: var(--s1); flex-wrap: wrap; min-width: 0; flex: 1; font-size: 0.9375rem; } .job-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 0 calc(9px + var(--s2)); font-size: 0.75rem; } /* El separador viaja con el dato que precede: al envolver baja con él */ .job-meta > * + *::before { content: '·'; margin-right: 6px; opacity: .45; } .job-ia { font-family: var(--f-mono); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } .job-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); } .job[data-st="pending"] .job-dot { background: var(--warn-ink); } .job[data-st="running"] .job-dot { background: var(--ok); animation: latido 1.4s ease-in-out infinite; } .job[data-st="ok"] .job-dot { background: var(--ok); } .job[data-st="error"] .job-dot { background: var(--danger); } .job[data-st="cancelado"] .job-dot { background: var(--muted); } @keyframes latido { 50% { opacity: .3; transform: scale(.8); } } .job[data-st="running"] { border-left-color: var(--accent-ink); background: linear-gradient(90deg, var(--accent-soft), var(--card) 45%); } .job[data-st="pending"] { border-left-color: var(--warn-ink); } .job[data-st="error"] { border-left-color: var(--danger); } .job-estado { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; padding: 3px 9px; border-radius: 999px; background: var(--card-2); color: var(--muted); white-space: nowrap; } .job-estado[data-st="ok"] { background: var(--ok-soft); color: var(--ok); } .job-estado[data-st="error"] { background: var(--danger-soft); color: var(--danger); } .job-estado[data-st="pending"] { background: var(--warn-soft); color: var(--warn-ink); } .job-estado[data-st="running"] { background: var(--accent-soft); color: var(--accent-ink); } /* Cancelado no es un fallo: gris, no rojo */ .job-estado[data-st="cancelado"] { background: var(--line); color: var(--muted); } .job-fase { font-size: 0.75rem; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; white-space: nowrap; } .job-x { padding: 4px 10px; font-size: 0.75rem; color: var(--muted); opacity: 0; transition: opacity var(--dur); } .job:hover .job-x, .job-x:focus-visible { opacity: 1; } /* el ✕ solo cuando se busca */ @media (hover: none) { .job-x { opacity: 1; } } /* Parar corta algo que corre AHORA: siempre a la vista, gris en reposo y rojo al apuntarlo */ .job-parar { padding: 4px 10px; font-size: 0.75rem; color: var(--muted); } .job-parar:hover { color: var(--danger); border-color: var(--danger); } .job-err { margin: var(--s1) 0 0; font-size: 0.8125rem; color: var(--danger); } .job-brief { margin: var(--s1) 0 0; font-style: italic; } /* El registro, con pinta de terminal */ .job-log { margin-top: var(--s2); } .job-log > summary { color: var(--muted); } .job-log > summary em { font-style: normal; color: var(--accent-ink); font-weight: 700; } .job pre { margin: var(--s1) 0 0; max-height: 200px; overflow: auto; counter-reset: linea; background: var(--log-bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 0; font: 0.75rem/1.6 var(--f-mono); overscroll-behavior: contain; } .job pre.vivo, .job[data-st="error"] pre { max-height: 340px; } /* NADA de scroll-behavior: smooth aquí: el registro se repinta cada 2 s y su scroll se devuelve al final a mano; suave, el log se vería subir y bajar solo. */ .log-l { display: block; padding: 0 12px 0 3.25rem; text-indent: -0.5rem; color: var(--log-ink); white-space: pre-wrap; word-break: break-word; position: relative; } .log-l::before { counter-increment: linea; content: counter(linea); position: absolute; left: 0; width: 2.5rem; text-align: right; color: var(--muted); opacity: .5; text-indent: 0; user-select: none; } .log-l b { font-weight: 500; color: var(--text); } .log-l.l-err { color: var(--danger); background: var(--danger-soft); font-weight: 500; } .log-l.l-err b { color: var(--danger); } .log-l.l-ok { color: var(--ok); } .log-l.l-avi { color: var(--warn-ink); } .log-l.l-tenue { opacity: .45; } /* Pestañas de Actividad: pastilla compacta (son tres palabras). Va en un