/* * css_contapyme.css — Hoja de estilos global del sistema ContaPyme * ────────────────────────────────────────────────────────────────── * Incluye: variables, reset, topbar, layout, listas, formularios, * badges, botones, paginación, filtros, widgets de home. * * Dependencias externas (cargar en el ANTES de este archivo): * Bootstrap 5.3 * Bootstrap Icons 1.11 * Google Fonts — Inter * * Uso: * */ /* ══════════════════════════════════════════════════════════════════════════ 0. VARIABLES GLOBALES ══════════════════════════════════════════════════════════════════════════ */ :root { /* Paleta principal */ --cp-primary: #1e3a5f; --cp-accent: #3878E0; --cp-accent-2: #2ABDFF; --cp-accent-lt: #eef4ff; --cp-border: #e5e7eb; --cp-border-dark: #d1d5db; /* Texto */ --cp-text: #1f2937; --cp-text-muted: #6b7280; --cp-text-soft: #9ca3af; /* Backgrounds */ --cp-bg: #f1f5f9; --cp-bg-card: #ffffff; --cp-bg-input: #ffffff; --cp-bg-hover: #f8fafc; /* Semánticos */ --cp-success: #059669; --cp-success-lt: #d1fae5; --cp-warning: #f59e0b; --cp-warning-lt: #fef3c7; --cp-danger: #dc2626; --cp-danger-lt: #fee2e2; --cp-info: #0ea5e9; --cp-info-lt: #e0f2fe; /* Geometría */ --cp-radius: 8px; --cp-radius-lg: 12px; --cp-shadow: 0 2px 10px rgba(0,0,0,.06); --cp-shadow-lg: 0 6px 24px rgba(0,0,0,.10); /* Gradiente de acento */ --cp-grad: linear-gradient(135deg, var(--cp-accent), var(--cp-accent-2)); --cp-grad-dark: linear-gradient(135deg, var(--cp-primary), #2d6a9f); --cp-grad-green: linear-gradient(135deg, #065f46, #059669); --cp-grad-purple: linear-gradient(135deg, #7c3aed, #a78bfa); /* Topbar */ --cp-topbar-h: 68px; /* Tipografía */ --cp-font: 'Inter', sans-serif; --cp-font-size: 13px; } /* ══════════════════════════════════════════════════════════════════════════ 1. RESET BASE ══════════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--cp-font); font-size: var(--cp-font-size); background: var(--cp-bg); color: var(--cp-text); min-height: 100vh; margin: 0; padding: 0; } a { color: var(--cp-accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ══════════════════════════════════════════════════════════════════════════ 2. TOPBAR ══════════════════════════════════════════════════════════════════════════ */ .cp-topbar { background: var(--cp-bg-card); border-bottom: 1px solid var(--cp-border); padding: 0 32px; display: flex; align-items: center; justify-content: space-between; height: var(--cp-topbar-h); box-shadow: 0 1px 6px rgba(0,0,0,.06); position: sticky; top: 0; z-index: 200; } /* Brand */ .cp-topbar-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; } .cp-topbar-brand img { height: 48px; width: auto; } .cp-brand-name { font-size: 15px; font-weight: 700; color: var(--cp-text); letter-spacing: -.3px; } .cp-brand-sub { font-size: 11px; color: var(--cp-text-muted); margin-top: 1px; font-weight: 400; } /* Lado derecho */ .cp-topbar-right { display: flex; align-items: center; gap: 20px; margin-left: auto; } .cp-topbar-user { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .cp-user-empresa { font-size: 13px; font-weight: 600; color: var(--cp-text); } .cp-user-info { font-size: 11px; color: var(--cp-text-muted); display: flex; align-items: center; gap: 10px; } .cp-user-info a { color: var(--cp-accent); text-decoration: none; font-weight: 500; } .cp-user-info a:hover { text-decoration: underline; } .cp-topbar-avatar { width: 38px; height: 38px; background: var(--cp-grad); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; flex-shrink: 0; } .cp-btn-logout { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: var(--cp-bg-card); border: 1px solid var(--cp-border); border-radius: var(--cp-radius); font-size: 12px; font-weight: 500; color: #374151; text-decoration: none; transition: all .15s; cursor: pointer; white-space: nowrap; font-family: var(--cp-font); } .cp-btn-logout:hover { background: #fef2f2; border-color: #fecaca; color: var(--cp-danger); text-decoration: none; } /* Centro de topbar: breadcrumb */ .cp-topbar-center { display: flex; align-items: center; padding-left: 24px; min-width: 0; } /* Breadcrumb dentro del topbar */ .cp-topbar-breadcrumb { display: flex; align-items: center; gap: 2px; white-space: nowrap; overflow: hidden; } .cp-tbc-home { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 28px; border-radius: var(--cp-radius); color: var(--cp-text-muted); text-decoration: none; font-size: 14px; transition: background .12s, color .12s; flex-shrink: 0; } .cp-tbc-home:hover { background: var(--cp-accent-lt); color: var(--cp-accent); text-decoration: none; } .cp-tbc-sep { font-size: 10px; color: var(--cp-border-dark); flex-shrink: 0; margin: 0 1px; } .cp-tbc-link { font-size: 13px; font-weight: 500; color: var(--cp-accent); text-decoration: none; padding: 4px 8px; border-radius: var(--cp-radius); transition: background .12s; max-width: 180px; overflow: hidden; text-overflow: ellipsis; } .cp-tbc-link:hover { background: var(--cp-accent-lt); text-decoration: none; } .cp-tbc-current { font-size: 13px; font-weight: 600; color: var(--cp-text); padding: 4px 8px; background: var(--cp-bg); border-radius: var(--cp-radius); max-width: 220px; overflow: hidden; text-overflow: ellipsis; } /* Ocultar texto "Cerrar sesión" en pantallas muy chicas */ @media (max-width: 600px) { .cp-logout-label { display: none; } .cp-topbar { padding: 0 16px; } .cp-user-info a:not(:first-child) { display: none; } .cp-topbar-center { display: none; } /* en mobile el breadcrumb va debajo */ } /* ══════════════════════════════════════════════════════════════════════════ 3. LAYOUT PRINCIPAL ══════════════════════════════════════════════════════════════════════════ */ .cp-wrap { max-width: 1200px; margin: 32px auto; padding: 0 24px 60px; } /* Breadcrumb */ .cp-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cp-text-muted); margin-bottom: 20px; } .cp-breadcrumb a { color: var(--cp-accent); text-decoration: none; } .cp-breadcrumb a:hover { text-decoration: underline; } .cp-breadcrumb .sep { color: var(--cp-border-dark); } .cp-breadcrumb .current { color: var(--cp-text); font-weight: 500; } /* Page header (listas) */ .cp-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; } .cp-page-header h1 { font-size: 20px; font-weight: 700; color: var(--cp-text); margin: 0; } .cp-page-header p { font-size: 13px; color: var(--cp-text-muted); margin: 4px 0 0; } /* ══════════════════════════════════════════════════════════════════════════ 4. BOTONES ══════════════════════════════════════════════════════════════════════════ */ .cp-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border: none; border-radius: var(--cp-radius); font-size: 13px; font-weight: 600; font-family: var(--cp-font); cursor: pointer; text-decoration: none; transition: opacity .15s, transform .1s, box-shadow .15s; white-space: nowrap; } .cp-btn:hover { opacity: .88; transform: translateY(-1px); text-decoration: none; } .cp-btn:active { transform: translateY(0); } .cp-btn-primary { background: var(--cp-grad); color: #fff; } .cp-btn-dark { background: var(--cp-grad-dark); color: #fff; } .cp-btn-success { background: var(--cp-grad-green); color: #fff; } .cp-btn-purple { background: var(--cp-grad-purple); color: #fff; } .cp-btn-danger { background: #dc2626; color: #fff; } .cp-btn-outline { background: transparent; border: 1px solid var(--cp-border-dark); color: var(--cp-text); } .cp-btn-outline:hover { background: var(--cp-bg-hover); border-color: var(--cp-accent); color: var(--cp-accent); } .cp-btn-sm { padding: 6px 13px; font-size: 12px; } .cp-btn-xs { padding: 4px 10px; font-size: 11px; } .cp-btn-block { width: 100%; justify-content: center; } /* ══════════════════════════════════════════════════════════════════════════ 5. CARDS GENÉRICAS ══════════════════════════════════════════════════════════════════════════ */ .cp-card { background: var(--cp-bg-card); border-radius: var(--cp-radius-lg); border: 1px solid var(--cp-border); box-shadow: var(--cp-shadow); overflow: hidden; } .cp-card-header { display: flex; align-items: center; gap: 10px; padding: 14px 20px; background: var(--cp-grad); color: #fff; } .cp-card-header.dark { background: var(--cp-grad-dark); } .cp-card-header.green { background: var(--cp-grad-green); } .cp-card-header.purple { background: var(--cp-grad-purple); } .cp-card-header i { font-size: 17px; opacity: .9; } .cp-card-header h2, .cp-card-header span { font-size: 13px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; margin: 0; } .cp-card-body { padding: 24px 20px; } .cp-card-footer { padding: 14px 20px; border-top: 1px solid var(--cp-border); display: flex; align-items: center; justify-content: flex-end; gap: 10px; background: var(--cp-bg-hover); } /* ══════════════════════════════════════════════════════════════════════════ 6. PANEL DE FILTROS (módulo.php) ══════════════════════════════════════════════════════════════════════════ */ .cp-filter-panel { background: var(--cp-bg-card); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); padding: 16px 20px; margin-bottom: 20px; box-shadow: var(--cp-shadow); display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .cp-filter-group { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 160px; } .cp-filter-group label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--cp-text-muted); } .cp-filter-actions { display: flex; gap: 8px; align-items: flex-end; } /* ══════════════════════════════════════════════════════════════════════════ 7. INPUTS / SELECTS / TEXTAREAS ══════════════════════════════════════════════════════════════════════════ */ .cp-input, .cp-select { width: 100%; padding: 8px 12px; border: 1px solid var(--cp-border-dark); border-radius: var(--cp-radius); font-size: 13px; font-family: var(--cp-font); color: var(--cp-text); background: var(--cp-bg-input); transition: border-color .15s, box-shadow .15s; appearance: none; -webkit-appearance: none; } .cp-input:focus, .cp-select:focus { outline: none; border-color: var(--cp-accent); box-shadow: 0 0 0 3px rgba(56,120,224,.12); } .cp-input::placeholder { color: var(--cp-text-soft); } .cp-select, .inp_combo, .inp_comboNew { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; } /* Alias legacy — generado por LoadCombo() de class_conn.php */ .inp_combo, .inp_comboNew { width: auto; padding: 8px 32px 8px 12px; border: 1px solid var(--cp-border-dark); border-radius: var(--cp-radius); font-size: 13px; font-family: var(--cp-font); color: var(--cp-text); background-color: var(--cp-bg-input); transition: border-color .15s, box-shadow .15s; appearance: none; -webkit-appearance: none; } .inp_combo:focus, .inp_comboNew:focus { outline: none; border-color: var(--cp-accent); box-shadow: 0 0 0 3px rgba(56,120,224,.12); } .cp-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--cp-border-dark); border-radius: var(--cp-radius); font-size: 13px; font-family: var(--cp-font); color: var(--cp-text); background: var(--cp-bg-input); transition: border-color .15s, box-shadow .15s; resize: vertical; min-height: 90px; } .cp-textarea:focus { outline: none; border-color: var(--cp-accent); box-shadow: 0 0 0 3px rgba(56,120,224,.12); } /* Input con ícono a la izquierda */ .cp-input-icon-wrap { position: relative; } .cp-input-icon-wrap i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--cp-text-soft); font-size: 14px; pointer-events: none; } .cp-input-icon-wrap .cp-input { padding-left: 32px; } /* ══════════════════════════════════════════════════════════════════════════ 8. PANEL DE TABLA (módulo.php) ══════════════════════════════════════════════════════════════════════════ */ .cp-table-panel { background: var(--cp-bg-card); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-lg); box-shadow: var(--cp-shadow); overflow: hidden; } /* Topbar del panel tabla */ .cp-table-topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; background: var(--cp-grad-dark); color: #fff; gap: 12px; flex-wrap: wrap; } .cp-table-topbar-title { font-size: 13px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; } .cp-table-topbar-meta { font-size: 12px; color: rgba(255,255,255,.7); } .cp-table-topbar-actions { display: flex; gap: 8px; } /* ── Botones de acción (act-btn) ─────────────────────────────────────────── */ .act-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; text-decoration: none; transition: all .13s; } .act-print { background:#e8f0f8; color:var(--cp-accent,#2d6a9f); } .act-print:hover { background:var(--cp-accent,#2d6a9f); color:#fff; } .act-dup { background:#e8f5f0; color:#1a7f4b; } .act-dup:hover { background:#1a7f4b; color:#fff; } .act-del { background:#fef2f2; color:#dc2626; } .act-del:hover { background:#dc2626; color:#fff; } .act-mod { background:#e8f0f8; color:var(--cp-accent,#2d6a9f); } .act-mod:hover { background:var(--cp-accent,#2d6a9f); color:#fff; } .act-view { background:#f0f4f8; color:var(--cp-primary,#1e3a5f); } .act-view:hover { background:var(--cp-primary,#1e3a5f); color:#fff; } .act-status { background:#fff3cd; color:#856404; } .act-status:hover { background:#856404; color:#fff; } .act-asiento { background:#f0e8ff; color:#6b21a8; } .act-asiento:hover{ background:#6b21a8; color:#fff; } /* Tabla */ .cp-table { width: 100%; border-collapse: collapse; font-size: 13px; } .cp-table thead th { background: var(--cp-bg-hover); border-bottom: 2px solid var(--cp-border); padding: 10px 14px; font-weight: 600; color: var(--cp-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; cursor: pointer; user-select: none; transition: background .12s; } .cp-table thead th:hover { background: #eef4ff; color: var(--cp-accent); } .cp-table thead th.sorted-asc::after { content: ' ↑'; } .cp-table thead th.sorted-desc::after { content: ' ↓'; } .cp-table tbody tr { border-bottom: 1px solid var(--cp-border); transition: background .1s; } .cp-table tbody tr:last-child { border-bottom: none; } .cp-table tbody tr:hover { background: var(--cp-accent-lt); } .cp-table td { padding: 11px 14px; vertical-align: middle; } /* Acciones en tabla */ .cp-table-actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; } .cp-btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--cp-border); border-radius: var(--cp-radius); background: var(--cp-bg-card); color: var(--cp-text-muted); font-size: 14px; cursor: pointer; text-decoration: none; transition: all .12s; } .cp-btn-icon:hover { background: var(--cp-accent-lt); border-color: var(--cp-accent); color: var(--cp-accent); text-decoration: none; } .cp-btn-icon.danger:hover { background: var(--cp-danger-lt); border-color: var(--cp-danger); color: var(--cp-danger); } .cp-btn-icon.success:hover { background: var(--cp-success-lt); border-color: var(--cp-success); color: var(--cp-success); } /* Loading / empty states */ .cp-table-loading, .cp-table-empty { text-align: center; padding: 40px 20px; color: var(--cp-text-muted); font-size: 13px; } .cp-table-loading i, .cp-table-empty i { font-size: 28px; display: block; margin-bottom: 8px; opacity: .4; } /* Pagination bar */ .cp-pagination-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-top: 1px solid var(--cp-border); background: var(--cp-bg-hover); gap: 12px; flex-wrap: wrap; } .cp-pag-info { font-size: 12px; color: var(--cp-text-muted); } .cp-pag-btns { display: flex; gap: 4px; } .cp-pag-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid var(--cp-border); border-radius: 6px; background: var(--cp-bg-card); font-size: 12px; font-weight: 500; color: var(--cp-text); cursor: pointer; transition: all .12s; font-family: var(--cp-font); } .cp-pag-btn:hover { border-color: var(--cp-accent); color: var(--cp-accent); background: var(--cp-accent-lt); } .cp-pag-btn.active { background: var(--cp-accent); border-color: var(--cp-accent); color: #fff; } .cp-pag-btn:disabled, .cp-pag-btn[disabled] { opacity: .4; cursor: not-allowed; } .cp-pag-perpage { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cp-text-muted); } .cp-pag-perpage select { padding: 4px 8px; border: 1px solid var(--cp-border-dark); border-radius: 6px; font-size: 12px; font-family: var(--cp-font); color: var(--cp-text); background: var(--cp-bg-card); } /* ══════════════════════════════════════════════════════════════════════════ 9. FORMULARIO (módulo_make.php) ══════════════════════════════════════════════════════════════════════════ */ .cp-form-card { background: var(--cp-bg-card); border-radius: var(--cp-radius-lg); border: 1px solid var(--cp-border); box-shadow: var(--cp-shadow); overflow: hidden; max-width: 860px; } .cp-form-header { display: flex; align-items: center; gap: 12px; padding: 18px 24px; background: var(--cp-grad); color: #fff; } .cp-form-header.dark { background: var(--cp-grad-dark); } .cp-form-header i { font-size: 20px; opacity: .9; } .cp-form-header h2 { font-size: 15px; font-weight: 700; margin: 0; letter-spacing: -.2px; } .cp-form-header p { font-size: 12px; margin: 2px 0 0; opacity: .8; } .cp-form-body { padding: 28px 24px; } .cp-form-footer { padding: 16px 24px; border-top: 1px solid var(--cp-border); display: flex; align-items: center; justify-content: flex-end; gap: 10px; background: var(--cp-bg-hover); } /* Secciones internas del formulario */ .cp-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--cp-text-muted); border-bottom: 1px solid var(--cp-border); padding-bottom: 8px; margin: 0 0 18px; } .cp-section-title:not(:first-child) { margin-top: 28px; } /* Grupo de campo */ .cp-field-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; } .cp-field-group label { font-size: 12px; font-weight: 600; color: var(--cp-text); } .cp-field-group label .req { color: var(--cp-danger); margin-left: 2px; } /* Grid 2 columnas */ .cp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .cp-field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } @media (max-width: 640px) { .cp-field-row, .cp-field-row-3 { grid-template-columns: 1fr; } } /* Checkbox */ .cp-check-field { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--cp-bg-hover); border: 1px solid var(--cp-border); border-radius: var(--cp-radius); cursor: pointer; transition: all .12s; margin-bottom: 16px; } .cp-check-field:hover { border-color: var(--cp-accent); background: var(--cp-accent-lt); } .cp-check-field input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--cp-accent); cursor: pointer; } .cp-check-field span { font-size: 13px; font-weight: 500; color: var(--cp-text); } /* ══════════════════════════════════════════════════════════════════════════ 10. BADGES ══════════════════════════════════════════════════════════════════════════ */ .cp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; } .cp-badge-act { background: var(--cp-success-lt); color: var(--cp-success); } .cp-badge-ina { background: var(--cp-danger-lt); color: var(--cp-danger); } .cp-badge-warn { background: var(--cp-warning-lt); color: var(--cp-warning); } .cp-badge-info { background: var(--cp-info-lt); color: var(--cp-info); } .cp-badge-neu { background: #f3f4f6; color: var(--cp-text-muted); } /* Alias compatibilidad (usados en módulos actuales) */ .badge-act { background: var(--cp-success-lt); color: var(--cp-success); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; } .badge-ina { background: var(--cp-danger-lt); color: var(--cp-danger); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; } /* ══════════════════════════════════════════════════════════════════════════ 11. ALERTS / MENSAJES ══════════════════════════════════════════════════════════════════════════ */ .cp-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--cp-radius); font-size: 13px; margin-bottom: 16px; border: 1px solid transparent; } .cp-alert i { font-size: 16px; flex-shrink: 0; margin-top: 1px; } .cp-alert-success { background: var(--cp-success-lt); color: #065f46; border-color: #a7f3d0; } .cp-alert-danger { background: var(--cp-danger-lt); color: #991b1b; border-color: #fecaca; } .cp-alert-warning { background: var(--cp-warning-lt); color: #92400e; border-color: #fde68a; } .cp-alert-info { background: var(--cp-info-lt); color: #0c4a6e; border-color: #bae6fd; } /* ══════════════════════════════════════════════════════════════════════════ 12. HOME — PANEL GRID (main.php) ══════════════════════════════════════════════════════════════════════════ */ .cp-panel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-bottom: 32px; } .cp-panel-card { background: var(--cp-bg-card); border-radius: var(--cp-radius-lg); box-shadow: var(--cp-shadow); overflow: hidden; border: 1px solid var(--cp-border); transition: box-shadow .2s, transform .2s; } .cp-panel-card:hover { box-shadow: var(--cp-shadow-lg); transform: translateY(-2px); } .cp-panel-card-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--cp-grad); color: #fff; } .cp-panel-card-header i { font-size: 17px; opacity: .9; } .cp-panel-card-header span { font-size: 13px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; } .cp-panel-card-body { padding: 6px 0; } .cp-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 18px; text-decoration: none; color: var(--cp-text); font-size: 13px; font-weight: 500; border-bottom: 1px solid #f3f4f6; transition: background .12s, color .12s, padding-left .12s; position: relative; } .cp-menu-item:last-child { border-bottom: none; } .cp-menu-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cp-grad); border-radius: 0 2px 2px 0; opacity: 0; transition: opacity .15s; } .cp-menu-item:hover { background: linear-gradient(90deg, var(--cp-accent-lt), #f0f9ff); color: var(--cp-accent); padding-left: 22px; text-decoration: none; } .cp-menu-item:hover::before { opacity: 1; } .cp-menu-item .mi-icon { font-size: 14px; color: var(--cp-text-soft); flex-shrink: 0; transition: color .12s; } .cp-menu-item:hover .mi-icon { color: var(--cp-accent-2); } .cp-menu-item .mi-arrow { margin-left: auto; font-size: 11px; color: #d1d5db; transition: color .12s, transform .12s; } .cp-menu-item:hover .mi-arrow { color: var(--cp-accent); transform: translateX(2px); } /* ══════════════════════════════════════════════════════════════════════════ 13. HOME — WIDGET GRID ══════════════════════════════════════════════════════════════════════════ */ .cp-widget-section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--cp-text-soft); margin-bottom: 14px; } .cp-widget-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-bottom: 32px; } .cp-widget-card { background: var(--cp-bg-card); border-radius: var(--cp-radius-lg); box-shadow: var(--cp-shadow); border: 1px solid var(--cp-border); overflow: hidden; } .cp-widget-header { display: flex; align-items: center; gap: 10px; padding: 13px 18px; background: var(--cp-grad); color: #fff; } .cp-widget-header.dark { background: var(--cp-grad-dark); } .cp-widget-header.green { background: var(--cp-grad-green); } .cp-widget-header.purple { background: var(--cp-grad-purple); } .cp-widget-header.info { background: linear-gradient(135deg,#0369a1,#0ea5e9); } .cp-widget-header i { font-size: 16px; opacity: .9; } .cp-widget-header span { font-size: 12px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; } .cp-widget-body { padding: 20px 18px; } /* ══════════════════════════════════════════════════════════════════════════ 14. FOOTER ══════════════════════════════════════════════════════════════════════════ */ .cp-footer { text-align: center; margin-top: 40px; font-size: 11px; color: var(--cp-text-soft); } .cp-footer a { color: var(--cp-accent); text-decoration: none; } .cp-footer a:hover { text-decoration: underline; } /* ══════════════════════════════════════════════════════════════════════════ 15. UTILIDADES ══════════════════════════════════════════════════════════════════════════ */ .cp-divider { height: 1px; background: var(--cp-border); margin: 20px 0; } .cp-text-muted { color: var(--cp-text-muted) !important; } .cp-text-success { color: var(--cp-success) !important; } .cp-text-danger { color: var(--cp-danger) !important; } .cp-text-warning { color: var(--cp-warning) !important; } .cp-text-accent { color: var(--cp-accent) !important; } .cp-fw-600 { font-weight: 600 !important; } .cp-fs-12 { font-size: 12px !important; } .cp-fs-11 { font-size: 11px !important; } .cp-mono { font-family: 'Courier New', monospace; } /* Spinner */ .cp-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--cp-border); border-top-color: var(--cp-accent); border-radius: 50%; animation: cp-spin .7s linear infinite; vertical-align: middle; } @keyframes cp-spin { to { transform: rotate(360deg); } }