* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
}

/* Encabezado */
.encabezado {
    background-color: #fff;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.logo {
    font-size: 24px;
    font-weight: 300;
    color: #666;
    letter-spacing: 3px;
}
.usuario-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #666;
    font-size: 14px;
}
.usuario-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #00bcd4;
}
.usuario-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Contenedor */
.contenedor {
    display: flex;
    min-height: calc(100vh - 65px);
}
.barra-lateral {
    width: 200px;
    background-color: #6b7280;
    color: white;
}
.item-lateral {
    padding: 18px 25px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 14px;
}
.item-lateral:hover {
    background-color: #5b6370;
}
.item-lateral.activo {
    background-color: #8b93a0;
}

/* Contenido */
.contenido-principal {
    flex: 1;
    padding: 30px 40px;
}
.encabezado-pagina {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.titulo-pagina {
    font-size: 20px;
    color: #666;
    font-weight: 400;
}
.btn-nuevo {
    background-color: #00bcd4;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-nuevo:hover {
    background-color: #00acc1;
}

/* Filtros */
.filtros {
    background-color: white;
    padding: 25px;
    border-radius: 5px;
    margin-bottom: 25px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.fila-filtros {
    display: grid;
    grid-template-columns: repeat(5, 1fr) auto auto;
    gap: 15px;
    align-items: end;
}
.grupo-filtro {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.etiqueta-filtro {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}
.input-filtro,
.select-filtro {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
}
.btn-buscar {
    background-color: #00bcd4;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}
.btn-buscar:hover { background-color: #00acc1; }
.btn-limpiar {
    background-color: transparent;
    color: #00bcd4;
    border: none;
    cursor: pointer;
    font-size: 14px;
    text-decoration: underline;
}
.btn-limpiar:hover { color: #00acc1; }

/* Resultados */
.seccion-resultados {
    background-color: white;
    border-radius: 5px;
    padding: 25px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.encabezado-resultados {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.titulo-resultados {
    font-size: 16px;
    color: #666;
    font-weight: 400;
}
.mostrar-resultados {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #666;
}
.contenedor-tabla {
    overflow-x: auto;
}
table {
    width: 100%;
    border-collapse: collapse;
}
thead {
    background-color: #0097a7;
    color: white;
}
th {
    padding: 15px;
    text-align: left;
    font-weight: 500;
    font-size: 14px;
}
th::after {
    content: ' ⇅';
    opacity: 0.6;
    font-size: 12px;
}
tbody tr { border-bottom: 1px solid #f0f0f0; }
tbody tr:hover { background-color: #f9f9f9; }
td {
    padding: 18px 15px;
    font-size: 14px;
    color: #666;
}
.botones-accion {
    display: flex;
    gap: 10px;
}
.btn-accion {
    width: 35px;
    height: 35px;
    border: 1px solid #ddd;
    background-color: white;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-accion:hover {
    background-color: #f5f5f5;
    border-color: #999;
}
.contador-registros {
    font-size: 13px;
    color: #999;
    margin-top: 15px;
}
/* ===== MODAL ===== */
.cuerpo-modal {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.6);
  height: 100vh;
  margin: 0;
}

.ventana-modal {
  background: white;
  width: 400px;
  max-width: 95%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  animation: aparecer 0.25s ease-out;
}

@keyframes aparecer {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

.encabezado-modal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #eee;
  font-weight: bold;
  color: #444;
  font-size: 16px;
  background-color: #f9f9f9;
}

.contenido-modal {
  padding: 20px;
  font-size: 14px;
  color: #444;
  line-height: 1.5;
  text-align: center;
}

.pie-modal {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid #eee;
}

.boton {
  padding: 8px 14px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s ease-in-out;
}

.boton.cancelar {
  background: #eee;
  color: #444;
}

.boton.cancelar:hover {
  background: #ddd;
}

.boton.eliminar {
  background: #00bcd4;
  color: white;
}

.boton.eliminar:hover {
  background: #0097a7;
}

.cerrar-modal {
  border: none;
  background: transparent;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  color: #999;
  transition: color 0.2s;
}

.cerrar-modal:hover {
  color: #333;
}
/* 📌 Cuadrícula del formulario de estudiantes */
.cuadricula-formulario {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columnas iguales */
    gap: 15px; /* separación entre campos */
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Campo que ocupa 1/4 (una columna) */
.campo-cuarto {
    grid-column: span 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: #555;
}

/* Campo que ocupa 2/4 (media fila) */
.campo-mitad {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: #555;
}

/* Campo que ocupa 4/4 (fila completa) */
.campo-completo {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: #555;
}

/* Inputs, selects y textareas */
.campo-cuarto input,
.campo-cuarto select,
.campo-mitad input,
.campo-mitad select,
.campo-completo input,
.campo-completo select,
.campo-completo textarea {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
    width: 100%;
    box-sizing: border-box;
}

/* Acciones del formulario */
.acciones-formulario {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.acciones-formulario .boton {
    padding: 10px 18px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    border: none;
}

.acciones-formulario .boton.cancelar {
    background-color: #f0f0f0;
    color: #555;
}

.acciones-formulario .boton.eliminar {
    background-color: #00bcd4;
    color: white;
}

/* Responsive */
@media (max-width: 1200px) {
    .fila-filtros { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .barra-lateral { width: 150px; }
    .contenido-principal { padding: 20px; }
    .fila-filtros { grid-template-columns: 1fr; }
    .encabezado-pagina { flex-direction: column; gap: 15px; align-items: flex-start; }
}