
:root {
  --ra-bg: #0b1220;
  --ra-bg-soft: #020617;
  --ra-surface: #020817;
  --ra-surface-soft: #0f172a;
  --ra-border: #1f2937;
  --ra-border-soft: #111827;
  --ra-text: #e5e7eb;
  --ra-text-soft: #9ca3af;
  --ra-accent: #f97316;
  --ra-accent-soft: rgba(249,115,22,0.12);
  --ra-accent-strong: #fb923c;
  --ra-badge-negocio: #38bdf8;
  --ra-badge-grupo: #4ade80;
  --ra-badge-agencia: #f97316;
  --ra-badge-vendedor: #c4b5fd;
  --ra-badge-cliente: #f9a8d4;
  --ra-tag-convenio: #22c55e;
  --ra-tag-mercado: #facc15;
  --ra-radius-lg: 14px;
  --ra-radius-md: 10px;
  --ra-radius-sm: 999px;
  --ra-shadow-soft: 0 18px 45px rgba(15,23,42,0.65);
  --ra-shadow-subtle: 0 10px 25px rgba(15,23,42,0.55);
  --ra-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 16px;
  font-family: var(--ra-font);
  background:
    radial-gradient(circle at top left, rgba(248,250,252,0.12) 0, transparent 50%),
    radial-gradient(circle at top right, rgba(34,211,238,0.16) 0, transparent 45%),
    radial-gradient(circle at bottom, rgba(249,115,22,0.21) 0, transparent 55%),
    #020617;
  color: var(--ra-text);
}

/* Layout general */

.ra-layout {
  width: 100%;
  max-width: 95vw;
  margin: 0 auto;
  background: linear-gradient(145deg, rgba(15,23,42,0.94), rgba(2,6,23,0.96));
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,0.35);
  box-shadow: var(--ra-shadow-soft);
  padding: 18px 18px 20px;
}

/* Header */

.ra-header {
  border-bottom: 1px solid rgba(30,64,175,0.5);
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.ra-header-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.ra-header-main > :first-child {
  max-width: 900px;
}

.ra-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: linear-gradient(120deg, #f97316, #facc15, #22d3ee);
  -webkit-background-clip: text;
  color: transparent;
}

.ra-subtitle {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--ra-text-soft);
  max-width: 600px;
}

.ra-header-actions {
  display: grid;
  grid-template-columns: repeat(6, minmax(132px, 1fr));
  gap: 8px;
  width: 100%;
  justify-content: stretch;
  align-items: stretch;
}

.ra-header-actions .ra-btn {
  justify-content: center;
  min-height: 40px;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}

.ra-header-actions a.ra-btn {
  text-decoration: none;
}

/* Botones */

.ra-btn {
  border-radius: var(--ra-radius-sm);
  border: 1px solid transparent;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease,
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
  white-space: nowrap;
}

.ra-btn-primary {
  background: radial-gradient(circle at top left, var(--ra-accent-strong), var(--ra-accent));
  color: #0b1120;
  border-color: rgba(248,250,252,0.1);
  box-shadow: 0 12px 30px rgba(249,115,22,0.5);
}

.ra-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(249,115,22,0.7);
  filter: brightness(1.02);
}

.ra-btn-secondary {
  background: rgba(15,23,42,0.95);
  color: var(--ra-text);
  border-color: rgba(148,163,184,0.55);
  box-shadow: var(--ra-shadow-subtle);
}

.ra-btn-secondary:hover {
  background: rgba(15,23,42,0.9);
  border-color: rgba(248,250,252,0.6);
}

.ra-btn-outline {
  background: transparent;
  color: var(--ra-text-soft);
  border-color: rgba(148,163,184,0.5);
}

.ra-btn-outline:hover {
  color: var(--ra-text);
  border-color: var(--ra-accent-strong);
  box-shadow: 0 0 0 1px rgba(249,115,22,0.4);
}

.ra-btn-danger{
  background: rgba(239, 68, 68, 0.14);
  color: rgba(255,255,255,.92);
  border-color: rgba(239, 68, 68, 0.45);
}
.ra-btn-danger:hover{
  border-color: rgba(239, 68, 68, 0.75);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35), 0 16px 40px rgba(239, 68, 68, 0.18);
}

/* KPIs */

