/* ============================================================
   cchomedecor — theme.css (mockup stylesheet)
   Materializes design tokens from design_system.md
   Shared across all mockups. Page-specific component CSS lives
   inline in each mockup's <style> block for now; patterns that
   solidify across 2+ mockups get promoted here.
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS (CSS custom properties)
   ============================================================ */

:root {
  /* ---------- Core colors ---------- */

  /* Reds — brand */
  --cc-color-red-50:  #FEF2F2;
  --cc-color-red-100: #FEE2E2;
  --cc-color-red-200: #FECACA;
  --cc-color-red-400: #F43F4C;
  --cc-color-red-500: #EA1722;  /* PRIMARY BRAND */
  --cc-color-red-600: #C9111B;
  --cc-color-red-700: #A61018;  /* hover / pressed */
  --cc-color-red-800: #7A0C11;
  --cc-color-red-900: #4E0709;

  /* Grays — monochrome */
  --cc-color-gray-0:    #FFFFFF;
  --cc-color-gray-50:   #F8F8F8;
  --cc-color-gray-100:  #F3F3F3;
  --cc-color-gray-200:  #E4E4E4;
  --cc-color-gray-300:  #DFDFDF;
  --cc-color-gray-400:  #BDBDBD;
  --cc-color-gray-500:  #8A8A8A;
  --cc-color-gray-600:  #696969;
  --cc-color-gray-700:  #555555;
  --cc-color-gray-800:  #333333;
  --cc-color-gray-900:  #1A1A1A;
  --cc-color-gray-1000: #000000;

  /* Navy — secondary accent (wayfinding / pro / info) */
  --cc-color-navy-100: #E0E7EC;
  --cc-color-navy-300: #6B829A;
  --cc-color-navy-500: #27455C;
  --cc-color-navy-700: #132638;

  /* Status */
  --cc-color-success-500: #1B8E47;
  --cc-color-success-100: #DCF5E4;
  --cc-color-warning-500: #D97706;
  --cc-color-warning-100: #FEF3C7;
  --cc-color-error-500:   #DC2626;
  --cc-color-error-100:   #FEE2E2;
  --cc-color-info-500:    #2563EB;
  --cc-color-info-100:    #DBEAFE;

  /* ---------- Semantic colors ---------- */

  --cc-surface-page:      var(--cc-color-gray-0);
  --cc-surface-section:   var(--cc-color-gray-50);
  --cc-surface-raised:    var(--cc-color-gray-0);
  --cc-surface-sunken:    var(--cc-color-gray-100);
  --cc-surface-inverse:   var(--cc-color-gray-1000);
  --cc-surface-overlay:   rgba(0, 0, 0, 0.6);

  --cc-text-primary:       var(--cc-color-gray-1000);
  --cc-text-secondary:     var(--cc-color-gray-700);
  --cc-text-tertiary:      var(--cc-color-gray-500);
  --cc-text-disabled:      var(--cc-color-gray-400);
  --cc-text-on-action:     var(--cc-color-gray-0);
  --cc-text-on-inverse:    var(--cc-color-gray-0);
  --cc-text-link:          var(--cc-color-red-500);
  --cc-text-link-hover:    var(--cc-color-red-700);

  --cc-action-primary:          var(--cc-color-red-500);
  --cc-action-primary-hover:    var(--cc-color-red-700);
  --cc-action-primary-pressed:  var(--cc-color-red-800);
  --cc-action-primary-disabled: var(--cc-color-gray-300);
  --cc-action-secondary:        var(--cc-color-gray-1000);
  --cc-action-secondary-hover:  var(--cc-color-gray-800);
  --cc-action-tertiary-border:  var(--cc-color-gray-1000);
  --cc-action-tertiary-hover:   var(--cc-color-gray-50);

  --cc-border-subtle:  var(--cc-color-gray-200);
  --cc-border-default: var(--cc-color-gray-300);
  --cc-border-strong:  var(--cc-color-gray-1000);
  --cc-border-focus:   var(--cc-color-red-500);

  /* ---------- Typography ---------- */

  --cc-font-family: 'Roboto', Arial, sans-serif;

  --cc-text-xs:   0.6875rem;  /* 11 */
  --cc-text-sm:   0.75rem;    /* 12 */
  --cc-text-body: 0.875rem;   /* 14 */
  --cc-text-md:   1rem;       /* 16 */
  --cc-text-lg:   1.25rem;    /* 20 */
  --cc-text-xl:   1.5625rem;  /* 25 */
  --cc-text-2xl:  1.9375rem;  /* 31 */
  --cc-text-3xl:  2.4375rem;  /* 39 */
  --cc-text-4xl:  3.0625rem;  /* 49 */
  --cc-text-5xl:  3.8125rem;  /* 61 */

  --cc-lh-tight:   1.15;
  --cc-lh-snug:    1.35;
  --cc-lh-base:    1.5;
  --cc-lh-relaxed: 1.75;

  --cc-tracking-tight: -0.01em;
  --cc-tracking-base:  0;
  --cc-tracking-wide:  0.125em;  /* signature 2px @ 16px */
  --cc-tracking-loose: 0.2em;

  --cc-font-regular: 400;
  --cc-font-medium:  500;
  --cc-font-bold:    700;

  /* ---------- Spacing (4-base) ---------- */

  --cc-space-0:  0;
  --cc-space-1:  4px;
  --cc-space-2:  8px;
  --cc-space-3:  12px;
  --cc-space-4:  16px;
  --cc-space-5:  20px;
  --cc-space-6:  24px;
  --cc-space-7:  32px;
  --cc-space-8:  48px;
  --cc-space-9:  64px;
  --cc-space-10: 96px;
  --cc-space-11: 128px;

  /* ---------- Radius (sharp default) ---------- */

  --cc-radius-none: 0;
  --cc-radius-xs:   2px;
  --cc-radius-sm:   4px;
  --cc-radius-md:   8px;
  --cc-radius-lg:   16px;
  --cc-radius-full: 9999px;

  /* ---------- Shadows ---------- */

  --cc-shadow-none:    none;
  --cc-shadow-sm:      0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --cc-shadow-md:      0 4px 8px -2px rgba(0, 0, 0, 0.10);
  --cc-shadow-lg:      0 12px 24px -8px rgba(0, 0, 0, 0.12);
  --cc-shadow-popover: 0 8px 24px -4px rgba(0, 0, 0, 0.15);
  --cc-shadow-modal:   0 20px 60px -10px rgba(0, 0, 0, 0.25);

  /* ---------- Layout ---------- */

  --cc-container-max: 1320px;
  --cc-container-px-mobile:  16px;
  --cc-container-px-tablet:  24px;
  --cc-container-px-desktop: 32px;

  /* ---------- Motion ---------- */

  --cc-ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --cc-ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --cc-duration-fast: 150ms;
  --cc-duration-base: 250ms;
  --cc-duration-slow: 400ms;

  --cc-t-hover: color var(--cc-duration-fast) var(--cc-ease-out),
                background-color var(--cc-duration-fast) var(--cc-ease-out),
                border-color var(--cc-duration-fast) var(--cc-ease-out),
                transform var(--cc-duration-base) var(--cc-ease-out);

  /* ---------- z-index scale ---------- */

  --cc-z-dropdown: 100;
  --cc-z-sticky:   200;
  --cc-z-fixed:    300;
  --cc-z-popover:  400;
  --cc-z-modal:    500;
  --cc-z-toast:    600;
}


