/* =========================== Proyecto Jesús - Estilos globales Ruta sugerida: /public_html/assets/css/app.css =========================== */ /* 1) Variables: colores, radios, sombras, velocidades */ :root{ --brand: #8A6D2F; /* dorado café del proyecto */ --brand-600: #7A602A; --brand-700: #6B5425; --bg: #f9fafb; /* fondo app */ --surface: #ffffff; /* tarjetas/containers */ --line: #e5e7eb; /* bordes suaves */ --text: #111827; /* texto principal */ --muted: #6b7280; /* texto secundario */ --ok: #10b981; --warn: #f59e0b; --danger: #ef4444; --info: #3b82f6; --radius: 14px; --radius-sm: 10px; --shadow: 0 6px 16px rgba(0,0,0,.06); --shadow-sm: 0 4px 10px rgba(0,0,0,.05); --shadow-lg: 0 8px 22px rgba(0,0,0,.10); --speed: .2s; } /* 2) Dark mode por atributo: */ html[data-theme="dark"]{ --bg: #0b1220; --surface: #0f172a; --line: #1f2937; --text: #e5e7eb; --muted: #94a3b8; --brand: #c9a551; --brand-600: #b49240; --brand-700: #9c7e34; --shadow: 0 10px 24px rgba(0,0,0,.35); --shadow-sm: 0 6px 16px rgba(0,0,0,.28); } /* 3) Reset suave + tipografía coherente */ :where(html, body){ background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :where(img){ max-width:100%; height:auto; } :where(a){ color:inherit; text-decoration:none; } :where(button){ cursor:pointer; } /* 4) Contenedores y encabezados */ .app-header{ background: var(--surface); box-shadow: var(--shadow-sm); height: 56px; } .brand-pill{ color: var(--brand); border: 1px solid var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); transition: background var(--speed), color var(--speed), border-color var(--speed); } .brand-pill:hover{ color: var(--brand-700); border-color: var(--brand-700); background: color-mix(in srgb, var(--brand) 14%, transparent); } /* 5) Tarjetas, paneles, contenedores */ .card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .card-sm{ border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); } .card-header{ padding: .9rem 1rem; border-bottom: 1px solid var(--line); display:flex; align-items:center; justify-content:space-between; } .card-body{ padding: 1rem; } /* 6) Botones */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.55rem .9rem; border-radius: 10px; border:1px solid var(--line); background: var(--surface); color: var(--text); transition: transform var(--speed), box-shadow var(--speed), background var(--speed), border-color var(--speed); } .btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn:active{ transform: translateY(0); } .btn-primary{ background: var(--brand); color: #fff; border-color: color-mix(in srgb, var(--brand) 80%, black); } .btn-primary:hover{ background: var(--brand-600); } .btn-primary:active{ background: var(--brand-700); } .btn-outline{ background: transparent; border-color: var(--brand); color: var(--brand); } .btn-outline:hover{ background: color-mix(in srgb, var(--brand) 12%, transparent); border-color: var(--brand-600); color: var(--brand-600); } .btn-danger{ background: var(--danger); color:#fff; border-color: color-mix(in srgb, var(--danger) 80%, black); } .btn-danger:hover{ filter: brightness(.95); } .btn-success{ background: var(--ok); color:#fff; border-color: color-mix(in srgb, var(--ok) 80%, black); } .btn-success:hover{ filter: brightness(.95); } .btn-ghost{ background: transparent; border-color: transparent; color: var(--muted); } .btn-ghost:hover{ background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); } /* 7) Formularios */ .input, .select, .textarea{ width:100%; border:1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 10px; padding:.55rem .7rem; transition: border-color var(--speed), box-shadow var(--speed), background var(--speed); } .input:focus, .select:focus, .textarea:focus{ outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); } .input[readonly], .input:disabled{ background: color-mix(in srgb, var(--surface) 70%, var(--bg)); color: var(--muted); } /* 8) Badges/Chips */ .badge{ display:inline-flex; align-items:center; gap:.4rem; padding:.22rem .5rem; border-radius: 999px; font-size:.78rem; font-weight:600; color:#fff; } .badge-blue { background: #2563eb; } .badge-green { background: #059669; } .badge-amber { background: #d97706; } .badge-red { background: #dc2626; } .badge-gray { background: #6b7280; } .badge-purple { background: #6d28d9; } .badge-indigo { background: #4338ca; } /* Mapeo rápido para estados conocidos */ .badge-estado-Activo { background:#2563eb; } .badge-estado-En mora { background:#dc2626; } /* opcional si generas con clase dinámica */ .badge-estado-Reprogramado { background:#d97706; } .badge-estado-Liquidado { background:#059669; } .badge-estado-Cancelado { background:#6b7280; } /* 9) Tablas */ .table{ width:100%; border-collapse: collapse; font-size:.92rem; } .table th, .table td{ padding:.6rem .7rem; border-bottom:1px solid var(--line); } .table thead th{ position:sticky; top:0; z-index:6; background: color-mix(in srgb, var(--surface) 92%, var(--bg)); color: var(--muted); text-align:left; font-weight:600; } .table .sticky-left{ position:sticky; left:0; z-index:5; background: var(--surface); box-shadow: 4px 0 6px rgba(0,0,0,.04); } .table .sticky-right{ position:sticky; right:0; z-index:5; background: var(--surface); box-shadow: -4px 0 6px rgba(0,0,0,.04); } .table tbody tr:hover{ background: color-mix(in srgb, var(--text) 4%, transparent); } /* 10) Paginación */ .pager{ display:flex; align-items:center; gap:.5rem; } .pager a, .pager button{ border:1px solid var(--line); background: var(--surface); color: var(--text); padding:.4rem .7rem; border-radius:10px; transition: background var(--speed), border-color var(--speed); } .pager a:hover, .pager button:hover{ background: color-mix(in srgb, var(--text) 6%, transparent); } /* 11) Modales */ .modal-backdrop{ position:fixed; inset:0; background: rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; } .modal{ width:min(95vw, 520px); background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding:1rem; animation: modal-in .18s ease-out both; } @keyframes modal-in{ from{ opacity:.65; transform: translateY(6px) scale(.98); } to { opacity:1; transform: none; } } /* 12) Toaster simple */ .toast{ position:fixed; right:1rem; bottom:1rem; z-index:60; background: #111827; color:#fff; padding:.7rem 1rem; border-radius: 12px; box-shadow: var(--shadow-lg); } /* 13) Utilities pequeñas */ .hr{ height:1px; background: var(--line); width:100%; } .text-muted{ color: var(--muted); } .kbd{ font: 600 .78rem ui-monospace, SFMono-Regular, Menlo, monospace; background: color-mix(in srgb, var(--text) 6%, transparent); padding:.1rem .35rem; border-radius:6px; } /* 14) Imprimir */ @media print{ @page{ margin: 14mm; } .noprint{ display:none !important; } body{ background:#fff; } .card, .table, .modal{ box-shadow:none; } }