.ra-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.ra-kpi-row.ra-kpi-row-sols{
  margin-top: 8px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width: 1020px){
  .ra-kpi-row.ra-kpi-row-sols{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px){
  .ra-kpi-row.ra-kpi-row-sols{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ra-kpi-card {
  background: radial-gradient(circle at top left, rgba(30,64,175,0.7), rgba(15,23,42,0.95));
  border-radius: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(148,163,184,0.5);
  box-shadow: 0 10px 30px rgba(15,23,42,0.8);
}

.ra-kpi-label {
  font-size: 10px;
  color: var(--ra-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ra-kpi-value {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 700;
  color: #e5e7eb;
}

/* Main / Tabs */

.ra-main {
  margin-top: 12px;
}

.ra-tabs {
  display: inline-flex;
  background: rgba(15,23,42,0.9);
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.5);
  padding: 2px;
  margin-bottom: 12px;
}

.ra-tab {
  border: none;
  background: transparent;
  color: var(--ra-text-soft);
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.ra-tab.is-active {
  background: radial-gradient(circle at top left, rgba(249,115,22,0.15), rgba(56,189,248,0.16));
  color: #f9fafb;
  transform: translateY(-0.5px);
}

.ra-subtabs {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(15,23,42,0.72);
  border: 1px solid rgba(148,163,184,0.28);
}

.ra-subtab {
  border: none;
  background: transparent;
  color: var(--ra-text-soft);
  font-size: 11px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.ra-subtab:hover {
  color: var(--ra-text);
  background: rgba(255,255,255,0.05);
}

.ra-subtab.is-active {
  color: #0b1120;
  background: radial-gradient(circle at top left, var(--ra-accent-strong), var(--ra-accent));
  box-shadow: 0 10px 25px rgba(249,115,22,0.24);
}

.ra-panel {
  display: none;
  margin-top: 8px;
  background: radial-gradient(circle at top left, rgba(15,23,42,0.85), rgba(2,6,23,0.96));
  border-radius: var(--ra-radius-lg);
  border: 1px solid var(--ra-border);
  padding: 10px 10px 12px;
}

.ra-panel.is-active {
  display: block;
}

/* Panel toolbar */

.ra-panel-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.ra-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.ra-filter-group label {
  font-size: 10px;
  color: var(--ra-text-soft);
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}

.ra-panel-nota {
  font-size: 10px;
  color: var(--ra-text-soft);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px dashed rgba(148,163,184,0.6);
  background: rgba(15,23,42,0.8);
  max-width: 320px;
}

.ra-panel-actions {
  display: flex;
  gap: 6px;
}

/* Inputs */

.ra-input,
.ra-textarea {
  background: rgba(15,23,42,0.95);
  border-radius: 8px;
  border: 1px solid rgba(55,65,81,0.9);
  color: var(--ra-text);
  font-size: 11px;
  padding: 4px 8px;
  min-width: 160px;
  outline: none;
  font-family: inherit;
}

.ra-input:focus,
.ra-textarea:focus {
  border-color: var(--ra-accent-strong);
  box-shadow: 0 0 0 1px rgba(249,115,22,0.6);
}

.ra-textarea {
  resize: vertical;
}

/* Árbol */

.ra-tree-container {
  max-height: 420px;
  overflow: auto;
  padding: 8px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(15,23,42,0.96), rgba(2,6,23,0.97));
  border: 1px solid rgba(31,41,55,0.9);
  box-shadow: var(--ra-shadow-subtle);
}

.ra-tree-negocio + .ra-tree-negocio {
  margin-top: 10px;
  padding-top: 6px;
  border-top: 1px dashed rgba(55,65,81,0.8);
}

.ra-tree-negocio-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: #e5e7eb;
}

.ra-tree-level {
  list-style: none;
  padding-left: 16px;
  margin: 0;
}

.ra-tree-level > li {
  margin: 2px 0;
}

.ra-tree-node {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  background: radial-gradient(circle at top left, rgba(30,64,175,0.3), rgba(15,23,42,0.98));
  border-radius: 10px;
  border: 1px solid rgba(55,65,81,0.9);
  padding: 4px 6px;
}

.ra-tree-main {
  flex: 1;
}

.ra-tree-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ra-tree-name {
  font-size: 12px;
  font-weight: 600;
  color: #f9fafb;
}

.ra-tree-contact {
  font-size: 10px;
  color: var(--ra-text-soft);
  margin-top: 1px;
}

.ra-tree-actions {
  display: inline-flex;
  gap: 4px;
}

.ra-mini-btn {
  border-radius: 999px;
  border: 1px solid rgba(75,85,99,0.9);
  background: rgba(15,23,42,0.96);
  color: var(--ra-text-soft);
  font-size: 10px;
  width: 22px;
  height: 22px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ra-mini-btn.ra-mini-btn-text{
  width: auto;
  height: auto;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.1;
  gap: 6px;
}

.ra-mini-btn.ra-mini-btn-danger{
  border-color: rgba(239,68,68,0.55);
  color: rgba(239,68,68,0.92);
}
.ra-mini-btn.ra-mini-btn-danger:hover{
  border-color: rgba(239,68,68,0.9);
  color: rgba(239,68,68,0.98);
}

.ra-mini-btn:hover {
  border-color: var(--ra-accent-strong);
  color: var(--ra-accent-strong);
}

.ra-tree-empty {
  font-size: 11px;
  color: var(--ra-text-soft);
}

/* Pills y tags */

.ra-pill {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ra-pill-negocio {
  background: rgba(56,189,248,0.16);
  border-color: rgba(56,189,248,0.5);
  color: #e0f2fe;
}

.ra-pill-grupo {
  background: rgba(74,222,128,0.16);
  border-color: rgba(74,222,128,0.5);
  color: #dcfce7;
}

.ra-pill-agencia {
  background: rgba(249,115,22,0.16);
  border-color: rgba(249,115,22,0.5);
  color: #ffedd5;
}

.ra-pill-vendedor {
  background: rgba(196,181,253,0.16);
  border-color: rgba(196,181,253,0.5);
  color: #ede9fe;
}

.ra-pill-cliente {
  background: rgba(251,113,133,0.16);
  border-color: rgba(251,113,133,0.5);
  color: #ffe4e6;
}

.ra-tag {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ra-tag-convenio {
  background: rgba(34,197,94,0.16);
  color: #bbf7d0;
  border: 1px solid rgba(34,197,94,0.7);
}

.ra-tag-mercado_abierto {
  background: rgba(250,204,21,0.16);
  color: #fef9c3;
  border: 1px solid rgba(250,204,21,0.7);
}

.ra-tag-inegi {
  background: rgba(168,85,247,0.16);
  color: #f3e8ff;
  border: 1px solid rgba(168,85,247,0.75);
}

/* Tabla */

.ra-table-wrapper {
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(circle at top left, rgba(15,23,42,0.98), rgba(2,6,23,0.98));
  border: 1px solid rgba(31,41,55,0.95);
  box-shadow: var(--ra-shadow-subtle);
  display: flex;
  flex-direction: column;
}

.ra-table-wrapper .ra-table-scroll {
  overflow-y: auto;
  max-height: 560px; /* ~22 filas a ~25px por fila */
}

.ra-table-wrapper .ra-table-scroll::-webkit-scrollbar {
  width: 6px;
}
.ra-table-wrapper .ra-table-scroll::-webkit-scrollbar-track {
  background: rgba(15,23,42,0.5);
}
.ra-table-wrapper .ra-table-scroll::-webkit-scrollbar-thumb {
  background: rgba(59,130,246,0.5);
  border-radius: 3px;
}
.ra-table-wrapper .ra-table-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(59,130,246,0.8);
}

.ra-table-wrapper .ra-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(120deg, rgba(30,64,175,0.97), rgba(15,23,42,0.97));
}

.ra-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.ra-table thead {
  background: linear-gradient(120deg, rgba(30,64,175,0.9), rgba(15,23,42,0.95));
}

.ra-table th,
.ra-table td {
  padding: 5px 7px;
  border-bottom: 1px solid rgba(31,41,55,0.9);
  text-align: left;
}

.ra-table th {
  font-weight: 600;
  color: #e5e7eb;
  white-space: nowrap;
}

/* Tabla: ordenamiento por columnas */
.ra-table th.ra-th-sort-asc::after {
  content: " ▲";
  font-size: 10px;
  opacity: 0.9;
}
.ra-table th.ra-th-sort-desc::after {
  content: " ▼";
  font-size: 10px;
  opacity: 0.9;
}

.ra-table tbody tr:nth-child(even) {
  background: rgba(15,23,42,0.8);
}

.ra-table tbody tr:nth-child(odd) {
  background: rgba(15,23,42,0.96);
}

.ra-table tbody tr:hover {
  background: rgba(30,64,175,0.6);
}

/* Colores por estatus (Tabla) */
.ra-table tbody tr.ra-row-green {
  background: rgba(34,197,94,0.16);
}
.ra-table tbody tr.ra-row-green:hover {
  background: rgba(34,197,94,0.26);
}
.ra-table tbody tr.ra-row-green td:first-child {
  box-shadow: inset 3px 0 0 rgba(34,197,94,0.85);
}

.ra-table tbody tr.ra-row-red {
  background: rgba(239,68,68,0.16);
}
.ra-table tbody tr.ra-row-red:hover {
  background: rgba(239,68,68,0.26);
}
.ra-table tbody tr.ra-row-red td:first-child {
  box-shadow: inset 3px 0 0 rgba(239,68,68,0.85);
}

.ra-table tbody tr.ra-row-orange {
  background: rgba(249,115,22,0.16);
}
.ra-table tbody tr.ra-row-orange:hover {
  background: rgba(249,115,22,0.26);
}
.ra-table tbody tr.ra-row-orange td:first-child {
  box-shadow: inset 3px 0 0 rgba(249,115,22,0.9);
}

.ra-table tbody tr.ra-row-yellow {
  background: rgba(234,179,8,0.16);
}
.ra-table tbody tr.ra-row-yellow:hover {
  background: rgba(234,179,8,0.26);
}
.ra-table tbody tr.ra-row-yellow td:first-child {
  box-shadow: inset 3px 0 0 rgba(234,179,8,0.9);
}

.ra-table tbody tr.ra-row-glow td:first-child {
  position: relative;
  box-shadow: inset 3px 0 0 rgba(59,130,246,0.95), 0 0 0 rgba(0,0,0,0);
  animation: raRowGlow 2.2s ease-in-out infinite;
}

@keyframes raRowGlow {
  0% {
    box-shadow: inset 3px 0 0 rgba(59,130,246,0.85), 0 0 0 rgba(59,130,246,0);
  }
  50% {
    box-shadow: inset 3px 0 0 rgba(59,130,246,0.95), 0 0 0 3px rgba(59,130,246,0.18);
  }
  100% {
    box-shadow: inset 3px 0 0 rgba(59,130,246,0.85), 0 0 0 rgba(59,130,246,0);
  }
}

.ra-table tbody tr.ra-row-purple {
  background: rgba(168,85,247,0.16);
}
.ra-table tbody tr.ra-row-purple:hover {
  background: rgba(168,85,247,0.26);
}
.ra-table tbody tr.ra-row-purple td:first-child {
  box-shadow: inset 3px 0 0 rgba(168,85,247,0.9);
}

/* Mapa */

.ra-map-container {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(220px, 1fr);
  gap: 8px;
  align-items: stretch;
}

.ra-map {
  width: 100%;
  min-height: clamp(460px, 62vh, 820px);
  border-radius: 12px;
  border: 1px solid rgba(31,41,55,0.95);
  overflow: hidden;
}

.ra-map-actions {
  margin-top: 8px;
}

#ra-panel-mapa:fullscreen,
#ra-panel-mapa:-webkit-full-screen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

#ra-panel-mapa:fullscreen .ra-map-container,
#ra-panel-mapa:-webkit-full-screen .ra-map-container {
  flex: 1 1 auto;
  min-height: 0;
}

#ra-panel-mapa:fullscreen .ra-map,
#ra-panel-mapa:-webkit-full-screen .ra-map {
  height: 100%;
  min-height: 0;
}

#ra-panel-mapa:fullscreen .ra-map-sidebar,
#ra-panel-mapa:-webkit-full-screen .ra-map-sidebar {
  height: 100%;
  overflow: auto;
}

.ra-map-sidebar {
  background: radial-gradient(circle at top left, rgba(30,64,175,0.65), rgba(15,23,42,0.98));
  border-radius: 12px;
  border: 1px solid rgba(55,65,81,0.9);
  padding: 8px 9px;
  font-size: 11px;
}

.ra-map-sidebar-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: #f9fafb;
}

.ra-map-detail {
  color: var(--ra-text-soft);
}

.ra-map-empty {
  font-size: 11px;
  color: var(--ra-text-soft);
}

.leaflet-div-icon.ra-map-divicon {
  background: transparent;
  border: none;
}

.ra-map-pin {
  --pin-bg: rgba(15, 23, 42, 0.94);
  --pin-border: rgba(255, 255, 255, 0.55);
  width: 48px;
  height: 58px;
  position: relative;
  pointer-events: auto;
  transform: translateZ(0);
}

.ra-map-pin[data-kind="logo"] {
  --pin-bg: rgba(255, 255, 255, 0.94);
}

.ra-map-pin[data-tipo="negocio"] {
  --pin-border: var(--ra-badge-negocio);
}
.ra-map-pin[data-tipo="grupo"] {
  --pin-border: var(--ra-badge-grupo);
}
.ra-map-pin[data-tipo="agencia"] {
  --pin-border: var(--ra-badge-agencia);
}
.ra-map-pin[data-tipo="vendedor"] {
  --pin-border: var(--ra-badge-vendedor);
}
.ra-map-pin[data-tipo="cliente"] {
  --pin-border: var(--ra-badge-cliente);
}
.ra-map-pin[data-tipo="staff"] {
  --pin-border: rgba(56, 189, 248, 0.85);
}
.ra-map-pin[data-tipo="solicitud"] {
  --pin-border: rgba(251, 146, 60, 0.85);
}

.ra-map-pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: var(--pin-bg);
  transform: translateX(-50%);
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.35));
}