/* ============================================================
   2. MODERN RESET
   ============================================================ */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--cc-font-family);
  font-size: var(--cc-text-body);
  line-height: var(--cc-lh-base);
  color: var(--cc-text-primary);
  background: var(--cc-surface-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video, svg { max-width: 100%; display: block; }

input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  color: inherit;
}

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


/* ============================================================
   3. BASE TYPOGRAPHY
   ============================================================ */

.cc-h1 { font: var(--cc-font-bold) var(--cc-text-3xl)/var(--cc-lh-tight) var(--cc-font-family); }
.cc-h2 { font: var(--cc-font-bold) var(--cc-text-2xl)/var(--cc-lh-tight) var(--cc-font-family); }
.cc-h3 { font: var(--cc-font-bold) var(--cc-text-xl)/var(--cc-lh-snug)  var(--cc-font-family); }
.cc-h4 { font: var(--cc-font-bold) var(--cc-text-lg)/var(--cc-lh-snug)  var(--cc-font-family); }

.cc-body    { font: var(--cc-font-regular) var(--cc-text-body)/var(--cc-lh-base) var(--cc-font-family); }
.cc-body-md { font: var(--cc-font-regular) var(--cc-text-md)/var(--cc-lh-base) var(--cc-font-family); }
.cc-body-lg { font: var(--cc-font-regular) var(--cc-text-lg)/var(--cc-lh-base) var(--cc-font-family); }

.cc-meta    { font: var(--cc-font-regular) var(--cc-text-sm)/var(--cc-lh-snug) var(--cc-font-family); color: var(--cc-text-tertiary); }
.cc-micro   { font: var(--cc-font-regular) var(--cc-text-xs)/var(--cc-lh-snug) var(--cc-font-family); color: var(--cc-text-tertiary); }

