:root {
    	--brand-primary: #1e293b;
        --brand-accent: #2563eb;
        --brand-gold: #d97706;
	}
    body {
    	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        color: #334155;
        background-color: #f8fafc;
	}
	canvas { 
		border: 3px solid #333; 
		background: #d7ccc8; 
		margin-top: 10px; 
	}
	.panel { 
		background: #fff;
		padding: 20px;
		border-radius: 8px;
		display: inline-block;
		box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	}
	.versalita {
    	font-variant: small-caps;
        font-feature-settings: "smcp"; 
    }
    .navbar {
        background-color: var(--brand-primary);
    }
    .hero-materia {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        color: #fff;
        padding: 4rem 0;
        border-bottom: 4px solid var(--brand-accent);
		background-size: cover;
  		background-position: center;
  		background-repeat: no-repeat;
		height: 500px;
    }
    .card-level {
        border: none;
        border-radius: 1rem;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .card-level:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 24px -10px rgba(0,0,0,0.15) !important;
    }
    .icon-box {
        width: 64px;
        height: 64px;
        border-radius: 1rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        margin-bottom: 1.25rem;
    }
    .aula-box {
        background-color: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
    }
	.carousel-item img {
  		height: 100%;
  		width: 100%;
  		object-fit: cover;
	}

	th {
  		background-color: #e3f2fd;
		padding-top: 13px;
		padding-bottom: 13px;
		border: 1px solid #ccc;
		text-align: left;
		font-style: italic;
		font-size: small;
		color: #252850;
	}
	td {
		vertical-align: middle;
		color: #252850;
		font-size: small;
	}

	/* Imagen Nav Bar */
    /* 1. Definir la animación automática */
    @keyframes flotar {
      0% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-5px); /* Sube 5 píxeles */
      }
      100% {
        transform: translateY(0px);
      }
    }
    /* 2. Aplicar la animación a la clase del logo */
    .logo-animado {
      animation: flotar 3s ease-in-out infinite; /* Se repite infinitamente */
      transition: filter 0.3s ease;
    }
    /* Opcional: un efecto extra si el usuario pasa el mouse */
    .logo-animado:hover {
      filter: brightness(1.2);
    }