/* stylelint-disable selector-class-pattern, no-descending-specificity -- hoja de overrides sobre clases de terceros (Vuexy, Bootstrap, DataTables, Select2) */

/*
 * Rafik Design System — capa de marca sobre Vuexy.
 * Fuente: "Rafik Design System" (tokens/colors.css, typography, readme) — ago 2026.
 * Se carga al final de panels/styles.blade.php, después de style.css, para que
 * los tokens ganen al tema compilado sin recompilar assets.
 * Los colores por cliente (ClientStyleController) se sirven DESPUÉS y siguen ganando.
 */

:root {
  /* Paleta base */
  --rafik-deep-teal: #0f3d47;
  --rafik-teal: #114e5a;
  --rafik-aqua: #a8dddf;
  --rafik-aqua-light: #d9eeef;
  --rafik-cream: #f4efe6;
  --rafik-cream-card: #eae3d4;
  --rafik-coral: #ef6a4f; /* solo relleno decorativo — 3.07:1 sobre blanco */
  --rafik-coral-deep: #c9401c; /* cuando hay texto encima o el color ES el texto */
  --rafik-amber: #f5b834;
  --rafik-slate: #546b78;
  --rafik-tan: #bfb8a8;
  --rafik-white: #fff;
  --rafik-surface: #fef9f0;
  --rafik-ink: #1d1c16;
  --rafik-ink-variant: #41484a;

  /* Semánticos */
  --surface-page: var(--rafik-surface);
  --surface-card: var(--rafik-white);
  --surface-dark: var(--rafik-deep-teal);
  --surface-dark-raised: var(--rafik-teal);
  --surface-tint: var(--rafik-aqua-light);
  --text-body: var(--rafik-ink-variant);
  --text-heading: var(--rafik-deep-teal);
  --text-muted: var(--rafik-slate);
  --text-link: var(--rafik-coral-deep);
  --action-primary-bg: var(--rafik-amber);
  --action-primary-fg: var(--rafik-deep-teal);
  --action-secondary-bg: var(--rafik-coral-deep);
  --action-secondary-fg: var(--rafik-white);
  --border-card: rgb(29 28 22 / 8%);
  --border-subtle: var(--rafik-tan);

  /* Estatus (tablas de plataforma) */
  --status-new: #0f7b3e;
  --status-pending: #b26a00;
  --status-overdue: var(--rafik-coral-deep);
  --status-done: var(--rafik-slate);
  --status-pending-bg: #fdebc8;
  --status-high-bg: #fbd6d2;

  /* Tipografía */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;

  /* Efectos: 4 sombras, radios 12/8/pill, motion 150ms */
  --shadow-card: 0 4px 20px rgb(0 0 0 / 5%);
  --shadow-card-hover: 0 8px 28px rgb(15 61 71 / 10%);
  --shadow-panel: 0 24px 60px rgb(15 61 71 / 15%);
  --radius-card: 12px;
  --radius-button: 8px;
  --radius-pill: 999px;
  --motion-hover: all 0.15s ease-in-out;
}

/* ============ Base: superficie y texto ============ */

