/* * app.css — Estilos base de Minerva * NUNCA usar colores directos aquí. Siempre var(--color-*) * El tema activo se carga ANTES de este archivo en el . */ /* === Reset === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* === Base === */ html { font-size: 16px; } body { font-family: var(--font-family); font-size: var(--font-size-base); background: var(--color-bg); color: var(--color-text); line-height: 1.5; } /* === Layout principal === */ .layout { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-width); background: var(--color-bg-sidebar); position: fixed; top: 0; left: 0; bottom: 0; display: flex; flex-direction: column; z-index: 100; overflow-y: auto; } .sidebar__logo { padding: 1.2rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.07); } .sidebar__logo a { color: var(--color-text-inverse); text-decoration: none; font-size: 1rem; font-weight: 700; letter-spacing: .02em; } .sidebar__logo-subtitle { margin-top: .4rem; font-size: .82rem; color: rgba(255, 255, 255, .72); line-height: 1.4; } .sidebar__nav { padding: .75rem 0; flex: 1; } .sidebar__section-label { padding: 1rem 1.5rem .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .58); } .sidebar__empty-state, .sidebar__company-active { margin: 0 1.25rem .7rem; padding: .7rem .8rem; border-radius: var(--border-radius); font-size: .84rem; line-height: 1.45; } .sidebar__empty-state { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .78); } .sidebar__company-active { background: rgba(255, 255, 255, .10); color: var(--color-text-inverse); font-weight: 600; } .sidebar__nav a { display: flex; align-items: center; gap: .6rem; padding: .6rem 1.5rem; color: var(--color-text-sidebar); text-decoration: none; font-size: var(--font-size-sm); border-left: 3px solid transparent; transition: background .15s, color .15s; } .sidebar__nav a:hover, .sidebar__nav a.active { background: var(--color-bg-sidebar-hover); color: var(--color-text-sidebar-active); border-left-color: var(--color-primary); } .main { margin-left: var(--sidebar-width); flex: 1; display: flex; flex-direction: column; min-height: 100vh; } .topbar { min-height: var(--topbar-height); background: var(--color-bg-topbar); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-topbar); padding: .5rem 1.5rem .65rem; position: sticky; top: 0; z-index: 50; display: flex; align-items: flex-start; gap: .5rem; } .topbar__grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(320px, auto) minmax(220px, 1fr); grid-template-areas: "identity company actions" "title title services"; column-gap: 1rem; row-gap: .45rem; align-items: start; flex: 1; min-width: 0; } .topbar__slot--identity { grid-area: identity; justify-self: start; } .topbar__slot--company { grid-area: company; justify-self: center; } .topbar__slot--actions { grid-area: actions; justify-self: end; display: flex; align-items: center; gap: .45rem .75rem; flex-wrap: wrap; } .topbar__slot--title { grid-area: title; } .topbar__slot--services { grid-area: services; justify-self: end; align-self: start; display: flex; align-items: center; gap: .6rem; } .topbar__slot--identity, .topbar__slot--company, .topbar__slot--actions, .topbar__slot--title, .topbar__slot--services { min-width: 0; max-width: 100%; } .topbar__master-form { margin: 0; display: flex; align-items: center; } .topbar__master-btn { width: 38px; height: 38px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; color: #fff; transition: background .15s ease, box-shadow .15s ease, transform .04s ease; } .topbar__master-btn:active { transform: translateY(1px); } .topbar__master-btn--on { background: #16a34a; border-color: #15803d; box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(22, 163, 74, .35); } .topbar__master-btn--on:hover { background: #15803d; box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(22, 163, 74, .5); } .topbar__master-btn--off { background: #dc2626; border-color: #991b1b; box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(220, 38, 38, .4); animation: topbarMasterPulse 1.4s ease-in-out infinite; } .topbar__master-btn--off:hover { background: #b91c1c; box-shadow: 0 0 0 2px #fff, 0 3px 12px rgba(220, 38, 38, .6); } .topbar__master-icon { font-size: 1.35rem; line-height: 1; font-weight: 700; } @keyframes topbarMasterPulse { 0%, 100% { box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(220, 38, 38, .4); } 50% { box-shadow: 0 0 0 2px #fff, 0 2px 16px rgba(220, 38, 38, .7); } } .topbar__title { font-size: var(--font-size-lg); font-weight: 600; color: var(--color-text); min-width: 0; line-height: 1.2; } .topbar__identity { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .topbar__identity-user { color: var(--color-text-muted); font-size: var(--font-size-sm); white-space: nowrap; } .topbar__build-badge { display: inline-flex; align-items: center; padding: .12rem .5rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg-card); color: var(--color-text); font-size: .72rem; font-weight: 700; line-height: 1.2; white-space: nowrap; } .topbar__company-form, .topbar__field-group, .topbar__company-static { display: inline-flex; align-items: center; gap: .35rem; margin: 0; max-width: 100%; } .topbar__company-form { width: 100%; display: block; } .topbar__company-panel { border: 1px solid var(--color-text-muted); border-radius: var(--border-radius-lg); background: var(--color-border); box-shadow: none; padding: .48rem .7rem; min-width: min(360px, 100%); } .topbar__company-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .25rem; } .topbar__company-status { display: inline-flex; align-items: center; border-radius: 999px; padding: .14rem .42rem; font-size: .72rem; font-weight: 700; background: var(--color-bg-card); border: 1px solid var(--color-text-muted); color: var(--color-text); } .topbar__company-static { border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-bg-card); padding: .42rem .6rem; } .topbar__company-value { color: var(--color-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; } .topbar__field-label { color: var(--color-text-muted); font-size: var(--font-size-sm); white-space: nowrap; } .topbar select { width: auto; min-width: 140px; max-width: 360px; padding: .45rem .65rem; } .topbar .topbar__company-form select { min-width: 240px; max-width: 360px; padding: .35rem .55rem; } .topbar .topbar__field-group select { min-width: 140px; max-width: 200px; } .topbar__services-strip { display: inline-flex; align-items: center; gap: .55rem; } .topbar__service-dots { display: inline-flex; align-items: center; gap: .35rem; } .topbar__service-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--color-border); display: inline-block; } .topbar__service-dot.is-on { background: var(--color-success); border-color: var(--color-success); } .topbar__service-dot.is-off { background: var(--color-danger); border-color: var(--color-danger); } .topbar__service-dot.is-warning { background: #d97706; border-color: #d97706; } .topbar__mode { display: inline-flex; align-items: center; gap: .65rem; flex-wrap: wrap; } .topbar__mode-pill { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .35rem .7rem; border-radius: 999px; border: 1px solid transparent; line-height: 1.15; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; } .topbar__mode-headline { font-size: .85rem; } .topbar__mode-sub { font-size: .72rem; font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .9; } .topbar__mode-pill--ok { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success); } .topbar__mode-pill--half { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning); } .topbar__mode-pill--off { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger); } .topbar__mode-flags { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .15rem; font-size: .75rem; line-height: 1.15; } .topbar__mode-flag { font-weight: 600; color: var(--color-text-muted, #888); } .topbar__mode-flag--on { color: var(--color-success); } .topbar__mode-flag--off { color: var(--color-text-muted, #888); } .topbar__services-phone-row { display: flex; align-items: center; gap: .45rem; padding: 0 .1rem; } .topbar__services-phone-label { font-size: .8rem; color: var(--color-text-muted, #888); white-space: nowrap; flex-shrink: 0; } .topbar__services-phone-input { flex: 1; min-width: 0; height: 28px; font-size: .83rem; padding: 0 .45rem; border: 1px solid var(--color-border); border-radius: var(--border-radius-sm, 4px); background: var(--color-bg); color: var(--color-text); } .topbar__services-phone-input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; } /* === Hamburger sidebar toggle === */ .sidebar-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 34px; height: 34px; border: 1px solid var(--color-border, #e2e8f0); border-radius: var(--border-radius, 6px); background: transparent; cursor: pointer; padding: 0; flex-shrink: 0; } .sidebar-toggle span { display: block; width: 18px; height: 2px; background: var(--color-text-sidebar, #fff); border-radius: 2px; transition: transform .2s, opacity .2s; } .sidebar.sidebar--open .sidebar-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .sidebar.sidebar--open .sidebar-toggle span:nth-child(2) { opacity: 0; } .sidebar.sidebar--open .sidebar-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* === Hamburger button in topbar (only visible on mobile) === */ .topbar-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 38px; min-width: 38px; height: 38px; border: 1px solid var(--color-border); border-radius: var(--border-radius, 6px); background: transparent; cursor: pointer; padding: 0; flex-shrink: 0; align-self: center; } .topbar-hamburger span { display: block; width: 20px; height: 2px; background: var(--color-text); border-radius: 2px; transition: transform .2s, opacity .2s; } /* === Botón "← Volver" en topbar (siempre visible) === */ .topbar-back { display: inline-flex; align-items: center; justify-content: center; width: 38px; min-width: 38px; height: 38px; border: 1px solid var(--color-border); border-radius: var(--border-radius, 6px); background: transparent; color: var(--color-text); cursor: pointer; padding: 0; font-size: 1.25rem; line-height: 1; flex-shrink: 0; align-self: center; transition: background .15s, border-color .15s; } .topbar-back:hover { background: rgba(0,0,0,.04); border-color: var(--color-primary, var(--color-border)); } .topbar-back:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* === Sidebar backdrop (mobile overlay) === */ .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 49; } .sidebar-backdrop--visible { display: block; } .topbar__services-menu { position: relative; min-width: 170px; max-width: 100%; } .topbar__services-menu[open] > summary { border-color: var(--color-primary); } .topbar__services-menu[open] > summary::after { transform: rotate(180deg); } .topbar__services-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; padding: 0; border: 0; background: transparent; white-space: nowrap; } .topbar__services-menu > summary::-webkit-details-marker { display: none; } .topbar__services-menu > summary:focus { outline: none; } .topbar__services-menu > summary:focus-visible .topbar__topo { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-text) 18%, transparent); } /* Bombilla (estado agregado). El click sobre el summary completo abre el desplegable. Norma del operador 2026-05-29: sustituye al antiguo botón ⏻ del master y a la pill SIN ACTIVIDAD. */ .topbar__topo { --bulb-color: #888; --bulb-glow: rgba(136,136,136,.6); display: inline-block; width: 1.5cm; height: 1.5cm; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, white 35%, var(--bulb-color)) 0%, var(--bulb-color) 55%, color-mix(in srgb, black 18%, var(--bulb-color)) 100%); box-shadow: 0 0 0 1px color-mix(in srgb, black 18%, var(--bulb-color)) inset, 0 0 10px 0 var(--bulb-glow); flex: 0 0 auto; } .topbar__topo--green { --bulb-color: #2c8a3e; --bulb-glow: rgba(44,138,62,.55); } .topbar__topo--blue { --bulb-color: #2469c8; --bulb-glow: rgba(36,105,200,.55); } .topbar__topo--amber { --bulb-color: #d18a1b; --bulb-glow: rgba(209,138,27,.55); } .topbar__topo--red { --bulb-color: #b02525; --bulb-glow: rgba(176,37,37,.6); } /* Aureolas indicadoras (norma operador 2026-05-29, actualizada): Cada una de las tres modalidades de llamada que esté activa suma una aureola al topo, sin importar el color base (verde/azul/rojo). */ .topbar__topo--aur0 { /* sin aureolas */ } .topbar__topo--aur1 { box-shadow: 0 0 0 1px color-mix(in srgb, black 18%, var(--bulb-color)) inset, 0 0 10px 0 var(--bulb-glow), 0 0 0 4px color-mix(in srgb, var(--bulb-color) 55%, transparent); } .topbar__topo--aur2 { box-shadow: 0 0 0 1px color-mix(in srgb, black 18%, var(--bulb-color)) inset, 0 0 10px 0 var(--bulb-glow), 0 0 0 4px color-mix(in srgb, var(--bulb-color) 60%, transparent), 0 0 0 9px color-mix(in srgb, var(--bulb-color) 30%, transparent); } .topbar__topo--aur3 { box-shadow: 0 0 0 1px color-mix(in srgb, black 18%, var(--bulb-color)) inset, 0 0 10px 0 var(--bulb-glow), 0 0 0 4px color-mix(in srgb, var(--bulb-color) 60%, transparent), 0 0 0 9px color-mix(in srgb, var(--bulb-color) 40%, transparent), 0 0 0 14px color-mix(in srgb, var(--bulb-color) 18%, transparent); } .topbar__topo-mini { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .3rem; max-width: 260px; } .topbar__topo-mini-tag { font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; background: color-mix(in srgb, var(--color-text) 8%, transparent); color: var(--color-text); } .topbar__topo-mini-empty { font-size: .8rem; color: var(--color-text-muted); font-style: italic; } .topbar__topo-summary[aria-label] { outline: none; } .topbar__services-menu[open] > .topbar__topo-summary { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-text) 12%, transparent); } /* === Topbar — popover "Servicios activos" === Panel técnico denso, escaneable. Estados ON/OFF a distancia. Modo prueba con tinte amber explícito (variant=danger). */ .topbar__services-form { --svc-pad: 0.85rem; --svc-row-pad: 0.55rem 0.7rem 0.55rem 0.85rem; --svc-row-bg: var(--color-bg-card); --svc-row-bg-hover: color-mix(in srgb, var(--color-text) 4%, var(--color-bg-card)); --svc-row-bg-active: color-mix(in srgb, var(--color-success) 7%, var(--color-bg-card)); --svc-row-bg-danger: color-mix(in srgb, var(--color-warning) 12%, var(--color-bg-card)); --svc-rail-active: var(--color-success); --svc-rail-danger: var(--color-warning); /* position:fixed (no absolute) para sacar el popover del contexto del topbar sticky y de cualquier overflow de ancestro. Se ancla al viewport bajo el topbar y se da su propio scroll interno. */ position: fixed; top: calc(var(--topbar-height) + 0.45rem); right: 0.75rem; z-index: 200; width: min(360px, calc(100vw - 1.5rem)); max-height: calc(100vh - var(--topbar-height) - 1rem); overflow-y: auto; overscroll-behavior: contain; padding: var(--svc-pad); background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: calc(var(--border-radius) + 4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--color-text) 4%, transparent), 0 12px 32px -8px color-mix(in srgb, var(--color-text) 18%, transparent), 0 4px 12px -4px color-mix(in srgb, var(--color-text) 10%, transparent); display: block; font-variant-numeric: tabular-nums; } .topbar__services-close { position: absolute; top: .5rem; right: .6rem; background: transparent; border: 0; cursor: pointer; font-size: 1.05rem; color: var(--color-text-muted); padding: .15rem .4rem; border-radius: 6px; line-height: 1; z-index: 1; } .topbar__services-form > * + * { margin-top: 0.7rem; } .topbar__services-overview { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem 0.8rem; padding: 0.55rem 0.75rem; background: color-mix(in srgb, var(--color-text) 3%, transparent); border: 1px solid color-mix(in srgb, var(--color-text) 6%, var(--color-border)); border-radius: var(--border-radius); } .topbar__services-overview-eyebrow { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; color: var(--color-text-muted); } .topbar__services-overview-stats { display: inline-flex; align-items: baseline; gap: 0.35rem; color: var(--color-text); } .topbar__services-overview-ratio { display: inline-flex; align-items: baseline; font-weight: 700; font-size: 1rem; line-height: 1; } .topbar__services-overview-ratio [data-overview-active] { color: var(--color-success); } .topbar__services-overview-sep { margin: 0 0.1rem; opacity: 0.4; } .topbar__services-overview-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); } .topbar__services-overview-warn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.5rem; border-radius: 999px; background: var(--color-warning-bg); color: var(--color-warning); font-size: 0.72rem; font-weight: 600; } .topbar__services-overview-warn svg { width: 12px; height: 12px; } .topbar__services-overview-warn-label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.62rem; } .topbar__svc-section { display: flex; flex-direction: column; gap: 0.25rem; } .topbar__svc-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding: 0.2rem 0.15rem 0.3rem; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-border)); } .topbar__svc-section-title { margin: 0; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--color-text-muted); } .topbar__svc-section-tag { display: inline-block; margin-left: 0.45rem; padding: 0.05rem 0.35rem; background: color-mix(in srgb, var(--color-text) 8%, transparent); border-radius: 4px; font-size: 0.55rem; letter-spacing: 0.1em; color: var(--color-text); text-transform: uppercase; } .topbar__svc-section-count { font-size: 0.7rem; font-weight: 700; color: var(--color-text-muted); font-feature-settings: "tnum"; } .topbar__svc-section-count[data-active="true"] { color: var(--color-success); } .topbar__svc-section-body { display: flex; flex-direction: column; gap: 0.2rem; padding-top: 0.25rem; } .topbar__services-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; padding: var(--svc-row-pad); background: var(--svc-row-bg); border: 1px solid transparent; border-radius: var(--border-radius); cursor: pointer; transition: background 160ms ease, border-color 160ms ease; min-height: 44px; color: var(--color-text); } .topbar__services-item::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; transition: background 200ms ease; } .topbar__services-item:hover { background: var(--svc-row-bg-hover); } .topbar__services-item:has(input:checked) { background: var(--svc-row-bg-active); } .topbar__services-item:has(input:checked)::before { background: var(--svc-rail-active); } .topbar__services-item[data-variant="danger"]:has(input:checked) { background: var(--svc-row-bg-danger); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); } .topbar__services-item[data-variant="danger"]:has(input:checked)::before { background: var(--svc-rail-danger); } .topbar__services-label { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 0.45rem; color: var(--color-text); font-size: 0.92rem; font-weight: 500; line-height: 1.25; } .topbar__services-item:has(input:checked) .topbar__services-label { font-weight: 600; } .topbar__services-pill { display: inline-block; padding: 0.08rem 0.4rem 0.1rem; background: var(--color-warning-bg); color: var(--color-warning); border-radius: 4px; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.3; opacity: 0.45; transition: opacity 160ms ease, transform 160ms ease; } .topbar__services-item[data-variant="danger"]:has(input:checked) .topbar__services-pill { opacity: 1; background: var(--color-warning); color: var(--color-bg, #fff); } .topbar-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; } .topbar-switch input[type="checkbox"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .topbar-switch__slider { position: absolute; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--color-text) 14%, var(--color-bg-card)); border: 1px solid color-mix(in srgb, var(--color-text) 10%, var(--color-border)); transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease; } .topbar-switch__slider::before { content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border-radius: 50%; background: var(--color-bg, #fff); box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 20%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-text) 8%, transparent); transition: transform 220ms cubic-bezier(.32,.72,0,1), width 160ms ease; } .topbar-switch input[type="checkbox"]:checked + .topbar-switch__slider { background: var(--color-success); border-color: var(--color-success); } .topbar-switch input[type="checkbox"]:checked + .topbar-switch__slider::before { transform: translate(20px, -50%); } .topbar-switch input[type="checkbox"][data-danger]:checked + .topbar-switch__slider { background: var(--color-warning); border-color: var(--color-warning); } .topbar-switch input[type="checkbox"]:focus-visible + .topbar-switch__slider { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent); } .topbar-switch input[type="checkbox"]:active + .topbar-switch__slider::before { width: 22px; } .topbar__svc-subrow { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 0.4rem 0.55rem; padding: 0.35rem 0.7rem 0.5rem 1.7rem; margin-top: -0.05rem; position: relative; color: var(--color-text-muted); } .topbar__svc-subrow::before { content: ""; position: absolute; left: 1.05rem; top: 0; bottom: 0.85rem; border-left: 1px dashed color-mix(in srgb, var(--color-text) 18%, transparent); } .topbar__svc-subrow-icon { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; color: var(--color-text-muted); } .topbar__svc-subrow-icon svg { width: 14px; height: 14px; } .topbar__svc-subrow-label { font-size: 0.74rem; color: var(--color-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; cursor: pointer; } .topbar__svc-subrow-input { width: 100%; min-height: 36px; padding: 0.35rem 0.7rem; background: var(--color-bg, #fff); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text); font: inherit; font-size: 0.85rem; font-variant-numeric: tabular-nums; transition: border-color 180ms ease, box-shadow 180ms ease; } .topbar__svc-subrow-input:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); } .topbar__svc-subrow-input::placeholder { color: color-mix(in srgb, var(--color-text-muted) 80%, transparent); } .topbar__svc-help { margin-top: 0.15rem; border-top: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-border)); padding-top: 0.55rem; } .topbar__svc-help summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.1rem; font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted); user-select: none; } .topbar__svc-help summary::-webkit-details-marker { display: none; } .topbar__svc-help summary:hover { color: var(--color-text); } .topbar__svc-help-chev { width: 10px; height: 6px; transition: transform 180ms ease; } .topbar__svc-help[open] .topbar__svc-help-chev { transform: rotate(180deg); } .topbar__svc-help-dl { margin: 0.35rem 0 0.4rem; display: grid; grid-template-columns: 1fr; gap: 0.5rem; font-size: 0.78rem; line-height: 1.35; } .topbar__svc-help-dl dt { font-weight: 700; color: var(--color-text); margin-bottom: 0.05rem; } .topbar__svc-help-dl dd { margin: 0 0 0.1rem; color: var(--color-text-muted); } .topbar__svc-help-foot { margin: 0.4rem 0 0; font-size: 0.72rem; color: var(--color-text-muted); font-style: italic; padding-top: 0.4rem; border-top: 1px dashed color-mix(in srgb, var(--color-text) 8%, transparent); } @media (max-width: 640px) { .topbar__services-form { right: 0.5rem; left: 0.5rem; width: auto; } } /* A partir de ~900 px de viewport el popover de Servicios activos crece y reparte las secciones en dos columnas. El resumen y el help siguen ocupando el ancho completo (`grid-column: 1 / -1`). */ @media (min-width: 900px) { .topbar__services-form { width: min(720px, calc(100vw - 1.5rem)); display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.75rem; row-gap: 0.7rem; align-items: start; } .topbar__services-form > * + * { margin-top: 0; } .topbar__services-overview, .topbar__svc-help { grid-column: 1 / -1; } .topbar__svc-section { margin: 0; } } @media (prefers-reduced-motion: reduce) { .topbar__services-item, .topbar-switch__slider, .topbar-switch__slider::before, .topbar__svc-help-chev, .topbar__services-overview-warn { transition: none !important; } } /* Clases legacy del popover (sustituidas por las anteriores) — neutralizadas para no afectar el render hasta que se eliminen físicamente. */ .topbar__services-item--select, .topbar__services-phone-row, .topbar__services-phone-label, .topbar__services-phone-input, .topbar__services-group { display: none !important; } .content { padding: 1.75rem 2rem; flex: 1; } /* === Tarjetas === */ .card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-card); padding: 1.5rem; margin-bottom: 1.5rem; } .card__title { font-size: 1rem; font-weight: 600; color: var(--color-text); margin-bottom: 1rem; } .responsive-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } .responsive-card { border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); background: var(--color-surface-soft, #f8f9fb); padding: 1rem; } .responsive-card--wide { grid-column: 1 / -1; } .responsive-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; margin-bottom: .9rem; } .responsive-card__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--color-text); } .responsive-card__subtitle { margin: .2rem 0 0; color: var(--color-text-muted); font-size: .9rem; } .responsive-card__meta, .responsive-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .responsive-card__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; } .responsive-card__field { border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-bg-card); padding: .7rem .75rem; } .responsive-card__field-label { display: block; font-size: .76rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .02em; margin-bottom: .2rem; } .responsive-card__field-value { display: block; color: var(--color-text); font-weight: 600; word-break: break-word; } .responsive-card__text { margin: 0; white-space: pre-wrap; word-break: break-word; } .responsive-card__code { display: block; white-space: pre-wrap; word-break: break-word; font-size: .85em; background: rgba(0, 0, 0, .03); padding: .45rem .55rem; border-radius: var(--border-radius); } .collapsible-card { padding: 0; overflow: hidden; } .collapsible-card__toggle { width: 100%; border: none; background: transparent; padding: 1.1rem 1.25rem; display: flex; align-items: flex-start; gap: .75rem; text-align: left; cursor: pointer; } .collapsible-card__toggle:hover { background: rgba(15, 23, 42, .03); } .collapsible-card__heading { flex: 1 1 auto; } .collapsible-card__title { margin: 0; font-size: 1rem; font-weight: 600; color: var(--color-text); } .collapsible-card__summary { margin: .35rem 0 0; color: var(--color-text-muted); font-size: .9rem; line-height: 1.45; } .collapsible-card__icon { flex: 0 0 auto; color: var(--color-text-muted); transition: transform .2s ease; transform: rotate(-90deg); font-size: .85rem; margin-top: .15rem; } .collapsible-card.is-open .collapsible-card__icon { transform: rotate(0); } .collapsible-card__body { display: none; padding: 0 1.25rem 1.25rem; } .collapsible-card.is-open .collapsible-card__body { display: block; } .collapsible-card__body > :last-child { margin-bottom: 0; } /* === Botones === */ .btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1.1rem; border: none; border-radius: var(--border-radius); cursor: pointer; font-size: var(--font-size-sm); font-family: var(--font-family); text-decoration: none; transition: background .15s, opacity .15s; font-weight: 500; } .btn-primary { background: var(--color-primary); color: var(--color-text-inverse); } .btn-primary:hover { background: var(--color-primary-dark); } .btn-secondary { background: var(--color-border); color: var(--color-text); } .btn-secondary:hover { opacity: .85; } .btn-danger { background: var(--color-danger); color: var(--color-text-inverse); } .btn-danger:hover { opacity: .9; } .btn-sm { padding: .3rem .7rem; font-size: .8rem; } /* === Formularios === */ .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: .3rem; } .form-group--missing { border-left: 3px solid var(--color-danger, #e74c3c); padding-left: .75rem; } .form-group--missing label { color: var(--color-danger, #e74c3c); font-weight: 600; } .form-group--missing textarea, .form-group--missing input, .form-group--missing select { border-color: var(--color-danger, #e74c3c); } input[type=text], input[type=email], input[type=password], input[type=number], select, textarea { width: 100%; padding: .5rem .8rem; border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-bg-input, #ffffff); color: var(--color-text); font-size: var(--font-size-base); font-family: var(--font-family); transition: border-color .15s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary); } /* === Tablas === */ table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } th { text-align: left; padding: .6rem .8rem; background: var(--color-bg-card); border-bottom: 2px solid var(--color-border); color: var(--color-text-muted); font-weight: 600; } td { padding: .55rem .8rem; border-bottom: 1px solid var(--color-border); vertical-align: middle; } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--color-primary-light); } /* === Alertas === */ .alert { padding: .75rem 1rem; border-radius: var(--border-radius); margin-bottom: 1rem; font-size: var(--font-size-sm); } .alert-success { background: var(--color-success-bg); color: var(--color-success); } .alert-warning { background: var(--color-warning-bg); color: var(--color-warning); } .alert-danger { background: var(--color-danger-bg); color: var(--color-danger); } .alert-info { background: var(--color-info-bg); color: var(--color-info); } /* === Badges === */ .badge { display: inline-block; padding: .2rem .55rem; border-radius: 20px; font-size: .78rem; font-weight: 600; } .badge-success { background: var(--color-success-bg); color: var(--color-success); } .badge-warning { background: var(--color-warning-bg); color: var(--color-warning); } .badge-danger { background: var(--color-danger-bg); color: var(--color-danger); } .badge-info { background: var(--color-info-bg); color: var(--color-info); } .badge-muted { background: var(--color-border); color: var(--color-text-muted); } /* === Página de login (max 70% alto visible) === */ .login-wrap { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; background: var(--color-bg); padding: 12vh 20px 40px; } .login-box { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-card); padding: 1.8rem 2rem; width: 100%; max-width: 380px; max-height: 70vh; overflow: auto; } .login-box h1 { font-size: 1.2rem; font-weight: 700; color: var(--color-text); margin-bottom: 1.5rem; text-align: center; } .ui-help-tooltip { position: fixed; z-index: 9999; max-width: min(320px, calc(100vw - 24px)); padding: .6rem .75rem; border-radius: var(--border-radius); background: rgba(15, 23, 42, .96); color: #ffffff; font-size: .82rem; line-height: 1.4; box-shadow: 0 10px 28px rgba(15, 23, 42, .28); transform: translate(-50%, 6px); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; } .ui-help-tooltip.is-visible { opacity: 1; transform: translate(-50%, 0); } @media (max-width: 1200px) { .topbar__grid { grid-template-columns: minmax(200px, 1fr) minmax(220px, auto); grid-template-areas: "identity actions" "company company" "title services"; } .topbar__slot--company { justify-self: stretch; } .topbar__company-form { width: 100%; } .topbar .topbar__company-form select { width: 100%; min-width: 0; } } @media (max-width: 1100px) { .sidebar { transform: translateX(-100%); transition: transform .25s ease; z-index: 100; width: 260px; } .sidebar.sidebar--open { transform: translateX(0); } .sidebar__logo-subtitle { display: none; } .main { margin-left: 0; min-height: 100vh; } .topbar-hamburger { display: flex; } } @media (max-width: 1100px) { .topbar { padding: .5rem .9rem; } .topbar__grid { grid-template-columns: 1fr; grid-template-areas: "identity" "company" "actions" "services" "title"; row-gap: .55rem; } .topbar__identity-user, .topbar__build-badge { white-space: normal; } .topbar__slot--actions, .topbar__slot--company, .topbar__slot--services { justify-self: stretch; width: 100%; } .topbar__slot--actions { justify-content: space-between; } .topbar__company-static, .topbar__company-form, .topbar__field-group, .topbar__services-menu { width: 100%; } .topbar__company-panel { min-width: 0; width: 100%; } .topbar__services-strip { width: 100%; justify-content: space-between; } .topbar__services-menu > summary { width: 100%; } .topbar__services-form { position: fixed; top: calc(var(--topbar-height) + 0.4rem); left: 0.5rem; right: 0.5rem; width: auto; margin-top: 0; max-height: calc(100vh - var(--topbar-height) - 1rem); overflow-y: auto; } .topbar select, .topbar .topbar__company-form select { width: 100%; min-width: 0; max-width: none; } .content { padding: 1rem; } .login-wrap { padding: 10vh 20px 32px; } .login-box { max-height: none; } } /* Pantallas muy estrechas (móvil vertical). El topbar suelta lo que estorba (build-badge), aplasta el resumen del estado de actividad a una sola línea y baja un poco la tipografía del popover para que no quepa cortado en cabeceras de 360 px. */ @media (max-width: 540px) { .topbar__build-badge { display: none; } .topbar__topo { width: 1.1cm; height: 1.1cm; } .topbar__topo--aur1 { box-shadow: 0 0 0 1px color-mix(in srgb, black 18%, var(--bulb-color)) inset, 0 0 8px 0 var(--bulb-glow), 0 0 0 3px color-mix(in srgb, var(--bulb-color) 55%, transparent); } .topbar__topo--aur2 { box-shadow: 0 0 0 1px color-mix(in srgb, black 18%, var(--bulb-color)) inset, 0 0 8px 0 var(--bulb-glow), 0 0 0 3px color-mix(in srgb, var(--bulb-color) 60%, transparent), 0 0 0 7px color-mix(in srgb, var(--bulb-color) 30%, transparent); } .topbar__topo--aur3 { box-shadow: 0 0 0 1px color-mix(in srgb, black 18%, var(--bulb-color)) inset, 0 0 8px 0 var(--bulb-glow), 0 0 0 3px color-mix(in srgb, var(--bulb-color) 60%, transparent), 0 0 0 7px color-mix(in srgb, var(--bulb-color) 40%, transparent), 0 0 0 11px color-mix(in srgb, var(--bulb-color) 18%, transparent); } .topbar__topo-mini { max-width: none; flex: 1; min-width: 0; } .topbar__topo-mini-tag { font-size: .65rem; padding: .05rem .35rem; } .topbar__topo-mini-empty { font-size: .72rem; } .topbar__mode-pill { padding: .2rem .55rem; } .topbar__mode-headline { font-size: .68rem; } .topbar__mode-sub { display: none; } .topbar__mode-flags { flex-wrap: wrap; gap: .2rem; } .topbar__mode-flag { font-size: .65rem; } .topbar__services-form { top: 0; left: 0; right: 0; bottom: 0; width: auto; max-height: none; border-radius: 0; font-size: .9rem; padding: .7rem .85rem 1.5rem; z-index: 250; } .topbar__services-close { top: .6rem; right: .7rem; font-size: 1.3rem; padding: .3rem .55rem; } .topbar__svc-section-title { font-size: .85rem; } .topbar__services-label { font-size: .82rem; line-height: 1.25; } } /* ── Live-Sync: banner de actualización ── */ .live-sync-banner { display: flex; align-items: center; gap: 10px; padding: 7px 14px; background: var(--info-bg, #e8f4fd); border: 1px solid var(--info-border, #b3d7f5); border-radius: 6px; margin-bottom: 12px; font-size: 13px; color: var(--info-text, #0c5460); opacity: 0; transform: translateY(-6px); transition: opacity 0.3s ease, transform 0.3s ease; } .live-sync-banner.is-visible { opacity: 1; transform: translateY(0); } .live-sync-banner__text { flex: 1; } .live-sync-banner__apply { padding: 3px 10px; font-size: 12px; border-radius: 4px; background: var(--color-primary); color: #fff; border: none; cursor: pointer; } .live-sync-banner__apply:hover { opacity: 0.85; } .live-sync-banner__close { background: none; border: none; font-size: 15px; cursor: pointer; color: inherit; opacity: 0.5; padding: 2px 5px; line-height: 1; } .live-sync-banner__close:hover { opacity: 1; } /* ============================================================= Restricciones por orden (acceptance-rules.php) — cards
que muestran resumen y se abren al pulsar para editar. ============================================================= */ .con-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.65rem; align-items: start; } .con-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: calc(var(--border-radius) + 4px); overflow: hidden; transition: border-color 180ms ease, box-shadow 180ms ease; } /* Al abrir, la card pasa a ocupar toda la fila para que el formulario tenga espacio cómodo (los campos siguen siendo legibles). */ .con-card[open] { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 8%, transparent); } .con-card__summary { list-style: none; cursor: pointer; padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.3rem; transition: background 120ms ease; } .con-card__summary::-webkit-details-marker { display: none; } .con-card__summary:hover { background: color-mix(in srgb, var(--color-text) 3%, var(--color-bg-card)); } .con-card[open] .con-card__summary { background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-card)); border-bottom: 1px solid var(--color-border); } .con-card__head { display: flex; align-items: center; gap: 0.6rem; } .con-card__title { flex: 1; font-weight: 700; font-size: 1rem; color: var(--color-text); } .con-card__badge { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; padding: 0.15rem 0.45rem; border-radius: 999px; border: 1px solid; } .con-card__badge--on { color: var(--color-success); background: color-mix(in srgb, var(--color-success) 12%, transparent); border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-border)); } .con-card__badge--off { color: var(--color-text-muted); background: color-mix(in srgb, var(--color-text) 5%, transparent); border-color: var(--color-border); } .con-card__chev { display: inline-flex; align-items: center; color: var(--color-text-muted); transition: transform 180ms ease; width: 12px; height: 8px; } .con-card[open] .con-card__chev { transform: rotate(180deg); } .con-card__rule { font-size: 0.84rem; color: var(--color-text-muted); line-height: 1.4; } .con-card__body { padding: 0.55rem 0.75rem 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; transform-origin: top center; animation: con-genie-open 320ms cubic-bezier(.16, 1, .3, 1); } @media (min-width: 900px) { /* En escritorio el cuerpo de la card pasa a grid 2 columnas; las partes que necesitan ancho completo (cabecera, Qué exige, Notas) se marcan con --wide y se extienden de 1 a -1. */ .con-card__body { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.75rem; align-items: stretch; } .con-card__row, .con-card__fieldset--wide, .con-card__notes { grid-column: 1 / -1; } } @keyframes con-genie-open { 0% { opacity: 0; transform: scale(0.72, 0.18) translateY(-12px); filter: blur(2px); } 50% { opacity: 0.9; transform: scale(1.02, 1.06) translateY(2px); filter: blur(0); } 100% { opacity: 1; transform: scale(1, 1) translateY(0); filter: blur(0); } } @media (prefers-reduced-motion: reduce) { .con-card__body { animation: none; } } .con-card__row { display: flex; align-items: end; gap: 0.65rem; flex-wrap: wrap; } .con-card__enabled { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--color-text-muted); padding-bottom: 0.55rem; } .con-card__name-field { flex: 1 1 260px; } .con-card__remove { margin-left: auto; } .con-card__fieldset { border: 1px dashed color-mix(in srgb, var(--color-text) 8%, var(--color-border)); border-radius: var(--border-radius); padding: 0.35rem 0.55rem 0.5rem; margin: 0; } .con-card__fieldset legend { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); padding: 0 0.3rem; } .con-card__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.35rem 0.55rem; } .con-card__hint { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.4; } .con-card__notes { width: 100%; } .con-multi { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-bg-card); color: var(--color-text); font-size: 0.88rem; font-family: inherit; min-height: 5rem; } .con-multi:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); } .con-multi option:checked { background: color-mix(in srgb, var(--color-primary) 22%, var(--color-bg-card)); color: var(--color-text); font-weight: 600; } .con-add-btn { margin-top: 0.7rem; } /* Toolbar arriba del checklist con "Marcar todos / Ninguno". */ .ar-checklist-wrap { display: flex; flex-direction: column; gap: 4px; } .ar-checklist-toolbar { display: flex; gap: 0.35rem; justify-content: flex-end; } .ar-checklist-btn { appearance: none; border: 1px solid var(--color-border); background: var(--color-bg-card); color: var(--color-text); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.2rem 0.55rem; border-radius: 999px; cursor: pointer; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; } .ar-checklist-btn:hover { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg-card)); border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); color: var(--color-primary-dark, var(--color-primary)); } .ar-checklist-btn--ghost { color: var(--color-text-muted); } /* Lista vertical con scroll para los campos "Solo estos choferes / modelos / versiones" de las restricciones por orden. Cada fila: nombre a la izquierda, casilla a la derecha. La fila entera cambia de color cuando está marcada. */ .ar-checklist { display: flex; flex-direction: column; gap: 1px; padding: 3px; border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-bg-card); max-height: 180px; min-height: 2.4rem; overflow-y: auto; } .ar-checklist__empty { font-size: 0.82rem; color: var(--color-text-muted); padding: 0.5rem 0.6rem; font-style: italic; } .ar-checkpill { display: flex; align-items: center; justify-content: flex-start; gap: 0.55rem; padding: 0.28rem 0.55rem; border-radius: 5px; background: transparent; border: 1px solid transparent; color: var(--color-text); font-size: 0.84rem; font-weight: 600; cursor: pointer; user-select: none; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; text-transform: uppercase; letter-spacing: 0.02em; } .ar-checkpill__text { flex: 1 1 auto; text-align: left; } .ar-checkpill__box { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--color-border); background: var(--color-bg-card); display: flex; align-items: center; justify-content: center; color: var(--color-text-inverse, #fff); font-size: 12px; line-height: 1; transition: background 140ms ease, border-color 140ms ease; } .ar-checkpill input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .ar-checkpill:hover { background: color-mix(in srgb, var(--color-primary) 6%, var(--color-bg-card)); border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); } .ar-checkpill.is-on, .ar-checkpill:has(input:checked) { background: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-card)); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); color: var(--color-primary-dark, var(--color-primary)); } .ar-checkpill.is-on .ar-checkpill__box, .ar-checkpill:has(input:checked) .ar-checkpill__box { background: var(--color-primary); border-color: var(--color-primary); } .ar-checkpill.is-on .ar-checkpill__box::after, .ar-checkpill:has(input:checked) .ar-checkpill__box::after { content: '\2713'; } .ar-checkpill:focus-within { outline: 2px solid color-mix(in srgb, var(--color-primary) 50%, transparent); outline-offset: -1px; } /* ============================================================= Excepciones por compañía (acceptance-rules.php) — multiselect con chips. Editorial técnico, sin colores hardcoded. ============================================================= */ .exc-row { --exc-radius-row: calc(var(--border-radius) + 4px); --exc-radius-chip: 999px; --exc-row-bg: var(--color-bg-card); --exc-row-bg-active: color-mix(in srgb, var(--color-primary) 4%, var(--color-bg-card)); --exc-row-border: var(--color-border); --exc-row-border-active: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); --exc-chip-bg: color-mix(in srgb, var(--color-text) 3%, var(--color-bg-card)); --exc-chip-border: var(--color-border); --exc-chip-text: var(--color-text); --exc-chip-bg-hover: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)); --exc-chip-border-hover: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); --exc-chip-bg-selected: color-mix(in srgb, var(--color-primary) 14%, var(--color-bg-card)); --exc-chip-border-selected: var(--color-primary); --exc-chip-text-selected: var(--color-primary-dark, var(--color-primary)); position: relative; padding: 1rem 1.1rem; background: var(--exc-row-bg); border: 1px solid var(--exc-row-border); border-radius: var(--exc-radius-row); transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease; animation: excRowIn 240ms cubic-bezier(.32,.72,0,1); } .exc-row + .exc-row { margin-top: 0.75rem; } .exc-rows-wrap > .exc-row:first-child { margin-top: 0.25rem; } .exc-row[data-has-selection="true"] { background: var(--exc-row-bg-active); border-color: var(--exc-row-border-active); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 6%, transparent); } .exc-row__head { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 0.8rem 1.2rem; margin-bottom: 0.95rem; } .exc-row__company { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; } .exc-row__company-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--color-text-muted, #888); } .exc-row__company-field { position: relative; display: block; } .exc-row__select { width: 100%; appearance: none; -webkit-appearance: none; min-height: 44px; padding: 0.55rem 2.2rem 0.55rem 0.85rem; background: var(--color-bg, #fff); border: 1px solid var(--color-border); border-radius: var(--border-radius); color: var(--color-text); font: inherit; font-weight: 600; font-size: 0.98rem; line-height: 1.2; cursor: pointer; transition: border-color 180ms ease, box-shadow 180ms ease; } .exc-row__select:hover { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); } .exc-row__select:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); } .exc-row__caret { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); width: 12px; height: 8px; color: var(--color-text-muted, #888); pointer-events: none; } .exc-row__counter { display: inline-flex; align-items: baseline; gap: 0.18rem; padding: 0.4rem 0.75rem; border-radius: 999px; background: color-mix(in srgb, var(--color-text) 4%, transparent); color: var(--color-text-muted, #888); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-size: 0.82rem; line-height: 1; white-space: nowrap; transition: background 220ms ease, color 220ms ease; } .exc-row[data-has-selection="true"] .exc-row__counter { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary-dark, var(--color-primary)); } .exc-row__counter-num { font-weight: 700; font-size: 0.92rem; } .exc-row__counter-sep { opacity: 0.45; margin: 0 0.05rem; } .exc-row__counter-total { font-weight: 600; } .exc-row__counter-label { margin-left: 0.3rem; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; font-weight: 600; } .exc-row__remove { appearance: none; background: transparent; border: 1px solid transparent; border-radius: 999px; width: 40px; height: 40px; color: var(--color-text-muted, #888); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 180ms ease, color 180ms ease, border-color 180ms ease; } .exc-row__remove svg { width: 16px; height: 16px; } .exc-row__remove:hover { background: var(--color-danger-bg); color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 25%, transparent); } .exc-row__remove:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 22%, transparent); } .exc-row__body { display: flex; flex-direction: column; gap: 0.75rem; } .exc-row__search { position: relative; display: none; } .exc-row[data-show-search="true"] .exc-row__search { display: block; } .exc-row__search-icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--color-text-muted, #888); pointer-events: none; } .exc-row__search-input { width: 100%; min-height: 40px; padding: 0.45rem 0.85rem 0.45rem 2.3rem; background: var(--color-bg, #fff); border: 1px solid var(--color-border); border-radius: var(--border-radius); color: var(--color-text); font: inherit; font-size: 0.9rem; transition: border-color 180ms ease, box-shadow 180ms ease; } .exc-row__search-input:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); } .exc-row__search-input::-webkit-search-cancel-button { cursor: pointer; } .exc-row__chips { display: flex; flex-direction: column; gap: 2px; padding: 4px; max-height: 260px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--border-radius); background: var(--color-bg-card); } .exc-row__empty { grid-column: 1 / -1; margin: 0; padding: 0.85rem; text-align: center; color: var(--color-text-muted, #888); font-size: 0.88rem; font-style: italic; border: 1px dashed var(--color-border); border-radius: var(--border-radius); } .exc-chip { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; } .exc-chip[hidden] { display: none; } .exc-chip input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .exc-chip__visual { display: flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0.45rem 0.85rem 0.45rem 0.55rem; background: var(--exc-chip-bg); border: 1px solid var(--exc-chip-border); border-radius: var(--exc-radius-chip); color: var(--exc-chip-text); font-size: 0.9rem; line-height: 1.2; font-weight: 500; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms cubic-bezier(.32,.72,0,1); user-select: none; } .exc-chip:hover .exc-chip__visual { background: var(--exc-chip-bg-hover); border-color: var(--exc-chip-border-hover); } .exc-chip input:focus-visible + .exc-chip__visual { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); border-color: var(--color-primary); } .exc-chip input:active + .exc-chip__visual { transform: scale(0.97); } .exc-chip:has(input:checked) .exc-chip__visual { background: var(--exc-chip-bg-selected); border-color: var(--exc-chip-border-selected); color: var(--exc-chip-text-selected); font-weight: 600; } .exc-chip__check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--color-border); background: var(--color-bg, #fff); display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: background 160ms ease, border-color 160ms ease, color 200ms ease; } .exc-chip__check svg { width: 12px; height: 12px; opacity: 0; transform: scale(0.4); transition: opacity 200ms ease, transform 240ms cubic-bezier(.32,.72,0,1); } .exc-chip:has(input:checked) .exc-chip__check { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-bg, #fff); } .exc-chip:has(input:checked) .exc-chip__check svg { opacity: 1; transform: scale(1); } .exc-chip__label { flex: 1; min-width: 0; } .exc-chip__tag { margin-left: auto; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--color-text-muted, #888); padding: 0.12rem 0.4rem; border: 1px dashed var(--color-border); border-radius: 999px; white-space: nowrap; } .exc-chip--historic .exc-chip__visual { font-style: italic; } .exc-add-btn { appearance: none; margin-top: 0.7rem; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.95rem 0.55rem 0.75rem; background: var(--color-bg-card); border: 1px dashed var(--color-border); border-radius: 999px; color: var(--color-text); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; } .exc-add-btn:hover { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)); border-color: var(--color-primary); color: var(--color-primary); } .exc-add-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); } .exc-add-btn__icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); font-weight: 700; line-height: 1; } @keyframes excRowIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 640px) { .exc-row__head { grid-template-columns: 1fr; } .exc-row__counter { justify-self: start; } .exc-row__remove { position: absolute; top: 0.6rem; right: 0.6rem; } .exc-row__chips { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .exc-row, .exc-chip__visual, .exc-chip__check, .exc-chip__check svg { animation: none !important; transition: none !important; } } /* ============================================================ Página acceptance-rules — formulario técnico editorial. Bloques numerados (01..10) con eyebrow, jerarquía clara y controles refinados. Coherente con .exc-row y .topbar__svc-*. ============================================================ */ .ar-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 1rem; padding-bottom: 5rem; align-items: start; } /* Bloques que necesitan ancho completo por su contenido (el de "Restricciones por orden" con sus cards anidadas). */ .ar-block--wide { grid-column: 1 / -1; } .ar-block { position: relative; display: grid; grid-template-columns: 1fr; gap: 0.6rem; padding: 0.85rem 1rem 1rem; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: calc(var(--border-radius) + 4px); transition: border-color 200ms ease, box-shadow 200ms ease; } .ar-block:focus-within { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 6%, transparent); } .ar-block__head { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; align-items: start; } .ar-block__num { grid-row: span 2; align-self: start; display: inline-flex; align-items: baseline; padding-top: 0.18rem; } .ar-block__num-digits { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-text-muted); padding: 0.18rem 0.5rem; background: color-mix(in srgb, var(--color-text) 4%, transparent); border: 1px solid color-mix(in srgb, var(--color-text) 6%, var(--color-border)); border-radius: 5px; min-width: 2.5em; text-align: center; } .ar-block__head-text { min-width: 0; } .ar-block__title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--color-text); letter-spacing: -0.005em; } .ar-block__hint { margin: 0.25rem 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--color-text-muted); max-width: 65ch; } .ar-block__hint code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.78rem; padding: 0.05rem 0.32rem; background: color-mix(in srgb, var(--color-text) 5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text) 6%, var(--color-border)); border-radius: 4px; color: var(--color-text); } .ar-block__body { margin-top: 0.3rem; } .ar-grid { display: grid; gap: 0.85rem; } .ar-grid--2 { grid-template-columns: 1fr 1fr; } @media (max-width: 640px) { .ar-grid--2 { grid-template-columns: 1fr; } } .ar-field { display: flex; flex-direction: column; gap: 0.35rem; } .ar-field__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--color-text-muted); } .ar-field__input { width: 100%; min-height: 42px; padding: 0.55rem 0.85rem; background: var(--color-bg, #fff); border: 1px solid var(--color-border); border-radius: var(--border-radius); color: var(--color-text); font: inherit; font-size: 0.95rem; font-weight: 500; line-height: 1.3; transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; } .ar-field__input:hover { border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); } .ar-field__input:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); } .ar-field__input::placeholder { color: color-mix(in srgb, var(--color-text-muted) 75%, transparent); } .ar-textarea { position: relative; background: var(--color-bg, #fff); border: 1px solid var(--color-border); border-radius: var(--border-radius); transition: border-color 180ms ease, box-shadow 180ms ease; } .ar-textarea:hover { border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); } .ar-textarea:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); } .ar-textarea__field { width: 100%; min-height: 8rem; padding: 0.85rem 1rem 0.6rem; margin: 0; background: transparent; border: 0; color: var(--color-text); font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: 0.88rem; line-height: 1.6; resize: vertical; outline: none; display: block; } .ar-textarea__field::placeholder { color: color-mix(in srgb, var(--color-text-muted) 65%, transparent); } .ar-textarea__foot { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.4rem 0.9rem 0.5rem; border-top: 1px solid color-mix(in srgb, var(--color-text) 4%, var(--color-border)); background: color-mix(in srgb, var(--color-text) 2%, transparent); border-radius: 0 0 calc(var(--border-radius) - 1px) calc(var(--border-radius) - 1px); font-size: 0.72rem; color: var(--color-text-muted); } .ar-textarea__hint { text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } .ar-textarea__count { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--color-text); font-weight: 700; } .ar-textarea__count [data-count-num] { color: var(--color-primary); margin-right: 0.15rem; } .ar-numfield { display: inline-flex; align-items: stretch; background: var(--color-bg, #fff); border: 1px solid var(--color-border); border-radius: var(--border-radius); overflow: hidden; transition: border-color 180ms ease, box-shadow 180ms ease; max-width: max-content; } .ar-numfield:hover { border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); } .ar-numfield:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); } .ar-numfield__input { width: 5.5rem; min-height: 42px; padding: 0.5rem 0.4rem 0.5rem 0.85rem; background: transparent; border: 0; color: var(--color-text); font: inherit; font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; outline: none; appearance: textfield; -moz-appearance: textfield; } .ar-numfield__input::-webkit-outer-spin-button, .ar-numfield__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ar-numfield__unit { display: inline-flex; align-items: center; padding: 0 0.7rem 0 0.55rem; background: color-mix(in srgb, var(--color-text) 3%, transparent); border-left: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-border)); color: var(--color-text-muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .ar-numfield__range { display: inline-flex; align-items: center; padding: 0 0.85rem; background: color-mix(in srgb, var(--color-text) 5%, transparent); border-left: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-border)); color: var(--color-text-muted); font-size: 0.7rem; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; } .ar-footer { position: sticky; bottom: 0; margin-top: 1rem; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; background: color-mix(in srgb, var(--color-bg-card) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-border)); box-shadow: 0 -8px 24px -10px color-mix(in srgb, var(--color-text) 12%, transparent); border-radius: 0 0 var(--border-radius-lg, calc(var(--border-radius) + 6px)) var(--border-radius-lg, calc(var(--border-radius) + 6px)); z-index: 5; } .ar-footer__hint { flex: 1; min-width: 0; font-size: 0.74rem; color: var(--color-text-muted); font-style: italic; line-height: 1.4; } .ar-submit { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.7rem 1.2rem 0.7rem 1.3rem; background: var(--color-primary); color: var(--color-bg, #fff); border: 0; border-radius: 999px; font: inherit; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; box-shadow: 0 1px 0 color-mix(in srgb, #000 25%, transparent) inset, 0 4px 12px -4px color-mix(in srgb, var(--color-primary) 50%, transparent); transition: background 180ms ease, transform 120ms ease, box-shadow 200ms ease; } .ar-submit:hover { background: var(--color-primary-dark, var(--color-primary)); transform: translateY(-1px); box-shadow: 0 1px 0 color-mix(in srgb, #000 25%, transparent) inset, 0 6px 16px -4px color-mix(in srgb, var(--color-primary) 60%, transparent); } .ar-submit:active { transform: translateY(0); } .ar-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent), 0 1px 0 color-mix(in srgb, #000 25%, transparent) inset; } .ar-submit__arrow { width: 14px; height: 14px; transition: transform 220ms cubic-bezier(.32,.72,0,1); } .ar-submit:hover .ar-submit__arrow { transform: translateX(2px); } @media (max-width: 640px) { .ar-block { padding: 0.95rem 1rem 1.05rem; } .ar-block__head { grid-template-columns: 1fr; gap: 0.35rem; } .ar-block__num { grid-row: auto; } .ar-block__num-digits { min-width: auto; display: inline-block; } .ar-footer { padding: 0.85rem 1rem; flex-direction: column-reverse; align-items: stretch; } .ar-submit { justify-content: center; } .ar-footer__hint { text-align: center; } } /* Banner de error de autosave con su botón cerrar a la derecha. */ .ar-save-err { display: flex; align-items: center; gap: 0.7rem; justify-content: space-between; } /* El display:flex de arriba sobreescribía el atributo HTML [hidden], y dejaba la franja vacía visible aunque no hubiera mensaje. */ .ar-save-err[hidden], .alert[hidden] { display: none !important; } .ar-save-err__msg { flex: 1 1 auto; } .ar-save-err__close { appearance: none; flex: 0 0 auto; padding: 0.3rem 0.8rem; border-radius: 6px; border: 1px solid currentColor; background: transparent; color: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; } .ar-save-err__close:hover { background: rgba(0,0,0,0.06); } @media (prefers-reduced-motion: reduce) { .ar-block, .ar-field__input, .ar-textarea, .ar-numfield, .ar-submit, .ar-submit__arrow { transition: none !important; } } /* ============================================================ Página settings — sistema de campos coherente con .ar-* y .exc-*. Densidad mayor (más campos por pantalla). ============================================================ */ .set-section { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: calc(var(--border-radius) + 4px); padding: 1rem 1.2rem 1.2rem; margin-bottom: 1.1rem; transition: border-color 200ms ease, box-shadow 200ms ease; } .set-section:focus-within { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 5%, transparent); } .set-section__head { margin: 0 0 0.85rem; padding-bottom: 0.65rem; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-border)); } .set-section__title { margin: 0; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.005em; color: var(--color-text); } .set-section__hint { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.45; max-width: 60ch; } .set-section__body { display: flex; flex-direction: column; gap: 1rem; } .set-field { display: grid; grid-template-columns: 1fr; gap: 0.35rem; } .set-field__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--color-text-muted); transition: color 160ms ease; } .set-field:focus-within .set-field__label { color: var(--color-primary-dark, var(--color-primary)); } .set-field__control { display: block; min-width: 0; } .set-field__hint { margin: 0.15rem 0 0; font-size: 0.76rem; color: var(--color-text-muted); line-height: 1.4; max-width: 70ch; } .set-field__input { width: 100%; min-height: 42px; padding: 0.55rem 0.85rem; background: var(--color-bg, #fff); border: 1px solid var(--color-border); border-radius: var(--border-radius); color: var(--color-text); font: inherit; font-size: 0.94rem; font-weight: 500; line-height: 1.3; transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; } .set-field__input:hover { border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); } .set-field__input:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); } .set-field__input::placeholder { color: color-mix(in srgb, var(--color-text-muted) 75%, transparent); } .set-field__input--password { padding-right: 3rem; font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; letter-spacing: 0.04em; } .set-field__password-wrap { position: relative; display: block; } .set-field__eye { position: absolute; top: 50%; right: 0.4rem; transform: translateY(-50%); width: 36px; height: 36px; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; } .set-field__eye:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); } .set-field__eye:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); } .set-field__eye-icon { width: 18px; height: 18px; display: block; } .set-field__eye-icon--hide { display: none; } .set-field__password-wrap[data-revealed="true"] .set-field__eye-icon--show { display: none; } .set-field__password-wrap[data-revealed="true"] .set-field__eye-icon--hide { display: block; } .set-field__password-wrap[data-revealed="true"] .set-field__eye { color: var(--color-primary); } .set-field__select-wrap { position: relative; display: block; } .set-field__select { width: 100%; appearance: none; -webkit-appearance: none; min-height: 42px; padding: 0.55rem 2.5rem 0.55rem 0.85rem; background: var(--color-bg, #fff); border: 1px solid var(--color-border); border-radius: var(--border-radius); color: var(--color-text); font: inherit; font-size: 0.94rem; font-weight: 500; line-height: 1.3; cursor: pointer; transition: border-color 180ms ease, box-shadow 180ms ease; } .set-field__select:hover { border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); } .set-field__select:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); } .set-field__select::-ms-expand { display: none; } .set-field__select-caret { position: absolute; right: 0.95rem; top: 50%; transform: translateY(-50%); width: 12px; height: 8px; color: var(--color-text-muted); pointer-events: none; transition: color 180ms ease; } .set-field__select-wrap:focus-within .set-field__select-caret { color: var(--color-primary); } .set-field__textarea { width: 100%; min-height: 6rem; padding: 0.7rem 0.95rem; background: var(--color-bg, #fff); border: 1px solid var(--color-border); border-radius: var(--border-radius); color: var(--color-text); font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: 0.86rem; line-height: 1.55; resize: vertical; transition: border-color 180ms ease, box-shadow 180ms ease; } .set-field__textarea:hover { border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); } .set-field__textarea:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); } .set-field__textarea::placeholder { color: color-mix(in srgb, var(--color-text-muted) 75%, transparent); } .set-field--toggle .set-field__control { padding-top: 0.1rem; } .settings-toggle-field { display: inline-flex; align-items: center; gap: 0.85rem; padding: 0.4rem 0.85rem 0.4rem 1rem; background: color-mix(in srgb, var(--color-text) 3%, transparent); border: 1px solid color-mix(in srgb, var(--color-text) 5%, var(--color-border)); border-radius: 999px; max-width: max-content; transition: background 180ms ease, border-color 180ms ease; } .settings-toggle-field:has(input:checked) { background: color-mix(in srgb, var(--color-success) 10%, var(--color-bg-card)); border-color: color-mix(in srgb, var(--color-success) 30%, var(--color-border)); } .settings-toggle-field__legend { font-size: 0.78rem; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.02em; white-space: nowrap; } .settings-toggle-field__control { display: inline-flex; margin: 0; cursor: pointer; } .set-field[aria-invalid="true"] .set-field__input, .set-field[aria-invalid="true"] .set-field__select, .set-field[aria-invalid="true"] .set-field__textarea { border-color: var(--color-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 18%, transparent); } @media (max-width: 640px) { .set-section { padding: 0.85rem 0.95rem 1rem; } .set-section__body { gap: 0.85rem; } } @media (prefers-reduced-motion: reduce) { .set-field__label, .set-field__input, .set-field__select, .set-field__textarea, .set-field__eye, .set-field__eye-icon, .set-field__select-caret { transition: none !important; } } .set-field .settings-hint { display: none; } /* ============================================================ Página recordings — cards densas tipo "ticket". 3-4 por fila en desktop, 2 en tablet, 1 en móvil. Coherente con .ar-block, .set-section, .exc-chip. ============================================================ */ .rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 0.85rem; align-items: start; } .rec-card { position: relative; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.85rem 0.95rem 0.95rem; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: calc(var(--border-radius) + 2px); transition: border-color 200ms ease, box-shadow 200ms ease, transform 160ms ease; } .rec-card:hover { border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border)); box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--color-text) 12%, transparent); } .rec-card--focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent), 0 4px 16px -4px color-mix(in srgb, var(--color-primary) 30%, transparent); } .rec-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; } .rec-card__when { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; padding-right: 0.5rem; border-right: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent); } .rec-card__day { font-size: 0.82rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.005em; font-variant-numeric: tabular-nums; } .rec-card__time { font-size: 0.74rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; margin-top: 0.05rem; } .rec-card__tags { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; } .rec-tag { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.5rem; background: color-mix(in srgb, var(--color-text) 4%, transparent); border: 1px solid color-mix(in srgb, var(--color-text) 6%, var(--color-border)); border-radius: 999px; font-size: 0.68rem; font-weight: 700; line-height: 1.2; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .rec-tag svg { width: 10px; height: 10px; flex-shrink: 0; } .rec-tag--inbound { background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg-card)); border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border)); color: var(--color-primary-dark, var(--color-primary)); } .rec-tag--outbound { background: var(--color-warning-bg); border-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-border)); color: var(--color-warning); } .rec-tag--provider { padding-left: 0.45rem; color: var(--color-text); } .rec-tag__dot { width: 6px; height: 6px; border-radius: 50%; } .rec-tag--provider-gemini .rec-tag__dot { background: var(--color-success); } .rec-tag--provider-openai .rec-tag__dot { background: var(--color-primary); } .rec-card__body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } .rec-card__identity { margin: 0; font-size: 0.86rem; font-weight: 600; line-height: 1.3; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .rec-card__phones { margin: 0; display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; min-width: 0; } .rec-card__phone { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; } .rec-card__phone:first-child { text-align: left; } .rec-card__phone:last-child { text-align: right; } .rec-card__phone-arrow { width: 12px; height: 12px; color: color-mix(in srgb, var(--color-text-muted) 70%, transparent); flex-shrink: 0; } .rec-card__meta { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.35rem; font-size: 0.74rem; color: var(--color-text-muted); line-height: 1.3; } .rec-meta-sep { color: color-mix(in srgb, var(--color-text-muted) 50%, transparent); } .rec-meta-item { font-variant-numeric: tabular-nums; } .rec-meta-item--cost { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--color-text); font-weight: 600; } .rec-meta-item--type { color: var(--color-text); font-weight: 600; } .rec-meta-item--query { color: var(--color-primary); } .rec-meta-item--status { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; font-size: 0.63rem; padding: 0.1rem 0.45rem; border-radius: 4px; background: color-mix(in srgb, var(--color-text) 6%, transparent); } .rec-meta-item--status.status--ok { background: var(--color-success-bg); color: var(--color-success); } .rec-meta-item--status.status--active { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary-dark, var(--color-primary)); } .rec-meta-item--status.status--error { background: var(--color-danger-bg); color: var(--color-danger); } .rec-card__refs { margin: 0.1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.25rem; } .rec-ref-pill { display: inline-flex; align-items: stretch; border: 1px solid color-mix(in srgb, var(--color-text) 6%, var(--color-border)); border-radius: 5px; overflow: hidden; font-size: 0.66rem; line-height: 1.4; max-width: 100%; } .rec-ref-pill__k { padding: 0.1rem 0.4rem; background: color-mix(in srgb, var(--color-text) 4%, transparent); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; white-space: nowrap; } .rec-ref-pill__v { padding: 0.1rem 0.45rem; color: var(--color-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14rem; } .rec-card__players { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.55rem 0.6rem; background: color-mix(in srgb, var(--color-text) 2.5%, transparent); border: 1px solid color-mix(in srgb, var(--color-text) 4%, var(--color-border)); border-radius: 8px; } .rec-player { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.4rem 0.55rem; } .rec-player__label { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); min-width: 2.8em; } .rec-player--secondary .rec-player__label { color: color-mix(in srgb, var(--color-text-muted) 80%, transparent); } .rec-player audio { height: 30px; width: 100%; min-width: 0; } .rec-player audio::-webkit-media-controls-overflow-button, .rec-player audio::-webkit-media-controls-mute-button, .rec-player audio::-webkit-media-controls-volume-slider, .rec-player audio::-webkit-media-controls-volume-control-container { display: none; } .rec-player audio::-webkit-media-controls-panel { background: transparent; } .rec-player__dl { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: transparent; border: 1px solid color-mix(in srgb, var(--color-text) 8%, var(--color-border)); color: var(--color-text-muted); text-decoration: none; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; } .rec-player__dl svg { width: 12px; height: 12px; } .rec-player__dl:hover { background: color-mix(in srgb, var(--color-primary) 8%, transparent); color: var(--color-primary); border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); } .rec-player-empty { margin: 0; text-align: center; font-size: 0.74rem; color: var(--color-text-muted); font-style: italic; padding: 0.35rem 0; } .rec-card__actions { display: flex; gap: 0.4rem; margin-top: 0.1rem; } .rec-action { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.4rem 0.7rem; background: var(--color-bg, #fff); border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text); font: inherit; font-size: 0.76rem; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .rec-action svg { width: 13px; height: 13px; flex-shrink: 0; } .rec-action:hover { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-card)); border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border)); color: var(--color-primary-dark, var(--color-primary)); } .rec-action:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent); border-color: var(--color-primary); } .rec-action--log:hover { background: color-mix(in srgb, var(--color-warning) 10%, var(--color-bg-card)); border-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-border)); color: var(--color-warning); } @media (max-width: 540px) { .rec-grid { grid-template-columns: 1fr; gap: 0.65rem; } .rec-card { padding: 0.75rem 0.85rem 0.85rem; } .rec-card__head { flex-direction: column; align-items: stretch; } .rec-card__when { flex-direction: row; align-items: baseline; gap: 0.4rem; border-right: 0; padding-right: 0; } .rec-card__tags { justify-content: flex-start; } } @media (prefers-reduced-motion: reduce) { .rec-card, .rec-action, .rec-player__dl { transition: none !important; } } /* ============================================================ Bloques desplegables superpuestos (.ar-block.ar-block--collapsible) ============================================================ */ /* Wrapper único de página que contiene TODOS los bloques colapsables de una página, estén dentro de forms o sueltos. Los
hijos usan display:contents para que sus sean hijos directos del grid de la página. */ .ar-page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; position: relative; padding-bottom: 2rem; } .ar-page-grid > form, .ar-page-grid .ar-form { display: contents; } /* Los bloques anchos (.ar-block--wide) ocupan toda la fila del grid. */ .ar-page-grid .ar-block--wide { grid-column: 1 / -1; } /* Bloques colapsables: cabecera visible, body oculto por defecto, body abre FLOTANDO (position:absolute) sin desplazar a los demás. */ .ar-block.ar-block--collapsible { position: relative; cursor: pointer; transition: box-shadow .12s, border-color .12s; } .ar-block.ar-block--collapsible:hover { border-color: var(--color-primary, #2563eb); box-shadow: 0 4px 14px rgba(0,0,0,.1); } /* Body OCULTO por defecto. !important para ganarle a cualquier regla inline que defina display: grid|block sin la clase --open. */ .ar-block.ar-block--collapsible > .ar-block__body { display: none !important; } /* Cuando está abierto: cabecera mantiene posición, body se despliega flotando hacia abajo. */ .ar-block.ar-block--collapsible.ar-block--open { z-index: 50; box-shadow: 0 8px 24px rgba(0,0,0,.18); border-color: var(--color-primary, #2563eb); } .ar-block.ar-block--collapsible.ar-block--open > .ar-block__body { display: block !important; position: absolute; left: -1px; right: auto; top: 100%; background: var(--color-bg-card, #fff); border: 1px solid var(--color-primary, #2563eb); border-top: 0; border-radius: 0 0 10px 10px; padding: 1rem; box-shadow: 0 8px 24px rgba(0,0,0,.18); min-width: max(100%, 420px); max-width: min(960px, calc(100vw - 2rem)); max-height: calc(100vh - 12rem); overflow-y: auto; } /* Si el bloque está en la zona derecha del viewport y no cabe abrirse hacia la derecha, el JS le añade --align-right y el body se ancla al borde derecho del bloque para crecer hacia la izquierda. */ .ar-block.ar-block--collapsible.ar-block--open.ar-block--align-right > .ar-block__body { left: auto; right: -1px; border-radius: 10px 0 10px 10px; } /* Bloque 01 (2 columnas): cuando abierto el body es grid de 2 cols. */ .ar-block.ar-block--collapsible.ar-block--two-cols.ar-block--open > .ar-block__body { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; min-width: max(100%, 720px); } @media (max-width: 720px) { .ar-block.ar-block--collapsible.ar-block--two-cols.ar-block--open > .ar-block__body { grid-template-columns: 1fr; min-width: max(100%, 280px); } } /* Bloques --wide: al abrir, el body ocupa todo el ancho disponible (no flota, porque ya es ancho completo). */ .ar-block.ar-block--collapsible.ar-block--wide.ar-block--open > .ar-block__body { position: static; border-radius: 8px; margin-top: 0.6rem; min-width: 0; max-width: none; box-shadow: none; } /* Chevron en el head para indicar que se puede abrir. */ .ar-block.ar-block--collapsible .ar-block__head::after { content: '▾'; margin-left: auto; color: var(--color-text-muted, #888); font-size: 0.9rem; transition: transform .15s; align-self: center; } .ar-block.ar-block--collapsible.ar-block--open .ar-block__head::after { transform: rotate(180deg); color: var(--color-primary, #2563eb); }