/* ─────────────────────────────────────────────────────────────────────────
   Design tokens — dark theme (default)
   RGB triplets (no #) for Tailwind opacity support: rgb(var(--x-rgb) / 0.5)
   Plain vars for direct CSS usage: color: var(--primary)
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* Curva de movimiento única (DESIGN.md § Movimiento). Igual en ambos temas. */
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);

  --primary-rgb:                59 130 246;   /* #3b82f6 */
  --on-primary-rgb:             255 255 255;  /* #ffffff */
  --secondary-container-rgb:    55 65 81;     /* #374151 */
  --on-secondary-container-rgb: 229 231 235;  /* #e5e7eb */
  --surface-rgb:                17 24 39;     /* #111827 */
  --surface-container-rgb:      31 41 55;     /* #1f2937 */
  --surface-container-high-rgb: 55 65 81;     /* #374151 */
  --on-surface-rgb:             249 250 251;  /* #f9fafb */
  --on-surface-variant-rgb:     156 163 175;  /* #9ca3af */
  --outline-rgb:                75 85 99;     /* #4b5563 */
  --outline-variant-rgb:        55 65 81;     /* #374151 */
  --accent-green-rgb:           16 185 129;   /* #10b981 */
  --accent-yellow-rgb:          245 158 11;   /* #f59e0b */
  --accent-red-rgb:             239 68 68;    /* #ef4444 */

  /* Plain values for direct CSS var() usage */
  --primary:                #3b82f6;
  --on-primary:             #ffffff;
  --surface:                #111827;
  --surface-container:      #1f2937;
  --surface-container-high: #374151;
  --on-surface:             #f9fafb;
  --on-surface-variant:     #9ca3af;
  --outline:                #4b5563;
  --outline-variant:        #374151;
  --accent-green:           #10b981;
  --accent-yellow:          #f59e0b;
  --accent-red:             #ef4444;

  /* Alert level tokens — optimized for dark backgrounds */
  --level-verde-rgb:    34 197 94;    /* #22c55e green-500 */
  --level-amarillo-rgb: 234 179 8;    /* #eab308 yellow-500 */
  --level-naranja-rgb:  249 115 22;   /* #f97316 orange-500 */
  --level-rojo-rgb:     239 68 68;    /* #ef4444 red-500 */
  --level-negro-rgb:  0 0 0;        /* #000000 triage negro. Igual en ambos temas */
  --level-verde:    #22c55e;
  --level-amarillo: #eab308;
  --level-naranja:  #f97316;
  --level-rojo:     #ef4444;

  /* Traffic source tokens — issue #226 */
  --source-waze-rgb:  59 130 246;    /* #3b82f6 blue-500 */
  --source-dgt-rgb:   239 68 68;     /* #ef4444 red-500 */
  --source-s112-rgb:  245 158 11;    /* #f59e0b amber-500 */
  /* Trenes Renfe por grupo de producto — issue #1171 */
  --source-renfe-cercanias-rgb: 244 63 94;   /* #f43f5e rose-500 */
  --source-renfe-av-rgb:        167 139 250; /* #a78bfa violet-400 */
  --source-renfe-ld-rgb:        56 189 248;  /* #38bdf8 sky-400 */
  --source-renfe-md-rgb:        52 211 153;  /* #34d399 emerald-400 */
  --source-renfe-otros-rgb:     148 163 184; /* #94a3b8 slate-400 */
  /* Categorías sin significado de estado (tipos de formación, documento,
     diario PMA, alerta). Solo para distinguir categorías, nunca estado. */
  --category-violet-rgb: 167 139 250; /* #a78bfa violet-400 */
  --category-cyan-rgb:   34 211 238;  /* #22d3ee cyan-400 */
  --category-teal-rgb:   45 212 191;  /* #2dd4bf teal-400 */
  --category-pink-rgb:   244 114 182; /* #f472b6 pink-400 */

  /* Embalses — escala de llenado en tramos de 10 %, igual en ambos temas.
     0 = menos de 10 %, 9 = 90 % o más (issue #879) */
  --water-level-0-rgb: 168 48 32;    /* #a83020 */
  --water-level-1-rgb: 201 80 32;    /* #c95020 */
  --water-level-2-rgb: 217 112 48;   /* #d97030 */
  --water-level-3-rgb: 196 138 80;   /* #c48a50 */
  --water-level-4-rgb: 168 144 112;  /* #a89070 */
  --water-level-5-rgb: 141 202 232;  /* #8dcae8 */
  --water-level-6-rgb: 91 180 216;   /* #5bb4d8 */
  --water-level-7-rgb: 59 156 201;   /* #3b9cc9 */
  --water-level-8-rgb: 29 111 163;   /* #1d6fa3 */
  --water-level-9-rgb: 12 74 110;    /* #0c4a6e */

  /* RAR — tasa de dosis gamma por tramos (μSv/h) y centrales nucleares.
     Igual en ambos temas (issue #881) */
  --rar-level-0-rgb: 34 211 238;   /* #22d3ee  ≤ 0.100 */
  --rar-level-1-rgb: 45 212 191;   /* #2dd4bf  ≤ 0.200 */
  --rar-level-2-rgb: 59 130 246;   /* #3b82f6  ≤ 0.300 */
  --rar-level-3-rgb: 29 78 216;    /* #1d4ed8  ≤ 0.500 */
  --rar-level-4-rgb: 126 34 206;   /* #7e22ce  ≤ 2.0 */
  --rar-level-5-rgb: 88 28 135;    /* #581c87  > 2.0 */
  --rar-central-rgb: 249 115 22;   /* #f97316 */

  /* Nivel de servicio DGT «Negro» (etraffic, #1080): igual en ambos temas */
  --dgt-nivel-negro-rgb: 0 0 0;      /* #000000 */

  /* Fleet command card — estado top accent bar */
  --fleet-operativo-rgb:   16 185 129;   /* --accent-green */
  --fleet-averia-rgb:      239 68 68;    /* --accent-red */
  --fleet-reparacion-rgb:  245 158 11;   /* --accent-yellow */
  --fleet-baja-rgb:        107 114 128;  /* gray-500 neutral */
}

