/* Estilos personalizados y modernizados para IFTS N°9 */

/* --- Variables de Color --- */
:root {
    --primary-color: #1976D2;  /* Azul más vibrante */
    --primary-dark: #1565C0;   /* Para hover */
    --secondary-color: #424242;/* Un gris más oscuro */
    --light-bg: #F5F5F5;       /* Gris muy claro para fondos */
    --dark-bg: #263238;        /* Azul grisáceo oscuro */
    --text-color: #333;
    --border-color: #e0e0e0;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
    background-color: var(--light-bg);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--primary-color);
    font-weight: 600;
}

.text-primary { color: var(--primary-color) !important; }
.bg-primary { background-color: var(--primary-color) !important; }
.bg-dark { background-color: var(--dark-bg) !important; }

/* --- Barra de Navegación --- */
.navbar {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: background-color 0.3s ease-in-out;
}

.navbar-nav .nav-link {
    font-weight: 500;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: var(--primary-color) !important;
}

/* --- Encabezado y Banner Principal --- */
.header-banner {
    background: linear-gradient(rgba(25, 118, 210, 0.85), rgba(13, 71, 161, 0.95)), url('banner.jpg') no-repeat center center;
    background-size: cover;
    padding: 6rem 0;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.header-banner img {
    max-width: 120px;
    animation: fadeIn 1.5s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Estilos para el Título del Banner --- */
.header-banner h1 {
    color: #FFFFFF; /* Blanco puro */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Sombra para mejor lectura */
    font-weight: 700;
}

/* --- Secciones y Contenido --- */
section {
    padding: 2rem 0;
}

/* --- Tarjetas y Elementos Intermedios --- */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.card-cta {
    background-color: white;
    padding: 2rem;
}

/* --- Botones --- */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: 50px; /* Bordes redondeados */
    font-weight: 600;
    padding: 0.75rem 2rem;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    border-radius: 50px;
    font-weight: 600;
    padding: 0.75rem 2rem;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: #555;
    border-color: #555;
    transform: translateY(-2px);
}
.social-btn {
  width: 40px;   /* mismo ancho */
  height: 40px;  /* mismo alto */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important; /* fuerza círculo perfecto */
  padding: 0 !important;         /* elimina el padding que lo hace ovalado */
}

/* --- Tabla de Materias --- */
.subject-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px; /* Espacio entre filas */
}

.subject-table th, .subject-table td {
    padding: 15px;
    border: 1px solid var(--border-color);
}

.subject-table th {
    background-color: #fafafa;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.subject-table tr {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.subject-table tbody tr:hover {
    background-color: #f8f8f8;
}

/* --- Footer --- */
footer {
    background-color: var(--dark-bg);
    padding: 3rem 0;
}

/* Estilos para badges (no incluidos en el HTML, pero útiles) */
.badge-materia { background-color: #E3F2FD; color: #1E88E5; }
.badge-taller { background-color: #E8F5E9; color: #4CAF50; }
.badge-pp { background-color: #FBE9E7; color: #D84315; }

/* Responsive */
@media (max-width: 768px) {
    .header-banner {
        padding: 4rem 0;
    }
    .btn-lg {
        width: 100%;
    }
    .subject-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}
strong {
  font-weight: 700;
  color: #000; /* opcional, asegura contraste */
}
.table-responsive table {
  font-size: 0.9rem;
}
.btn-pulse {
  animation: pulse 1.8s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
  }
  70% {
    transform: scale(1.02);
    box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}
/* === Efecto sutil de brillo animado en los bordes del card === */
.card-glow {
  position: relative;
  z-index: 0;
  border-radius: 15px;
  overflow: hidden;
}

.card-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 6px; /* controla el grosor del borde luminoso */
  border-radius: inherit;
  background: linear-gradient(
    45deg,
    #ff0000, #ff7300, #fffb00,
    #48ff00, #00ffd5, #002bff,
    #7a00ff, #ff00c8, #ff0000
  );
  background-size: 400%;
  animation: border-glow 20s linear infinite;
  z-index: -1;
  mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.6; /* controla la intensidad del brillo */
  filter: blur(4px); /* suaviza el borde */
}

@keyframes border-glow {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}