/* Signature label: uppercase bold tracking-wide */
.cc-label {
  font-family: var(--cc-font-family);
  font-weight: var(--cc-font-bold);
  font-size: var(--cc-text-body);
  line-height: var(--cc-lh-snug);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
}

.cc-label--xs { font-size: var(--cc-text-xs); }
.cc-label--sm { font-size: var(--cc-text-sm); }
.cc-label--md { font-size: var(--cc-text-md); }
.cc-label--lg { font-size: var(--cc-text-lg); }


/* ============================================================
   4. UTILITIES
   ============================================================ */

.u-uppercase     { text-transform: uppercase; }
.u-tracking-wide { letter-spacing: var(--cc-tracking-wide); }
.u-bold          { font-weight: var(--cc-font-bold); }
.u-medium        { font-weight: var(--cc-font-medium); }
.u-regular       { font-weight: var(--cc-font-regular); }

.u-text-primary   { color: var(--cc-text-primary); }
.u-text-secondary { color: var(--cc-text-secondary); }
.u-text-tertiary  { color: var(--cc-text-tertiary); }
.u-text-link      { color: var(--cc-text-link); }
.u-text-on-action { color: var(--cc-text-on-action); }
.u-text-center    { text-align: center; }
.u-text-right     { text-align: right; }

.u-bg-page     { background: var(--cc-surface-page); }
.u-bg-section  { background: var(--cc-surface-section); }
.u-bg-sunken   { background: var(--cc-surface-sunken); }
.u-bg-inverse  { background: var(--cc-surface-inverse); }
.u-bg-action   { background: var(--cc-action-primary); }

.u-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Hide at desktop (mobile-only) */
@media (min-width: 992px) {
  .u-hide-l { display: none !important; }
}
/* Hide at mobile (desktop-only) */
@media (max-width: 991.98px) {
  .u-show-l { display: none !important; }
}

/* Stacking helpers */
.u-stack-1 > * + * { margin-top: var(--cc-space-1); }
.u-stack-2 > * + * { margin-top: var(--cc-space-2); }
.u-stack-3 > * + * { margin-top: var(--cc-space-3); }
.u-stack-4 > * + * { margin-top: var(--cc-space-4); }
.u-stack-5 > * + * { margin-top: var(--cc-space-5); }
.u-stack-6 > * + * { margin-top: var(--cc-space-6); }
.u-stack-7 > * + * { margin-top: var(--cc-space-7); }
.u-stack-8 > * + * { margin-top: var(--cc-space-8); }


/* ============================================================
   5. CONTAINER
   ============================================================ */

.cc-container {
  width: 100%;
  max-width: var(--cc-container-max);
  margin-inline: auto;
  padding-inline: var(--cc-container-px-mobile);
}
@media (min-width: 768px)  { .cc-container { padding-inline: var(--cc-container-px-tablet); } }
@media (min-width: 1200px) { .cc-container { padding-inline: var(--cc-container-px-desktop); } }

.cc-container--fluid {
  max-width: none;
}

.cc-section {
  padding-block: var(--cc-space-8);
}
@media (min-width: 992px) {
  .cc-section { padding-block: var(--cc-space-10); }
}


/* ============================================================
   6. BUTTON
   ============================================================ */

.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cc-space-2);
  min-height: 48px;
  padding: 12px 24px;
  font-family: var(--cc-font-family);
  font-size: var(--cc-text-body);
  font-weight: var(--cc-font-bold);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  border: 1px solid transparent;
  border-radius: var(--cc-radius-none);
  cursor: pointer;
  user-select: none;
  transition: var(--cc-t-hover);
  white-space: nowrap;
}

.cc-btn:focus-visible {
  outline: 3px solid rgba(234, 23, 34, 0.35);
  outline-offset: 2px;
}

.cc-btn[disabled],
.cc-btn.is-disabled {
  cursor: not-allowed;
  background: var(--cc-action-primary-disabled) !important;
  border-color: var(--cc-action-primary-disabled) !important;
  color: var(--cc-text-on-action) !important;
  opacity: 0.7;
}

/* Primary (red solid) */
.cc-btn--primary {
  background: var(--cc-action-primary);
  border-color: var(--cc-action-primary);
  color: var(--cc-text-on-action);
}
.cc-btn--primary:hover {
  background: var(--cc-action-primary-hover);
  border-color: var(--cc-action-primary-hover);
}
.cc-btn--primary:active {
  background: var(--cc-action-primary-pressed);
  border-color: var(--cc-action-primary-pressed);
}

