/* ================================================================ SHARED COMPONENT STYLES File : CssStyles/CssComponents.css Covers : Cards, tables, badges, buttons, forms, pagination, app footer. Used on ALL pages. ================================================================ */ /* ---------------------------------------------------------------- CARDS ---------------------------------------------------------------- */ .card { background: var(--color-white); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); margin-bottom: 20px; overflow: hidden; } .card-header { padding: 14px 20px; border-bottom: 1px solid var(--color-border); background-color: #F8F9FC; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .card-title { font-size: 14.5px; font-weight: 700; color: var(--color-text); } .card-body { padding: 20px; } /* ---------------------------------------------------------------- DATA TABLES ---------------------------------------------------------------- */ .data-table-wrapper { overflow-x: auto; width: 100%; } .data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 600px; } .data-table thead { background-color: #EAECF4; position: sticky; top: 0; z-index: 2; } .data-table th { padding: 10px 12px; text-align: left; font-weight: 700; color: var(--color-text); font-size: 12.5px; white-space: nowrap; border-bottom: 2px solid var(--color-border); } .data-table td { padding: 9px 12px; border-bottom: 1px solid var(--color-border); color: var(--color-text); vertical-align: middle; } .data-table tbody tr:hover { background-color: #F0F2FB; } .data-table tbody tr:last-child td { border-bottom: none; } .table-summary { background-color: #EAECF4; font-weight: 700; } /* ---------------------------------------------------------------- BADGES ---------------------------------------------------------------- */ .badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } .badge-active { background-color: var(--color-success-bg); color: var(--color-success); } .badge-cancelled{ background-color: var(--color-error-bg); color: var(--color-error); } .badge-inactive { background-color: #ECEFF1; color: #333333; } /* ---------------------------------------------------------------- BUTTONS ---------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: var(--radius-sm); border: none; cursor: pointer; font-size: 12.5px; font-weight: 700; text-decoration: none; transition: var(--transition); white-space: nowrap; line-height: 1.3; font-family: inherit; } .btn:disabled { opacity: .6; cursor: not-allowed; } .btn-primary { background-color: var(--color-btn-primary); color: var(--color-white); } .btn-primary:hover { filter: brightness(.88); transform: translateY(-1px); text-decoration: none; color: var(--color-white); } .btn-secondary { background-color: #455A64; color: var(--color-white); } .btn-secondary:hover { background-color: #37474F; text-decoration: none; color: var(--color-white); } .btn-danger { background-color: var(--color-error); color: var(--color-white); } .btn-danger:hover { background-color: #8B1515; text-decoration: none; color: var(--color-white); } .btn-neutral { background-color: #ECEFF1; color: var(--color-text); border: 1px solid var(--color-border); } .btn-neutral:hover { background-color: #CFD8DC; text-decoration: none; } .btn-sm { padding: 4px 10px; font-size: 11.5px; } .btn-lg { padding: 10px 22px; font-size: 14.5px; } .btn-group { display: flex; gap: 8px; flex-wrap: wrap; } /* ---------------------------------------------------------------- FORMS ---------------------------------------------------------------- */ .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; } .form-group { display: flex; flex-direction: column; gap: 5px; } .form-group.full-width { grid-column: 1 / -1; } .form-label { font-size: 12.5px; font-weight: 700; color: var(--color-text); } .required-mark { color: var(--color-error); margin-left: 2px; } .form-control { padding: 7px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13.5px; color: var(--color-text); background: var(--color-white); width: 100%; transition: border-color .2s; font-family: inherit; } .form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(21,101,192,.12); } .form-control[readonly]{ background-color: #F0F2FB; } .form-control[disabled]{ background-color: #ECEFF1; cursor: not-allowed; opacity: .75; } .amounts-section { background: #F8F9FC; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; margin-top: 12px; } .amounts-title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; } .total-field .form-control { font-size: 15.5px; font-weight: 700; color: var(--color-primary); border-color: var(--color-primary); } /* ---------------------------------------------------------------- PAGINATION ---------------------------------------------------------------- */ .pagination { display: flex; align-items: center; gap: 4px; margin-top: 16px; flex-wrap: wrap; } .page-btn { padding: 5px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-text); cursor: pointer; font-size: 12.5px; font-weight: 600; transition: var(--transition); text-decoration: none; min-width: 34px; text-align: center; font-family: inherit; } .page-btn:hover, .page-btn.active { background-color: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); text-decoration: none; } /* ---------------------------------------------------------------- APP FOOTER ---------------------------------------------------------------- */ .app-footer { text-align: center; padding: 14px; background-color: var(--color-white); border-top: 1px solid var(--color-border); font-size: 11.5px; } /* ---------------------------------------------------------------- RESPONSIVE ADDITIONS — Tables, Filters, Forms Ajustes para mobile sin modificar logica de procesos. ---------------------------------------------------------------- */ /* Tablas: scroll horizontal garantizado en cualquier contenedor */ .data-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */ width: 100%; } /* Tablas de Income/Expense tienen 13-14 columnas: min-width mayor */ .data-table { min-width: 700px; } /* Botones de accion en tabla: siempre en linea, nunca se parten */ .data-table td .btn { white-space: nowrap; } .data-table .text-nowrap { white-space: nowrap; } /* Card que contiene tabla: permite overflow para el scroll */ @media (max-width: 768px) { .card { overflow: visible; } /* Filtros de busqueda: de 5 columnas fijas a responsive */ /* Aplica a los grids inline de los paneles de filtros */ [style*="grid-template-columns:repeat(5, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } /* Filtros de Clients/Vendors: auto-fit ya es responsive, solo ajuste de minimo */ [style*="minmax(200px, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; } /* Seccion de montos en formularios */ .amounts-section .form-grid { grid-template-columns: 1fr 1fr !important; } /* Botones de accion en tabla: apilados en pantallas pequenas */ .data-table .text-center.text-nowrap { white-space: nowrap; } } @media (max-width: 480px) { /* Filtros: una sola columna en mobile pequeno */ [style*="grid-template-columns:repeat(5, 1fr)"] { grid-template-columns: 1fr !important; } [style*="minmax(200px, 1fr)"] { grid-template-columns: 1fr !important; } /* Montos: columna unica */ .amounts-section .form-grid { grid-template-columns: 1fr !important; } /* Card header: titulo y boton apilados */ .card-header { flex-direction: column; align-items: flex-start; } /* Action bar: boton y contador apilados */ .d-flex.justify-between.align-center { flex-direction: column; align-items: flex-start; } /* Paginacion envuelve */ .pagination { flex-wrap: wrap; } /* btn-group envuelve sin desbordarse */ .btn-group { flex-wrap: wrap; } } /* Reports: preview con scroll completo */ .report-preview, .report-container, #reportPreview, #previewContainer { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; max-width: 100%; } @media (max-width: 768px) { /* Formularios de 2 columnas en read-only (Edit pages) colapsan a 1 */ .form-grid { grid-template-columns: 1fr !important; } /* Overrides para grids inline en las paginas de formularios */ [style*="grid-column:1/-1"] { grid-column: 1 / -1 !important; } } /* ============================================================ SYSTEM CONFIRMATION MODAL (#sysModal) Reemplaza confirm() nativo. Definido en FreFooter.php. Se muestra solo cuando tiene la clase "active". ============================================================ */ /* Overlay: oculto por defecto, visible solo con clase .active */ .modal-overlay { display: none; /* Oculto por defecto */ position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(3px); align-items: center; justify-content: center; z-index: 9999; animation: modal-fade-in 0.18s ease; } /* Mostrar solo cuando tiene clase .active */ .modal-overlay.active { display: flex; } @keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } } /* Caja central del modal */ .modal-card { background: #ffffff; border-radius: 16px; box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22), 0 4px 16px rgba(15, 23, 42, 0.10); padding: 36px 40px 32px; max-width: 420px; width: calc(100% - 40px); text-align: center; border-top: 5px solid #CBD5E1; animation: modal-slide-up 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes modal-slide-up { from { transform: translateY(24px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } /* Header: icono + titulo */ .modal-header { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 14px; } /* Icono */ .modal-icon { font-size: 2rem; line-height: 1; } .modal-icon-warning { color: #D97706; } .modal-icon-danger { color: #E53E3E; } .modal-icon-info { color: #3182CE; } .modal-icon-success { color: #38A169; } /* Titulo */ .modal-title { font-size: 1.1rem; font-weight: 700; color: #1E293B; } /* Cuerpo: mensaje */ .modal-body { font-size: 0.92rem; color: #475569; margin-bottom: 24px; white-space: pre-line; } /* Footer: botones */ .modal-footer { display: flex; justify-content: center; gap: 12px; } /* ================================================================ MODAL DE CONFIRMACION (smodal) Y FLASH MESSAGES Movido aqui desde CssUsers.css para cargarse en TODAS las paginas ================================================================ */ .smodal-overlay { position: fixed; /* Fijo sobre todo el viewport */ inset: 0; /* top/right/bottom/left = 0 */ background: rgba(15, 23, 42, 0.55); /* Fondo oscuro semi-opaco */ backdrop-filter: blur(3px); /* Desenfoque del contenido detras */ display: flex; /* Flexbox para centrar la caja */ align-items: center; /* Centrado vertical */ justify-content: center; /* Centrado horizontal */ z-index: 9999; /* Encima de todo el contenido */ animation: smodal-fade-in 0.18s ease; /* Aparicion suave */ } /* Animacion de entrada del overlay */ @keyframes smodal-fade-in { from { opacity: 0; } /* Comienza invisible */ to { opacity: 1; } /* Termina visible */ } /* Caja principal del modal */ .smodal-box { background: #ffffff; /* Fondo blanco puro */ border-radius: 16px; /* Esquinas redondeadas modernas */ box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22), /* Sombra profunda */ 0 4px 16px rgba(15, 23, 42, 0.10); /* Sombra suave secundaria */ padding: 36px 40px 32px; /* Espaciado interno generoso */ max-width: 420px; /* Ancho maximo del modal */ width: calc(100% - 40px); /* Responsivo en movil */ text-align: center; /* Contenido centrado */ border-top: 5px solid #CBD5E1; /* Borde superior neutro por defecto */ animation: smodal-slide-up 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); /* Rebote al entrar */ } /* Animacion de entrada de la caja (slide up con rebote) */ @keyframes smodal-slide-up { from { transform: translateY(24px) scale(0.96); opacity: 0; } /* Posicion inicial */ to { transform: translateY(0) scale(1); opacity: 1; } /* Posicion final */ } /* Variante ROJA: para accion Deactivate */ .smodal-box--danger { border-top-color: #E53E3E; } /* Borde superior rojo */ /* Variante VERDE: para accion Activate */ .smodal-box--success { border-top-color: #38A169; } /* Borde superior verde */ /* Icono grande centrado encima del titulo */ .smodal-icon { font-size: 44px; /* Tamano grande y visible */ line-height: 1; /* Sin espacio extra vertical */ margin-bottom: 14px; /* Separacion con el titulo */ display: block; /* Ocupa su propia linea */ } /* Titulo principal del modal */ .smodal-title { font-size: 18px; /* Tamano prominente */ font-weight: 700; /* Negrita fuerte */ color: #1A202C; /* Gris muy oscuro casi negro */ margin: 0 0 10px; /* Solo margen inferior */ line-height: 1.35; /* Altura de linea comoda */ } /* Mensaje secundario informativo */ .smodal-msg { font-size: 14px; /* Texto secundario mas pequeno */ color: #4A5568; /* Gris medio para contraste */ margin: 0 0 26px; /* Separacion antes de los botones */ line-height: 1.5; /* Lectura comoda */ } /* Contenedor de botones — centrados en fila */ .smodal-actions { display: flex; /* Fila de botones */ justify-content: center; /* Centrado horizontal */ gap: 12px; /* Separacion entre botones */ flex-wrap: wrap; /* Wrap en pantallas muy estrechas */ } /* Boton Cancelar — neutro, borde gris */ .smodal-btn-cancel { padding: 9px 24px; /* Relleno comodo para click */ border-radius: 8px; /* Esquinas redondeadas */ font-size: 14px; /* Tamano de letra del boton */ font-weight: 600; /* Semi-negrita */ cursor: pointer; /* Puntero de mano */ border: 1.5px solid #CBD5E1; /* Borde gris claro */ background: #F7FAFC; /* Fondo gris muy suave */ color: #4A5568; /* Texto gris medio */ transition: background 0.15s, border-color 0.15s; /* Transicion suave al hover */ text-decoration: none; /* Sin subrayado */ } /* Hover del boton Cancelar */ .smodal-btn-cancel:hover { background: #EDF2F7; /* Un poco mas oscuro al hover */ border-color: #A0AEC0; /* Borde mas visible */ } /* Boton Confirmar — base compartida */ .smodal-btn-confirm { padding: 9px 24px; /* Relleno igual al de cancelar */ border-radius: 8px; /* Esquinas redondeadas */ font-size: 14px; /* Tamano de letra del boton */ font-weight: 700; /* Negrita para destacar */ cursor: pointer; /* Puntero de mano */ border: none; /* Sin borde por defecto */ color: #ffffff; /* Texto blanco sobre color solido */ text-decoration: none; /* Sin subrayado en el enlace */ display: inline-block; /* Comportamiento de bloque en linea */ transition: filter 0.15s, transform 0.12s; /* Transicion suave */ } /* Hover del boton Confirmar: leve brillo y escala */ .smodal-btn-confirm:hover { filter: brightness(1.1); /* Aclarado leve al hover */ transform: translateY(-1px); /* Leve elevacion al hover */ } /* Variante ROJA del boton Confirmar — para Deactivate */ .smodal-btn-confirm--danger { background: #E53E3E; } /* Rojo para accion destructiva */ /* Variante VERDE del boton Confirmar — para Activate */ .smodal-btn-confirm--success { background: #38A169; } /* Verde para accion positiva */ /* ================================================================ FLASH MESSAGES — estilos HTML con CSS para todas las paginas Generados por renderFlashMessages() en functions.php. Clases: .flash-messages > .alert.alert-{type} ================================================================ */ .flash-messages { margin-bottom: 16px; /* Separacion con el contenido siguiente */ } .alert { display: flex; /* Flex para alinear icono y texto */ align-items: flex-start; /* Alineacion al tope */ gap: 10px; /* Separacion entre icono y texto */ padding: 12px 16px; /* Relleno interno comodo */ border-radius: var(--radius); /* Esquinas redondeadas del sistema */ border: 1px solid transparent; /* Borde base, el color lo define cada variante */ font-size: 13.5px; /* Tamano de texto del mensaje */ font-weight: 500; /* Peso medio para legibilidad */ margin-bottom: 8px; /* Separacion entre mensajes consecutivos */ line-height: 1.45; /* Altura de linea comoda */ animation: alertFadeIn 0.25s ease; /* Aparicion suave */ } @keyframes alertFadeIn { from { opacity: 0; transform: translateY(-6px); } /* Entra desde arriba */ to { opacity: 1; transform: translateY(0); } /* Posicion final */ } /* SUCCESS — verde */ .alert-success { background: #F0FDF4; /* Fondo verde muy suave */ border-color: #86EFAC; /* Borde verde claro */ color: #166534; /* Texto verde oscuro */ } .alert-success::before { content: '✓'; /* Icono check */ font-size: 16px; /* Tamano del icono */ font-weight: 700; /* Negrita */ flex-shrink: 0; /* No se comprime */ color: #16A34A; /* Verde brillante */ } /* ERROR — rojo */ .alert-error { background: #FFF1F2; /* Fondo rojo muy suave */ border-color: #FCA5A5; /* Borde rojo claro */ color: #991B1B; /* Texto rojo oscuro */ } .alert-error::before { content: '✕'; /* Icono X */ font-size: 16px; font-weight: 700; flex-shrink: 0; color: #DC2626; /* Rojo brillante */ } /* WARNING — amarillo/naranja */ .alert-warning { background: #FFFBEB; /* Fondo amarillo muy suave */ border-color: #FCD34D; /* Borde amarillo */ color: #92400E; /* Texto naranja oscuro */ } .alert-warning::before { content: '⚠'; /* Icono advertencia */ font-size: 16px; font-weight: 700; flex-shrink: 0; color: #D97706; /* Naranja brillante */ } /* INFO — azul */ .alert-info { background: #EFF6FF; /* Fondo azul muy suave */ border-color: #93C5FD; /* Borde azul claro */ color: #1E40AF; /* Texto azul oscuro */ } .alert-info::before { content: 'ℹ'; /* Icono informacion */ font-size: 16px; font-weight: 700; flex-shrink: 0; color: #2563EB; /* Azul brillante */ }