/* ─────────────────────────────────────────────────────────────────────────
   Custom cursors
   ───────────────────────────────────────────────────────────────────────── */

/* Mirilla táctica: cruz negra con hueco central, sin círculo */
.cursor-aim {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='11' y='2' width='2' height='7' fill='black'/%3E%3Crect x='11' y='15' width='2' height='7' fill='black'/%3E%3Crect x='2' y='11' width='7' height='2' fill='black'/%3E%3Crect x='15' y='11' width='7' height='2' fill='black'/%3E%3C/svg%3E") 12 12, pointer;
}

/* ─────────────────────────────────────────────────────────────────────────
   Light theme overrides
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --primary-rgb:                29 78 216;    /* #1d4ed8 — blue-700, WCAG AA on white */
  --on-primary-rgb:             255 255 255;
  --secondary-container-rgb:    229 231 235;  /* #e5e7eb */
  --on-secondary-container-rgb: 55 65 81;     /* #374151 */
  --surface-rgb:                249 250 251;  /* #f9fafb */
  --surface-container-rgb:      255 255 255;  /* #ffffff */
  --surface-container-high-rgb: 243 244 246;  /* #f3f4f6 */
  --on-surface-rgb:             17 24 39;     /* #111827 */
  --on-surface-variant-rgb:     107 114 128;  /* #6b7280 — gray-500, AA on white */
  --outline-rgb:                209 213 219;  /* #d1d5db */
  --outline-variant-rgb:        229 231 235;  /* #e5e7eb */
  --accent-green-rgb:           5 150 105;    /* #059669 — emerald-600 */
  --accent-yellow-rgb:          217 119 6;    /* #d97706 — amber-600 */
  --accent-red-rgb:             220 38 38;    /* #dc2626 — red-600 */

  --primary:                #1d4ed8;
  --on-primary:             #ffffff;
  --surface:                #f9fafb;
  --surface-container:      #ffffff;
  --surface-container-high: #f3f4f6;
  --on-surface:             #111827;
  --on-surface-variant:     #6b7280;
  --outline:                #d1d5db;
  --outline-variant:        #e5e7eb;
  --accent-green:           #059669;
  --accent-yellow:          #d97706;
  --accent-red:             #dc2626;

  /* Alert levels — darker shades for contrast on light backgrounds */
  --level-verde-rgb:    22 163 74;    /* #16a34a green-600 */
  --level-amarillo-rgb: 202 138 4;    /* #ca8a04 yellow-600 */
  --level-naranja-rgb:  234 88 12;    /* #ea580c orange-600 */
  --level-rojo-rgb:     220 38 38;    /* #dc2626 red-600 */
  --level-verde:    #16a34a;
  --level-amarillo: #ca8a04;
  --level-naranja:  #ea580c;
  --level-rojo:     #dc2626;

  /* Traffic source tokens — issue #226 */
  --source-waze-rgb:  37 99 235;     /* #2563eb blue-600 */
  --source-dgt-rgb:   220 38 38;     /* #dc2626 red-600 */
  --source-s112-rgb:  217 119 6;     /* #d97706 amber-600 */
  --source-renfe-cercanias-rgb: 225 29 72;   /* #e11d48 rose-600 */
  --source-renfe-av-rgb:        124 58 237;  /* #7c3aed violet-600 */
  --source-renfe-ld-rgb:        2 132 199;   /* #0284c7 sky-600 */
  --source-renfe-md-rgb:        5 150 105;   /* #059669 emerald-600 */
  --source-renfe-otros-rgb:     71 85 105;   /* #475569 slate-600 */
  --category-violet-rgb: 124 58 237;  /* #7c3aed violet-600 */
  --category-cyan-rgb:   8 145 178;   /* #0891b2 cyan-600 */
  --category-teal-rgb:   13 148 136;  /* #0d9488 teal-600 */
  --category-pink-rgb:   219 39 119;  /* #db2777 pink-600 */

  /* Fleet command card — estado top accent bar (light) */
  --fleet-operativo-rgb:   5 150 105;    /* --accent-green light */
  --fleet-averia-rgb:      220 38 38;    /* --accent-red light */
  --fleet-reparacion-rgb:  217 119 6;    /* --accent-yellow light */
  --fleet-baja-rgb:        107 114 128;  /* gray-500 neutral */
}

