/* style.css - Backoffice Atlas Claro 2026 (Full Canonical Tokens & Typography) */

:root {
  /* Variables Tipográficas Oficiales Claro Atlas */
  --font-amx: "AMX", "Roboto", Arial, sans-serif;
  --font-roboto: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-primary: var(--font-amx);
  --font-secondary: var(--font-roboto);

  /* Paleta de Colores Oficial Claro Atlas 2026 */
  --red-100: #fcf3f3;
  --red-200: #ffe3e3;
  --red-300: #ffc5c1;
  --red-400: #fc867f;
  --red-500: #f65041;
  --red-600: #da291c;
  --red-700: #c7251a;
  --red-800: #b52217;
  --red-900: #83170f;
  --blue-100: #c7f9fc;
  --blue-200: #b2f3f6;
  --blue-300: #8cdde1;
  --blue-400: #7cccd0;
  --blue-500: #2fbcc4;
  --blue-600: #0097a9;
  --blue-700: #0093a3;
  --blue-800: #00818f;
  --blue-900: #006e7a;
  --blue-1000: #005c66;
  --gray-100: #f4f4f4;
  --gray-200: #dbdbdb;
  --gray-300: #b9b9b9;
  --gray-400: #989898;
  --gray-500: #6c6c6c;
  --gray-600: #525252;
  --gray-700: #3c3c3c;
  --gray-800: #2d2d2d;
  --gray-900: #222222;
  --yellow-100: #fffce0;
  --yellow-200: #fff9ac;
  --yellow-300: #fff072;
  --yellow-400: #fee458;
  --yellow-500: #f4d327;
  --yellow-600: #ffc722;
  --yellow-700: #ffad17;
  --yellow-800: #fa9c2d;
  --yellow-900: #ff8300;
  --yellow-1000: #b84d01;
  --green-100: #f3fffc;
  --green-200: #ddf9ed;
  --green-300: #b2e5d3;
  --green-400: #8ae2c3;
  --green-500: #45cea4;
  --green-600: #04b58e;
  --green-700: #06a17b;
  --green-800: #008c67;
  --green-900: #006b4f;
  --bluegray-100: #e0e7f6;
  --bluegray-200: #c8d1e5;
  --bluegray-500: #9ca1bf;
  --bluegray-600: #767b9e;
}

body {
  font-family: var(--font-roboto);
  background-color: var(--gray-100);
  color: var(--gray-800);
  -webkit-font-smoothing: antialiased;
}

.font-amx {
  font-family: var(--font-amx) !important;
}

.font-roboto {
  font-family: var(--font-roboto) !important;
}

/* Clases Oficiales de Tipografía Atlas (Jerarquía) */
.kicker {
  font-family: var(--font-roboto);
  font-size: 11px;
  font-weight: 700;
  color: var(--red-600);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.text-h1 { font-family: var(--font-amx); font-size: 40px; line-height: 44px; font-weight: 700; color: var(--gray-800); }
.text-h2 { font-family: var(--font-amx); font-size: 36px; line-height: 40px; font-weight: 700; color: var(--gray-800); }
.text-h3 { font-family: var(--font-amx); font-size: 32px; line-height: 36px; font-weight: 700; color: var(--gray-800); }
.text-h4 { font-family: var(--font-amx); font-size: 28px; line-height: 32px; font-weight: 700; color: var(--gray-800); }
.text-h5 { font-family: var(--font-amx); font-size: 24px; line-height: 28px; font-weight: 700; color: var(--gray-800); }
.text-h6 { font-family: var(--font-roboto); font-size: 20px; line-height: 24px; font-weight: 700; color: var(--gray-800); }
.text-subtitle { font-family: var(--font-roboto); font-size: 18px; line-height: 22px; color: var(--gray-600); }
.text-body { font-family: var(--font-roboto); font-size: 16px; line-height: 20px; color: var(--gray-800); }
.text-link { font-family: var(--font-roboto); font-size: 16px; line-height: 16px; font-weight: 500; color: var(--blue-600); text-decoration: underline; }

/* Utilidades de Color de Texto Atlas */
.text-atlas-dark { color: var(--gray-800) !important; }
.text-atlas-secondary { color: var(--gray-600) !important; }
.text-atlas-muted { color: var(--gray-500) !important; }
.text-atlas-red { color: var(--red-600) !important; }
.text-atlas-teal { color: var(--blue-600) !important; }
.text-atlas-green { color: var(--green-600) !important; }
.text-atlas-white { color: #FFFFFF !important; }

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

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scrollbar Corporativo Claro Atlas */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--gray-100);
}

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

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

/* Sincronización de color en hover para iconos dentro de botones Atlas */
button i,
button [class^="ico-"],
button [class*=" ico-"],
a i,
a [class^="ico-"],
a [class*=" ico-"],
.claro-btn-spec i,
.claro-btn-spec [class^="ico-"],
.claro-btn-spec [class*=" ico-"] {
  color: inherit;
  transition: color 0.2s ease, transform 0.2s ease;
}

.claro-btn-t-gray-normal {
  background: transparent;
  color: var(--gray-700) !important;
  border: 2px solid var(--gray-700);
}

.claro-btn-t-gray-normal i,
.claro-btn-t-gray-normal [class^="ico-"],
.claro-btn-t-gray-normal [class*=" ico-"] {
  color: var(--gray-700) !important;
  transition: color 0.2s ease;
}

.claro-btn-t-gray-normal:hover {
  background: var(--gray-500);
  color: #FFFFFF !important;
  border-color: var(--gray-500);
  box-shadow: 0 4px 12px rgba(60, 60, 60, 0.25);
  transform: translateY(-1px);
}

.claro-btn-t-gray-normal:hover i,
.claro-btn-t-gray-normal:hover [class^="ico-"],
.claro-btn-t-gray-normal:hover [class*=" ico-"] {
  color: #FFFFFF !important;
}

.claro-btn-p-normal i,
.claro-btn-p-normal [class^="ico-"],
.claro-btn-p-normal [class*=" ico-"] {
  color: #FFFFFF !important;
  transition: color 0.2s ease;
}