/* Secondary (black solid) */
.cc-btn--secondary {
  background: var(--cc-action-secondary);
  border-color: var(--cc-action-secondary);
  color: var(--cc-text-on-inverse);
}
.cc-btn--secondary:hover {
  background: var(--cc-action-secondary-hover);
  border-color: var(--cc-action-secondary-hover);
}

/* Tertiary (outlined) */
.cc-btn--tertiary {
  background: transparent;
  border-color: var(--cc-action-tertiary-border);
  color: var(--cc-text-primary);
}
.cc-btn--tertiary:hover {
  background: var(--cc-action-tertiary-hover);
}

/* Ghost (link-like) */
.cc-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--cc-text-link);
  padding-inline: 0;
  min-height: auto;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-transform: none;
  letter-spacing: 0;
}
.cc-btn--ghost:hover { color: var(--cc-text-link-hover); }

/* Sizes */
.cc-btn--sm { min-height: 36px; padding: 8px 16px; font-size: var(--cc-text-sm); }
.cc-btn--lg { min-height: 56px; padding: 16px 32px; font-size: var(--cc-text-md); }

/* Full width */
.cc-btn--block { display: flex; width: 100%; }

/* Icon-only */
.cc-btn--icon {
  width: 48px;
  min-width: 48px;
  padding: 0;
}
.cc-btn--icon.cc-btn--sm { width: 36px; min-width: 36px; }
.cc-btn--icon.cc-btn--lg { width: 56px; min-width: 56px; }


/* ============================================================
   7. INPUT & FORM CONTROLS
   ============================================================ */

.cc-input {
  appearance: none;
  display: block;
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  font-family: var(--cc-font-family);
  font-size: var(--cc-text-md);
  line-height: 1.5;
  color: var(--cc-text-primary);
  background: var(--cc-surface-page);
  border: 1px solid var(--cc-border-default);
  border-radius: var(--cc-radius-none);
  transition: border-color var(--cc-duration-fast) var(--cc-ease-out),
              box-shadow var(--cc-duration-fast) var(--cc-ease-out);
}
.cc-input::placeholder { color: var(--cc-text-tertiary); }
.cc-input:focus-visible {
  outline: none;
  border-color: var(--cc-border-focus);
  box-shadow: 0 0 0 3px rgba(234, 23, 34, 0.20);
}
.cc-input[aria-invalid="true"] {
  border-color: var(--cc-status-error-fg, var(--cc-color-error-500));
}

.cc-input--search {
  background: var(--cc-surface-sunken);
  border: none;
  padding-right: 48px; /* room for submit icon */
}

.cc-field { display: block; }
.cc-field__label {
  display: block;
  font-family: var(--cc-font-family);
  font-weight: var(--cc-font-bold);
  font-size: var(--cc-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
  margin-bottom: var(--cc-space-1);
  color: var(--cc-text-primary);
}
.cc-field__hint {
  display: block;
  margin-top: var(--cc-space-1);
  font-size: var(--cc-text-sm);
  color: var(--cc-text-tertiary);
}

/* Checkbox — minimal, sharp */
.cc-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--cc-space-2);
  cursor: pointer;
  user-select: none;
}
.cc-checkbox input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--cc-border-strong);
  border-radius: var(--cc-radius-none);
  background: var(--cc-surface-page);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}
.cc-checkbox input[type="checkbox"]::before {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--cc-action-primary);
  transform: scale(0);
  transition: transform var(--cc-duration-fast) var(--cc-ease-out);
}
.cc-checkbox input[type="checkbox"]:checked::before { transform: scale(1); }
.cc-checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--cc-border-focus);
  outline-offset: 2px;
}


/* ============================================================
   8. LINK
   ============================================================ */

.cc-link {
  color: var(--cc-text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: var(--cc-t-hover);
}
.cc-link:hover { color: var(--cc-text-link-hover); }
.cc-link:focus-visible {
  outline: 2px solid var(--cc-border-focus);
  outline-offset: 3px;
}

/* Muted link (utility nav, footer) */
.cc-link--muted {
  color: var(--cc-text-primary);
  text-decoration: none;
}
.cc-link--muted:hover {
  color: var(--cc-text-link);
}


/* ============================================================
   9. BADGE / CHIP
   ============================================================ */

.cc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: var(--cc-text-xs);
  font-weight: var(--cc-font-bold);
  line-height: 1;
  color: var(--cc-text-on-action);
  background: var(--cc-action-primary);
  border-radius: var(--cc-radius-full);
}
.cc-badge--square {
  border-radius: var(--cc-radius-none);
}
.cc-badge--status-success { background: var(--cc-color-success-500); }
.cc-badge--status-warning { background: var(--cc-color-warning-500); }
.cc-badge--status-error   { background: var(--cc-color-error-500); }