/* ── Date/time inputs — color-scheme fix for dark mode ──────────────────────
   Without this, the native browser calendar widget renders with a white
   background even when the app is in dark mode. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  color-scheme: dark;
}

[data-theme="light"] input[type="date"],
[data-theme="light"] input[type="time"],
[data-theme="light"] input[type="datetime-local"],
[data-theme="light"] input[type="month"],
[data-theme="light"] input[type="week"] {
  color-scheme: light;
}

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  background: var(--surface);
}

::-webkit-scrollbar-thumb {
  background: var(--outline);
  border-radius: 8px;
  border: 4px solid var(--surface);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Transición de color por defecto (DESIGN.md § Movimiento). Va en la capa
   `base` de Tailwind: fuera de capa ganaba a todas las utilidades
   `transition-*` y `duration-*` y anulaba las animaciones de tamaño y
   transform (#1289). El orden coincide con el de `@import "tailwindcss"`. */
@layer properties, theme, base, components, utilities;

@layer base {
  * {
    transition:
      color 150ms var(--motion-ease),
      background-color 150ms var(--motion-ease),
      border-color 150ms var(--motion-ease),
      box-shadow 150ms var(--motion-ease),
      fill 150ms var(--motion-ease);
  }
}

/* --- New UI Polish Styles --- */
.card-bg {
  background-color: var(--surface-container);
}

