/*
 * FaviQa — Design Tokens
 * Fuente: docs/marca/09042026-10-54-11_faviqa_identidad_visual.html
 * Paleta corporativa oficial
 */

:root {
  /* Primary */
  --primary-dark: #1f0f47;
  --primary: #7b4fa2;
  --primary-light: #9b72cf;
  --primary-accent: #c4a4e0;
  --primary-pale: #f2ecf8;
  --primary-ghost: #f8f5fc;

  /* Neutrals */
  --text-primary: #1c1c2e;
  --text-secondary: #4a4a5a;
  --text-muted: #8a8a9a;
  --black-deep: #0f0a1a;
  --white: #ffffff;
  --bg: #fafafa;

  /* Borders */
  --border: #d5c4e8;
  --border-light: rgba(42, 22, 81, 0.1);
  --border-focus: #7b4fa2;

  /* Semantic */
  --success: #2d8f6f;
  --success-bg: #eefbf5;
  --success-border: #a3e0c8;
  --error: #b83a3a;
  --error-bg: #fdf2f2;
  --error-border: #e8a3a3;
  --warning: #8b6914;
  --warning-bg: #fffef0;
  --warning-border: #e8d56e;

  /* Typography */
  --font: "Montserrat", sans-serif;

  /* Logo colors */
  --logo-base: #1f0f47;
  --logo-accent: #c4a4e0;
}

/* ==============================
   RESPONSIVE — Global mobile
   ============================== */

/* Touch targets: min 44px for all interactive elements on mobile */
@media (max-width: 768px) {
  html {
    font-size: 15px;
  }

  .input,
  select.input,
  textarea.input {
    padding: 1rem !important;
    font-size: 1rem !important;
    min-height: 48px;
  }

  button,
  .btn-primary,
  .btn-secondary,
  .submit-btn {
    min-height: 48px;
    font-size: 1rem !important;
  }

  .radio-option,
  .source-option,
  .specialty-option {
    padding: 1rem !important;
    min-height: 48px;
  }

  .file-upload {
    padding: 1rem !important;
    min-height: 48px;
  }
}

@media (max-width: 540px) {
  /* Forms: full width, stacked */
  .field-row {
    grid-template-columns: 1fr !important;
  }

  .buttons {
    flex-direction: column-reverse !important;
    gap: 0.75rem !important;
  }

  .btn-secondary {
    width: 100%;
    text-align: center;
  }

  /* Specialty grid: single column on mobile */
  .specialty-grid {
    grid-template-columns: 1fr !important;
  }

  /* Source grid: single column */
  .source-grid {
    grid-template-columns: 1fr !important;
  }

  /* Horarios: compact layout */
  .horario-row {
    grid-template-columns: 70px 1fr 24px 1fr !important;
    gap: 0.25rem !important;
    font-size: 0.8125rem;
  }

  .horario-input {
    padding: 0.5rem 0.375rem !important;
    font-size: 0.8125rem !important;
    min-height: 40px !important;
  }

  /* Scores grid: keep 2 columns but tighter */
  .scores-grid {
    gap: 0.5rem !important;
  }

  .score-card {
    padding: 0.75rem !important;
  }

  /* Finance grid: single column */
  .finance-grid {
    grid-template-columns: 1fr !important;
  }

  .finance-card {
    border-right: none !important;
  }

  /* Breakeven: stack */
  .breakeven-row {
    gap: 0.5rem !important;
  }

  .breakeven-detail {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  /* Results grid */
  .results-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  /* Dashboard: hide sidebar, full width */
  .sidebar {
    display: none !important;
  }

  .main {
    margin-left: 0 !important;
    padding: 1rem !important;
  }

  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .topbar {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: flex-start !important;
  }

  .topbar-search {
    width: 100% !important;
  }

  .topbar-right {
    width: 100%;
    justify-content: space-between !important;
  }

  /* Appointment cards: stack on very small */
  .appt-card {
    grid-template-columns: 60px 1fr !important;
    gap: 0.75rem !important;
  }

  .appt-status {
    grid-column: 1 / -1;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-light);
  }

  /* Navigation banner: responsive */
  .proto-nav-banner {
    font-size: 0.75rem !important;
    padding: 0.5rem 1rem !important;
  }

  /* Tooltips: wider on mobile */
  .tooltip {
    width: 180px !important;
    font-size: 0.625rem !important;
  }

  /* Proto index cards */
  .proto-link {
    grid-template-columns: 32px 1fr auto !important;
    padding: 0.875rem 1rem !important;
    gap: 0.75rem !important;
  }

  .proto-number {
    font-size: 1rem !important;
  }

  /* Summary grids in confirmation */
  .summary-grid {
    grid-template-columns: 1fr !important;
    gap: 0.375rem !important;
  }

  .summary-label {
    font-weight: 600 !important;
    color: var(--text-muted) !important;
  }

  /* Trial grid in confirmation */
  .trial-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Very small screens */
@media (max-width: 380px) {
  .scores-grid {
    grid-template-columns: 1fr !important;
  }

  .breakeven-detail {
    grid-template-columns: 1fr !important;
    text-align: left !important;
  }

  .horario-row {
    grid-template-columns: 1fr !important;
    gap: 0.375rem !important;
  }

  .horario-day {
    font-weight: 600;
  }

  .horario-separator {
    display: none;
  }
}