/* =============================================================================
   RISE CRM — Modern Theme — Phase 1: tokens + tipografia + density + text-size
   Cargado al final desde app/Views/includes/head.php para ganar especificidad.
   No reemplaza app.all.css; agrega una capa de tokens y refinamientos.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Design tokens (light theme)
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces & text */
  --rc-surface:        #ffffff;
  --rc-surface-2:      #f7f8fa;
  --rc-surface-3:      #eef0f3;
  --rc-surface-hover:  #f1f3f6;
  --rc-text:           #1a1d21;
  --rc-text-muted:     #5b6470;
  --rc-text-subtle:    #8893a0;
  --rc-border:         #e3e6eb;
  --rc-border-strong:  #cdd2da;

  /* Brand & semantic */
  --rc-brand:          #4f6df5;
  --rc-brand-hover:    #3d57d8;
  --rc-brand-soft:     rgba(79, 109, 245, 0.1);
  --rc-success:        #16a34a;
  --rc-success-soft:   rgba(22, 163, 74, 0.1);
  --rc-danger:         #dc2626;
  --rc-danger-soft:    rgba(220, 38, 38, 0.1);
  --rc-warning:        #d97706;
  --rc-warning-soft:   rgba(217, 119, 6, 0.1);
  --rc-info:           #0284c7;
  --rc-info-soft:      rgba(2, 132, 199, 0.1);

  /* Shadows */
  --rc-shadow-xs:  0 1px 1px rgba(15, 20, 25, 0.04);
  --rc-shadow-sm:  0 1px 2px rgba(15, 20, 25, 0.06), 0 1px 1px rgba(15, 20, 25, 0.04);
  --rc-shadow-md:  0 4px 12px rgba(15, 20, 25, 0.08);
  --rc-shadow-lg:  0 12px 32px rgba(15, 20, 25, 0.12);

  /* Radii */
  --rc-radius-sm: 4px;
  --rc-radius-md: 6px;
  --rc-radius-lg: 10px;
  --rc-radius-xl: 14px;

  /* Typography */
  --rc-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --rc-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;

  --rc-text-xs:    11px;
  --rc-text-sm:    12px;
  --rc-text-base:  13px;
  --rc-text-md:    14px;
  --rc-text-lg:    16px;
  --rc-text-xl:    18px;
  --rc-text-2xl:   22px;
  --rc-text-3xl:   28px;

  --rc-weight-regular:  400;
  --rc-weight-medium:   500;
  --rc-weight-semibold: 600;
  --rc-weight-bold:     700;

  --rc-leading-tight:  1.3;
  --rc-leading-normal: 1.55;
  --rc-leading-loose:  1.75;

  /* Density tokens (default = comfortable) */
  --rc-input-y:  8px;
  --rc-input-x:  12px;
  --rc-btn-y:    7px;
  --rc-btn-x:    14px;
  --rc-table-y:  10px;
  --rc-table-x:  12px;
  --rc-card-pad: 16px;
  --rc-modal-pad:20px;

  /* Base font size — modificable via [data-text-size] */
  --rc-base-size: 13px;

  /* Motion */
  --rc-motion-fast: 120ms;
  --rc-motion-base: 180ms;
  --rc-motion-slow: 260ms;
  --rc-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -----------------------------------------------------------------------------
   2. Theme: dark
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --rc-surface:        #0f1419;
  --rc-surface-2:      #161c24;
  --rc-surface-3:      #1d2530;
  --rc-surface-hover:  #1a2129;
  --rc-text:           #e6e9ef;
  --rc-text-muted:     #97a1b1;
  --rc-text-subtle:    #6c7686;
  --rc-border:         #232b36;
  --rc-border-strong:  #313b48;

  --rc-brand:          #6e89ff;
  --rc-brand-hover:    #899fff;
  --rc-brand-soft:     rgba(110, 137, 255, 0.18);

  --rc-success-soft:   rgba(22, 163, 74, 0.2);
  --rc-danger-soft:    rgba(220, 38, 38, 0.2);
  --rc-warning-soft:   rgba(217, 119, 6, 0.2);
  --rc-info-soft:      rgba(2, 132, 199, 0.2);

  --rc-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --rc-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
  --rc-shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.6);
}