.ra-map-pin-circle {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: var(--pin-bg);
  border: 2px solid var(--pin-border);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ra-map-pin.ra-pin-inegi-new { --pin-border: rgba(245, 158, 11, 0.95); }
.ra-map-pin.ra-pin-inegi-contacted { --pin-border: rgba(59, 130, 246, 0.95); }
.ra-map-pin.ra-pin-inegi-visited { --pin-border: rgba(34, 197, 94, 0.95); }
.ra-map-pin.ra-pin-inegi-ignored { --pin-border: rgba(148, 163, 184, 0.95); }

.ra-map-pin.ra-pin-inegi-new .ra-map-pin-circle::before,
.ra-map-pin.ra-pin-inegi-contacted .ra-map-pin-circle::before,
.ra-map-pin.ra-pin-inegi-visited .ra-map-pin-circle::before,
.ra-map-pin.ra-pin-inegi-ignored .ra-map-pin-circle::before {
  content: "INEGI";
  position: absolute;
  left: 6px;
  top: 6px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.8);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.20);
  z-index: 2;
}

.ra-map-pin.ra-pin-vendido::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  animation: raPinHalo 2.2s ease-in-out infinite;
}

.ra-map-pin.ra-pin-vendido .ra-map-pin-circle,
.ra-map-pin-circle.ra-pin-vendido {
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.35),
    0 0 0 0 rgba(34, 197, 94, 0.0),
    0 0 18px rgba(34, 197, 94, 0.0);
  animation: raPinPulse 2.2s ease-in-out infinite;
}