body,
body.vertical-layout {
  background-color: var(--surface-page) !important;
  font-family: var(--font-body) !important;
  color: var(--text-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.card-title,
.modal-title,
.content-header-title,
.brand-text {
  font-family: var(--font-display) !important;
  color: var(--text-heading);
  font-weight: 700;
}

.content-header-title {
  border-right-color: var(--border-subtle) !important;
}

p,
.card-text,
label,
.form-label,
td,
input,
select,
textarea,
.breadcrumb {
  font-family: var(--font-body);
}

a {
  color: var(--text-link);
}

a:hover {
  color: var(--rafik-teal);
}

/* El texto mutado de Bootstrap sobre crema */
.text-muted {
  color: var(--text-muted) !important;
}

/* ============ Acciones. Amber = primaria, Coral Deep = secundaria. Nunca compiten. ============ */

.btn {
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: var(--radius-button);
  transition: var(--motion-hover);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary,
.btn-success {
  background-color: var(--action-primary-bg) !important;
  border-color: var(--action-primary-bg) !important;
  color: var(--action-primary-fg) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: #dda52f !important; /* amber -10% */
  border-color: #dda52f !important;
  color: var(--action-primary-fg) !important;
}

.btn-secondary,
.btn-info {
  background-color: var(--action-secondary-bg) !important;
  border-color: var(--action-secondary-bg) !important;
  color: var(--action-secondary-fg) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-info:hover,
.btn-info:focus {
  background-color: #b23917 !important; /* coral deep -10% */
  border-color: #b23917 !important;
  color: var(--action-secondary-fg) !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info {
  border: 2px solid var(--rafik-teal) !important;
  color: var(--rafik-deep-teal) !important;
  background: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-info:hover {
  background-color: var(--surface-tint) !important;
  color: var(--rafik-deep-teal) !important;
}

.btn-flat-primary,
.btn-flat-info {
  color: var(--rafik-teal) !important;
}

.btn-flat-primary:hover,
.btn-flat-info:hover {
  background-color: var(--surface-tint) !important;
}

/* El peligro se queda rojo, pero AA sobre crema */
.btn-danger {
  border-radius: var(--radius-button);
}

/* NUNCA amarillo sobre blanco: el texto "warning" usa el ámbar oscuro AA (4.5:1+).
   El amber #F5B834 solo existe como FONDO con texto Deep Teal encima. */
.text-warning {
  color: var(--status-pending) !important;
}

.text-info {
  color: var(--rafik-teal) !important;
}

.btn-warning {
  background-color: var(--action-primary-bg) !important;
  border-color: var(--action-primary-bg) !important;
  color: var(--action-primary-fg) !important;
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: #dda52f !important;
  border-color: #dda52f !important;
  color: var(--action-primary-fg) !important;
}

.bg-warning {
  color: var(--rafik-deep-teal) !important;
}

/* ============ Sustitutos del morado Vuexy (#7367f0) fuera de botones ============ */

.text-primary {
  color: var(--rafik-teal) !important;
}

.bg-primary {
  background-color: var(--rafik-teal) !important;
}

.border-primary {
  border-color: var(--rafik-teal) !important;
}

.bg-light-primary,
.badge.badge-light-primary,
.avatar.bg-light-primary {
  background-color: var(--surface-tint) !important;
  color: var(--rafik-deep-teal) !important;
}

.badge.badge-light-success {
  background-color: #e2f2e8 !important;
  color: var(--status-new) !important;
}

.badge.badge-light-warning {
  background-color: var(--status-pending-bg) !important;
  color: var(--status-pending) !important;
}

.badge.badge-light-danger {
  background-color: var(--status-high-bg) !important;
  color: var(--status-overdue) !important;
}

.badge.badge-light-secondary {
  background-color: var(--rafik-cream) !important;
  color: var(--status-done) !important;
}

.badge {
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
}

/* Checkbox / radio / switch activos */
.form-check-input:checked {
  background-color: var(--rafik-teal) !important;
  border-color: var(--rafik-teal) !important;
}

.form-check-input:focus {
  border-color: var(--rafik-teal) !important;
  box-shadow: 0 0 0 0.25rem rgb(17 78 90 / 18%) !important;
}

/* Inputs */
.form-control,
.form-select {
  font-family: var(--font-body);
  border-radius: var(--radius-button);
  border-color: var(--border-subtle);
  color: var(--rafik-ink);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--rafik-teal) !important;
  box-shadow: 0 0 0 0.2rem rgb(17 78 90 / 12%) !important;
}

.form-control::placeholder {
  color: var(--rafik-slate);
  opacity: 0.8;
}

.form-label,
label {
  color: var(--rafik-ink-variant);
  font-weight: 500;
}

/* Paginación */
.page-item.active .page-link {
  background-color: var(--rafik-teal) !important;
  border-color: var(--rafik-teal) !important;
  color: #fff !important;
}

.page-link {
  color: var(--rafik-teal);
  border-radius: var(--radius-button);
}

.pagination .page-link:hover {
  color: var(--rafik-deep-teal);
}

/* Tabs y pills */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--rafik-teal) !important;
  border-color: var(--rafik-teal) !important;
  box-shadow: none !important;
}

.nav-tabs .nav-link.active {
  color: var(--rafik-deep-teal) !important;
}

.nav-tabs .nav-link::after {
  background: linear-gradient(30deg, var(--rafik-teal), rgb(17 78 90 / 50%)) !important;
}

.nav-link {
  font-family: var(--font-display);
}

/* Dropdowns */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--surface-tint);
  color: var(--rafik-deep-teal);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--rafik-teal) !important;
  color: #fff !important;
}

.dropdown-menu {
  border-radius: var(--radius-card);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-panel);
}

/* ============ Tarjetas ============ */

.card {
  background-color: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: var(--motion-hover);
}

.card .card-header {
  border-bottom-color: var(--border-card);
}

/* ============ Tablas de plataforma ============ */

.table thead th,
table.dataTable thead th {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--rafik-ink);
  border-bottom: 2px solid var(--rafik-ink) !important;
  background-color: transparent !important;
  text-transform: none; /* sentence case: mayúsculas solo en eyebrows */
  letter-spacing: 0;
}

.table tbody td {
  border-bottom: 1px solid var(--border-card);
  color: var(--rafik-ink);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgb(217 238 239 / 25%);
  box-shadow: none;
}

.table-hover > tbody > tr:hover > * {
  background-color: var(--surface-tint);
  box-shadow: none;
}

/* DataTables: controles */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-radius: var(--radius-button);
  border-color: var(--border-subtle);
}

