/* Covering My Ass V2 — Design System
   Fuente única de identidad visual. Cargar antes de los CSS específicos. */

:root {
  --cma-primary: #2563eb;
  --cma-primary-hover: #1d4ed8;
  --cma-primary-soft: #eff6ff;
  --cma-primary-border: #bfdbfe;
  --cma-success: #16a34a;
  --cma-warning: #f59e0b;
  --cma-danger: #dc2626;
  --cma-bg: #eef2f7;
  --cma-surface: #ffffff;
  --cma-text: #111827;
  --cma-muted: #6b7280;
  --cma-border: #e5e7eb;
  --cma-radius-sm: 10px;
  --cma-radius: 12px;
  --cma-radius-lg: 16px;
  --cma-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
  --cma-tap: 48px;
  --cma-space-1: 4px;
  --cma-space-2: 8px;
  --cma-space-3: 12px;
  --cma-space-4: 16px;
  --cma-space-5: 24px;
  --cma-transition: 140ms ease;
  --cma-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--cma-bg);
}

body {
  margin: 0;
  color: var(--cma-text);
  background: var(--cma-bg);
  font-family: var(--cma-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Identidad */
.cma-brand,
.cma-brand strong,
.cma-brand__mark,
.app-brand,
.app-logo,
.brand-name,
.logo-mark,
.logo-text {
  color: var(--cma-primary) !important;
}

/* Navegación Volver: siempre azul y con área táctil suficiente */
.mobile-back,
.back-link,
.back-button,
a[href*="/missions/"][class*="back"],
a[class*="volver"],
a[class*="back"] {
  color: var(--cma-primary) !important;
  text-decoration: none !important;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
}

.mobile-back:hover,
.back-link:hover,
.back-button:hover { color: var(--cma-primary-hover) !important; }

/* Enlaces de acción */
a.action-link,
a.primary-link,
a[class*="add-operation"],
a[href*="operations/add"] {
  color: var(--cma-primary) !important;
  text-decoration: none;
  font-weight: 650;
}

/* Botones comunes */
.btn,
.button,
.primary-button,
.btn-primary,
.button-primary,
.submit-button,
.save-button,
.login-button,
.action-button,
.operation-action,
.mobile-primary-action,
.cma-primary-button {
  min-height: var(--cma-tap);
  border: 1px solid var(--cma-primary);
  border-radius: var(--cma-radius);
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff !important;
  background: var(--cma-primary) !important;
  font-weight: 700;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform var(--cma-transition), background var(--cma-transition), box-shadow var(--cma-transition);
}

.btn:hover,
.button:hover,
.primary-button:hover,
.btn-primary:hover,
.button-primary:hover,
.submit-button:hover,
.save-button:hover,
.login-button:hover,
.action-button:hover,
.operation-action:hover,
.mobile-primary-action:hover,
.cma-primary-button:hover {
  background: var(--cma-primary-hover) !important;
}

.btn:active,
.button:active,
.primary-button:active,
.btn-primary:active,
.button-primary:active,
.submit-button:active,
.save-button:active,
.login-button:active,
.action-button:active,
.operation-action:active,
.mobile-primary-action:active,
.cma-primary-button:active { transform: scale(.985); }

.btn-secondary,
.button-secondary,
.secondary-button,
.cancel-button {
  min-height: var(--cma-tap);
  border: 1px solid var(--cma-primary-border) !important;
  border-radius: var(--cma-radius);
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cma-primary) !important;
  background: var(--cma-surface) !important;
  font-weight: 700;
  text-decoration: none !important;
}

.btn-danger,
.danger-button,
.delete-button,
.cancel-mission-button {
  color: #fff !important;
  background: var(--cma-danger) !important;
  border-color: var(--cma-danger) !important;
}

/* Formularios */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  min-height: var(--cma-tap);
  border: 1px solid var(--cma-border);
  border-radius: var(--cma-radius);
  background: var(--cma-surface);
  color: var(--cma-text);
  padding: 11px 13px;
  outline: none;
  transition: border-color var(--cma-transition), box-shadow var(--cma-transition);
}

textarea { min-height: 96px; resize: vertical; }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--cma-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

label { color: var(--cma-text); font-weight: 600; }

/* Componentes comunes */
.card,
.panel,
.info-card,
.form-card,
.summary-card,
.timeline-card,
.operation-card,
.mission-card {
  background: var(--cma-surface);
  border: 1px solid var(--cma-border);
  border-radius: var(--cma-radius-lg);
  box-shadow: var(--cma-shadow);
}

.mission-name,
.mission-code,
.mission-title,
[class*="mission"][class*="title"] {
  color: var(--cma-primary) !important;
}

.status-completed,
.is-completed { color: var(--cma-success); }
.status-pending,
.is-pending { color: var(--cma-warning); }
.status-started,
.is-started { color: var(--cma-primary); }

.progress-bar,
.progress-fill,
[class*="progress"][class*="fill"] {
  background-color: var(--cma-primary);
}

/* Accesibilidad y fluidez */
:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .35);
  outline-offset: 2px;
}

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

@media (max-width: 640px) {
  body { padding-bottom: env(safe-area-inset-bottom); }
  button, .btn, .button, a[role="button"] { min-height: 46px; }
}