.ra-map-pin.ra-pin-vendido .ra-map-pin-circle::after,
.ra-map-pin-circle.ra-pin-vendido::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 999px;
  border: 2px solid rgba(34, 197, 94, 0.0);
  animation: raPinRing 2.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes raPinPulse {
  0% {
    box-shadow:
      0 12px 26px rgba(0, 0, 0, 0.35),
      0 0 0 0 rgba(34, 197, 94, 0.0),
      0 0 18px rgba(34, 197, 94, 0.0);
  }
  50% {
    box-shadow:
      0 12px 26px rgba(0, 0, 0, 0.35),
      0 0 0 12px rgba(34, 197, 94, 0.24),
      0 0 18px rgba(34, 197, 94, 0.36);
  }
  100% {
    box-shadow:
      0 12px 26px rgba(0, 0, 0, 0.35),
      0 0 0 0 rgba(34, 197, 94, 0.0),
      0 0 18px rgba(34, 197, 94, 0.0);
  }
}

@keyframes raPinRing {
  0% {
    border-color: rgba(34,197,94,0.0);
    transform: scale(0.96);
    opacity: 0.0;
  }
  40% {
    border-color: rgba(34,197,94,0.28);
    opacity: 0.9;
  }
  100% {
    border-color: rgba(34,197,94,0.0);
    transform: scale(1.22);
    opacity: 0.0;
  }
}

