/* ===========================
   BASE
   =========================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

   
/* ===========================
   COLORS
   =========================== */
.bg-primary { background-color: #1fad9d; }
.bg-danger  { background-color: #ce796b; }
.bg-warning { background-color: #ff9b71; }
.bg-white   { background-color: #ffffff; }
.bg-black   { background-color: #1a1a1a; }

.text-primary { color: #1fad9d; }
.text-danger  { color: #ce796b; }
.text-warning { color: #ff9b71; }
.text-white   { color: #ffffff; }
.text-black   { color: #1a1a1a; }

/* ===========================
   SPACING (Padding y Margin)
   =========================== */
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-8 { padding: 2rem; }

.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-4 { margin: 1rem; }
.m-8 { margin: 2rem; }

.mt-2 { margin-top: 0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.ml-2 { margin-left: 0.5rem; }
.mr-2 { margin-right: 0.5rem; }

.pt-2 { padding-top: 0.5rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pl-2 { padding-left: 0.5rem; }
.pr-2 { padding-right: 0.5rem; }

/* ===========================
   TYPOGRAPHY
   =========================== */
.text-sm   { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg   { font-size: 1.25rem; }
.text-xl   { font-size: 1.5rem; }
.text-2xl  { font-size: 2rem; }

.font-light   { font-weight: 300; }
.font-normal  { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-bold    { font-weight: 700; }

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

.uppercase    { text-transform: uppercase; }
.capitalize   { text-transform: capitalize; }

/* ===========================
   BORDER RADIUS & SHADOWS
   =========================== */
.rounded      { border-radius: 0.25rem; }
.rounded-md   { border-radius: 0.5rem; }
.rounded-lg   { border-radius: 1rem; }
.shadow-sm    { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.shadow-md    { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.shadow-lg    { box-shadow: 0 10px 15px rgba(0,0,0,0.2); }

/* ===========================
   DISPLAY & POSITIONING
   =========================== */
.block        { display: block; }
.inline       { display: inline; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }

.flex-col       { flex-direction: column; }
.flex-row       { flex-direction: row; }

.gap-2          { gap: 0.5rem; }
.gap-4          { gap: 1rem; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; top: 0; }

.top-0    { top: 0; }
.bottom-0 { bottom: 0; }
.left-0   { left: 0; }
.right-0  { right: 0; }

/* ===========================
   WIDTH / HEIGHT
   =========================== */
.w-full   { width: 100%; }
.h-full   { height: 100%; }
.w-screen { width: 100vw; }
.h-screen { height: 100vh; }
.max-w-sm { max-width: 20rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 36rem; }

/* ===========================
   Z-INDEX
   =========================== */
.z-0  { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }

/* ===========================
   CURSOR / USER-SELECT
   =========================== */
.cursor-pointer { cursor: pointer; }
.select-none    { user-select: none; }

/* ===========================
   CONTAINER UTILITIES
   =========================== */
.container {
  width: 100%;
  height: 100vh;
  padding: 2rem;
  background: white;
}

.container-sm  { max-width: 640px; }
.container-md  { max-width: 768px; }
.container-lg  { max-width: 1024px; }
.container-xl  { max-width: 1280px; }
.container-2xl { max-width: 1536px; }

/* ===========================
   RESPONSIVE UTILITIES
   =========================== */
@media (min-width: 640px) {
  .sm\:text-center { text-align: center; }
  .sm\:flex { display: flex; }
  .sm\:block { display: block; }
  .sm\:p-4 { padding: 1rem; }
  .sm\:m-4 { margin: 1rem; }
}

@media (min-width: 768px) {
  .md\:text-center { text-align: center; }
  .md\:flex { display: flex; }
  .md\:block { display: block; }
  .md\:p-4 { padding: 1rem; }
  .md\:m-4 { margin: 1rem; }
}

@media (min-width: 1024px) {
  .lg\:text-center { text-align: center; }
  .lg\:flex { display: flex; }
  .lg\:block { display: block; }
  .lg\:p-4 { padding: 1rem; }
  .lg\:m-4 { margin: 1rem; }
}

@media (min-width: 1280px) {
  .xl\:text-center { text-align: center; }
  .xl\:flex { display: flex; }
  .xl\:block { display: block; }
  .xl\:p-4 { padding: 1rem; }
  .xl\:m-4 { margin: 1rem; }
}

@media (min-width: 1536px) {
  .\32xl\:text-center { text-align: center; }
  .\32xl\:flex { display: flex; }
  .\32xl\:block { display: block; }
  .\32xl\:p-4 { padding: 1rem; }
  .\32xl\:m-4 { margin: 1rem; }
}