/* ============================================================================
   Grandiosa Design Tokens
   Derived from app/templates/base.html Tailwind config + observed usage.
   Use these vars in any HTML artifact built with/for the Grandiosa brand.
   ========================================================================= */

:root {
  /* --------------------------------------------------------------------- *
   * BRAND COLORS
   *
   * Only two real brand colors live in tailwind.config:
   *   medical-dark : #2c5e38  (forest green — buttons, headers, brand ink)
   *   medical-green: #d4e6d8  (pale mint — app background, success accents)
   * Everything else is Tailwind's default gray/blue/red/yellow/green ramp.
   * --------------------------------------------------------------------- */
  --medical-dark:        #2c5e38;  /* primary / ink */
  --medical-dark-hover:  #26502f;  /* implicit via `hover:bg-opacity-90` */
  --medical-green:       #d4e6d8;  /* app canvas bg */
  --medical-green-50:    #f0fdf4;  /* email highlight box bg */
  --medical-green-200:   #bbf7d0;  /* email highlight box border */
  --medical-green-800:   #166534;  /* email highlight box ink */

  /* Neutrals — Tailwind gray scale, used verbatim across templates */
  --white:    #ffffff;
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;  /* email body bg */
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;  /* footer text */
  --gray-600: #4b5563;
  --gray-700: #374151;  /* email body text, labels */
  --gray-800: #1f2937;  /* base body ink */
  --gray-900: #111827;

  /* Status / semantic — from dashboard status panels & flash messages */
  --status-pending-bg:      #ffedd5;  /* orange-100 — "Pendientes de Revisión" */
  --status-pending-border:  #fdba74;  /* orange-300 */
  --status-pending-ink:     #9a3412;  /* orange-800 */

  --status-review-bg:       #f3f4f6;  /* gray-100 — "Revisadas" */
  --status-review-border:   #d1d5db;
  --status-review-ink:      #374151;

  --status-waiting-bg:      #dbeafe;  /* blue-100 — "Esperando Pago" */
  --status-waiting-border:  #93c5fd;  /* blue-300 */
  --status-waiting-ink:     #1e40af;  /* blue-800 */

  --status-uploaded-bg:     #fef3c7;  /* yellow-100 — "Pago Subido" */
  --status-uploaded-border: #fcd34d;
  --status-uploaded-ink:    #854d0e;

  --status-ready-bg:        #dcfce7;  /* green-100 — "Listos para Despacho" */
  --status-ready-border:    #86efac;
  --status-ready-ink:       #166534;

  --flash-success-bg:       #dcfce7;
  --flash-success-ink:      #15803d;
  --flash-error-bg:         #fee2e2;
  --flash-error-ink:        #b91c1c;

  --danger:   #dc2626;  /* red-600 — "Cerrar Sesión", "Rechazar", "Anular" */
  --info:     #2563eb;  /* blue-600 — "Solicitar Pago", action links */
  --success:  #16a34a;  /* green-600 — "Validar Pago", "Finalizar Venta" */
  --warning:  #f59e0b;  /* amber-500 — "Editar Cotización" */

  /* --------------------------------------------------------------------- *
   * TYPOGRAPHY
   *
   * The product has no custom webfonts. Tailwind's `font-sans` stack is used
   * everywhere (system UI), plus a Segoe UI stack in email templates.
   * --------------------------------------------------------------------- */
  --font-sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                "Liberation Mono", "Courier New", monospace;
  --font-email: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  /* Size ramp (Tailwind's scale, only the ones actually used) */
  --text-10:  0.625rem;   /* 10px  — metadata, micro-labels */
  --text-xs:  0.75rem;    /* 12px  — dense tables, helper copy */
  --text-sm:  0.875rem;   /* 14px  — body default in forms/tables */
  --text-base:1rem;       /* 16px  — email body */
  --text-lg:  1.125rem;   /* 18px  — section leads */
  --text-xl:  1.25rem;    /* 20px  — H2 */
  --text-2xl: 1.5rem;     /* 24px  — page H1 (admin) */
  --text-3xl: 1.875rem;   /* 30px  — page H1 (patient-facing) */

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;  /* email body */

  /* --------------------------------------------------------------------- *
   * SPACING / RADII / ELEVATION
   *
   * Tailwind defaults. Grandiosa leans on rounded-md, rounded-lg, and a
   * fairly soft shadow-lg across cards.
   * --------------------------------------------------------------------- */
  --radius-sm:   0.125rem;  /* rounded-sm */
  --radius:      0.25rem;   /* rounded */
  --radius-md:   0.375rem;  /* rounded-md — buttons, inputs */
  --radius-lg:   0.5rem;    /* rounded-lg — cards, panels */
  --radius-xl:   0.75rem;   /* rounded-xl — email container */
  --radius-full: 9999px;    /* pills, badges, avatars */

  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow:    0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);

  --border-default: 1px solid var(--gray-200);
  --border-strong:  1px solid var(--gray-300);
}