@keyframes raPinHalo {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.0), 0 0 22px rgba(34, 197, 94, 0.0);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(34, 197, 94, 0.16), 0 0 26px rgba(34, 197, 94, 0.34);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.0), 0 0 22px rgba(34, 197, 94, 0.0);
  }
}

.ra-map-pin-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ra-map-pin-circle.is-logo .ra-map-pin-img {
  object-fit: contain;
  padding: 6px;
  background: rgba(255, 255, 255, 0.92);
}

.ra-map-pin-fallback {
  font-size: 18px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
}
.ra-map-pin[data-kind="logo"] .ra-map-pin-fallback {
  color: rgba(15, 23, 42, 0.85);
}

.ra-detail-title {
  font-size: 13px;
  font-weight: 600;
  color: #f9fafb;
}

.ra-detail-sub {
  font-size: 11px;
  color: var(--ra-text-soft);
  margin-bottom: 6px;
}

.ra-detail-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 8px;
  margin: 0;
}

.ra-detail-dl dt {
  font-weight: 500;
  color: var(--ra-text-soft);
}

.ra-detail-dl dd {
  margin: 0;
}

/* Bitácora */

.ra-bitacora-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1.2fr);
  gap: 10px;
  align-items: flex-start;
}

.ra-bitacora-list {
  max-height: 380px;
  overflow: auto;
  padding: 4px;
  border-radius: 10px;
  background: rgba(15,23,42,0.96);
  border: 1px solid rgba(31,41,55,0.9);
}

.ra-bitacora-empty {
  font-size: 11px;
  color: var(--ra-text-soft);
  padding: 6px;
}

.ra-bitacora-item {
  border-radius: 10px;
  padding: 6px 8px;
  margin-bottom: 6px;
  background: radial-gradient(circle at top left, rgba(15,23,42,0.9), rgba(2,6,23,0.98));
  border: 1px solid rgba(55,65,81,0.9);
}

.ra-bitacora-item header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  margin-bottom: 2px;
}

.ra-bitacora-item time {
  color: var(--ra-text-soft);
}

.ra-bitacora-rel {
  font-size: 11px;
  font-weight: 500;
  color: #e5e7eb;
  margin-bottom: 2px;
}

.ra-bitacora-item p {
  font-size: 11px;
  color: var(--ra-text-soft);
  margin: 0;
}

.ra-bitacora-side {
  background: rgba(15,23,42,0.98);
  border-radius: 12px;
  border: 1px solid rgba(31,41,55,0.95);
  padding: 8px 10px;
}

.ra-bitacora-side-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: #f9fafb;
}

.ra-bitacora-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ra-bitacora-form label {
  font-size: 10px;
  color: var(--ra-text-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ra-bitacora-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
}

/* Modal genérico */

.ra-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.85);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow: auto;
  /* Debe estar por encima de Leaflet (Safari/Leaflet a veces eleva panes/control). */
  z-index: 2147483000;
}

.ra-modal-card {
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at top left, rgba(249,115,22,0.16), rgba(15,23,42,0.98));
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.9);
  box-shadow: 0 22px 60px rgba(15,23,42,0.95);
  overflow: hidden;
}

.ra-modal-card.ra-modal-card-wide{
  max-width: 1350px;
}

.ra-modal-card.ra-sol-editor-card{
  max-width: 1280px;
}

.ra-muted{
  color: var(--ra-text-soft);
  opacity: .85;
}

.ra-summary-grid{
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.ra-summary-media{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.ra-summary-img{
  width: 100%;
  height: 220px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  object-fit: cover;
  display:block;
}
.ra-summary-img[data-tipo="negocio"],
.ra-summary-img[data-tipo="grupo"],
.ra-summary-img[data-tipo="agencia"],
.ra-summary-img[data-tipo="marca"]{
  object-fit: contain;
  background: rgba(255,255,255,.92);
  padding: 10px;
}

.ra-summary-img.ra-summary-img-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--ra-text-soft);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ra-summary-img.ra-summary-img-empty[data-tipo="negocio"]{ background: rgba(56,189,248,.12); color: rgba(255,255,255,.92); }
.ra-summary-img.ra-summary-img-empty[data-tipo="grupo"]{ background: rgba(74,222,128,.12); color: rgba(255,255,255,.92); }
.ra-summary-img.ra-summary-img-empty[data-tipo="agencia"]{ background: rgba(249,115,22,.12); color: rgba(255,255,255,.92); }
.ra-summary-img.ra-summary-img-empty[data-tipo="marca"]{ background: rgba(34,211,238,.10); color: rgba(255,255,255,.92); }
.ra-summary-img.ra-summary-img-empty[data-tipo="modelo"]{ background: rgba(250,204,21,.10); color: rgba(255,255,255,.92); }
.ra-summary-img.ra-summary-img-empty[data-tipo="vendedor"]{ background: rgba(196,181,253,.12); color: rgba(255,255,255,.92); }
.ra-summary-img.ra-summary-img-empty[data-tipo="staff"]{ background: rgba(148,163,184,.10); color: rgba(255,255,255,.92); }
.ra-summary-img.ra-summary-img-empty[data-tipo="cliente"]{ background: rgba(249,168,212,.12); color: rgba(255,255,255,.92); }

.ra-summary-meta{
  font-size: 12px;
  color: rgba(255,255,255,.82);
  display:flex;
  flex-direction: column;
  gap: 6px;
}

.ra-summary-actions{
  min-width: 0;
}

.ra-summary-actions-row{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
}

.ra-summary-act{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255,255,255,.04);
  margin-bottom: 8px;
}