/* Auto-theme: sigue prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --rc-surface:        #0f1419;
    --rc-surface-2:      #161c24;
    --rc-surface-3:      #1d2530;
    --rc-surface-hover:  #1a2129;
    --rc-text:           #e6e9ef;
    --rc-text-muted:     #97a1b1;
    --rc-text-subtle:    #6c7686;
    --rc-border:         #232b36;
    --rc-border-strong:  #313b48;
    --rc-brand:          #6e89ff;
    --rc-brand-hover:    #899fff;
    --rc-brand-soft:     rgba(110, 137, 255, 0.18);
  }
}

/* -----------------------------------------------------------------------------
   3. Text size variants — afecta a body font-size base
   -------------------------------------------------------------------------- */
[data-text-size="small"]  { --rc-base-size: 12px; }
[data-text-size="normal"] { --rc-base-size: 13px; }
[data-text-size="large"]  { --rc-base-size: 14px; }
[data-text-size="xl"]     { --rc-base-size: 15px; }

/* -----------------------------------------------------------------------------
   4. Density variants
   -------------------------------------------------------------------------- */
[data-density="compact"] {
  --rc-input-y:  5px;
  --rc-input-x:  10px;
  --rc-btn-y:    4px;
  --rc-btn-x:    11px;
  --rc-table-y:  6px;
  --rc-table-x:  10px;
  --rc-card-pad: 12px;
  --rc-modal-pad:14px;
}
[data-density="comfortable"] {
  --rc-input-y:  8px;
  --rc-input-x:  12px;
  --rc-btn-y:    7px;
  --rc-btn-x:    14px;
  --rc-table-y:  10px;
  --rc-table-x:  12px;
  --rc-card-pad: 16px;
  --rc-modal-pad:20px;
}
[data-density="cozy"] {
  --rc-input-y:  11px;
  --rc-input-x:  14px;
  --rc-btn-y:    10px;
  --rc-btn-x:    18px;
  --rc-table-y:  14px;
  --rc-table-x:  16px;
  --rc-card-pad: 22px;
  --rc-modal-pad:26px;
}

/* -----------------------------------------------------------------------------
   5. Typography baseline (override de Bootstrap/RISE defaults)
   -------------------------------------------------------------------------- */
body {
  font-family: var(--rc-font-sans) !important;
  font-size:   var(--rc-base-size) !important;
  line-height: var(--rc-leading-normal) !important;
  color:       var(--rc-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03";
  text-rendering: optimizeLegibility;
}

input, button, select, textarea,
.form-control, .form-select, .select2-selection__rendered, .select2-search__field,
.btn, .dataTable, .dataTables_wrapper, .modal, .dropdown-menu, .tooltip, .popover {
  font-family: var(--rc-font-sans) !important;
}

code, pre, kbd, samp, .text-monospace {
  font-family: var(--rc-font-mono) !important;
}

h1, .h1 { font-size: var(--rc-text-3xl); font-weight: var(--rc-weight-semibold); line-height: var(--rc-leading-tight); letter-spacing: -0.01em; }
h2, .h2 { font-size: var(--rc-text-2xl); font-weight: var(--rc-weight-semibold); line-height: var(--rc-leading-tight); letter-spacing: -0.005em; }
h3, .h3 { font-size: var(--rc-text-xl);  font-weight: var(--rc-weight-semibold); line-height: var(--rc-leading-tight); }
h4, .h4 { font-size: var(--rc-text-lg);  font-weight: var(--rc-weight-medium);   line-height: var(--rc-leading-tight); }
h5, .h5 { font-size: var(--rc-text-md);  font-weight: var(--rc-weight-medium); }
h6, .h6 { font-size: var(--rc-text-sm);  font-weight: var(--rc-weight-medium); text-transform: uppercase; letter-spacing: .04em; color: var(--rc-text-muted); }

label, .form-label, .col-form-label {
  font-size: var(--rc-text-sm) !important;
  font-weight: var(--rc-weight-medium) !important;
  color: var(--rc-text-muted);
  margin-bottom: 4px;
}

.text-muted, small.text-muted, .small.text-muted { color: var(--rc-text-muted) !important; }

/* Numeric alignment in tables — números se alinean visualmente */
.dataTable td, .dataTable th,
table.display td, table.display th,
.table td, .table th {
  font-variant-numeric: tabular-nums;
}

/* Page titles look heavier and clearer */
.page-title h1, .page-title .h1 {
  font-size: var(--rc-text-2xl);
  font-weight: var(--rc-weight-semibold);
  letter-spacing: -0.005em;
  margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
   6. Density application — inputs, buttons, tables, modals, cards
   -------------------------------------------------------------------------- */
.form-control, .form-select,
.select2-container--bootstrap-5 .select2-selection,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  /* Longhands en lugar de shorthand para que padding-left NO lleve !important
     y librerias como intl-tel-input puedan setearlo inline desde JS. */
  padding-top: var(--rc-input-y) !important;
  padding-right: var(--rc-input-x) !important;
  padding-bottom: var(--rc-input-y) !important;
  padding-left: var(--rc-input-x);
  border-radius: var(--rc-radius-md);
  transition: border-color var(--rc-motion-fast), box-shadow var(--rc-motion-fast);
}

.form-control:focus, .form-select:focus,
.select2-container--focus .select2-selection {
  border-color: var(--rc-brand) !important;
  box-shadow: 0 0 0 3px var(--rc-brand-soft) !important;
}

.btn {
  padding: var(--rc-btn-y) var(--rc-btn-x);
  border-radius: var(--rc-radius-md);
  font-weight: var(--rc-weight-medium);
  transition: background-color var(--rc-motion-fast), border-color var(--rc-motion-fast),
              box-shadow var(--rc-motion-fast), transform var(--rc-motion-fast);
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: calc(var(--rc-btn-y) - 2px) calc(var(--rc-btn-x) - 4px); font-size: var(--rc-text-sm); }
.btn-lg { padding: calc(var(--rc-btn-y) + 4px) calc(var(--rc-btn-x) + 6px); font-size: var(--rc-text-md); }

/* Tables — densidad de filas */
.dataTable td, .dataTable th,
table.display td, table.display th,
.table td, .table th {
  padding: var(--rc-table-y) var(--rc-table-x) !important;
}

/* DataTables header se ve más limpio */
.dataTable thead th, table.display thead th {
  font-weight: var(--rc-weight-semibold);
  font-size: var(--rc-text-sm);
  color: var(--rc-text-muted);
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--rc-border);
}

