th.sortable{ position:relative; cursor:pointer; padding-right:18px; } th.sortable::after{ content:'⇅'; font-size:.75rem; position:absolute; right:6px; top:50%; transform:translateY(-50%); opacity:.3; } th.sortable[data-order="asc"]::after{ content:'↑'; opacity:.8; } th.sortable[data-order="desc"]::after{ content:'↓'; opacity:.8; } [x-cloak] { display: none !important; } /* === Colores por marca (se sobreescriben con variables en ) === */ :root { --brand-primary: #dc2626; /* fallback rojo ECSA */ --brand-primary-dark: #63171B; /* fallback rojo oscuro */ --brand-on-primary: #fff; --brand-on-primary-dark: #fff; --brand-radius: 10px; --brand-btn-pad-y: 8px; --brand-btn-pad-x: 14px; } .bg-brand { background-color: var(--brand-primary); } .bg-brand-dark { background-color: var(--brand-primary-dark); } .text-on-brand { color: var(--brand-on-primary) !important; } .text-on-brand-dark { color: var(--brand-on-primary-dark) !important; } /* para clases tipo hover:bg-brand-dark */ .hover\:bg-brand-dark:hover { background-color: var(--brand-primary-dark); } /* ========================= BUTTON SYSTEM (core) ========================= */ /* ===== BUTTON SYSTEM (core) ===== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding: var(--brand-btn-pad-y) var(--brand-btn-pad-x); border-radius: var(--brand-radius); border:1px solid transparent; font-weight:700; line-height:1; cursor:pointer; user-select:none; transition: filter .15s ease, transform .06s ease; } .btn:active{ transform: translateY(1px); } .btn[disabled]{ opacity:.45; cursor:not-allowed; } .btn-brand{ background: var(--brand-primary); color: var(--brand-on-primary, #111); } .btn-brand:hover{ filter: brightness(.95); } .btn-brand-dark{ background: var(--brand-primary-dark); color: var(--brand-on-primary-dark, #111); } .btn-brand-dark:hover{ filter: brightness(.95); } .btn-outline{ background: transparent; border-color: rgba(0,0,0,.18); color: inherit; } .btn-outline:hover{ background: rgba(0,0,0,.06); } .btn-success{ background:#16a34a; color:#fff; } .btn-success:hover{ filter: brightness(.95); } .btn-danger{ background:#dc2626; color:#fff; } .btn-danger:hover{ filter: brightness(.95); } .btn-sm{ padding:5px 10px; font-size:12px; border-radius:999px; } .btn-inline{ margin-left:10px; vertical-align:middle; } /* Card consistente */ .card{ background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.06); } /* Dark mode (si usas class="dark" en html/body) */ .dark .card{ background: #1F2937; border-color: rgba(255,255,255,.08); } /* ========================= DataTables (admin skin) ========================= */ .dataTables_wrapper { width: 100%; } .dataTables_wrapper .dt-head, .dataTables_wrapper .dt-foot{ display:flex; align-items:end; justify-content:space-between; gap:12px; padding: 12px 16px; } .dataTables_wrapper .dt-head{ border-bottom: 1px solid rgba(0,0,0,.06); } .dataTables_wrapper .dt-foot{ border-top: 1px solid rgba(0,0,0,.06); } .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label{ display:flex; align-items:center; gap:8px; font-size: 13px; color: rgba(0,0,0,.65); } .dataTables_wrapper select, .dataTables_wrapper input{ border: 1px solid rgba(0,0,0,.14); border-radius: 10px; padding: 6px 10px; outline: none; } .dataTables_wrapper .dataTables_paginate{ display:flex; align-items:center; gap:6px; } .dataTables_wrapper .dataTables_paginate .paginate_button{ border: 1px solid rgba(0,0,0,.14) !important; border-radius: 10px !important; padding: 6px 10px !important; margin: 0 !important; background: #fff !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current{ filter: brightness(.97); } /* Ajuste fino: Search a la derecha, sin romper mobile */ .dataTables_wrapper .dataTables_filter{ margin-left:auto; } .dataTables_wrapper .dataTables_filter input{ min-width: 220px; }