.cc-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  font-size: var(--cc-text-sm);
  font-weight: var(--cc-font-medium);
  line-height: 1.3;
  color: var(--cc-text-secondary);
  background: var(--cc-surface-sunken);
  border-radius: var(--cc-radius-none);
}


/* ============================================================
   10. DIVIDERS
   ============================================================ */

.cc-divider {
  height: 1px;
  background: var(--cc-border-subtle);
  border: 0;
  margin: 0;
}
.cc-divider--strong { background: var(--cc-border-strong); }
.cc-divider--vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
}


/* ============================================================
   11. ALERTS — Override Bootstrap .alert pra match HomeCenter
   ============================================================
   Padrão visual:
   - Borda esquerda colorida (5px) + box-shadow neo-brutalista
   - Ícone Bootstrap Icons via ::before (font-family fixa)
   - Bold body + cores dos tokens cc-color-*-500
   - Funciona transparente: os templates continuam usando
     <div class="alert alert-success">...</div>.
   ============================================================ */

.alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--cc-space-3);
  padding: var(--cc-space-4) var(--cc-space-5);
  margin-bottom: var(--cc-space-4);
  background: var(--cc-surface-page, #fff);
  border: 1.5px solid var(--cc-border-default);
  border-left-width: 5px;
  border-radius: 0;
  font-family: var(--cc-font-family, inherit);
  font-size: var(--cc-text-sm, 0.875rem);
  font-weight: 500;
  color: var(--cc-text-primary);
  line-height: 1.5;
  box-shadow: 4px 4px 0 0 var(--cc-color-gray-1000);
}

.alert::before {
  font-family: "bootstrap-icons" !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  flex-shrink: 0;
  font-size: 22px;
  margin-top: 1px;
}

/* Neutraliza a cor do texto que o bootstrap define em variantes */
.alert-success,
.alert-danger,
.alert-warning,
.alert-info {
  color: var(--cc-text-primary);
}

/* SUCCESS — verde */
.alert-success {
  background: rgba(27, 142, 71, 0.06);
  border-color: var(--cc-color-success-500);
  border-left-color: var(--cc-color-success-500);
}
.alert-success::before {
  content: "\f26b"; /* bi-check-circle-fill */
  color: var(--cc-color-success-500);
}

/* DANGER — vermelho */
.alert-danger {
  background: rgba(220, 38, 38, 0.06);
  border-color: var(--cc-color-error-500);
  border-left-color: var(--cc-color-error-500);
}
.alert-danger::before {
  content: "\f622"; /* bi-x-circle-fill */
  color: var(--cc-color-error-500);
}

/* WARNING — laranja */
.alert-warning {
  background: rgba(217, 119, 6, 0.06);
  border-color: var(--cc-color-warning-500);
  border-left-color: var(--cc-color-warning-500);
}
.alert-warning::before {
  content: "\f33a"; /* bi-exclamation-triangle-fill */
  color: var(--cc-color-warning-500);
}

/* INFO — azul */
.alert-info {
  background: rgba(37, 99, 235, 0.06);
  border-color: var(--cc-color-info-500);
  border-left-color: var(--cc-color-info-500);
}
.alert-info::before {
  content: "\f431"; /* bi-info-circle-fill */
  color: var(--cc-color-info-500);
}

/* Botão de fechar (alert-dismissible) — quando OC core injeta o "x" */
.alert .close,
.alert button.close {
  position: absolute;
  top: var(--cc-space-3);
  right: var(--cc-space-3);
  padding: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--cc-text-secondary);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--cc-duration-fast) var(--cc-ease-out);
}
.alert .close:hover { opacity: 1; }

/* Quando há close button, dá padding extra à direita pra não sobrepor texto */
.alert.alert-dismissible {
  padding-right: calc(var(--cc-space-5) + 22px);
}

/* Links dentro de alerts — herdam cor do texto + sublinhado */
.alert a {
  color: inherit;
  text-decoration: underline;
  font-weight: 700;
}
.alert a:hover { text-decoration: none; }

/* Quando o conteúdo tem múltiplos parágrafos, removemos margin do último */
.alert > *:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .alert {
    padding: var(--cc-space-3) var(--cc-space-4);
    box-shadow: 3px 3px 0 0 var(--cc-color-gray-1000);
  }
  .alert::before { font-size: 18px; }
}