/* Cards & modals */
.card { border-radius: var(--rc-radius-lg); border-color: var(--rc-border); }
.card-body { padding: var(--rc-card-pad); }
.card-header { padding: var(--rc-card-pad); border-bottom-color: var(--rc-border); }

.modal-content { border-radius: var(--rc-radius-lg); border: none; box-shadow: var(--rc-shadow-lg); }
.modal-header, .modal-body, .modal-footer { padding: var(--rc-modal-pad); }
.modal-header { border-bottom-color: var(--rc-border); }
.modal-footer { border-top-color: var(--rc-border); gap: 8px; }

/* -----------------------------------------------------------------------------
   7. Microinteractions — focus visible + transitions
   -------------------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--rc-brand);
  outline-offset: 2px;
  border-radius: var(--rc-radius-sm);
}

a, .nav-link {
  transition: color var(--rc-motion-fast);
}

button, .btn, [role="button"] {
  user-select: none;
}

/* Smooth scroll */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* -----------------------------------------------------------------------------
   8. Forma del cursor en clickables
   -------------------------------------------------------------------------- */
a, button, .btn, [role="button"], .clickable, .dataTable tbody tr[role="row"],
.modal-anchor, .ajax-anchor, .js-anchor {
  cursor: pointer;
}

/* -----------------------------------------------------------------------------
   9. Dark theme — overrides estructurales mínimos para legibilidad
   (componentes legacy con colores hardcoded podrían no migrar 100%)
   -------------------------------------------------------------------------- */
[data-theme="dark"] body,
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] body { background-color: var(--rc-surface); color: var(--rc-text); }
}

[data-theme="dark"] body { background-color: var(--rc-surface); color: var(--rc-text); }