.ra-summary-act-top{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

.ra-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(55,65,81,0.9);
}

.ra-modal-header h2 {
  margin: 0;
  font-size: 14px;
}

.ra-modal-close {
  border: none;
  background: transparent;
  color: var(--ra-text-soft);
  font-size: 18px;
  cursor: pointer;
}

.ra-modal-close:hover {
  color: #f9fafb;
}

.ra-modal-body {
  padding: 8px 10px 10px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

.ra-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}

.ra-field {
  font-size: 11px;
  color: var(--ra-text-soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}

.ra-imgbox{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 10px;
  margin: 10px 0 8px;
}
.ra-imgbox-head{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.ra-imggrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.ra-imgitem{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  border-radius: 12px;
  padding: 10px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.ra-imglabel{
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,.88);
}
.ra-imgpreview{
  width: 100%;
  height: 140px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.ra-imgitem[data-kind="logo"] .ra-imgpreview{
  height: 160px;
  object-fit: contain;
  background: rgba(255,255,255,.92);
  padding: 8px;
}
.ra-imgpreview-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}
.ra-imgpreview-empty[data-tipo="negocio"]{ background: rgba(56,189,248,.12); }
.ra-imgpreview-empty[data-tipo="grupo"]{ background: rgba(74,222,128,.12); }
.ra-imgpreview-empty[data-tipo="agencia"]{ background: rgba(249,115,22,.12); }
.ra-imgpreview-empty[data-tipo="marca"]{ background: rgba(34,211,238,.10); }
.ra-imgpreview-empty[data-tipo="modelo"]{ background: rgba(250,204,21,.10); }
.ra-imgpreview-empty[data-tipo="vendedor"]{ background: rgba(196,181,253,.12); }
.ra-imgpreview-empty[data-tipo="staff"]{ background: rgba(148,163,184,.10); }
.ra-imgpreview-empty[data-tipo="cliente"]{ background: rgba(249,168,212,.12); }
.ra-imgfile{ font-size: 12px; }

/* Responsivo */

@media (max-width: 1280px) {
  .ra-header-actions {
    grid-template-columns: repeat(4, minmax(132px, 1fr));
  }
}

@media (max-width: 980px) {
  .ra-layout {
    padding: 14px 10px 16px;
  }
  .ra-header-main {
    gap: 10px;
  }
  .ra-header-actions {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
  }
  .ra-kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ra-map-container {
    grid-template-columns: minmax(0, 1fr);
  }
  .ra-bitacora-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .ra-summary-grid{
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  body {
    padding: 8px;
  }
  .ra-layout {
    border-radius: 16px;
  }
  .ra-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ra-panel-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .ra-filter-group {
    width: 100%;
  }
  .ra-filter-group label {
    flex: 1;
  }
  .ra-header-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* === ORG BOARD + PICKER MODAL (AUTO) === */
.ra-hidden{display:none !important;}

/* Botón de picker (en vez de select Windows95) */
.ra-picker-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(10,20,40,.35);
  color:#eaf2ff;
  cursor:pointer;
  font-weight:700;
  line-height:1;
}
.ra-picker-btn:hover{ background:rgba(20,40,90,.35); }
.ra-picker-btn:active{ transform:translateY(1px); }
.ra-caret{ opacity:.85; font-weight:900; }

/* Modal: lista de pills */
.ra-pill-grid{ display:flex; flex-wrap:wrap; gap:10px; padding:10px 2px; max-height:55vh; overflow:auto; }
.ra-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(7,18,40,.35);
  color:#eaf2ff;
  cursor:pointer;
  user-select:none;
  font-weight:800;
}
.ra-pill:hover{ background:rgba(20,40,90,.35); }
.ra-pill.is-active{
  background:rgba(255,140,0,.20);
  border-color:rgba(255,140,0,.55);
  box-shadow:0 0 0 1px rgba(255,140,0,.18) inset;
}
.ra-pill small{ opacity:.8; font-weight:700; }

/* Organigrama tipo board */
.ra-org-board{
  display:grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap:12px;
  padding:10px 0;
}
@media (max-width: 1100px){
  .ra-org-board{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 720px){
  .ra-org-board{ grid-template-columns: 1fr; }
}
.ra-org-col{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
  border-radius:14px;
  overflow:hidden;
  min-height:220px;
}
.ra-org-col-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(10,18,40,.25);
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
  font-size:12px;
}
.ra-org-col-body{ padding:10px; display:flex; flex-direction:column; gap:10px; }

.ra-org-item .ra-tree-node{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  padding:10px;
  box-shadow:none;
}
.ra-org-item .ra-tree-node:hover{ background:rgba(255,255,255,.09); }
.ra-org-item.is-selected .ra-tree-node{
  border-color:rgba(255,140,0,.55);
  box-shadow:0 0 0 1px rgba(255,140,0,.22) inset;
  background:rgba(255,140,0,.10);
}
.ra-org-item .ra-tree-node .ra-tree-actions{ opacity:1; }
.ra-org-empty{
  padding:14px;
  opacity:.75;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:14px;
  background:rgba(0,0,0,.10);
}


/* === Staff pill === */
.ra-pill-staff{
  border-color: rgba(196,181,253,.35);
  background: rgba(196,181,253,.10);
  color: rgba(196,181,253,.95);
}

/* === Direcciones (Personas / Cliente) === */
.ra-dirs{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: grid;
  gap: 10px;
}
.ra-dirs-head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}
.ra-dirs-list{ display:grid; gap:10px; }
.ra-dirs-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.ra-dirs-item .line1{ font-weight: 900; }
.ra-dirs-item .line2{ margin-top: 4px; font-size: 12px; }
.ra-dirs-item .actions{ display:flex; gap:6px; }

/* === Solicitudes (Cliente) === */
.ra-sols{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: grid;
  gap: 10px;
}
.ra-sols-head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}
.ra-sols-list{ display:grid; gap:10px; }
.ra-sols-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.ra-sols-item .line1{ font-weight: 900; }
.ra-sols-item .line2{ margin-top: 4px; font-size: 12px; }
.ra-sols-item .actions{ display:flex; gap:6px; }