/* ============ Navbar y menú (los fondos los pone client.styles; aquí forma y texto) ============ */

.main-menu {
  box-shadow: var(--shadow-panel);
}

/* Wordmark oficial sobre fondo oscuro: blanco vía filtro (regla del design system) */
.main-menu .navbar-brand img,
.header-navbar .navbar-brand img {
  filter: brightness(0) invert(1);
}

.main-menu .navigation,
.main-menu .navigation .nav-item a {
  font-family: var(--font-display);
}

.main-menu .navigation > li > a {
  border-radius: var(--radius-button);
  margin: 0 0.8rem;
  transition: var(--motion-hover);
}

.header-navbar {
  font-family: var(--font-body);
}

.header-navbar .navbar-container {
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

/* Breadcrumb */
.breadcrumb-item a {
  color: var(--rafik-teal);
}

.breadcrumb-item.active {
  color: var(--text-muted);
}

/* ============ Modales y toasts ============ */

.modal-content {
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-panel);
}

.modal-backdrop.show {
  background-color: var(--rafik-deep-teal);
  opacity: 0.7; /* scrim: Deep Teal al 70% */
}

.modal-header {
  background-color: var(--rafik-cream) !important;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

#toast-container > .toast-success {
  background-color: var(--status-new) !important;
}

#toast-container > .toast-error {
  background-color: var(--status-overdue) !important;
}

#toast-container > .toast-warning {
  background-color: var(--status-pending) !important;
}

#toast-container > .toast,
.toast {
  border-radius: var(--radius-card);
  font-family: var(--font-body);
}

/* Alerts */
.alert {
  border-radius: var(--radius-card);
  font-family: var(--font-body);
}

.alert-primary,
.alert-info {
  background-color: var(--surface-tint) !important;
  color: var(--rafik-deep-teal) !important;
  border-color: var(--rafik-aqua) !important;
}

.alert-warning {
  background-color: var(--status-pending-bg) !important;
  color: var(--status-pending) !important;
}

/* Spinners y progreso */
.spinner-border.text-primary,
.spinner-grow.text-primary {
  color: var(--rafik-teal) !important;
}

.progress-bar {
  background-color: var(--rafik-teal);
}

.progress {
  background-color: var(--surface-tint);
  border-radius: var(--radius-pill);
}

/* Select2 / flatpickr acentos */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--rafik-teal) !important;
}

.select2-container--default .select2-selection {
  border-radius: var(--radius-button) !important;
  border-color: var(--border-subtle) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--rafik-teal);
  border-color: var(--rafik-teal);
}

/* ============ Login / auth (fullLayoutMaster) ============ */

.auth-wrapper {
  background-color: var(--surface-page);
}

.auth-wrapper .auth-bg {
  background-color: var(--surface-card) !important;
}

.auth-wrapper .brand-text {
  color: var(--text-heading) !important;
}

/* ============ Detalles que delatan al tema viejo ============ */

/* Enlaces "ver más" y acentos morados sueltos del tema */
.text-body[href]:hover {
  color: var(--rafik-teal) !important;
}

/* Scrollbar sutil en crema */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--rafik-tan);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* ============ Fixes de auditoría (design-review 2026-08-12) ============ */

/* FINDING-001 — Dashboard Livewire: grises sueltos y teal viejo #0c4557 → superficies DS */
.bg-gray-2 {
  background-color: var(--rafik-cream) !important;
}

.bg-gray-1,
.activity-footer__btn {
  background-color: var(--rafik-cream-card) !important;
  color: var(--rafik-deep-teal) !important;
}

.footer__btn--active,
.activity-footer__btn:hover {
  background-color: var(--rafik-teal) !important;
  color: #fff !important;
}

.contract-empty h2 {
  color: var(--rafik-deep-teal) !important;
}

.text-green {
  color: var(--status-new) !important;
}

/* FINDING-002 — Documentos: azules fuera de paleta → teal */
.toolbar-btn.active {
  background-color: var(--surface-tint) !important;
  color: var(--rafik-deep-teal) !important;
  border-color: var(--rafik-aqua) !important;
}

.client-link {
  color: var(--rafik-teal) !important;
}

.document-name-cell svg,
.document-icon {
  color: var(--rafik-teal) !important;
}

/* FINDING-003 — CTA primaria de Rafi: amber, no teal (lógica de CTA del DS) */
.agent-btn-primary {
  background-color: var(--action-primary-bg) !important;
  border-color: var(--action-primary-bg) !important;
  color: var(--action-primary-fg) !important;
}

.agent-btn-primary:hover,
.agent-btn-primary:focus {
  background-color: #dda52f !important;
  border-color: #dda52f !important;
  color: var(--action-primary-fg) !important;
}

/* Sin animaciones de entrada; hover 150ms ya definido */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}