/*
 * main.css stylesheet file.
 * Archivo de hoja de estilos main.css.
 */


@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Barlow:wght@400;500;600;700&display=swap");


/* Styles for . / Estilos para . */
:root {
  
  --color-green: #2ecc50;       
  --color-green-dark: #1db53e;  
  --color-green-dim: rgba(46, 204, 80, 0.15);  
  --color-green-glow: rgba(46, 204, 80, 0.35); 
  --color-orange: #ff6b2b;      
  --color-orange-dim: rgba(255, 107, 43, 0.15); 
  --color-blue: #0a84ff;        
  --color-blue-dim: rgba(10, 132, 255, 0.15);   

  
  --bg-dark: #f8faf8;     
  --bg-dark2: #ffffff;    
  --bg-dark3: #eef2ee;    
  --bg-card: #ffffff;     
  --bg-white: #ffffff;    
  --bg-light: #f4f7f4;    
  --bg-light2: #e8ede8;   

  
  --text-primary: #0d1a0d;    
  --text-secondary: #3a4a3a;  
  --text-muted: #7a8f7a;      
  --text-dark: #0d1a0d;       
  --text-dark2: #3a4a3a;      
  --text-placeholder: #aabcaa; 

  
  --border-dark: rgba(0, 0, 0, 0.08);   
  --border-dark2: rgba(0, 0, 0, 0.15);  
  --border-light: rgba(0, 0, 0, 0.05);    
  --border-light2: rgba(0, 0, 0, 0.12);   

  
  --font-display: "Barlow Condensed", sans-serif; 
  --font-body: "Barlow", sans-serif;              

  
  --fs-xs: 0.72rem;    
  --fs-sm: 0.82rem;    
  --fs-base: 0.92rem;  
  --fs-md: 1rem;       
  --fs-lg: 1.2rem;     
  --fs-xl: 1.5rem;     
  --fs-2xl: 2rem;      
  --fs-3xl: 2.8rem;    
  --fs-4xl: 4rem;      

  
  --space-xs: 0.4rem;  
  --space-sm: 0.8rem;  
  --space-md: 1.2rem;  
  --space-lg: 2rem;    
  --space-xl: 3rem;    
  --space-2xl: 4rem;   

  
  --radius-sm: 6px;    
  --radius-md: 10px;   
  --radius-lg: 14px;   
  --radius-xl: 20px;   
  --radius-full: 9999px; 

  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12);      
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.18);     
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.24);     
  --shadow-green: 0 6px 24px rgba(46, 204, 80, 0.3); 

  
  --nav-h: 68px;       

  
  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1); 
}

/* Button styling including spacing and hover states / Estilo de botones incluyendo espaciado y estados hover */
.btn {
  border-radius: var(--radius-md, 10px);
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  transition: all var(--transition, 0.2s ease);
}

/* Button styling including spacing and hover states / Estilo de botones incluyendo espaciado y estados hover */
.btn i {
  transition: all var(--transition, 0.2s ease);
}

/* Button styling including spacing and hover states / Estilo de botones incluyendo espaciado y estados hover */
.btn:hover {
  transform: translateY(-1px);
}

/* Button styling including spacing and hover states / Estilo de botones incluyendo espaciado y estados hover */
.btn:active {
  transform: translateY(0);
}