/* ============================================================================
   SEMANTIC BASE (scope with `.grandiosa` or use globally)
   ========================================================================= */

.grandiosa, .grandiosa * { box-sizing: border-box; }

.grandiosa {
  font-family: var(--font-sans);
  color: var(--gray-800);
  background: var(--medical-green);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — match templates: text-medical-dark, bold */
.grandiosa h1, .grandiosa .h1 {
  font-size: var(--text-3xl); font-weight: var(--weight-bold);
  color: var(--medical-dark); line-height: var(--leading-tight);
}
.grandiosa h2, .grandiosa .h2 {
  font-size: var(--text-xl); font-weight: var(--weight-semibold);
  color: var(--medical-dark); line-height: var(--leading-snug);
}
.grandiosa h3, .grandiosa .h3 {
  font-size: var(--text-lg); font-weight: var(--weight-semibold);
  color: var(--gray-900);
}
.grandiosa h4, .grandiosa .h4 {
  font-size: var(--text-base); font-weight: var(--weight-medium);
  color: var(--gray-900);
}

.grandiosa p          { font-size: var(--text-sm); line-height: var(--leading-normal); }
.grandiosa .lead      { font-size: var(--text-base); color: var(--gray-600); }
.grandiosa .meta      { font-size: var(--text-xs); color: var(--gray-500); }
.grandiosa .micro     { font-size: var(--text-10); color: var(--gray-500); letter-spacing: 0.02em; }
.grandiosa .mono      { font-family: var(--font-mono); }
.grandiosa label      { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--gray-700); }

/* Card — the atomic Grandiosa container */
.grandiosa .card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem;
}

/* Buttons */
.grandiosa .btn-primary {
  background: var(--medical-dark); color: var(--white);
  font-weight: var(--weight-bold);
  padding: 0.5rem 1rem; border-radius: var(--radius-md);
  transition: opacity .2s; border: 0;
}
.grandiosa .btn-primary:hover { opacity: .9; }

.grandiosa .btn-success {
  background: var(--success); color: var(--white);
  font-weight: var(--weight-bold);
  padding: 0.25rem 0.75rem; border-radius: var(--radius-md);
}
.grandiosa .btn-danger  { background: var(--danger);  color: var(--white); }
.grandiosa .btn-info    { background: var(--info);    color: var(--white); }
.grandiosa .btn-warning { background: var(--warning); color: var(--white); }

/* Pills (status badges) */
.grandiosa .pill {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .125rem .625rem; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
}
.grandiosa .pill--blue  { background: var(--status-waiting-bg);  color: var(--status-waiting-ink); }
.grandiosa .pill--green { background: var(--status-ready-bg);    color: var(--status-ready-ink); }
.grandiosa .pill--yellow{ background: var(--status-uploaded-bg); color: var(--status-uploaded-ink); }
.grandiosa .pill--gray  { background: var(--gray-100);           color: var(--gray-700); }