94 lines
2.1 KiB
CSS
94 lines
2.1 KiB
CSS
/* src/components/AgrupacionesManager.css */
|
|
.admin-module {
|
|
padding: 1rem;
|
|
border: 1px solid #ccc;
|
|
border-radius: 8px;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
th, td {
|
|
border: 1px solid #ddd;
|
|
padding: 8px;
|
|
text-align: left;
|
|
}
|
|
|
|
thead {
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
td input[type="text"] {
|
|
width: 100%;
|
|
padding: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
td button {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.table-container {
|
|
max-height: 500px; /* Altura máxima antes de que aparezca el scroll */
|
|
overflow-y: auto; /* Habilita el scroll vertical cuando es necesario */
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
position: relative; /* Necesario para que 'sticky' funcione correctamente */
|
|
}
|
|
|
|
/* Hacemos que la cabecera de la tabla se quede fija en la parte superior */
|
|
.table-container thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
/* El color de fondo es crucial para que no se vea el contenido que pasa por debajo */
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
.sortable-list-horizontal {
|
|
list-style: none;
|
|
padding: 8px;
|
|
margin: 0;
|
|
border: 1px dashed #ccc;
|
|
border-radius: 4px;
|
|
display: flex; /* <-- La clave para la alineación horizontal */
|
|
flex-wrap: wrap; /* <-- La clave para que salte de línea */
|
|
gap: 8px; /* Espacio entre elementos */
|
|
min-height: 50px; /* Un poco de altura para que la zona de drop sea visible */
|
|
}
|
|
|
|
.sortable-item {
|
|
padding: 8px 12px;
|
|
border: 1px solid #ddd;
|
|
background-color: white;
|
|
border-radius: 4px;
|
|
cursor: grab;
|
|
/* Opcional: para que no se puedan seleccionar el texto mientras se arrastra */
|
|
user-select: none;
|
|
}
|
|
|
|
.chamber-tabs {
|
|
display: flex;
|
|
margin-bottom: 1rem;
|
|
border: 1px solid #ccc;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
.chamber-tabs button {
|
|
flex: 1;
|
|
padding: 0.75rem 0.5rem;
|
|
border: none;
|
|
background-color: #f8f9fa;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
.chamber-tabs button:first-child { border-right: 1px solid #ccc; }
|
|
.chamber-tabs button.active { background-color: #007bff; color: white; } |