/* Cotizaciones (usa las mismas clases ra-sols-* para items) */
.ra-cots{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.ra-cots .ra-sols-head{
  display:flex;
  align-items:center;
  gap:10px;
}

.ra-cots .ra-sols-body{
  margin-top: 10px;
}

/* Modal editor Solicitud */
.ra-sol-grid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.ra-sol-two{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.ra-sol-readonly{
  grid-column: 1 / -1;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(0,0,0,.18);
}

/* =========================
   AddrModal (direcciones con mapa)
   - Reusa /admin/js/addr_modal.js (NO tocar)
   ========================= */

/* Modal base (AddrModal usa #dirModal.modal y alterna style.display) */
#dirModal.modal{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 2147483646;
}
#dirModal.modal .panel{
  width: min(980px, 96vw);
  max-height: 92vh;
  overflow: auto;
  background: linear-gradient(145deg, rgba(15,23,42,.96), rgba(2,6,23,.96));
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 18px;
  box-shadow: var(--ra-shadow-soft);
  padding: 12px 12px 14px;
}
#dirModal h3{ margin: 0; }
#dirModal .grid-4{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 920px){
  #dirModal .grid-4{ grid-template-columns: 1fr; }
}
#dirModal label{
  display:block;
  font-size: 12px;
  color: var(--ra-text-soft);
  margin-bottom: 4px;
}
#dirModal input,
#dirModal select{
  width: 100%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--ra-text);
  padding: 8px 10px;
  border-radius: 12px;
  outline: none;
}
#dirModal input:focus,
#dirModal select:focus{
  border-color: rgba(249,115,22,.55);
  box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}

/* Utilitarios usados por AddrModal (dentro y fuera del modal) */
.ra-layout .row,
#dirModal .row{
  display:flex;
  gap: 8px;
  align-items:center;
  flex-wrap: wrap;
}
.ra-layout .between,
#dirModal .between{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
}
.ra-layout .muted,
#dirModal .muted{ color: var(--ra-text-soft); }
.ra-layout .mono,
#dirModal .mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.ra-layout .btn,
#dirModal .btn{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--ra-text);
  padding: 7px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
}
.ra-layout .btn:hover,
#dirModal .btn:hover{
  box-shadow: 0 0 0 2px rgba(249,115,22,.12) inset;
}
.ra-layout .btn--primary,
#dirModal .btn--primary{
  border-color: rgba(249,115,22,.55);
  background: rgba(249,115,22,.18);
}
.ra-layout .btn--danger,
#dirModal .btn--danger{
  border-color: rgba(249,115,22,.55);
  background: rgba(249,115,22,.18);
}

.ra-layout .badge,
#dirModal .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  font-size: 11px;
}
.ra-layout .badge--accent,
#dirModal .badge--accent{
  border-color: rgba(34,211,238,.35);
  background: rgba(34,211,238,.12);
}

/* Lista de direcciones (renderizada por AddrModal.mount) */
.ra-dirs-list .addr-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.ra-dirs-list .addr-item b{ font-weight: 900; }
.ra-dirs-list .addr-item .muted.mono{ font-size: 11px; }

/* Toasts (feedback visible en Safari) */
.ra-toast-host{
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.ra-toast{
  pointer-events: none;
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(8, 12, 28, .92);
  color: rgba(255,255,255,.92);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  font-size: 13px;
  line-height: 1.25;
}
.ra-toast.is-show{
  opacity: 1;
  transform: translateY(0);
}
.ra-toast.is-hide{
  opacity: 0;
  transform: translateY(8px);
}
.ra-toast-info{ border-color: rgba(255,255,255,.14); }
.ra-toast-ok{ border-color: rgba(34,197,94,.35); }
.ra-toast-warn{ border-color: rgba(234,179,8,.40); }
.ra-toast-error{ border-color: rgba(239,68,68,.40); }

/* ========== NOTIFICACIONES - CAMPANITA ========== */

.ra-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  margin-bottom: 8px;
}

.ra-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ra-notif-bell {
  position: relative;
}

.ra-notif-btn {
  background: var(--ra-surface-soft);
  border: 1px solid var(--ra-border);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
}

.ra-notif-btn:hover {
  background: var(--ra-surface);
  border-color: var(--ra-accent);
}

.ra-notif-icon {
  font-size: 18px;
}

.ra-notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  animation: ra-notif-pulse 2s infinite;
}