/* --- Animation Keyframes & Classes --- */
@keyframes keyframe-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes keyframe-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes keyframe-scale-in {
  from {
    transform: scale(0.95);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes keyframe-scale-out {
  from {
    transform: scale(1);
    opacity: 1;
  }

  to {
    transform: scale(0.95);
    opacity: 0;
  }
}

/* --- Modal Animations --- */
.modal-backdrop {
  animation: keyframe-fade-in 0.3s ease-out forwards;
}

.modal-backdrop-out {
  animation: keyframe-fade-out 0.3s ease-in forwards;
}

.modal-content {
  animation: keyframe-scale-in 0.3s ease-out forwards;
}

.modal-content-out {
  animation: keyframe-scale-out 0.3s ease-in forwards;
}

/* --- Dialog (Base UI Dialog/AlertDialog) Animations --- */
/* Base UI toggles [data-open]/[data-closed] on Backdrop/Popup and unmounts
   automatically once the matching CSS animation finishes (element.getAnimations()) —
   no JS timers needed here, unlike the old .modal-backdrop/.modal-content pattern. */
.dialog-backdrop[data-open] {
  animation: keyframe-fade-in 0.3s ease-out forwards;
}
.dialog-backdrop[data-closed] {
  animation: keyframe-fade-out 0.3s ease-in forwards;
}
.dialog-popup[data-open] {
  animation: keyframe-scale-in 0.3s ease-out forwards;
}
.dialog-popup[data-closed] {
  animation: keyframe-scale-out 0.3s ease-in forwards;
}

@keyframes keyframe-slide-in-right {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes keyframe-slide-out-right {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(100%);
  }
}

.drawer-popup[data-open] {
  animation: keyframe-slide-in-right 0.3s ease-out forwards;
}
.drawer-popup[data-closed] {
  animation: keyframe-slide-out-right 0.3s ease-in forwards;
}

/* --- Popover (Base UI Popover) Animations --- */
.popover-popup[data-open] {
  animation: keyframe-scale-in 0.15s ease-out forwards;
}
.popover-popup[data-closed] {
  animation: keyframe-scale-out 0.15s ease-in forwards;
}

/* --- Dropdown/Panel Animations --- */
.panel-scale-in {
  transform-origin: top right;
  animation: keyframe-scale-in 0.2s ease-out forwards;
}

/* --- Animated Content Switch --- */
.content-fade-enter {
  animation: keyframe-fade-in 0.4s ease-out forwards;
}

/* Welcome Page Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

@keyframes hero-card-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* RSS Card Description Styling */
.rss-description strong {
  color: var(--on-surface);
  font-weight: 600;
}

.rss-description br {
  display: block;
  content: "";
  margin-top: 0.5rem;
}

/* BlueSky Embed Theming */
.bsky-timeline-container {
  --background: var(--surface-container);
  --color-text: var(--on-surface);
  --color-link: var(--primary);
  --border-color: var(--outline);
  --card-background: var(--surface);
  --button-background: var(--surface-container-high);
}

.bsky-timeline-container bsky-embed {
  display: block;
  height: 100%;
}

/* React Grid Layout Overrides */
.react-grid-layout {
  position: relative;
  transition: height 200ms ease;
  border-radius: 1rem;
}

.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top;
  display: flex;
  flex-direction: column;
}

.react-grid-item.css-transforms {
  transition-property: transform;
}

.react-grid-item.resizing {
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
  box-shadow:
    0 10px 25px -3px rgb(0 0 0 / 0.3),
    0 4px 6px -4px rgb(0 0 0 / 0.3);
}

.react-grid-item.react-grid-placeholder {
  background: var(--primary);
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  border-radius: 1rem;
  border: 2px dashed var(--on-primary);
}

.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: 0;
  right: 0;
  cursor: se-resize;
  z-index: 10;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 6" fill="%239ca3af"><path d="M6 0 L0 6 M6 3 L3 6 M6 5 L5 6" stroke-width=".5" stroke="currentColor"/></svg>');
  background-position: bottom right;
  padding: 0 4px 4px 0;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
}

/* Durante drag/resize, los iframes no capturan el puntero (cortarían el gesto) */
.react-grid-layout:has(
    .react-grid-item.resizing,
    .react-grid-item.react-draggable-dragging
  )
  iframe {
  pointer-events: none;
}

.react-grid-item > .react-resizable-handle::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(255, 255, 255, 0.4);
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
}

/* Skeleton Loader Animation */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

.skeleton-loader {
  animation: shimmer 2s infinite linear;
  background: linear-gradient(
    to right,
    var(--surface-container) 8%,
    var(--surface-container-high) 18%,
    var(--surface-container) 33%
  );
  background-size: 2000px 100%;
}

/* Toast Animation */
@keyframes keyframe-toast-in-out {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  5% {
    transform: translateY(0);
    opacity: 1;
  }

  95% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}

.animate-toast-in-out {
  animation: keyframe-toast-in-out linear forwards;
}

/* 
   Optimized Marquee Animation 
   Moves the container left by 50%. 
   Assuming the container holds 2 identical copies of the content, 
   moving 50% makes the second copy perfectly replace the first.
*/
@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

/* Custom Scrollbar for Sidebar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--outline);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Skeleton Loading Utilities */
.animate-skeleton {
  background: linear-gradient(
    90deg,
    rgb(var(--surface-container-rgb) / 0) 0,
    rgb(var(--surface-container-high-rgb) / 1) 50%,
    rgb(var(--surface-container-rgb) / 0) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Stripes background for search indicator */
.bg-stripes {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.02) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(255, 255, 255, 0.02) 75%,
    transparent 75%,
    transparent
  );
  background-size: 20px 20px;
}

/* Settings Page Animations */
@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-down {
  animation: slide-down 0.2s ease-out;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}