[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu {
  background-color: var(--rc-surface-2);
  border-color: var(--rc-border);
  color: var(--rc-text);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .select2-selection {
  background-color: var(--rc-surface-2) !important;
  border-color: var(--rc-border) !important;
  color: var(--rc-text) !important;
}

[data-theme="dark"] .form-control::placeholder { color: var(--rc-text-subtle); }

[data-theme="dark"] .table,
[data-theme="dark"] .dataTable,
[data-theme="dark"] table.display {
  color: var(--rc-text);
}
[data-theme="dark"] .table thead th,
[data-theme="dark"] .dataTable thead th {
  color: var(--rc-text-muted);
  border-bottom-color: var(--rc-border);
}
[data-theme="dark"] .table tbody td,
[data-theme="dark"] .dataTable tbody td {
  border-bottom-color: var(--rc-border);
}
[data-theme="dark"] .table tbody tr:hover,
[data-theme="dark"] .dataTable tbody tr:hover {
  background-color: var(--rc-surface-hover) !important;
}

/* -----------------------------------------------------------------------------
   9.5  intl-tel-input compatibility
   La libreria envuelve el input en .iti y fija padding-left inline desde JS
   segun el ancho del selector de bandera + prefijo. Para que ese inline-style
   gane, en la regla .form-control de arriba quitamos el !important del
   padding-left. Aqui solo nos aseguramos del wrapper y de que se vea bien.
   -------------------------------------------------------------------------- */
.iti {
  width: 100%;
  display: block;
}

.iti input.iti__tel-input,
.iti input[type="tel"],
.iti input[type="text"],
.iti .form-control {
  width: 100%;
  /* No tocamos padding-left — lo gestiona la libreria via inline style */
}

/* Esquinas: el boton de pais con la esquina izq redondeada del input */
.iti--separate-dial-code .iti__selected-country,
.iti--allow-dropdown .iti__selected-country {
  border-radius: var(--rc-radius-md) 0 0 var(--rc-radius-md);
}

/* Borde sutil que separa visualmente el selector del input */
.iti--allow-dropdown .iti__country-container {
  border-right: 1px solid var(--rc-border);
}

/* Modo oscuro: ajustar variables propias de intl-tel-input */
[data-theme="dark"] .iti {
  --iti-border-color: var(--rc-border);
  --iti-hover-color: var(--rc-surface-hover);
  --iti-dropdown-bg: var(--rc-surface-2);
  --iti-dialcode-color: var(--rc-text-subtle);
  --iti-arrow-color: var(--rc-text-muted);
  --iti-search-icon-color: var(--rc-text-subtle);
}
[data-theme="dark"] .iti__country-list,
[data-theme="dark"] .iti__dropdown-content {
  color: var(--rc-text);
}

/* -----------------------------------------------------------------------------
   10. Settings popover (UI panel para cambiar tema/density/text-size)
   -------------------------------------------------------------------------- */
.rc-ui-prefs {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9998;
  display: none;
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  border-radius: var(--rc-radius-lg);
  box-shadow: var(--rc-shadow-lg);
  padding: 16px;
  min-width: 240px;
  font-family: var(--rc-font-sans);
}
.rc-ui-prefs.is-open { display: block; }
.rc-ui-prefs h6 {
  font-size: var(--rc-text-xs);
  font-weight: var(--rc-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--rc-text-subtle);
  margin: 0 0 8px 0;
}
.rc-ui-prefs .rc-row {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.rc-ui-prefs .rc-row:last-child { margin-bottom: 0; }
.rc-ui-prefs button {
  flex: 1;
  background: var(--rc-surface-2);
  border: 1px solid var(--rc-border);
  color: var(--rc-text-muted);
  padding: 6px 8px;
  font-size: var(--rc-text-sm);
  font-weight: var(--rc-weight-medium);
  border-radius: var(--rc-radius-md);
  cursor: pointer;
  transition: all var(--rc-motion-fast);
}
.rc-ui-prefs button:hover { background: var(--rc-surface-hover); color: var(--rc-text); }
.rc-ui-prefs button[aria-pressed="true"] {
  background: var(--rc-brand-soft);
  color: var(--rc-brand);
  border-color: var(--rc-brand);
}
.rc-ui-prefs-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--rc-surface);
  border: 1px solid var(--rc-border);
  color: var(--rc-text-muted);
  box-shadow: var(--rc-shadow-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--rc-motion-fast);
}
.rc-ui-prefs-toggle:hover { color: var(--rc-brand); border-color: var(--rc-brand); }
.rc-ui-prefs.is-open + .rc-ui-prefs-toggle { display: none; }

/* -----------------------------------------------------------------------------
   11. UI hides — pestañas/campos ocultos por preferencia del proyecto
   (eliminar la regla para volver a mostrarlos)
   -------------------------------------------------------------------------- */
/* Pestaña "Enlaces sociales" en el perfil del miembro / usuario */
[data-bs-target="#tab-social-links"] { display: none !important; }