@keyframes ra-notif-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.ra-notif-badge.ra-alta {
  background: #dc2626;
  animation: ra-notif-pulse-alta 1s infinite;
}

@keyframes ra-notif-pulse-alta {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

.ra-notif-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 360px;
  max-height: 480px;
  background: var(--ra-surface);
  border: 1px solid var(--ra-border);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ra-notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ra-border);
  font-weight: 600;
}

.ra-notif-mark-read {
  background: none;
  border: none;
  color: var(--ra-accent);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.ra-notif-mark-read:hover {
  background: var(--ra-accent-soft);
}

.ra-notif-header-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
  opacity: 0.7;
}

.ra-notif-header-btn:hover {
  opacity: 1;
  background: var(--ra-surface-soft);
}

.ra-notif-sonido-btn {
  margin-right: 8px;
}

.ra-notif-lista {
  flex: 1;
  overflow-y: auto;
  max-height: 350px;
}

.ra-notif-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--ra-text-soft);
}

.ra-notif-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ra-border-soft);
  cursor: pointer;
  transition: background 0.2s;
}

.ra-notif-item:hover {
  background: var(--ra-surface-soft);
}

.ra-notif-item.no-leida {
  background: rgba(99, 102, 241, 0.08);
  border-left: 3px solid var(--ra-accent);
}

.ra-notif-item.alta-prioridad {
  border-left: 3px solid #ef4444;
}

.ra-notif-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.ra-notif-item-content {
  flex: 1;
  min-width: 0;
}

.ra-notif-item-titulo {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ra-notif-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--ra-text);
  vertical-align: middle;
}

.ra-notif-chip.ch-wa { border-color: rgba(34, 197, 94, 0.40); background: rgba(34, 197, 94, 0.12); }
.ra-notif-chip.ch-whatsapp { border-color: rgba(34, 197, 94, 0.40); background: rgba(34, 197, 94, 0.12); }
.ra-notif-chip.ch-messenger { border-color: rgba(59, 130, 246, 0.45); background: rgba(59, 130, 246, 0.14); }
.ra-notif-chip.ch-web { border-color: rgba(168, 85, 247, 0.45); background: rgba(168, 85, 247, 0.14); }

.ra-notif-item-mensaje {
  font-size: 12px;
  color: var(--ra-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ra-notif-item-tiempo {
  font-size: 10px;
  color: var(--ra-text-soft);
  margin-top: 4px;
}

.ra-notif-item-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}

.ra-notif-item:hover .ra-notif-item-actions {
  opacity: 1;
}

.ra-notif-item-action {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--ra-text-soft);
  border-radius: 4px;
  font-size: 14px;
}

.ra-notif-item-action:hover {
  background: var(--ra-surface);
  color: var(--ra-text);
}

.ra-notif-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--ra-border);
  text-align: center;
}

.ra-notif-footer a {
  color: var(--ra-accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.ra-notif-footer a:hover {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .ra-notif-dropdown {
    width: calc(100vw - 32px);
    right: -16px;
  }
}

/* ============================================
   OCR Sub-tabs & Solicitud Financiera
   ============================================ */

.ocr-subtabs {
  display: flex;
  gap: 4px;
}

.ocr-subtab {
  padding: 8px 18px;
  background: rgba(255,255,255,0.06);
  color: #aaa;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
}

.ocr-subtab:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.ocr-subtab.is-active {
  background: rgba(16,185,129,0.15);
  color: #10b981;
  border-color: rgba(16,185,129,0.4);
  border-bottom-color: transparent;
}

.ocr-subtab.is-active[data-ocr-tab="poliza"] {
  background: rgba(99,102,241,0.15);
  color: #6366f1;
  border-color: rgba(99,102,241,0.4);
  border-bottom-color: transparent;
}

/* Solicitud preview */
.sol-preview-section {
  margin-bottom: 14px;
  padding: 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
}

.sol-preview-section h5 {
  margin: 0 0 8px 0;
  color: #10b981;
  font-size: 13px;
}

.sol-pv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}

.sol-pv-row {
  font-size: 12px;
  line-height: 1.6;
}

.sol-pv-label {
  color: #888;
}

.sol-pv-val {
  color: #fff;
  font-weight: 500;
}

/* Solicitud modal */
.sol-modal-overlay .ra-modal-card {
  background: #1a1a2e;
  border: 1px solid rgba(16,185,129,0.3);
}

.sol-section {
  margin-bottom: 18px;
  padding: 14px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
}

.sol-section h4 {
  margin: 0 0 12px 0;
  color: #10b981;
  font-size: 14px;
  font-weight: 600;
}

.sol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 768px) {
  .sol-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.sol-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sol-field label {
  font-size: 11px;
  color: #888;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.sol-input {
  padding: 7px 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: #fff;
  font-size: 13px;
  transition: all 0.3s;
}

.sol-input:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16,185,129,0.2);
}

/* Animación de llenado */
.sol-filling {
  border-color: #10b981 !important;
  background: rgba(16,185,129,0.12) !important;
  box-shadow: 0 0 8px rgba(16,185,129,0.3) !important;
}

.sol-filled {
  animation: solFieldPulse 0.4s ease-out;
}

@keyframes solFieldPulse {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  50% { box-shadow: 0 0 0 4px rgba(16,185,129,0.2); }
  100% { box-shadow: none; }
}

/* Ref cards */
.sol-ref-card {
  padding: 10px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  border-left: 3px solid #10b981;
}