/* Custom scrollbar for settings sidebar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--outline);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Range input styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: var(--surface-container-high);
  border-radius: 999px;
  height: 8px;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: var(--primary);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin-top: -6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

input[type="range"]::-webkit-slider-thumb:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

input[type="range"]::-moz-range-track {
  background: var(--surface-container-high);
  border-radius: 999px;
  height: 8px;
}

input[type="range"]::-moz-range-thumb {
  background: var(--primary);
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

input[type="range"]::-moz-range-thumb:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* Select dropdown styling */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

select:focus {
  outline: none;
}

/* Toggle switch accessibility */
button[role="switch"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Content transitions */
.content-fade-enter {
  animation: fade-in 0.25s ease-out;
}

/* --- Tiptap WYSIWYG Editor Styles --- */

/* Editor content area */
.ProseMirror {
  outline: none;
  min-height: 160px;
  color: var(--on-surface);
}

.ProseMirror > * + * {
  margin-top: 0.75em;
}

.ProseMirror ul,
.ProseMirror ol {
  padding-left: 1.5rem;
}

.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6 {
  line-height: 1.1;
  font-weight: 600;
  color: var(--on-surface);
}

.ProseMirror h1 {
  font-size: 1.5rem;
}

.ProseMirror h2 {
  font-size: 1.25rem;
}

.ProseMirror h3 {
  font-size: 1.1rem;
}

.ProseMirror p {
  line-height: 1.6;
}

.ProseMirror strong {
  font-weight: 600;
}

.ProseMirror em {
  font-style: italic;
}

.ProseMirror code {
  background-color: var(--surface-container-high);
  border-radius: 4px;
  padding: 0.2em 0.4em;
  font-family: monospace;
  font-size: 0.9em;
}

.ProseMirror pre {
  background: var(--surface-container-high);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
}

.ProseMirror pre code {
  background: none;
  padding: 0;
}

/* Mention styles */
.ProseMirror .mention {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* Volunteer mentions - green */
.ProseMirror .mention[data-mention-type="volunteer"] {
  background-color: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  color: #4ade80;
}

.ProseMirror .mention[data-mention-type="volunteer"]:hover {
  background-color: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.6);
}

/* Service mentions - blue */
.ProseMirror .mention[data-mention-type="service"] {
  background-color: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}

.ProseMirror .mention[data-mention-type="service"]:hover {
  background-color: rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.6);
}

/* Task mentions - amber */
.ProseMirror .mention[data-mention-type="task"] {
  background-color: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.ProseMirror .mention[data-mention-type="task"]:hover {
  background-color: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.6);
}

/* ── Fleet Command Card — Geometric SVG placeholder (no emoji) ────────────── */
.fleet-placeholder-bg {
  background-color: rgb(var(--surface-container-high-rgb));
  background-image:
    linear-gradient(30deg, rgb(var(--outline-rgb) / 0.04) 12%, transparent 12.5%, transparent 87%, rgb(var(--outline-rgb) / 0.04) 87.5%, rgb(var(--outline-rgb) / 0.04)),
    linear-gradient(150deg, rgb(var(--outline-rgb) / 0.04) 12%, transparent 12.5%, transparent 87%, rgb(var(--outline-rgb) / 0.04) 87.5%, rgb(var(--outline-rgb) / 0.04)),
    linear-gradient(30deg, rgb(var(--outline-rgb) / 0.04) 12%, transparent 12.5%, transparent 87%, rgb(var(--outline-rgb) / 0.04) 87.5%, rgb(var(--outline-rgb) / 0.04)),
    linear-gradient(150deg, rgb(var(--outline-rgb) / 0.04) 12%, transparent 12.5%, transparent 87%, rgb(var(--outline-rgb) / 0.04) 87.5%, rgb(var(--outline-rgb) / 0.04)),
    linear-gradient(60deg, rgb(var(--outline-rgb) / 0.02) 25%, transparent 25.5%, transparent 75%, rgb(var(--outline-rgb) / 0.02) 75%, rgb(var(--outline-rgb) / 0.02)),
    linear-gradient(60deg, rgb(var(--outline-rgb) / 0.02) 25%, transparent 25.5%, transparent 75%, rgb(var(--outline-rgb) / 0.02) 75%, rgb(var(--outline-rgb) / 0.02));
  background-size: 20px 35px;
  background-position: 0 0, 0 0, 10px 17px, 10px 17px, 0 0, 10px 17px;
}

/* Vehicle mentions - purple */
.ProseMirror .mention[data-mention-type="vehicle"] {
  background-color: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #c084fc;
}

.ProseMirror .mention[data-mention-type="vehicle"]:hover {
  background-color: rgba(168, 85, 247, 0.25);
  border-color: rgba(168, 85, 247, 0.6);
}

