/* Estilo general */
body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
	
	/* 1. Ruta de la imagen (cambia 'imagen.png' por el nombre exacto de tu archivo) */
  background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url('images/hc_background.jpg');

  /* 2. Hace que la imagen se repita hacia los lados y hacia abajo */
  background-repeat: repeat;

  /* 3. Controla el tamaño del patrón. Ajusta este número (ej. 200px, 400px) para que las letras se vean más grandes o más pequeñas */
  background-size: 600px; 

  /* 4. Opcional: Hace que el fondo se quede fijo mientras el usuario hace scroll hacia abajo */
  background-attachment: fixed; 

  /* 5. Un color de fondo azul de respaldo mientras carga la imagen */
  background-color: #1a4f8b;
	
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

h1 {
    color: #fff;
    margin-bottom: 20px;
}

.table-container {
    overflow-x: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background-color: #fff;
    padding: 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

th, td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
}

/* Encabezados de tabla */
th {
    background-color: #0078D7; /* Azul */
    color: #fff; /* Blanco */
    cursor: pointer;
    font-weight: bold;
}

/* Zebra striping para las filas */
tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Hover en las filas */
tbody tr:hover {
    background-color: #f1f1f1;
    cursor: pointer;
}

.slider-container {
    margin-top: 20px;
}

.slider {
    width: 100%;
    max-width: 400px;
    cursor: pointer;
}

.search-container {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
}

#search-input {
    padding: 10px;
    font-size: 16px;
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#search-button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#search-button:hover {
    background-color: #0056b3;
}

/* Estilo para las celdas de la columna "Nota" */
td.col-nota {
    background-color: #fff3e0; /* Naranja más claro */
    color: #5a3c0c; /* Marrón oscuro */
}

/* --- NUEVOS ESTILOS PARA EL BOTÓN DE REINICIO --- */
#reset-button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #db342a; /* Un tono gris elegante */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#reset-button:hover {
    background-color: #5a6268; /* Gris más oscuro al pasar el ratón */
}

/* Estilos para los créditos y disclaimer */
.creditos-autor {
    text-align: center;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f4f4f9; /* Un fondo muy clarito para separarlo del resto */
    border-radius: 8px;
    border: 1px solid #ddd;
}

.creditos-autor p {
    margin: 5px 0;
    color: #333;
}

.creditos-autor a {
    color: #1da1f2; /* Color azul estilo enlace/Twitter */
    text-decoration: none;
    font-weight: bold;
}

.creditos-autor a:hover {
    text-decoration: underline;
    color: #0c85d0;
}

.texto-legal {
    font-size: 0.85em;
    color: #666 !important;
}