/* ─── Design tokens ─────────────────────────────────────────────────────── */ :root { --sidebar-width: 244px; --topbar-height: 56px; --canvas: #F5F6FB; --surface: #FFFFFF; --surface-sunken: #F1F2F8; --surface-hover: #EAECF6; --border: #E4E6F0; --border-strong: #CDD1E2; --text-1: #12131C; --text-2: #585F73; --text-3: #8B90A4; --accent: #3B4CE0; --accent-hover: #2E3ECB; --accent-2: #8B5CF6; --accent-soft: #EDEEFE; --accent-soft-strong: #DBDDFC; --success: #0E9463; --success-soft: #E1F7EC; --warning: #B4720C; --warning-soft: #FBF0DA; --danger: #DA3B5C; --danger-soft: #FCE7EC; /* identidad por tipo de operación / dominio (coherente con el resto de la app) */ --cat-montaje: #2563EB; --cat-montaje-soft: #DBEAFE; --cat-arreglo: #0E9463; --cat-arreglo-soft: #DCFCE7; --cat-medicion: #0E9E93; --cat-medicion-soft: #E0F7F4; --cat-presupuesto: #7C3AED; --cat-presupuesto-soft: #F1EDFF; --cat-material: #92400E; --cat-material-soft: #FDF0E1; --shadow-sm: 0 1px 2px rgba(20,20,40,0.06); --shadow-md: 0 6px 20px rgba(20,20,40,0.08), 0 1px 2px rgba(20,20,40,0.05); --shadow-pop: 0 14px 34px rgba(20,20,40,0.16), 0 2px 8px rgba(20,20,40,0.08); --shadow-glow: 0 8px 22px -6px rgba(59,76,224,0.5); --radius: 12px; --radius-sm: 8px; /* compat: nombres antiguos usados en algún inline style suelto */ --color-primary: var(--accent); --color-success: var(--success); --color-danger: var(--danger); --color-warning: var(--warning); --color-bg: var(--canvas); --color-sidebar: #14151F; --color-sidebar-text: #9198AC; --color-sidebar-active: #fff; --color-card: var(--surface); } /* ─── Modo oscuro ──────────────────────────────────────────────────────── Se cambian los tokens, no las reglas: como casi todo el CSS ya los usa, el tema entero cae de aquí. Lo que no se pintaba con tokens se corrige al final de este bloque. No es el claro invertido. En oscuro los grises altos deslumbran y los saturados vibran, así que las superficies suben poco a poco desde un negro azulado y los colores de estado se aclaran para que contrasten sin gritar. El tema lo pone un script en el antes de pintar: aplicarlo desde el final de la página produce un fogonazo blanco en cada carga. */ :root[data-tema="oscuro"] { --canvas: #0E1016; --surface: #171A22; --surface-sunken: #12141B; --surface-hover: #212530; --border: #272C37; --border-strong: #39404E; --text-1: #E9EBF2; --text-2: #A5ACBD; --text-3: #767D90; --accent: #6D7BFF; --accent-hover: #8590FF; --accent-2: #A78BFA; --accent-soft: #1D2140; --accent-soft-strong: #262C55; --success: #34D399; --success-soft: #0F2A22; --warning: #FBBF24; --warning-soft: #2E2411; --danger: #F87171; --danger-soft: #331A20; --cat-montaje: #60A5FA; --cat-montaje-soft: #16243C; --cat-arreglo: #34D399; --cat-arreglo-soft: #0F2A22; --cat-medicion: #2DD4BF; --cat-medicion-soft: #0D2A28; --cat-presupuesto: #A78BFA; --cat-presupuesto-soft: #221A3B; --cat-material: #FBBF24; --cat-material-soft: #2E2411; /* Las sombras de color no se ven sobre fondo oscuro: se hacen negras y más marcadas, que es lo que separa una tarjeta del fondo aquí. */ --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow-md: 0 6px 20px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35); --shadow-pop: 0 14px 34px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4); --shadow-glow: 0 8px 22px -6px rgba(109,123,255,.45); /* La barra lateral ya era oscura: se separa un poco del lienzo para que no se fundan en una sola mancha. */ --color-sidebar: #101219; --color-sidebar-text: #8B92A6; --color-sidebar-active: #fff; } /* Lo que estaba escrito a mano y no seguía a los tokens. */ :root[data-tema="oscuro"] .topbar { background: rgba(23,26,34,.9); } :root[data-tema="oscuro"] img[src*="logo"] { filter: brightness(1.15); } /* ─── Cabecera de tarjeta que despliega ────────────────────────────────── Para lo que se consulta de vez en cuando -el histórico- y no merece ocupar sitio siempre. Lo de uso diario NO se pliega: esconderlo tras un clic sólo añade trabajo. La flecha gira al abrir. Sin eso, la cabecera no dice si lo que hay debajo está abierto o cerrado, y se acaba pulsando dos veces para comprobarlo. */ .card-header.desplegable { cursor: pointer; transition: background .15s; } .card-header.desplegable:hover { background: var(--surface-hover) !important; } .card-header.desplegable .bi-chevron-down { transition: transform .2s; } .card-header.desplegable[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); } /* ── Utilidades de Bootstrap que son claras POR DEFINICIÓN ──────────────── `data-bs-theme` adapta las utilidades semánticas -`bg-body`, `text-body`- y los componentes, pero no éstas: `bg-white` significa blanco, y en un tema oscuro sigue siendo blanco. En estas plantillas hay 41 `bg-white`, 63 `bg-light` y 46 `text-dark`, casi todas en cabeceras de tarjeta y de tabla, que era justo lo que quedaba como franjas blancas. Se traducen aquí en vez de recorrer veinticinco plantillas: así el día que se añada una pantalla nueva con `bg-white` tampoco se romperá. */ :root[data-tema="oscuro"] .bg-white { background-color: var(--surface) !important; } :root[data-tema="oscuro"] .bg-light { background-color: var(--surface-sunken) !important; } /* `text-dark` va casi siempre pegado a `bg-light` -en las insignias de conteo-, así que sin esto quedaría texto casi negro sobre fondo oscuro. */ :root[data-tema="oscuro"] .text-dark { color: var(--text-1) !important; } :root[data-tema="oscuro"] .text-black-50 { color: var(--text-3) !important; } /* `bg-dark` es la insignia de "cancelado": casi negra, que en tema claro se lee perfectamente y en oscuro desaparecía contra el fondo. Se aclara lo justo para que se distinga sin llamar más la atención que un estado activo. */ :root[data-tema="oscuro"] .badge.bg-dark { background-color: var(--surface-hover) !important; color: var(--text-2) !important; border: 1px solid var(--border-strong); } :root[data-tema="oscuro"] .table-light, :root[data-tema="oscuro"] .table > thead.table-light > tr > th { --bs-table-bg: var(--surface-sunken); --bs-table-color: var(--text-2); background-color: var(--surface-sunken) !important; color: var(--text-2) !important; } /* Las cabeceras de tabla llevan `bg-light` y heredaban el color del tema claro, que sobre fondo oscuro se leía a duras penas. */ :root[data-tema="oscuro"] thead.bg-light th, :root[data-tema="oscuro"] .card-header.bg-white { color: var(--text-2); } /* Bootstrap pinta el fondo de una fila de tabla con su propia variable; sin esto, al pasar por encima aparecía una banda clara. */ :root[data-tema="oscuro"] .table { --bs-table-bg: transparent; --bs-table-color: var(--text-1); --bs-table-hover-bg: var(--surface-hover); --bs-table-hover-color: var(--text-1); --bs-table-border-color: var(--border); } /* ─── Reset / Base ──────────────────────────────────────────────────────── */ * { box-sizing: border-box; } body { font-family: -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, ui-sans-serif, "Helvetica Neue", Arial, sans-serif; background: var(--canvas); color: var(--text-1); margin: 0; padding: 0; font-size: 14px; } a { color: var(--accent); } h1, h2, h3, h4, h5, h6 { letter-spacing: -0.01em; } .mono { font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; } /* ─── Sidebar ───────────────────────────────────────────────────────────── */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh; background: var(--color-sidebar); display: flex; flex-direction: column; z-index: 1000; overflow-y: auto; border-right: 1px solid rgba(255,255,255,0.06); } .sidebar-brand { padding: 18px 18px 16px; font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em; color: #fff; display: flex; align-items: center; gap: 9px; } .sidebar-brand i { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; box-shadow: 0 3px 10px -2px rgba(59,76,224,0.6); } .empresa-badge { margin: 0 12px 10px; padding: 10px 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-sm); color: #fff; font-size: 12.5px; } .empresa-badge .badge { font-weight: 600; border-radius: 100px; } .sidebar-nav { flex: 1; padding: 4px 10px; } .sidebar-nav .nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 1px; color: var(--color-sidebar-text); text-decoration: none; font-size: 13.5px; font-weight: 600; border-radius: var(--radius-sm); transition: background .12s ease, color .12s ease; } .sidebar-nav .nav-link i { font-size: 15px; width: 16px; text-align: center; color: #6B7185; } .sidebar-nav .nav-link:hover { color: #fff; background: rgba(255,255,255,0.06); } .sidebar-nav .nav-link.active { color: #fff; background: linear-gradient(135deg, rgba(59,76,235,0.35), rgba(139,92,246,0.22)); } .sidebar-nav .nav-link.active i { color: #B8C2FF; } .nav-section { padding: 16px 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: #565C70; text-transform: uppercase; } .sidebar-footer { padding: 12px; border-top: 1px solid rgba(255,255,255,0.08); } /* ─── Main Content ──────────────────────────────────────────────────────── */ .main-content { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; } .topbar { height: var(--topbar-height); background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 22px; position: sticky; top: 0; z-index: 100; } .page-content { padding: 24px 26px 48px; flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; } /* Paginas que aprovechan la pantalla entera: los paneles. En un formulario el ancho limitado ayuda a leer; en un panel solo deja margenes vacios. */ .page-content.ancho-completo { max-width: none; padding: 16px 20px 20px; } /* ─── Cards ─────────────────────────────────────────────────────────────── */ .card { position: relative; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); background: var(--surface); } /* Barra superior de color por categoría (identidad visual de cada bloque). overflow:hidden solo en estas tarjetas (no en .card en general) para no recortar desplegables/menús que se abran dentro de otras tarjetas, como los filtros. */ .card.cat-montaje, .card.cat-arreglo, .card.cat-medicion, .card.cat-presupuesto, .card.cat-accent { overflow: hidden; } .card.cat-montaje::before, .card.cat-arreglo::before, .card.cat-medicion::before, .card.cat-presupuesto::before, .card.cat-accent::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2; } .card.cat-montaje::before { background: linear-gradient(90deg, var(--cat-montaje), #93C5FD); } .card.cat-arreglo::before { background: linear-gradient(90deg, var(--cat-arreglo), #86EFAC); } .card.cat-medicion::before { background: linear-gradient(90deg, var(--cat-medicion), #5EEAD4); } .card.cat-presupuesto::before{ background: linear-gradient(90deg, var(--cat-presupuesto), #C4B5FD); } .card.cat-accent::before { background: linear-gradient(90deg, var(--accent), var(--accent-2)); } /* Icono de color junto al título de cada tarjeta */ .card-title-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; margin-right: 9px; font-size: 13px; vertical-align: middle; } .card-title-ico.ico-montaje { background: var(--cat-montaje-soft); color: var(--cat-montaje); } .card-title-ico.ico-arreglo { background: var(--cat-arreglo-soft); color: var(--cat-arreglo); } .card-title-ico.ico-medicion { background: var(--cat-medicion-soft); color: var(--cat-medicion); } .card-title-ico.ico-presupuesto{ background: var(--cat-presupuesto-soft); color: var(--cat-presupuesto); } .card-title-ico.ico-accent { background: var(--accent-soft); color: var(--accent); } .card-title-ico.ico-slate { background: var(--surface-sunken); color: var(--text-3); } .card-header { border-bottom: 1px solid var(--border) !important; border-radius: var(--radius) var(--radius) 0 0 !important; font-weight: 700; padding: 13px 18px; } .card-body { padding: 18px; } .stat-card { border-radius: var(--radius); padding: 16px 18px; color: var(--text-1); background: var(--surface); border: 1px solid var(--border); position: relative; overflow: hidden; box-shadow: var(--shadow-sm); } .stat-card .stat-value { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0 0; color: var(--text-1); } .stat-card .stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--text-3); } .stat-card .stat-icon { position: absolute; right: 14px; top: 14px; font-size: 17px; width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; opacity: 1; } .stat-bg-blue .stat-icon { background: var(--cat-montaje-soft); color: var(--cat-montaje); } .stat-bg-green .stat-icon { background: var(--success-soft); color: var(--success); } .stat-bg-red .stat-icon { background: var(--danger-soft); color: var(--danger); } .stat-bg-orange .stat-icon { background: var(--warning-soft); color: var(--warning); } .stat-bg-purple .stat-icon { background: var(--cat-presupuesto-soft); color: var(--cat-presupuesto); } /* compat: las clases stat-bg-* ya no pintan el fondo entero de la tarjeta, solo el icono */ .stat-bg-blue, .stat-bg-green, .stat-bg-red, .stat-bg-orange, .stat-bg-purple { background: var(--surface); } .bg-purple { background-color: var(--cat-presupuesto) !important; color: #fff !important; } .bg-brown { background-color: var(--cat-material) !important; color: #fff !important; } /* Filas operaciones: acento lateral en la primera celda en vez del pastel plano de antes (box-shadow en , no en , para que se pinte de forma fiable con border-collapse) */ .fila-montaje td:first-child { box-shadow: inset 4px 0 0 0 var(--cat-montaje); } .fila-arreglo td:first-child { box-shadow: inset 4px 0 0 0 var(--cat-arreglo); } .tipo-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 100px; font-size: 12px; font-weight: 700; } .tipo-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .tipo-pill { background: var(--surface-sunken); color: var(--text-2); } .tipo-pill.montaje { background: var(--cat-montaje-soft); color: var(--cat-montaje); } .tipo-pill.arreglo { background: var(--cat-arreglo-soft); color: var(--cat-arreglo); } .tipo-pill.medicion { background: var(--cat-medicion-soft); color: var(--cat-medicion); } /* ─── Tables ─────────────────────────────────────────────────────────────── */ .table th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); border-top: none; border-bottom: 1px solid var(--border); padding: 10px 14px; background: var(--surface-sunken); } .table td { font-size: 13.5px; vertical-align: middle; padding: 11px 14px; border-bottom-color: var(--border); } .table-hover > tbody > tr:hover > * { background-color: var(--surface-hover); } /* ─── Badges estado (mismo significado de siempre, colores refinados) ─────── */ .badge { font-weight: 650; border-radius: 100px; letter-spacing: 0.01em; } .badge-pendiente { background: var(--warning-soft); color: var(--warning); } .badge-cobrada { background: var(--success-soft); color: var(--success); } .badge-pagada { background: var(--success-soft); color: var(--success); } .badge-vencida { background: var(--danger-soft); color: var(--danger); } .badge-cancelada { background: var(--surface-sunken); color: var(--text-3); } .badge-cancelado { background: var(--surface-sunken); color: var(--text-3); } .badge-en_curso { background: var(--cat-montaje-soft); color: var(--cat-montaje); } .badge-finalizado { background: var(--success-soft); color: var(--success); } .badge-cobrado { background: var(--success-soft); color: var(--success); } .badge-pedido { background: var(--warning-soft); color: var(--warning); } .badge-recibido { background: var(--success-soft); color: var(--success); } .bg-warning { background-color: var(--warning-soft) !important; color: var(--warning) !important; } .bg-danger { background-color: var(--danger-soft) !important; color: var(--danger) !important; } .bg-success { background-color: var(--success-soft) !important; color: var(--success) !important; } .bg-info { background-color: var(--cat-montaje-soft) !important; color: var(--cat-montaje) !important; } .bg-secondary { background-color: var(--surface-sunken) !important; color: var(--text-2) !important; } .bg-dark { background-color: var(--text-1) !important; color: #fff !important; } .bg-light { background-color: var(--surface-sunken) !important; color: var(--text-2) !important; } /* ─── Page header ────────────────────────────────────────────────────────── */ .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; } .page-header h1 { font-size: 23px; font-weight: 800; color: var(--text-1); margin: 0; letter-spacing: -0.02em; } /* ─── Botones ────────────────────────────────────────────────────────────── */ .btn { border-radius: var(--radius-sm); font-weight: 650; font-size: 13.5px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .btn-sm { border-radius: 7px; font-size: 12.5px; } .btn-xs { padding: 2px 9px; font-size: 11.5px; border-radius: 6px; } /* Los botones de la columna "Acciones" de una lista. * * Sueltos dentro del se acomodaban como podian: en una fila salian dos * arriba y uno abajo, en la siguiente dos y dos, y el mismo boton caia en un * sitio distinto en cada linea. Para dar a "borrar" habia que buscarlo. * * Ahora son CUATRO HUECOS FIJOS, siempre en el mismo orden y siempre del mismo * ancho. Cuando una accion no aplica -una factura ya cobrada no se cobra otra * vez- el hueco se queda vacio pero sigue ocupando sitio, que es lo que hace * que los de todas las filas queden en columna. */ .acciones-fila { display: flex; flex-wrap: nowrap; gap: 4px; justify-content: flex-end; } .acciones-fila > * { flex: 0 0 auto; margin: 0; } .acciones-fila .hueco { /* El mismo ancho que un `.btn-xs` con un icono dentro. */ width: 30px; min-height: 1px; } .acciones-fila .btn-xs { width: 30px; padding-left: 0; padding-right: 0; } /* El
que envuelve el boton de borrar no debe contar como una caja mas. */ .acciones-fila form { display: contents; } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: 0 3px 10px -3px rgba(59,76,224,0.5); } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(135deg, var(--accent-hover), var(--accent-2)); border-color: transparent; transform: translateY(-1px); } .btn-outline-primary { color: var(--accent); border-color: var(--accent-soft-strong); } .btn-outline-primary:hover { background: var(--accent); border-color: var(--accent); } .btn-outline-secondary { color: var(--text-2); border-color: var(--border-strong); } .btn-outline-secondary:hover { background: var(--surface-hover); color: var(--text-1); border-color: var(--border-strong); } .btn-outline-success { color: var(--success); border-color: #B9E7D2; } .btn-outline-success:hover { background: var(--success); border-color: var(--success); } .btn-outline-danger { color: var(--danger); border-color: #F3C3D0; } .btn-outline-danger:hover { background: var(--danger); border-color: var(--danger); } .btn-outline-warning { color: var(--warning); border-color: #F0DBAE; } .btn-outline-warning:hover { background: var(--warning); border-color: var(--warning); color: #fff; } .btn-outline-info { color: var(--cat-montaje); border-color: #BFD3FA; } .btn-outline-info:hover { background: var(--cat-montaje); border-color: var(--cat-montaje); } .btn-outline-dark { color: var(--text-1); border-color: var(--border-strong); } .btn-outline-dark:hover { background: var(--text-1); border-color: var(--text-1); } /* ─── Alertas inline ─────────────────────────────────────────────────────── */ .alerta-box { border-left: 4px solid; border-radius: var(--radius-sm); padding: 11px 15px; margin-bottom: 8px; font-size: 13px; } .alerta-box.warning { border-color: var(--warning); background: var(--warning-soft); } .alerta-box.danger { border-color: var(--danger); background: var(--danger-soft); } .alerta-box.info { border-color: var(--accent); background: var(--accent-soft); } .alert { border-radius: var(--radius-sm); border: 1px solid transparent; } .alert-success { background: var(--success-soft); color: #0B6E4A; border-color: #BEE9D4; } .alert-danger { background: var(--danger-soft); color: #A32846; border-color: #F5C4D3; } .alert-warning { background: var(--warning-soft); color: #8A5809; border-color: #F0DBAE; } .alert-info { background: var(--accent-soft); color: var(--accent-hover); border-color: var(--accent-soft-strong); } /* ─── Forms ──────────────────────────────────────────────────────────────── */ .form-label { font-size: 12.5px; font-weight: 700; color: var(--text-2); } .form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--border-strong); font-size: 13.5px; } .form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-strong); } /* ─── Responsive sidebar ─────────────────────────────────────────────────── */ @media (max-width: 768px) { .sidebar { transform: translateX(-100%); transition: transform 0.25s ease; } .sidebar.show { transform: translateX(0); } .main-content { margin-left: 0; } } /* ─── Login page ─────────────────────────────────────────────────────────── */ .login-wrapper { min-height: 100vh; background: radial-gradient(700px 420px at 15% -10%, rgba(139,92,246,0.35), transparent 60%), radial-gradient(700px 420px at 85% 110%, rgba(59,76,224,0.35), transparent 60%), linear-gradient(135deg, #14151F 0%, #1E2036 100%); display: flex; align-items: center; justify-content: center; } .login-card { background: #fff; border-radius: 18px; padding: 40px; width: 100%; max-width: 400px; box-shadow: 0 24px 70px rgba(0,0,0,0.35); } .login-card h2 { font-size: 23px; font-weight: 800; color: var(--text-1); } /* ─── Ficha de operación: cabecera + tira de datos ──────────────────────── */ .op-hero { position: relative; border-radius: var(--radius); padding: 20px 24px; margin-bottom: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); } .op-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(420px 220px at -4% -30%, rgba(59,76,224,0.16), transparent 65%), radial-gradient(360px 200px at 104% -20%, rgba(124,58,237,0.14), transparent 60%); } .op-hero > * { position: relative; z-index: 1; } .op-hero h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; } .acciones-card { border: 1px solid var(--accent-soft-strong); } .btn-cta-primary { display: block; width: 100%; text-align: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; border-radius: var(--radius-sm); padding: 10px 14px; font-weight: 700; font-size: 14px; box-shadow: var(--shadow-glow); } .btn-cta-primary:hover { color: #fff; filter: brightness(1.05); } /* Fila resumen clicable (presupuestos, etc.) que despliega el detalle */ [data-bs-toggle="collapse"].btn { border-radius: 0; color: var(--text-1); font-weight: 500; } [data-bs-toggle="collapse"].btn:hover { background: var(--surface-hover); } [data-bs-toggle="collapse"].btn .bi-chevron-down { color: var(--text-3); transition: transform .15s ease; } [data-bs-toggle="collapse"].btn[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); } .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 9px; border-radius: 100px; font-size: 12.5px; font-weight: 700; } .status-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .status-pill.st-warning { background: var(--warning-soft); color: var(--warning); } .status-pill.st-purple { background: var(--cat-presupuesto-soft); color: var(--cat-presupuesto); } .status-pill.st-info { background: var(--cat-montaje-soft); color: var(--cat-montaje); } .status-pill.st-brown { background: var(--cat-material-soft); color: var(--cat-material); } .status-pill.st-success { background: var(--success-soft); color: var(--success); } .status-pill.st-danger { background: var(--danger-soft); color: var(--danger); } .status-pill.st-neutral { background: var(--surface-sunken); color: var(--text-2); } .status-pill.st-dark { background: var(--text-1); color: #fff; } .info-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 20px; overflow: hidden; } .info-cell { padding: 14px 18px; border-right: 1px solid var(--border); min-width: 0; } .info-cell:last-child { border-right: none; } .info-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; } .info-value { font-size: 13.5px; font-weight: 650; color: var(--text-1); } .info-ico { width: 20px; height: 20px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 11px; } .info-ico.ic-blue { background: var(--cat-montaje-soft); color: var(--cat-montaje); } .info-ico.ic-teal { background: var(--cat-medicion-soft); color: var(--cat-medicion); } .info-ico.ic-violet { background: var(--accent-soft); color: var(--accent-2); } .info-ico.ic-pink { background: var(--cat-presupuesto-soft); color: var(--cat-presupuesto); } .info-ico.ic-slate { background: var(--surface-sunken); color: var(--text-3); } .op-crumb { font-size: 12.5px; color: var(--text-3); font-weight: 600; margin-bottom: 4px; } .op-crumb span { color: var(--text-2); } /* Botón "volver" de solo icono, a la izquierda de la cabecera */ .back-btn { width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); display: flex; align-items: center; justify-content: center; flex: none; margin-top: 2px; } .back-btn:hover { background: var(--surface-hover); color: var(--text-1); } .info-value.muted { color: var(--text-3); font-weight: 500; } @media (max-width: 900px) { .info-strip { grid-template-columns: repeat(2, 1fr); } .info-cell { border-bottom: 1px solid var(--border); } } /* ─── Panel de acciones agrupado ────────────────────────────────────────── */ .acciones-panel { display: flex; flex-direction: column; gap: 10px; } .acciones-group { display: flex; flex-direction: column; gap: 6px; } .acciones-group-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-top: 4px; } .acciones-row { display: flex; flex-direction: column; gap: 6px; } .acciones-row .btn { width: 100%; } /* Botones "chip" uniformes (Documentos / Operación): mismo aspecto para todos, el color solo vive en el icono, no en el botón entero */ .chip { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-1); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; } .chip:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text-1); text-decoration: none; } .chip .chip-ico { width: 22px; height: 22px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; } .chip-ico.doc { background: var(--cat-montaje-soft); color: var(--cat-montaje); } .chip-ico.op { background: var(--accent-soft); color: var(--accent-2); } .chip .chip-meta { color: var(--text-3); font-weight: 600; } /* ─── Historial tipo timeline ───────────────────────────────────────────── */ .tl-group-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin: 0 0 10px 32px; } .timeline { list-style: none; margin: 0; padding: 0; } .tl-item { display: flex; gap: 11px; position: relative; padding-bottom: 16px; } .tl-item:last-child { padding-bottom: 0; } .tl-item:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: -2px; width: 1px; background: var(--border); } .tl-dot { width: 21px; height: 21px; border-radius: 50%; background: var(--surface-sunken); color: var(--text-2); display: flex; align-items: center; justify-content: center; flex: none; z-index: 1; font-size: 11px; } .tl-dot.tl-accent { background: var(--accent-soft); color: var(--accent); } .tl-dot.tl-purple { background: var(--cat-presupuesto-soft); color: var(--cat-presupuesto); } .tl-body { flex: 1; min-width: 0; padding-top: 1px; } .tl-title { font-size: 13px; font-weight: 600; color: var(--text-1); } .tl-time { font-size: 11.5px; color: var(--text-3); margin-top: 1px; } /* ─── Fila de lista compacta (presupuestos, etc.) ───────────────────────── */ .list-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 13px 20px; border-bottom: 1px solid var(--border); background: none; border-left: none; border-right: none; border-top: none; cursor: pointer; color: var(--text-1); font-size: 13.5px; border-radius: 0; } .list-row:hover { background: var(--surface-hover); } /* Fila que ya no se pulsa: sin mano ni resalte, para no prometer un clic. */ .list-row-fija { cursor: default; } .list-row-fija:hover { background: none; } .list-row .lr-code { font-size: 13.5px; font-weight: 700; color: var(--cat-presupuesto); } .list-row .lr-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; } .list-row .lr-amount { font-size: 14.5px; font-weight: 750; margin-left: auto; color: var(--text-1); } .list-row .bi-chevron-down { color: var(--text-3); } /* ─── Calendario mensual (vista tipo Outlook) ───────────────────────────── */ .cal-grid-head { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border); background: var(--surface-sunken); } .cal-grid-head > div { padding: 8px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); text-align: center; } .cal-grid-row { display: grid; grid-template-columns: repeat(7, 1fr); } .cal-cell { display: block; width: 100%; min-height: 108px; text-align: left; vertical-align: top; padding: 7px 8px; border: none; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); cursor: pointer; font-family: inherit; } .cal-grid-row > .cal-cell:last-child { border-right: none; } .cal-cell:hover { background: var(--surface-hover); } .cal-cell.cal-cell-muted { background: var(--surface-sunken); } .cal-cell.cal-cell-muted .cal-cell-num { color: var(--text-3); } .cal-cell.cal-cell-today { background: var(--accent-soft); } .cal-cell-num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-1); margin-bottom: 4px; } .cal-cell.cal-cell-today .cal-cell-num { background: var(--accent); color: #fff; } .cal-cell-events { display: flex; flex-direction: column; gap: 3px; } .cal-ev-line { font-size: 11px; font-weight: 600; padding: 2px 5px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--border-strong); background: var(--surface-sunken); color: var(--text-2); } .cal-ev-line.ev-montaje { border-left-color: var(--cat-montaje); background: var(--cat-montaje-soft); color: var(--cat-montaje); } .cal-ev-line.ev-medicion { border-left-color: var(--cat-medicion); background: var(--cat-medicion-soft); color: var(--cat-medicion); } .cal-ev-line.ev-arreglo { border-left-color: var(--cat-arreglo); background: var(--cat-arreglo-soft); color: var(--cat-arreglo); } .cal-ev-more { font-size: 10.5px; font-weight: 700; color: var(--text-3); padding: 0 5px; } @media (max-width: 900px) { .cal-grid-head, .cal-grid-row { grid-template-columns: repeat(7, minmax(60px, 1fr)); } } /* ─── Campo lleno ──────────────────────────────────────────────────────────── Cuando un campo llega a su limite deja de aceptar letras, y sin senal parece que el teclado se ha colgado. Un destello corto basta: un mensaje fijo por cada campo lleno seria mas ruido que ayuda. Lo pone `js/limites.js`. */ .campo-lleno { border-color: var(--bs-warning, #ffc107) !important; box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .28) !important; transition: box-shadow .12s ease-out, border-color .12s ease-out; }