/* Mention suggestion dropdown */
.tippy-box[data-theme~="mention"] {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* Placeholder style */
.ProseMirror p.is-editor-empty:first-child::before {
  color: var(--on-surface-variant);
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
  opacity: 0.5;
}


/* ── PMA: Modo alto contraste (#85) ──────────────────────────────────────────
   Aumenta contraste de texto y bordes para uso operacional en campo
   (luz solar directa, pantallas de baja calidad).
   Se activa añadiendo la clase .pma-high-contrast al wrapper raíz.         */
.pma-high-contrast {
  filter: contrast(1.25) brightness(1.05);
}
.pma-high-contrast .bg-surface {
  background-color: #0a0a0a;
}
.pma-high-contrast .text-on-surface-variant {
  color: #c8c8c8;
}
.pma-high-contrast .border-outline\/20 {
  border-color: rgba(255,255,255,0.35);
}

/* ── OpenLayers — PMA map controls & overlays ────────────────────────────────
   Scoped to .ol-zoom-cecom and the custom overlay/popup classes used by
   useOpenLayersMap, FieldUnitsLayer and IncidentsLayer.
   No hex colors — only var(--token) from the design system.               */

/* ── Aviso: catálogo de capas no disponible (issue #899) ────────────────── */
/* `.ol-control` delante: `ol/ol.css` se carga después y, con la misma
   especificidad, deja el fondo casi transparente. */
.ol-control.ol-catalog-error {
  position: absolute;
  /* Una página con barra sobre el mapa lo baja (`--map-notice-top`). */
  top: var(--map-notice-top, 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: rgb(var(--surface-container-rgb) / 0.95);
  color: rgb(var(--accent-red-rgb));
  border: 1px solid rgb(var(--accent-red-rgb) / 0.4);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.ol-control.ol-catalog-error button {
  padding: 0.25rem 0.5rem;
  background-color: rgb(var(--primary-rgb));
  color: rgb(var(--on-primary-rgb));
  border-radius: 6px;
  cursor: pointer;
}

/* ── Zoom control ────────────────────────────────────────────────────────── */
.ol-zoom-cecom {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  left: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ol-zoom-cecom button {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(var(--surface-container-rgb) / 0.92);
  color: var(--on-surface);
  border: 1px solid rgb(var(--outline-rgb) / 0.3);
  border-radius: 6px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ol-zoom-cecom button:hover {
  background-color: rgb(var(--surface-container-high-rgb) / 0.98);
  border-color: rgb(var(--primary-rgb) / 0.5);
  color: var(--primary);
}

.ol-zoom-cecom button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* ── Scale line ──────────────────────────────────────────────────────────── */
.ol-scale-line {
  bottom: 0.5rem;
  left: 0.75rem;
  background: rgb(var(--surface-container-rgb) / 0.8);
  border-radius: 4px;
  padding: 2px 6px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ol-scale-line-inner {
  color: var(--on-surface-variant);
  font-size: 10px;
  border-color: var(--on-surface-variant);
}

/* ── Attribution ─────────────────────────────────────────────────────────── */
.ol-attribution {
  bottom: 0.5rem;
  right: 0.75rem;
  background: rgb(var(--surface-container-rgb) / 0.7);
  border-radius: 4px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ol-attribution ul {
  color: var(--on-surface-variant);
  font-size: 9px;
}

.ol-attribution button {
  color: var(--on-surface-variant);
}

/* ── PMA location marker (Overlay, .ol-pma-marker) ──────────────────────── */
.ol-pma-marker {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--primary);
  border: 3px solid var(--on-primary);
  box-shadow:
    0 0 0 2px var(--primary),
    0 2px 8px rgb(0 0 0 / 0.5);
  cursor: default;
  pointer-events: none;
}

/* ── Field-unit tooltip (Overlay, .ol-tooltip-cecom) ────────────────────── */
.ol-tooltip-cecom {
  pointer-events: none;
  user-select: none;
}

/* ── Popup card (.ol-popup-cecom, rendered inside .ol-tooltip-cecom) ─────── */
.ol-popup-cecom {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
  background-color: rgb(var(--surface-container-rgb) / 0.95);
  border: 1px solid rgb(var(--outline-rgb) / 0.4);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  min-width: 100px;
}

.ol-popup-cecom strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--on-surface);
  line-height: 1.3;
}

.ol-popup-sub {
  font-size: 10px;
  color: var(--on-surface-variant);
  line-height: 1.3;
}