/* Button styling including spacing and hover states / Estilo de botones incluyendo espaciado y estados hover */
.btn-primary {
  background-color: var(--primary-green, #2ecc50);
  border-color: var(--primary-green, #2ecc50);
  color: #000;
}

/* Button styling including spacing and hover states / Estilo de botones incluyendo espaciado y estados hover */
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-green-dark, #1db53e);
  border-color: var(--primary-green-dark, #1db53e);
  color: #000;
}

/* Button styling including spacing and hover states / Estilo de botones incluyendo espaciado y estados hover */
.btn-outline-primary {
  border-color: var(--primary-green, #2ecc50);
  color: var(--primary-green, #2ecc50);
}

/* Button styling including spacing and hover states / Estilo de botones incluyendo espaciado y estados hover */
.btn-outline-primary:hover {
  background-color: var(--primary-green, #2ecc50);
  border-color: var(--primary-green, #2ecc50);
  color: white;
}

/* Button styling including spacing and hover states / Estilo de botones incluyendo espaciado y estados hover */
.btn-outline-primary:hover i {
  color: white;
}

/* Button styling including spacing and hover states / Estilo de botones incluyendo espaciado y estados hover */
.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

/* Styles for form label. / Estilos para form label. */
.form-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted, #7a8f7a);
  margin-bottom: 0.5rem;
}

/* Base styling for form fields and transitions / Estilo base para campos de formulario y transiciones */
.form-control {
  border: 1.5px solid var(--border-medium, #d9e2d9);
  border-radius: var(--radius-md, 10px);
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  transition: all var(--transition, 0.2s ease);
}

/* Base styling for form fields and transitions / Estilo base para campos de formulario y transiciones */
.form-control:focus {
  border-color: var(--primary-green, #2ecc50);
  box-shadow: 0 0 0 3px var(--primary-green-dim, rgba(46, 204, 80, 0.12));
  outline: none;
}

/* Base styling for form fields and transitions / Estilo base para campos de formulario y transiciones */
.form-control:disabled {
  background-color: var(--bg-dark, #e8ede8);
  cursor: not-allowed;
}

/* Base styling for form fields and transitions / Estilo base para campos de formulario y transiciones */
.form-control-plaintext {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-secondary, #1a1a1a);
  padding: 0.5rem 0;
}

/* Styles for input group. / Estilos para input group. */
.input-group {
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
}

/* Input icon wrapper styling / Estilo del contenedor de iconos de entrada */
.input-group-text {
  background: white;
  border: 1.5px solid var(--border-medium, #d9e2d9);
  border-right: none;
  color: var(--text-muted, #7a8f7a);
}

/* Base styling for form fields and transitions / Estilo base para campos de formulario y transiciones */
.input-group .form-control:last-child {
  border-radius: 0 var(--radius-md, 10px) var(--radius-md, 10px) 0;
}

/* Styles for list group item. / Estilos para list group item. */
.list-group-item {
  border: none;
  border-bottom: 1px solid var(--border-light, #e8ede8);
  padding: 1rem 1.25rem;
  transition: all var(--transition, 0.2s ease);
}

/* Styles for list group item. / Estilos para list group item. */
.list-group-item:last-child {
  border-bottom: none;
}

/* Styles for list group item action. / Estilos para list group item action. */
.list-group-item-action {
  cursor: pointer;
}

/* Styles for list group item action. / Estilos para list group item action. */
.list-group-item-action:hover {
  background-color: var(--primary-green-dim, rgba(46, 204, 80, 0.05));
}

/* Styles for list group item i. / Estilos para list group item i. */
.list-group-item i {
  transition: all var(--transition, 0.2s ease);
}

/* Styles for list group item. / Estilos para list group item. */
.list-group-item:hover i {
  transform: translateX(2px);
}

/* Badge label styling for status and tags / Estilo de etiquetas badge para estados y tags */
.badge {
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Badge label styling for status and tags / Estilo de etiquetas badge para estados y tags */
.badge[style*="background: rgba(46,204,80,.1)"] {
  transition: all var(--transition, 0.2s ease);
}

/* Badge label styling for status and tags / Estilo de etiquetas badge para estados y tags */
.badge[style*="background: rgba(46,204,80,.1)"]:hover {
  background: rgba(46, 204, 80, 0.2) !important;
}

/* Styles for modal content. / Estilos para modal content. */
.modal-content {
  border-radius: var(--radius-lg, 16px);
  border: none;
  overflow: hidden;
}

/* Styles for modal header. / Estilos para modal header. */
.modal-header {
  border-bottom: 1px solid var(--border-light, #e8ede8);
  background: var(--bg-white, #ffffff);
  padding: 1.25rem 1.5rem;
}

/* Styles for modal title. / Estilos para modal title. */
.modal-title {
  font-family: var(--font-display, 'Poppins', 'Montserrat', sans-serif);
  font-weight: 700;
}

/* Styles for modal body. / Estilos para modal body. */
.modal-body {
  padding: 1.5rem;
}

/* Footer area styling / Estilo del área de pie de página */
.modal-footer {
  border-top: 1px solid var(--border-light, #e8ede8);
  padding: 1rem 1.5rem;
}

/* Button styling including spacing and hover states / Estilo de botones incluyendo espaciado y estados hover */
.modal-footer .btn-secondary {
  background: var(--bg-dark, #e8ede8);
  border: none;
  color: var(--text-secondary, #1a1a1a);
}

/* Button styling including spacing and hover states / Estilo de botones incluyendo espaciado y estados hover */
.modal-footer .btn-secondary:hover {
  background: var(--border-light, #e8ede8);
}

/* Styles for rounded circle. / Estilos para rounded circle. */
.rounded-circle {
  object-fit: cover;
}

/* Styles for img.rounded circle. / Estilos para img.rounded circle. */
img.rounded-circle {
  transition: transform var(--transition, 0.2s ease);
}

/* Styles for img.rounded circle. / Estilos para img.rounded circle. */
img.rounded-circle:hover {
  transform: scale(1.05);
}

/* Styles for border success. / Estilos para border success. */
.border-success {
  border-color: var(--primary-green, #2ecc50) !important;
}

/* Styles for bg success. / Estilos para bg success. */
.bg-success {
  background-color: var(--primary-green, #2ecc50) !important;
}


      
/* Styles for section local. / Estilos para section local. */
      .section-local {
        padding: 5rem 0;
      }
      
/* Styles for stat number local. / Estilos para stat number local. */
      .stat-number-local {
        font-size: 2.5rem;
        font-weight: 800;
        color: var(--bs-primary, #0d6efd);
        margin-bottom: 0.25rem;
      }
      
/* Styles for check local. / Estilos para check local. */
      .check-local {
        display: flex;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
      }
      
/* Styles for check local i. / Estilos para check local i. */
      .check-local i {
        color: var(--bs-primary, #0d6efd);
        font-size: 1.25rem;
        margin-top: 0.125rem;
      }
      
/* Card component styling for panels and containers / Estilo del componente tarjeta para paneles y contenedores */
      .card-espacio {
        transition: transform 0.3s ease;
        border: none;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      }
      
/* Card component styling for panels and containers / Estilo del componente tarjeta para paneles y contenedores */
      .card-espacio:hover {
        transform: translateY(-5px);
      }
      
/* Badge label styling for status and tags / Estilo de etiquetas badge para estados y tags */
      .badge-deporte {
        background-color: #e9ecef;
        color: #495057;
        padding: 0.25rem 0.75rem;
        border-radius: 2rem;
        font-size: 0.75rem;
        font-weight: 500;
      }


/* Badge label styling for status and tags / Estilo de etiquetas badge para estados y tags */
.page-title-badge {
  background: rgba(46,204,80,.1);
  color: #2ecc50;
}

/* Badge label styling for status and tags / Estilo de etiquetas badge para estados y tags */
.report-title-badge {
  background: rgba(16,185,129,.1);
  color: #065f46;
}

/* Badge label styling for status and tags / Estilo de etiquetas badge para estados y tags */
.clients-title-badge {
  background: rgba(139,92,246,.1);
  color: #6d28d9;
}

/* Styles for page title heading. / Estilos para page title heading. */
.page-title-heading { 
  font-family: var(--font-display, 'Poppins', 'Montserrat', sans-serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1.1;
  color: var(--text-primary);
}