/* ========= Motor de Cobranzas — estilos globales (idénticos al demo) ========= */ :root { --bg: #f5f7fa; --surface: #ffffff; --surface-2: #f9fafc; --border: #e4e8ee; --text: #1e2430; --text-muted: #6a7280; --primary: #1f4e79; --primary-2: #2a6aa8; --success: #2e7d32; --warning: #c27a00; --danger: #c0392b; --info: #2a6aa8; --shadow: 0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04); --radius: 8px; /* compat con clases viejas */ --panel: var(--surface); --panel-2: var(--surface-2); --primary-hover: var(--primary-2); --accent: #6f42c1; --sidebar-w: 240px; --topbar-h: 54px; } [data-theme="dark"] { --bg: #0f1419; --surface: #1a212b; --surface-2: #141a23; --border: #2a3341; --text: #e6eaf0; --text-muted: #8b95a5; --primary: #4a90d9; --primary-2: #5fa3eb; --shadow: 0 1px 3px rgba(0,0,0,.35), 0 2px 12px rgba(0,0,0,.3); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0; color: var(--text); } h1 { font-size: 22px; font-weight: 600; } h2 { font-size: 18px; font-weight: 600; margin-bottom: 8px; } h3 { font-size: 15px; font-weight: 600; } /* ========== LAYOUT ========== */ .app, .app-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } .sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 0; display: flex; flex-direction: column; } .sidebar-brand { padding: 18px 20px; border-bottom: 1px solid var(--border); } .sidebar-brand .logo { font-weight: 700; font-size: 15px; color: var(--primary); display: flex; align-items: center; gap: 8px; } .sidebar-brand .logo::before { content: "$"; display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; background: var(--primary); color: white; border-radius: 6px; font-weight: 800; } .sidebar-brand .sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; padding-left: 34px; } .nav { padding: 8px 0; flex: 1; overflow-y: auto; display: flex; flex-direction: column; } .nav-section { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); padding: 14px 20px 6px; font-weight: 700; } .nav-item, .sidebar nav a { display: flex; align-items: center; gap: 10px; padding: 8px 20px; color: var(--text); cursor: pointer; border-left: 3px solid transparent; font-size: 13px; user-select: none; text-decoration: none; } .nav-item:hover, .sidebar nav a:hover { background: var(--surface-2); text-decoration: none; } .nav-item.active, .sidebar nav a.active { background: var(--surface-2); border-left-color: var(--primary); color: var(--primary); font-weight: 600; } .nav-item .icon { width: 16px; display: inline-flex; justify-content: center; opacity: .75; } .sidebar-footer { padding: 12px 20px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; } .main { display: flex; flex-direction: column; min-height: 100vh; } .topbar { height: 54px; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; } .topbar-left, .topbar-right { display: flex; align-items: center; gap: 12px; } .breadcrumb { font-size: 13px; color: var(--text-muted); } .breadcrumb strong { color: var(--text); } /* ── Badge de ambiente ─────────────────────────────────────────────────────── Siempre visible en la barra: el ambiente es el dato del que cuelga todo lo demas (si se puede simular, contra que servidor se lee, si el cobro es real). Los colores van de menos a mas riesgo: gris sandbox, ambar homologacion, rojo produccion. */ .amb-badge { display:inline-flex; align-items:center; gap:7px; text-decoration:none; padding:5px 11px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid var(--border); background:var(--surface); color:var(--text); transition:filter .15s; white-space:nowrap; } .amb-badge:hover { filter:brightness(.97); } .amb-punto { width:7px; height:7px; border-radius:50%; background:var(--text-muted); flex:0 0 auto; } .amb-sub { font-weight:400; color:var(--text-muted); border-left:1px solid var(--border); padding-left:7px; } .amb-sandbox { border-color:#c9ced6; background:#f4f6f8; color:#475569; } .amb-sandbox .amb-punto { background:#94a3b8; } .amb-homo { border-color:#e6c98a; background:#fdf6e6; color:#8a6100; } .amb-homo .amb-punto { background:var(--warning); } .amb-prod { border-color:#e8a9a1; background:#fdeceb; color:#96271b; } .amb-prod .amb-punto { background:var(--danger); box-shadow:0 0 0 3px rgba(192,57,43,.18); } .amb-off { border-color:#e0e0e0; background:#fafafa; color:#8a8a8a; } .amb-off .amb-punto { background:#c9c9c9; } .user-chip { display: flex; align-items: center; gap: 10px; font-size: 13px; } .user-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: white; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; } .user-name { font-weight: 600; line-height: 1.2; } .user-rol { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; line-height: 1.2; } .content { padding: 24px; flex: 1; } .page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; gap: 16px; flex-wrap: wrap; } .page-header h1 { margin: 0; font-size: 22px; font-weight: 600; } .page-header .subtitle { color: var(--text-muted); font-size: 13px; margin-top: 4px; } /* ========== CARDS & KPIS ========== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 16px; } .card-title { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; font-weight: 700; } .card-subtle { color: var(--text-muted); font-size: 12px; } .kpi { font-size: 28px; font-weight: 700; margin-top: 4px; line-height: 1.1; } .kpi-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; } @media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-2 { grid-template-columns: 1fr; } } /* ========== METRIC (compat) ========== */ .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; } .metric { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow); } .metric-label { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; } .metric-value { font-size: 22px; font-weight: 700; } .metric-value.success { color: var(--success); } .metric-value.danger { color: var(--danger); } .metric-value.warning { color: var(--warning); } /* Utilidades de color SUELTAS, usables en cualquier celda o span. Antes solo existian combinadas (.metric-value.success) o como pills: una celda con class="danger" no pintaba nada y los colores de la grilla de Agenda y de Lotes se perdian. */ .success { color: var(--success); } .danger { color: var(--danger); } .warning { color: var(--warning); } .accent { color: var(--accent); } /* ========== BUTTONS ========== */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 6px; cursor: pointer; font-size: 13px; font-family: inherit; transition: all .15s; text-decoration: none; } .btn:hover { background: var(--surface-2); border-color: var(--primary); text-decoration: none; } .btn-primary { background: var(--primary); color: white; border-color: var(--primary); } .btn-primary:hover { background: var(--primary-2); border-color: var(--primary-2); color: white; } .btn-danger { background: var(--danger); color: white; border-color: var(--danger); } .btn-danger:hover { background: #e54d3c; border-color: #e54d3c; color: white; } .btn-success { background: var(--success); color: white; border-color: var(--success); } .btn-sm { padding: 4px 10px; font-size: 12px; } .btn-group { display: inline-flex; gap: 6px; } .btn-ghost { background: transparent; border: 1px solid transparent; color: var(--text); padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; } .btn-ghost:hover { background: var(--surface-2); } .btn-secundario { background: var(--surface-2); } .btn-secundario:hover { filter: brightness(.96); } .btn-chico { padding: 4px 10px; font-size: 12px; } /* ── Card de Banco y ambiente ──────────────────────────────────────────────── Es la primera card de Configuracion. La franja izquierda repite el color del badge de la barra: mismo codigo, mismo significado, en los dos lugares. */ .entorno-card { border-left: 4px solid var(--border); } .entorno-sandbox { border-left-color: #94a3b8; } .entorno-homo { border-left-color: var(--warning); } .entorno-prod { border-left-color: var(--danger); } .entorno-off { border-left-color: #c9c9c9; } .entorno-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: .9rem; } .entorno-item { display: flex; flex-direction: column; gap: 3px; } .entorno-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } .entorno-valor { font-size: 15px; font-weight: 600; } .entorno-permisos { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: 10px; } .entorno-permisos li { padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); border-left: 3px solid var(--border); } .entorno-permisos li.si { border-left-color: var(--ok, #2e7d32); } .entorno-permisos li.no { border-left-color: var(--text-muted); opacity: .82; } .entorno-permisos li a { font-size: 12px; } .tabla-compacta th, .tabla-compacta td { padding: 6px 10px; font-size: 12.5px; } .fila-destacada { background: var(--surface-2); font-weight: 600; } /* Cuentas habilitadas: la que trabaja en el ambiente activo se ve distinta de las que quedan guardadas para otro ambiente. */ .cuenta-en-uso { border-left: 3px solid var(--ok, #2e7d32); padding-left: 10px; } .cuenta-otra { border-left: 3px solid var(--border); padding-left: 10px; opacity: .62; } .cuenta-otra .val { font-weight: 500; } /* La aplicacion de cobranza vive DENTRO de la card de cobro real y se apaga con el. Apagada se ve y se entiende, pero no se puede tocar: es la letra chica del mismo interruptor, no una configuracion independiente. */ .sep-cobro { border: none; border-top: 1px solid var(--border); margin: 1.2rem 0 1rem; } .cobranza-dependiente { transition: opacity .15s; } .cobranza-dependiente.apagada { opacity: .55; } /* 🚨 El submit NO se bloquea: es el mismo boton que guarda el interruptor del cobro, asi que dejarlo muerto impedia prenderlo — habia que prender el cobro para poder apretar el boton que prende el cobro. Se bloquean los campos, no la accion. */ .cobranza-dependiente.apagada input:not([type=submit]), .cobranza-dependiente.apagada select, .cobranza-dependiente.apagada textarea, .cobranza-dependiente.apagada button:not([type=submit]) { pointer-events: none; } .cobranza-dependiente.apagada .alert { opacity: 1; } /* Encabezado del bloque plegable de conexion: tiene que verse clickeable, si no el operador no sabe que ahi adentro esta toda la configuracion del banco. */ .summary-conexion { display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; padding:2px 0; user-select:none; } .summary-conexion::-webkit-details-marker { display:none; } .summary-conexion:hover .seccion-titulo { text-decoration:underline; } /* La cabecera del banco no usa .seccion-titulo sino el nombre en : sin esta linea el hover no subrayaba nada y no se notaba que era clickeable, que es EXACTAMENTE el motivo por el que se habia sacado el plegable la vez anterior. */ .summary-conexion:hover .banco-cab strong { text-decoration:underline; } .summary-chevron { margin-left:auto; color:var(--text-muted); transition:transform .18s; } details[open] > .summary-conexion .summary-chevron { transform:rotate(180deg); } /* La cabecera del banco adentro del : ocupa todo el ancho menos el chevron, y pierde el margen inferior de .seccion-head porque ahi abajo ya no hay cuerpo, hay borde. */ .summary-conexion .banco-cab { flex:1 1 auto; min-width:0; margin-bottom:0; } /* ========== FORM ========== */ .input, select, textarea, input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], input[type=time] { width: 100%; padding: 7px 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 6px; font-size: 13px; font-family: inherit; } .input:focus, select:focus, textarea:focus, input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(31,78,121,.15); } textarea { min-height: 80px; resize: vertical; } label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; font-weight: 600; } .filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; margin-bottom: 16px; } .row-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 16px; } .row-filters > * { min-width: 160px; } /* form-row: stack vertical (label arriba, input abajo) */ .form-row { display: block; margin-bottom: 12px; } .form-row > label { display: block; margin-bottom: 4px; } .form-row > input, .form-row > select, .form-row > textarea { width: 100%; } .form-row > .help { margin-top: 4px; } .form-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; } .flag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; font-weight: normal; color: var(--text); } .field-error { color: var(--danger); font-size: 12px; } .req { color: var(--danger); } .help { font-size: 11px; color: var(--text-muted); margin-top: 4px; } /* inline-toggle: label + switch juntos a la izquierda */ .form-row.inline-toggle { display: flex; align-items: center; justify-content: flex-start; gap: 12px; } .form-row.inline-toggle > label:first-child { margin-bottom: 0; flex: 0 0 auto; min-width: 140px; } .inline-toggle { display: flex; align-items: center; gap: 12px; } /* checkbox list (multi-select con scroll) */ .cbx-list { border: 1px solid var(--border); border-radius: 6px; max-height: 180px; overflow-y: auto; padding: 6px 8px; background: var(--surface); } .cbx-list label { display: flex; align-items: center; gap: 8px; padding: 4px 2px; font-size: 13px; color: var(--text); font-weight: normal; cursor: pointer; margin: 0; } .cbx-list label:hover { background: var(--surface-2); } .cbx-list input[type=checkbox] { width: auto; margin: 0; } .cbx-list-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } .cbx-list-head label { font-weight: 600; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; } /* ========== TABLE ========== */ .tbl { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); } .tbl th { text-align: left; padding: 10px 12px; background: var(--surface-2); color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid var(--border); } .tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; } .tbl tr:hover td { background: var(--surface-2); } .tbl tr:last-child td { border-bottom: none; } .tbl .mono { font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 12px; } .text-right { text-align: right; } .text-center { text-align: center; } .text-muted { color: var(--text-muted); } .mono { font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 12px; } /* ========== PILLS ========== */ .pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--border); color: var(--text); } .pill-success { background: rgba(46,125,50,.15); color: var(--success); } .pill-warning { background: rgba(194,122,0,.15); color: var(--warning); } .pill-danger { background: rgba(192,57,43,.15); color: var(--danger); } .pill-info { background: rgba(42,106,168,.15); color: var(--info); } .pill-muted { background: var(--border); color: var(--text-muted); } /* ========== TOAST ========== */ .toast-stack, #toasts { position: fixed; top: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; } .toast { padding: 10px 16px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 6px; box-shadow: var(--shadow); min-width: 260px; font-size: 13px; animation: slideIn .25s ease; } .toast.success { border-left-color: var(--success); } .toast.danger, .toast.error { border-left-color: var(--danger); } .toast.warning { border-left-color: var(--warning); } .toast.info { border-left-color: var(--info); } @keyframes slideIn { from { transform: translateX(120%); } to { transform: translateX(0); } } /* ========== MODAL ========== */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 500; display: flex; align-items: center; justify-content: center; animation: fade .2s; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); width: 640px; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0,0,0,.25); } .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .modal-body { padding: 20px; overflow-y: auto; flex: 1; } .modal-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; } .modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted); } /* ========== SWITCH ========== */ .switch { position: relative; display: inline-block; width: 48px; height: 26px; } .switch input { display: none; } .slider { position: absolute; cursor: pointer; inset: 0; background: #cfd5dd; border-radius: 26px; transition: .2s; } .slider::before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: .2s; } .switch input:checked + .slider { background: var(--success); } .switch input:checked + .slider::before { transform: translateX(22px); } /* ========== TOGGLE (compat con _Form viejo) ========== */ .toggle { position: relative; display: inline-block; width: 40px; height: 22px; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-track { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--border); border-radius: 22px; transition: .15s; cursor: pointer; } .toggle-track::before { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; background: white; border-radius: 50%; transition: .15s; } .toggle input:checked + .toggle-track { background: var(--primary); } .toggle input:checked + .toggle-track::before { transform: translateX(18px); } /* ========== WIZARD ========== */ .wizard-steps { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding: 0; } .wizard-step { flex: 1; padding: 12px 16px; cursor: pointer; text-align: center; font-size: 13px; color: var(--text-muted); border-bottom: 3px solid transparent; } .wizard-step.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; } .wizard-step.done { color: var(--success); } .wizard-step .step-num { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--border); color: var(--text-muted); align-items: center; justify-content: center; font-size: 11px; font-weight: 700; margin-right: 6px; } .wizard-step.active .step-num { background: var(--primary); color: white; } .wizard-step.done .step-num { background: var(--success); color: white; } .wizard-actions { display: flex; justify-content: space-between; margin-top: 20px; gap: 8px; } /* ========== TIMELINE ========== */ .timeline { position: relative; padding: 0 0 0 24px; list-style: none; } .timeline::before { content: ""; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--border); } .timeline-item { position: relative; padding: 0 0 20px; } .timeline-item::before { content: ""; position: absolute; left: -21px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); border: 2px solid var(--surface); } .timeline-item.success::before { background: var(--success); } .timeline-item.warning::before { background: var(--warning); } .timeline-item.danger::before { background: var(--danger); } .timeline-item .ti-head { font-weight: 600; margin-bottom: 2px; font-size: 13px; } .timeline-item .ti-meta { color: var(--text-muted); font-size: 11px; margin-bottom: 6px; } .timeline-item .ti-body { font-size: 12px; background: var(--surface-2); padding: 8px 12px; border-radius: 6px; } .timeline-success::before { background: var(--success) !important; } .timeline-danger::before { background: var(--danger) !important; } .timeline-warning::before { background: var(--warning) !important; } .timeline-muted::before { background: var(--text-muted) !important; } .timeline-content pre { background: var(--surface-2); padding: 6px; border-radius: 4px; margin: 4px 0; } /* ========== MISC ========== */ .separator { height: 1px; background: var(--border); margin: 16px 0; } .login-wrap, .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1f4e79, #2a6aa8); padding: 20px; } .login-card, .login-box { background: var(--surface); width: 400px; max-width: 100%; border-radius: 12px; padding: 32px; box-shadow: 0 20px 60px rgba(0,0,0,.25); } .login-logo { text-align: center; font-size: 24px; font-weight: 700; color: var(--primary); margin-bottom: 6px; } .login-sub, .login-box p.subtle { text-align: center; color: var(--text-muted); margin-bottom: 24px; font-size: 13px; } .login-box h1 { margin: 0 0 6px; font-size: 20px; font-weight: 600; text-align: center; color: var(--primary); } .login-box .field { margin-bottom: 14px; } .login-box label { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; } .login-box button { width: 100%; padding: 10px; justify-content: center; } .hidden { display: none !important; } .badge-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .badge-dot.on { background: var(--success); box-shadow: 0 0 0 3px rgba(46,125,50,.18); } .badge-dot.off { background: #c0c4ca; } .chart { height: 180px; display: flex; align-items: flex-end; gap: 6px; padding-top: 10px; } .chart .bar { flex: 1; background: linear-gradient(180deg, var(--primary), var(--primary-2)); border-radius: 3px 3px 0 0; position: relative; min-height: 2px; } .chart .bar::after { content: attr(data-label); position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-muted); } .row-actions { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; } code.k { background: var(--surface-2); padding: 1px 6px; border-radius: 4px; font-size: 12px; font-family: 'JetBrains Mono', monospace; } .drag-handle { cursor: grab; color: var(--text-muted); padding-right: 8px; } .drag-handle:active { cursor: grabbing; } .dragging { opacity: .4; } .drop-target { background: rgba(31,78,121,.08) !important; } .pager { display: flex; gap: 4px; padding: 12px; justify-content: center; flex-wrap: wrap; } /* ========== Bar-row (compat con simulador / reportes) ========== */ .bar-row { display: grid; grid-template-columns: 140px 1fr 80px; gap: 10px; align-items: center; margin-bottom: 6px; font-size: 12px; } .bar-track { height: 14px; background: var(--surface-2); border-radius: 7px; overflow: hidden; } .bar-fill { height: 100%; background: var(--primary); } /* ========== Indicador motor (compat) ========== */ .motor-indicator { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; letter-spacing: .04em; padding: 6px 10px; border-radius: 16px; background: var(--surface-2); } .motor-indicator.on { color: var(--success); } .motor-indicator.off { color: var(--text-muted); } .motor-indicator .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } /* ========== Schedule panels (form políticas) ========== */ .schedule-panel { display: none; } .schedule-panel.active { display: block; } /* ---- Modo de programación: tarjetas con su config adentro ---- */ /* Las 4 tarjetas se ven siempre; la config de cada una queda atenuada y deshabilitada hasta que se elige ese modo (así el usuario compara las opciones de un vistazo). */ .sched-card { border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; transition: border-color .15s, background .15s; } .sched-card.active { border-color: var(--primary); background: var(--surface-2); } .sched-head { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; margin: 0; } .sched-head input[type=radio] { margin-top: 3px; width: auto; } .sched-head strong { display: block; font-size: 13px; } .sched-head span { font-size: 11px; color: var(--text-muted); } .sched-cfg { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); opacity: .45; /* atenuado mientras el modo no está elegido */ transition: opacity .15s; } .sched-card.active .sched-cfg { opacity: 1; } .sched-cfg label { font-size: 11px; font-weight: 600; display: block; margin-bottom: 4px; } .sched-cfg input, .sched-cfg select { width: 100%; max-width: 260px; } .sched-cfg .help { font-size: 11px; margin-top: 4px; } .sched-cfg input:disabled, .sched-cfg select:disabled { cursor: not-allowed; background: var(--surface-2); } /* Notas explicativas fijas dentro de cada tarjeta (siempre visibles, sin tooltip) */ .sched-notes { margin: 5px 0 0; padding-left: 16px; } .sched-notes li { margin-bottom: 3px; line-height: 1.45; } /* ========== Overlay "Procesando, aguardá" ========== */ .busy-overlay { position: fixed; inset: 0; background: rgba(15, 20, 25, 0.55); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-size: 18px; gap: 24px; backdrop-filter: blur(2px); animation: fadeIn .15s ease; } .busy-overlay .spinner { width: 64px; height: 64px; border: 6px solid rgba(255,255,255,.2); border-top-color: #fff; border-radius: 50%; animation: spin 1s linear infinite; } .busy-overlay .busy-msg { font-weight: 600; text-shadow: 0 2px 8px rgba(0,0,0,.5); } .busy-overlay .busy-sub { font-size: 13px; color: rgba(255,255,255,.85); max-width: 400px; text-align: center; line-height: 1.4; } @keyframes spin { to { transform: rotate(360deg); } } /* ========== Botones-icono (acciones de tabla) ========== */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 6px; cursor: pointer; font-size: 14px; line-height: 1; transition: all .15s; text-decoration: none; } .btn-icon:hover { background: var(--surface-2); border-color: var(--primary); color: var(--primary); text-decoration: none; } .btn-icon-danger:hover { border-color: var(--danger); color: var(--danger); } /* ========== Icono info con tooltip ========== */ .info-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); font-size: 10px; font-style: normal; cursor: help; margin-left: 4px; vertical-align: middle; font-weight: 700; } .info-tip:hover { background: var(--primary); color: white; border-color: var(--primary); } .info-tip[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); background: #1e2430; color: #fff; padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: normal; line-height: 1.4; white-space: pre-wrap; width: max-content; max-width: 360px; z-index: 1000; box-shadow: 0 4px 16px rgba(0,0,0,.25); pointer-events: none; } .info-tip[data-tip]:hover::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); border: 6px solid transparent; border-top-color: #1e2430; z-index: 1001; } /* ===== Chips / Badges genéricos ===== */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 12px; font-size: 11px; font-weight: 600; line-height: 1.4; white-space: nowrap; border: 1px solid transparent; } .chip-success { background: rgba(46,125,50,.12); color: var(--success); border-color: rgba(46,125,50,.25); } .chip-warning { background: rgba(237,108,2,.12); color: var(--warning); border-color: rgba(237,108,2,.25); } .chip-danger { background: rgba(211,47,47,.12); color: var(--danger); border-color: rgba(211,47,47,.25); } .chip-info { background: rgba(31,78,121,.12); color: var(--primary); border-color: rgba(31,78,121,.25); } .chip-neutral { background: var(--surface-2); color: var(--text-muted); border-color: var(--border); } .chip-dark { background: rgba(0,0,0,.8); color: #fff; } /* ===== Alerts ===== */ .alert { padding: 12px 16px; border-radius: 8px; border-left: 4px solid; margin-bottom: 16px; font-size: 13px; } .alert-info { background: rgba(31,78,121,.07); border-left-color: var(--primary); color: var(--text); } .alert-success { background: rgba(46,125,50,.08); border-left-color: var(--success); color: var(--text); } .alert-warning { background: rgba(237,108,2,.08); border-left-color: var(--warning); color: var(--text); } .alert-danger { background: rgba(211,47,47,.08); border-left-color: var(--danger); color: var(--text); } /* ===== Definition list horizontal (for headers) ===== */ .dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 24px; } .dl-grid > div { display: flex; flex-direction: column; gap: 2px; } .dl-grid label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin: 0; } .dl-grid .v { font-size: 13px; color: var(--text); font-weight: 500; word-break: break-word; } /* ===== Table extras ===== */ .tbl-zebra tbody tr:nth-child(odd) td { background: rgba(0,0,0,.015); } .tbl-zebra tbody tr:nth-child(odd):hover td { background: var(--surface-2); } .tbl td .text-muted { color: var(--text-muted); } .tbl tr.row-warning td { background: rgba(237,108,2,.08); } .tbl tr.row-success td { background: rgba(46,125,50,.06); } .tbl tr.row-danger td { background: rgba(211,47,47,.06); } .tbl-compact th, .tbl-compact td { padding: 6px 10px; } .text-right { text-align: right; } .text-center { text-align: center; } .text-success { color: var(--success); } .text-warning { color: var(--warning); } .text-danger { color: var(--danger); } .text-muted { color: var(--text-muted); } .mono { font-family: 'JetBrains Mono', 'Consolas', monospace; font-size: 12px; } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 16px; } .p-0 { padding: 0; } /* ===== Section header dentro de cards ===== */ .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .section-head h3 { margin: 0; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } .section-head .sub { font-size: 12px; color: var(--text-muted); } /* ===== Pagination ===== */ .pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; font-size: 12px; color: var(--text-muted); } .pagination .actions { display: flex; gap: 6px; } /* ===== Wrapper tabla intentos (sin overflow-x:auto para que los tooltips no se recorten) ===== */ .intentos-wrap { overflow: visible; } @media (max-width: 700px) { .intentos-wrap { overflow-x: auto; } } /* ===== Ayuda colapsable de intentos (Step 3) ===== */ .ayuda-intentos { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; } .ayuda-intentos > summary { display: flex; align-items: center; gap: 6px; padding: 9px 14px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-muted); list-style: none; user-select: none; } .ayuda-intentos > summary::-webkit-details-marker { display: none; } .ayuda-intentos > summary::after { content: "▸"; margin-left: auto; font-size: 11px; transition: transform .15s; } .ayuda-intentos[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 0; } .ayuda-intentos[open] > summary::after { transform: rotate(90deg); } .ayuda-intentos > .legend-intentos-grid { padding: 10px 14px 12px; } /* ===== Grid de columnas explicadas ===== */ .legend-intentos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; } @media (max-width: 700px) { .legend-intentos-grid { grid-template-columns: 1fr; } } .legend-item { display: flex; gap: 8px; font-size: 12px; line-height: 1.45; padding: 4px 0; border-bottom: 1px dashed var(--border); } .legend-item:last-child, .legend-item:nth-last-child(2):nth-child(odd) { border-bottom: none; } .legend-col { flex: 0 0 auto; min-width: 120px; font-weight: 700; font-size: 11px; color: var(--text); white-space: nowrap; padding-top: 1px; } .legend-desc { color: var(--text-muted); font-size: 11.5px; } /* ===== Campo Valor cuando TipoCalculo = SaldoTotal ===== */ .valor-na { background: var(--surface-2) !important; color: var(--text-muted) !important; cursor: not-allowed !important; opacity: .55; } .input-error { border-color: var(--danger) !important; box-shadow: 0 0 0 2px rgba(211,47,47,.18) !important; } /* ========================================================================== CashIN — clases propias de la maqueta (el resto viene de Motor Cobranzas) ========================================================================== */ .kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:18px; } .kpi { background:var(--panel,#fff); border:1px solid var(--border,#e3e6ec); border-radius:10px; padding:16px 18px; } .kpi-num { font-size:26px; font-weight:600; line-height:1.15; } .kpi-lbl { font-size:12px; opacity:.65; margin-top:4px; } .kpi.warn .kpi-num { color:#d08700; } .filtros { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; } .fg { display:flex; flex-direction:column; gap:4px; min-width:140px; } .fg > label { font-size:12px; opacity:.7; } .fg input, .fg select { padding:7px 10px; border:1px solid var(--border,#d7dbe3); border-radius:7px; background:var(--panel,#fff); color:inherit; font-size:14px; } .fg input[type=checkbox] { width:18px; height:18px; } /* Un valor que se MUESTRA en vez de editarse, pero que ocupa el lugar de un campo. Se ve como un input apagado a proposito: dice "esto es un dato del formulario" sin invitar a escribirlo. Lo usa el destino del simulador, que sale de la config del banco y no se elige. */ .dato-fijo { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; padding:7px 10px; border:1px dashed var(--border,#d7dbe3); border-radius:7px; background:var(--bg,#f6f7f9); font-size:14px; min-height:34px; } .dato-fijo .mono { font-size:13px; color:var(--text-muted); } .table-wrap { overflow-x:auto; } /* --- Configuracion de cobranza: paneles que se muestran segun el modo ----- */ .cfg-cobro .subcard { margin-top:14px; } .cfg-cobro .form-grid { margin-top:4px; } /* El panel oculto no se saca del form: sus campos se siguen enviando, asi cambiar de modo y volver no borra lo que ya estaba cargado. Solo deja de verse. */ .cfg-cobro .panel-modo.hidden, .cfg-cobro .panel-medio.hidden { display:none !important; } /* Con el cobro apagado, la configuracion se ve pero no se toca. */ .cfg-cobro .cfg-off { opacity:.45; } .cfg-cobro .cfg-off input, .cfg-cobro .cfg-off select { cursor:not-allowed; background:var(--surface-2); } .cfg-apagado-aviso { margin-top:12px; } .cfg-apagado-aviso.hidden { display:none; } /* Ayuda contextual: el signo al lado de la etiqueta muestra que hace ese campo. */ .ayuda { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; margin-left:5px; border-radius:50%; border:1px solid var(--border); font-size:10px; font-weight:700; opacity:.55; cursor:help; vertical-align:middle; user-select:none; } .ayuda:hover { opacity:1; border-color:var(--primary); color:var(--primary); } /* El parametro del ERP que actualiza esta pantalla, visible arriba de todo. */ .cfg-param { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:8px 12px; margin:4px 0 8px; font-size:12.5px; } .cfg-param-lbl { opacity:.65; } .cfg-param-nom { font-family:ui-monospace,Consolas,monospace; font-size:12.5px; font-weight:600; } .btn-copiar-param.copiado { border-color:var(--success); color:var(--success); } /* Campo al que le falta el dato, al estilo de un validador de formulario. */ .campo-mal { border-color:var(--danger) !important; box-shadow:0 0 0 2px rgba(192,57,43,.12); } .msg-mal { display:block; margin-top:4px; font-size:11.5px; color:var(--danger); } /* La URL de la API va sola, a lo ancho: es larga y al lado de campos cortos queda recortada justo donde importa (el host). */ .cfg-url { margin-top:12px; } .cfg-url > label{ display:block; font-size:12px; opacity:.7; margin-bottom:4px; } .cfg-url input { width:100%; padding:7px 10px; border:1px solid var(--border); border-radius:7px; background:var(--panel,#fff); color:inherit; font-size:14px; font-family:ui-monospace,Consolas,monospace; } .cfg-url-ayuda { margin:6px 0 0; } .cfg-url-ayuda code { background:var(--surface-2); padding:1px 5px; border-radius:4px; font-size:11.5px; } /* --- PATRON: pie de formulario ------------------------------------------- Toda pantalla de edicion cierra con un .form-pie: a la izquierda el texto de contexto (opcional), a la derecha los botones de accion. El margin-left:auto del primer boton los empuja a la derecha AUNQUE no haya texto — sin eso, cuando el aviso se oculta los botones se van solos al borde izquierdo. Los botones van FUERA de cualquier bloque que se pueda deshabilitar. */ .form-pie { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); } .form-pie > .hint, .form-pie > p { margin:0; flex:1 1 320px; min-width:0; } .form-pie .btn { flex:0 0 auto; } .form-pie .btn:first-of-type { margin-left:auto; } /* Variante para los botones que viven DENTRO de una grilla de campos (ej: una fila por proceso): se empujan al borde derecho de la grilla. */ .fg-acciones.fg-derecha { margin-left:auto; justify-content:flex-end; } /* --- PATRON: combo con buscador (partial _Combo) -------------------------- */ /* width:100% y min-width:0: dentro de un .fg de la grilla, sin esto el combo se colapsa al ancho de la flecha. */ .combo { position:relative; width:100%; min-width:0; } .combo-btn { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; border:1px solid var(--border); border-radius:7px; background:var(--panel,#fff); color:inherit; font-size:14px; text-align:left; min-height:35px; cursor:pointer; } .combo-btn:hover { border-color:var(--primary); } .combo-txt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .combo-flecha { opacity:.5; flex:0 0 auto; } .combo-mal .combo-btn { border-color:var(--danger); box-shadow:0 0 0 2px rgba(192,57,43,.12); } .combo-pop { position:absolute; z-index:40; top:calc(100% + 4px); left:0; right:0; background:var(--panel,#fff); border:1px solid var(--border); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:8px; max-height:300px; display:flex; flex-direction:column; } .combo-filtro { width:100%; padding:6px 9px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:inherit; font-size:13px; margin-bottom:6px; } .combo-lista { list-style:none; margin:0; padding:0; overflow-y:auto; } .combo-lista li { padding:6px 9px; border-radius:6px; cursor:pointer; font-size:13.5px; display:flex; align-items:baseline; gap:8px; } .combo-lista li:hover { background:var(--surface-2); } .combo-lista li.combo-sel { background:var(--primary); color:#fff; } .combo-lista li.combo-sel .combo-op-det { color:#fff; opacity:.8; } .combo-op-txt { flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .combo-op-det { flex:0 0 auto; font-size:11.5px; opacity:.6; font-variant-numeric:tabular-nums; } .combo-vacio { padding:8px 9px; font-size:12.5px; opacity:.6; } /* --- Pie de grilla: cuántas filas se ven, el selector y la navegación ------ */ .paginado { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); font-size:12.5px; } .paginado-info { display:flex; align-items:center; gap:10px; opacity:.8; } .paginado-tope { color:var(--danger); font-weight:600; cursor:help; } .paginado-tam { display:flex; align-items:center; gap:8px; margin-left:auto; } .paginado-tam label { opacity:.7; } .paginado-tam select{ padding:5px 8px; border:1px solid var(--border); border-radius:7px; background:var(--panel,#fff); color:inherit; font-size:12.5px; min-width:82px; } .paginado-nav { display:flex; align-items:center; gap:4px; } .pg { display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px; padding:0 7px; border-radius:7px; border:1px solid var(--border); background:var(--panel,#fff); color:inherit; text-decoration:none; font-variant-numeric:tabular-nums; } .pg:hover { border-color:var(--primary); text-decoration:none; } .pg-actual { background:var(--primary); border-color:var(--primary); color:#fff; font-weight:600; } .pg-off { opacity:.3; cursor:default; } .pg-off:hover { border-color:var(--border); } /* En Conciliación el pie vive en su propia card (no hay tabla que lo contenga): sin tabla arriba, la línea divisoria y el aire de más sobran. */ .card-paginado .paginado { margin-top:0; padding-top:0; border-top:none; } @media (max-width:700px) { .paginado { justify-content:center; } .paginado-tam { margin-left:0; } } .empty { text-align:center; opacity:.55; padding:22px 0; font-size:14px; } .hint { font-size:12px; opacity:.65; margin:6px 0; } .muted { opacity:.6; font-size:12px; } .num { text-align:right; } .hidden { display:none !important; } /* Los modificadores de color de .badge viven MÁS ABAJO, después de la regla base: tienen la misma especificidad, así que si fueran acá la base les pisaría el color y todos los badges saldrían grises. */ /* --- Relay --------------------------------------------------------------- */ .relay-card { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; } .relay-info { flex:1 1 380px; } .relay-action{ display:flex; flex-direction:column; align-items:center; gap:10px; } .btn-relay { min-width:170px; padding:12px 18px; font-size:15px; transition:box-shadow .2s, transform .1s; } .btn-relay.flash { box-shadow:0 0 0 4px rgba(70,140,255,.45); transform:scale(1.03); } .btn-relay:disabled { opacity:.65; cursor:not-allowed; } .relay-status{ display:flex; align-items:center; gap:8px; font-size:13px; opacity:.8; } /* --- Panel de pago (Caja) ------------------------------------------------ */ .pago-panel { border-left:4px solid #2f7d4f; } .pago-titulo { font-size:13px; text-transform:uppercase; letter-spacing:.08em; opacity:.7; } .pago-monto { font-size:34px; font-weight:600; margin:6px 0 14px; } .pago-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; } .pago-grid .lbl { display:block; font-size:11px; text-transform:uppercase; opacity:.6; } .pago-grid .val { font-size:15px; font-family:ui-monospace,Consolas,monospace; } .pago-grid .val.destacado { font-size:20px; font-weight:600; color:#2f7d4f; } .titular-head h3 { margin:0; } .credito-head { display:flex; justify-content:space-between; margin-bottom:10px; } /* --- Crédito colapsable (armado del lote en Caja) ------------------------- */ .credito > summary { display:flex; align-items:center; gap:12px; flex-wrap:wrap; cursor:pointer; padding:2px 0 10px; list-style:none; } /* Safari/Chrome dibujan su propio triangulito: se saca y se usa el nuestro. */ .credito > summary::-webkit-details-marker { display:none; } .credito > summary::marker { content:''; } .credito-caret { opacity:.55; transition:transform .15s; } .credito:not([open]) > summary .credito-caret { transform:rotate(-90deg); } .credito:not([open]) > summary { padding-bottom:2px; } .credito-sel { margin-left:auto; font-size:12px; opacity:.55; padding:3px 9px; border-radius:20px; background:var(--surface-2); } .credito-sel.activo { opacity:1; color:var(--primary); font-weight:600; background:#e7eefc; } :root[data-theme="dark"] .credito-sel.activo { background:rgba(74,144,217,.18); } .total-row { text-align:right; margin:10px 0; font-size:14px; } .total-row .total{ font-size:18px; } .proc-row { padding:10px 0; border-bottom:1px solid var(--border,#eee); } .proc-row:last-child { border-bottom:none; } .alert-warn { background:#fdeee0; color:#9c5717; } .alert-ok { background:#e3f6e8; color:#1c7a3c; } /* Acciones por fila (cancelar/eliminar): cada boton es su propio
POST, asi que hay que forzarlos a convivir en la misma linea. */ .acciones-fila { display:flex; gap:6px; justify-content:flex-end; } .acciones-fila form { margin:0; } /* Con "Ver datos" siempre presente, la celda de acciones tiene hasta dos botones. Que NO envuelvan: apilarlos sube la fila de 56px a 107px y la grilla se vuelve un muro. Si no entran a lo ancho, que scrollee .table-wrap, que para eso está. */ .acciones-fila { flex-wrap:nowrap; white-space:nowrap; } .acciones-fila .btn { white-space:nowrap; } /* El banco va en dos renglones (nombre + cuenta) y no tiene por qué cortar palabras. */ .col-banco { white-space:nowrap; } /* Pagador: nombre arriba, CUIT/DNI abajo, dos renglones y punto. Sin esto un nombre largo se parte en tres líneas y la fila pasa de 56px a 107px — con la grilla entera atrás. Lo que no entra se recorta y el nombre completo queda en el title. */ .col-pagador { max-width:280px; } .col-pagador .nom { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Nota discreta de "todo en orden": una línea, no una card con título de alarma. */ .conciliacion-ok { color:var(--success); margin:0 0 16px 2px; opacity:.9; } /* KPI clickeable que filtra la grilla por ese estado. */ .kpi-link { display:block; text-decoration:none; color:inherit; transition:border-color .15s, transform .1s; } .kpi-link:hover { border-color:var(--primary); text-decoration:none; transform:translateY(-1px); } .kpi-link.activo { border-color:var(--primary); box-shadow:0 0 0 2px rgba(31,78,121,.18); } .kpi-sub { font-size:12px; opacity:.6; margin-top:2px; } .obs { display:inline-block; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; } .mono { font-family:ui-monospace,Consolas,monospace; font-size:12.5px; } /* --- Conciliación: una tarjeta por movimiento, partida en dos ------------- */ .kpis-conc { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); } .conc-head { margin:4px 2px 12px; } .conc-lista { display:flex; flex-direction:column; gap:12px; } .conc-fila { display:grid; grid-template-columns:1fr 46px 1fr; border:1px solid var(--border); border-left-width:4px; border-radius:10px; background:var(--surface); box-shadow:var(--shadow); overflow:hidden; } /* El borde izquierdo dice el estado de un vistazo, sin leer el badge. */ .conc-fila.estado-cobrado { border-left-color:#2f9e5e; } .conc-fila.estado-sincobrar { border-left-color:#2a6aa8; } .conc-fila.estado-sinidentificar { border-left-color:#c2762a; } .conc-fila.estado-pendiente { border-left-color:#8a94a6; } .conc-fila.estado-descartado { border-left-color:#c0392b; } .conc-fila.estado-ignorado { border-left-color:var(--border); opacity:.75; } /* Dos líneas por lado y nada más: con cientos de movimientos, cada píxel de alto se paga en scroll. La info que no entra va en el title del elemento. */ .conc-lado { padding:9px 14px; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:3px; } .conc-aplicado { background:var(--surface-2); flex-direction:row; align-items:center; gap:12px; } .conc-info { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; } .conc-l1 { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:14px; line-height:1.3; } .conc-l2 { font-size:12.5px; opacity:.7; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* una línea, sin excepción */ } .conc-l2 .sep, .conc-l1 .sep { opacity:.45; margin:0 5px; } .conc-l1.conc-sin { color:var(--warning); font-weight:600; } .conc-fecha { font-size:12px; opacity:.6; } .conc-fila.es-sim .conc-banco { background:rgba(124,77,196,.05); } :root[data-theme="dark"] .conc-fila.es-sim .conc-banco { background:rgba(160,120,230,.09); } .conc-flecha { display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--text-muted); font-size:17px; border-left:1px solid var(--border); border-right:1px solid var(--border); } /* Las tarjetas ya no llevan encabezado por lado: el encabezado de la lista alcanza y repetirlo en cada fila era medio centímetro de alto por movimiento. */ .conc-titulos { display:grid; grid-template-columns:1fr 46px 1fr; gap:0; font-size:11px; text-transform:uppercase; letter-spacing:.06em; opacity:.5; font-weight:600; padding:0 14px 6px; margin-top:4px; } .conc-titulos span:nth-child(2) { text-align:center; } .conc-monto { font-size:17px; font-weight:600; } /* Los dos importes enfrentados: verde si calzan, naranja si no. */ .conc-monto.calza { color:var(--success); } .conc-monto.no-calza { color:#9c5717; } .conc-monto.sin-aplicar{ opacity:.4; } :root[data-theme="dark"] .conc-monto.no-calza { color:#e0ad6d; } .conc-dif { font-size:12px; color:#9c5717; } :root[data-theme="dark"] .conc-dif { color:#e0ad6d; } .conc-banco { flex-direction:row; align-items:center; gap:12px; } /* Encabezado con aire de tabla: fondo, línea inferior y las mismas columnas que las filas. */ .conc-titulos { background:var(--surface-2); border:1px solid var(--border); border-bottom:2px solid var(--border); border-radius:8px 8px 0 0; padding:8px 14px; margin-bottom:0; } .conc-lista { margin-top:0; } /* --- Modal genérico (conciliación manual) -------------------------------- */ .modal-fondo { position:fixed; inset:0; z-index:1200; background:rgba(15,20,25,.55); display:flex; align-items:center; justify-content:center; padding:24px; backdrop-filter:blur(2px); } .modal-caja { background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.35); width:min(960px,100%); max-height:88vh; display:flex; flex-direction:column; } .modal-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:14px 18px; border-bottom:1px solid var(--border); } .modal-head .hint { margin:3px 0 0; } .modal-cuerpo { padding:14px 18px; overflow-y:auto; flex:1 1 auto; } .modal-pie { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:12px 18px; border-top:1px solid var(--border); background:var(--surface-2); border-radius:0 0 12px 12px; } .modal-pie-acciones { display:flex; gap:8px; } /* --- Barra de filtros: TODO en una línea ----------------------------------- La .form-grid de auto-fit hacía bajar el botón a un segundo renglón cuando los campos no entraban en las columnas justas. Con flex los inputs se encogen y el botón nunca baja. */ .filtros-linea { display:flex; align-items:flex-end; gap:10px; flex-wrap:nowrap; } .filtros-linea .fg { min-width:0; flex:0 1 145px; } .filtros-linea .fg-ancho { flex:1 1 200px; } .filtros-linea .fg-fecha { flex:0 0 150px; } .filtros-linea .btn { flex:0 0 auto; min-height:35px; line-height:19px; } /* El banco necesita mas aire que un filtro comun: "BANCO DE GALICIA Y BUENOS AIRES" no entra en 145px ni recortandole la forma juridica. */ .filtros-linea .fg-banco { flex:0 1 280px; } @media (max-width:1100px) { .filtros-linea { flex-wrap:wrap; } .filtros-linea .fg { flex:1 1 150px; } } /* --- Autocompletado del pagador (Plenario / padron AFIP) ------------------ */ .doc-estado { margin-top:8px; font-size:12.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:22px; } .doc-estado.aviso { color:var(--warn,#9c5717); } .doc-estado.buscando { opacity:.6; } .doc-badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600; letter-spacing:.01em; } .doc-badge.ok { background:rgba(22,163,74,.14); color:#15803d; } .doc-badge.info { background:rgba(37,99,235,.14); color:#1d4ed8; } :root[data-theme="dark"] .doc-badge.ok { color:#5fcf8a; } :root[data-theme="dark"] .doc-badge.info { color:#7fa9f5; } /* Un documento puede tener varios CUIT en AFIP: se ofrecen y elige el operador. */ .doc-chips { display:flex; gap:8px; flex-wrap:wrap; width:100%; margin-top:2px; } .chip-cuit { border:1px solid var(--border); background:var(--panel,#fff); color:inherit; border-radius:999px; padding:4px 12px; font-size:12px; cursor:pointer; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chip-cuit:hover { border-color:var(--accent,#2563eb); } .chip-cuit strong { font-variant-numeric:tabular-nums; margin-right:6px; } /* Filtros del modal en UNA línea: los inputs se encogen, el botón nunca baja de renglón. */ .mc-filtros { display:flex; align-items:flex-end; gap:10px; flex-wrap:nowrap; } .mc-filtros .fg { min-width:0; flex:0 1 150px; } .mc-filtros .mc-fg-nombre { flex:1 1 auto; } .mc-filtros .btn { flex:0 0 auto; min-height:35px; line-height:19px; } @media (max-width:640px) { .mc-filtros { flex-wrap:wrap; } .mc-filtros .fg { flex:1 1 140px; } } .mc-progreso { font-size:13px; } .mc-ok { color:var(--success); font-weight:600; } .mc-resto { color:#2a6aa8; font-weight:600; } .mc-falta { color:#9c5717; font-weight:600; } .mc-titular { margin-bottom:10px; } /* Diálogo de exclusión: motivo + la regla sugerida. */ .mc-ex-intro { text-align:left; margin:0 0 12px; font-size:13.5px; } .mc-ex-fg { text-align:left; margin-bottom:10px; } .mc-ex-fg select { margin-top:6px; } .mc-ex-check { display:flex; align-items:center; gap:8px; text-align:left; font-size:13px; margin:4px 0 10px; cursor:pointer; } .mc-ex-check input { width:16px; height:16px; margin:0; } /* "Buscar otro titular": es la salida cuando el detectado no es el correcto. Tiene que verse, antes era un btn-sm gris que se perdía entre el texto. */ .btn-otro { border-color:var(--primary); color:var(--primary); font-weight:600; background:transparent; padding:8px 16px; } .btn-otro:hover { background:rgba(31,78,121,.08); border-color:var(--primary); color:var(--primary); } .btn-otro-sm { padding:4px 11px; font-size:12.5px; } :root[data-theme="dark"] .btn-otro:hover { background:rgba(74,144,217,.15); } /* Panel de "este cliente no debe nada": explica qué pasa si se aplica igual. */ .mc-ctacte { border:1px solid var(--border); border-left:4px solid var(--warning); border-radius:9px; padding:14px 16px; background:var(--panel-2); text-align:left; } .mc-ctacte-tit { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--warning); font-weight:700; margin-bottom:8px; } .mc-ctacte p { margin:0 0 8px; font-size:13.5px; line-height:1.5; } .mc-ctacte-que { opacity:.85; } .mc-ctacte .btn-otro { margin-top:6px; } /* Una regla desactivada se ve, pero apagada. */ .regla-off td { opacity:.5; } /* Por qué el motor no pudo resolverlo solo, arriba del modal. */ .mc-motivo { color:var(--warning); font-size:12.5px; } /* Card de contexto del modal: 3 líneas por lado y nada más. La versión con
ocupaba media pantalla y empujaba los créditos fuera de la vista. */ .mc-contexto { display:grid; grid-template-columns:1fr 30px 1fr; align-items:stretch; border:1px solid var(--border); border-radius:9px; background:var(--panel-2); margin-bottom:12px; overflow:hidden; } .mc-ctx-lado { padding:9px 12px; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:2px; } .mc-ctx-lado:last-of-type { background:var(--surface); } .mc-ctx-l1 { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; } .mc-ctx-l2 { font-size:13px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mc-ctx-l3 { font-size:12px; opacity:.7; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mc-ctx-monto { font-size:19px; font-weight:600; } .mc-ctx-fecha { font-size:11.5px; opacity:.6; } .mc-ctx-nombre { font-size:15px; } .mc-ctx-vacio { color:var(--warning); } .mc-ctx-alerta { color:var(--warning); opacity:1; font-weight:600; } .mc-ctx-flecha { display:flex; align-items:center; justify-content:center; color:var(--text-muted); border-left:1px solid var(--border); border-right:1px solid var(--border); } .mc-ctx-pista { grid-column:1 / -1; padding:6px 12px; border-top:1px solid var(--border); font-size:12px; background:var(--surface-2); } @media (max-width:700px) { .mc-contexto { grid-template-columns:1fr; } .mc-ctx-flecha { height:22px; border:none; border-top:1px solid var(--border); } } .conc-ok { color:var(--success); font-size:12.5px; font-weight:600; white-space:nowrap; } .conc-acciones { display:flex; gap:5px; flex:0 0 auto; align-items:center; } .conc-acciones form { margin:0; } /* Los botones de ↻ y ✕ son cuadrados: en una fila compacta el texto no entra. */ .conc-acciones .btn { padding:4px 9px; } /* En pantalla angosta los dos lados se apilan y la flecha pasa a apuntar hacia abajo. Se rota SOLO el glifo: rotar el contenedor lo deja atravesado de punta a punta, porque transform no cambia el layout pero sí lo que se pinta. */ @media (max-width:860px) { .conc-fila { grid-template-columns:1fr; } .conc-flecha { height:28px; border:none; border-top:1px solid var(--border); } .conc-flecha span { display:inline-block; transform:rotate(90deg); } } /* --- Imputar a mano: movimiento a la izquierda, crédito a la derecha ------ */ .resolver-paneles { display:grid; grid-template-columns:minmax(280px,360px) 1fr; gap:16px; align-items:start; } @media (max-width:900px) { .resolver-paneles { grid-template-columns:1fr; } } .panel-mov { position:sticky; top:16px; } .mov-monto { font-size:30px; font-weight:600; margin:10px 0 14px; } .panel-mov .agente-datos { font-size:13px; } .form-credito-resolver { margin:0 0 10px; } .resolver-aplicar { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--border); margin-top:6px; } .resolver-aplicar .hint { margin:2px 0 0; } /* Celda "Resolver" de la cola de revisión: el desplegable arriba y los botones abajo. */ .resolver { display:flex; flex-direction:column; gap:6px; min-width:280px; } .resolver-atribuir { display:flex; gap:6px; margin:0; } .resolver-atribuir select { flex:1 1 auto; min-width:0; } /* --- Tablas de datos ----------------------------------------------------- */ .table { width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; margin-top:10px; } .table thead th { text-align:left; font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); background:var(--panel-2); padding:9px 12px; white-space:nowrap; border-bottom:1px solid var(--border); } .table thead th:first-child { border-top-left-radius:8px; } .table thead th:last-child { border-top-right-radius:8px; } .table tbody td { padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; } .table tbody tr:last-child td { border-bottom:none; } .table tbody tr:hover td { background:var(--panel-2); } .table th.num, .table td.num { text-align:right; font-variant-numeric:tabular-nums; } /* Columna del tilde en las tablas con seleccion multiple: angosta y centrada, para que no le robe ancho a las columnas que tienen datos. */ .table th.col-tilde, .table td.col-tilde { width:32px; text-align:center; padding-left:8px; padding-right:0; } .table .col-tilde input { cursor:pointer; margin:0; } /* Barra de descarte en lote de Conciliacion. Aparece solo con algo marcado. 🚨 La regla [hidden] va DESPUES del display:flex: sin ella, el flex le gana al atributo hidden y la barra queda visible siempre. */ .conc-lote { display:flex; align-items:center; gap:8px; margin:0 0 8px; padding:8px 12px; background:var(--cashin-suave, #f4f6f9); border-radius:8px; } .conc-lote[hidden] { display:none; } .conc-lote .hint { flex:1 1 auto; margin:0; } /* El tilde de cada tarjeta, al lado del boton de descartar. */ .conc-tilde { display:inline-flex; align-items:center; margin-right:6px; cursor:pointer; } .conc-tilde input { cursor:pointer; margin:0; } /* Cobro repartido: un renglon por credito debajo del panel de Plenario. */ .conc-repartido { margin-top:4px; display:flex; flex-direction:column; gap:2px; } .conc-repartido-linea { font-size:11.5px; color:var(--cashin-texto-suave, #667); } .conc-repartido-linea strong { font-weight:600; } /* "crédito #N" clickeable: abre sus cuotas. Parece texto con subrayado, no un botón más. */ .conc-credito-link { background:none; border:0; padding:0; font:inherit; color:var(--accent, #2f5fd0); cursor:pointer; text-decoration:underline dotted; text-underline-offset:2px; } .conc-credito-link:hover { text-decoration-style:solid; } .table td .muted { display:block; font-size:11.5px; margin-top:2px; } /* Badges de estado dentro de tablas */ .badge { display:inline-block; padding:3px 9px; border-radius:11px; font-size:11px; font-weight:600; letter-spacing:.02em; background:var(--panel-2); color:var(--text-muted); white-space:nowrap; } /* ---- Colores por estado. VAN DESPUÉS de .badge: misma especificidad, gana el último. Estaban antes, así que la base les pisaba background/color y TODOS los badges salían grises: por eso "Pendiente de procesar" o "Nuevo" se veían sin color. ---- */ .badge-nuevo { background:#e7eefc; color:#274b9c; } .badge-identificado { background:#e3f6e8; color:#1c7a3c; } .badge-aplicado { background:#dff3ea; color:#12694f; } .badge-enrevision { background:#fdeee0; color:#9c5717; } .badge-abierta { background:#e7eefc; color:#274b9c; } .badge-matcheada { background:#e3f6e8; color:#1c7a3c; } .badge-expirada { background:#eef0f3; color:#666; } .badge-imputada { background:#dff3ea; color:#12694f; } .badge-cancelada { background:#f6e3e3; color:#9c2b2b; } /* Marca de dato simulado. Violeta a propósito: no se parece a ningún estado real. */ .badge-sim { background:#efe6fb; color:#5b2d94; font-weight:700; letter-spacing:.04em; } :root[data-theme="dark"] .badge-nuevo { background:#1b2740; color:#9dbcf0; } :root[data-theme="dark"] .badge-enrevision { background:#332312; color:#e0ad6d; } :root[data-theme="dark"] .badge-matcheada, :root[data-theme="dark"] .badge-imputada, :root[data-theme="dark"] .badge-identificado, :root[data-theme="dark"] .badge-aplicado { background:#12301f; color:#7fd8a4; } :root[data-theme="dark"] .badge-cancelada { background:#3a1d1d; color:#e79a94; } :root[data-theme="dark"] .badge-expirada { background:#242b35; color:#9aa4b2; } :root[data-theme="dark"] .badge-sim { background:#2c1f45; color:#c4a5f0; } /* Tabla de cuotas en Caja: mas compacta y con el check bien alineado */ .table input[type=checkbox] { width:16px; height:16px; margin:0; vertical-align:middle; } /* El .demo-banner del motor se eliminó junto con la barra del layout: ahora el estado del motor vive en la .motor-card del Dashboard. El punto indicador se sigue usando ahí. */ .badge-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; } .badge-dot.on { background:#2f9e5e; box-shadow:0 0 0 3px rgba(47,158,94,.22); animation:pulso 2s ease-in-out infinite; } .badge-dot.off { background:#c2762a; box-shadow:0 0 0 3px rgba(194,118,42,.18); } @keyframes pulso { 0%,100% { opacity:1; } 50% { opacity:.45; } } /* --- Menu de usuario ----------------------------------------------------- */ .user-chip { position:relative; cursor:pointer; user-select:none; } .user-caret { margin-left:6px; opacity:.5; font-size:11px; } .user-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:50; min-width:180px; padding:5px; background:var(--panel); border:1px solid var(--border); border-radius:9px; box-shadow:0 8px 24px rgba(0,0,0,.14); } .user-menu form { margin:0; } .user-menu-item { display:block; width:100%; text-align:left; padding:9px 12px; border:0; border-radius:6px; background:transparent; color:var(--text); font-size:13.5px; font-family:inherit; cursor:pointer; } .user-menu-item:hover { background:var(--panel-2); } /* --- Pantalla de login --------------------------------------------------- */ .login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:20px; } .login-card { width:100%; max-width:370px; } .login-brand { text-align:center; margin-bottom:22px; } .login-brand .logo { font-size:21px; font-weight:600; } .login-brand .sub { font-size:12.5px; opacity:.6; margin-top:3px; } .fg-block { min-width:0; width:100%; margin-bottom:14px; } .btn-block { width:100%; padding:10px; } .login-hint { text-align:center; margin-top:16px; } .aviso-dev { color:#9c5717; font-weight:600; } :root[data-theme="dark"] .aviso-dev { color:#e0ad6d; } .fg-grow { flex:1 1 320px; } .vencido { color:#c2410c; font-weight:600; } /* --- Grillas de formulario alineadas ------------------------------------- */ .form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px 16px; align-items:start; } .form-grid .fg { min-width:0; } /* Alturas fijas: el label ocupa 16px + los 4px de gap de .fg = 20px sobre el input. */ .form-grid .fg > label { line-height:16px; margin:0; } .form-grid .fg > .hint { margin:0; } .form-grid input, .form-grid select { width:100%; } /* 19 (line-height) + 14 (padding) + 2 (borde) = 35px exactos para input y boton. */ .form-grid input, .form-grid select, .form-grid .btn { min-height:35px; line-height:19px; box-sizing:border-box; } .form-grid .fg-grow { grid-column:span 2; } /* Seccion "la cuenta en el banco": 6 columnas FIJAS. Con el auto-fit de .form-grid la cantidad de columnas depende del ancho, y el CBU no entraba en la fila: caia solo abajo y dejaba un hueco al costado del combo. Con spans explicitos las dos filas quedan llenas y parejas: fila 1 -> Bank Id (1) + View Id (1) + cuenta (2) + CBU (2) fila 2 -> cuenta que recauda (4) + tipo de transferencia (2) */ .grid-cuenta-banco { grid-template-columns:repeat(6,1fr); } .grid-cuenta-banco .col-1 { grid-column:span 1; } .grid-cuenta-banco .col-2 { grid-column:span 2; } .grid-cuenta-banco .col-4 { grid-column:span 4; } /* Angosto: dos columnas y todo lo ancho ocupa las dos. */ @media (max-width:900px) { .grid-cuenta-banco { grid-template-columns:repeat(2,1fr); } .grid-cuenta-banco .col-1, .grid-cuenta-banco .col-2 { grid-column:span 1; } .grid-cuenta-banco .col-4 { grid-column:span 2; } } /* La celda de acciones no tiene