/* labelcamp-match.css: Adaptación visual Labelcamp para Puntilla, manteniendo colores rojo/blanco/naranja */


:root {
  --puntilla-red: #E53935;
  --puntilla-white: #FFFFFF;
  --puntilla-orange: #FF9800;
  --puntilla-gray: #F5F5F5;
  --puntilla-border: #E0E0E0;
}

body, .main-content {
  font-family: var(--font-family);
  background-color: var(--puntilla-white);
  color: var(--puntilla-red);
}

/* Cards */
.card, .main-content .card {
  background: var(--puntilla-gray);
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(229, 57, 53, 0.08);
  border: 1px solid var(--puntilla-border);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Botones */
.btn, .ds-btn {
  background-color: var(--puntilla-red);
  color: var(--puntilla-white);
  border-radius: 0.2rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border: none;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.btn-orange {
  background-color: var(--puntilla-orange);
  color: var(--puntilla-white);
}

.btn:disabled, .ds-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Inputs y formularios */
.input, input, textarea, select {
  font-family: inherit;
  border-radius: 0.5rem;
  border: 1px solid var(--puntilla-border);
  padding: 0.5rem 1rem;
  background: var(--puntilla-white);
  color: var(--puntilla-red);
  margin-bottom: 1rem;
  transition: border-color 0.2s;
}
.input:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--puntilla-orange);
  outline: none;
}

/* Badges y etiquetas */
.badge, .ds-badge {
  background: var(--puntilla-orange);
  color: var(--puntilla-white);
  border-radius: 1rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.85em;
  font-weight: 500;
}

/* Modales */
.modal {
  border-radius: 1rem;
  box-shadow: 0 4px 24px rgba(229, 57, 53, 0.12);
  padding: 2rem;
  border: 1px solid var(--puntilla-border);
}

/* Tablas */
table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
  background: var(--puntilla-white);
}
th, td {
  border: 1px solid var(--puntilla-border);
  padding: 0.75rem 1rem;
  text-align: left;
}
th {
  background: var(--puntilla-gray);
  color: var(--puntilla-red);
}

/* Dropdowns y menús */
.dropdown, .menu {
  background: var(--puntilla-white);
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(229, 57, 53, 0.08);
  border: 1px solid var(--puntilla-border);
}
.menu-item, .dropdown-item {
  padding: 0.75rem 1.25rem;
  color: var(--puntilla-red);
  cursor: pointer;
  transition: background 0.2s;
}
.menu-item:hover, .dropdown-item:hover {
  background: var(--puntilla-orange);
  color: var(--puntilla-white);
}

/* Sombra general para cards y modales */
.card, .modal {
  box-shadow: 0 2px 8px rgba(229, 57, 53, 0.08);
}

/* Responsive: ejemplo básico */
@media (max-width: 600px) {
  .card, .modal {
    padding: 1rem;
  }
  .btn, .ds-btn {
    padding: 0.5rem 1rem;
  }
}

/* Puedes ampliar con más componentes según lo que veas en la hoja original */