/* ============================================================
   AgendaEducaciónCba — estilos propios
   La cabecera/pie institucionales usan el CSS del portal SIPEC-CBA
   (ver includes/head-assets.php); acá solo va lo específico del sitio.
   ============================================================ */

:root{
  --azul:        #003d82;
  --azul-claro:  #0057b8;
  --papel:       #fffdf7;
  --papel-borde: #e4dcc4;
  --texto:       #1a1f36;
  --texto-suave: #5a6480;
  --acento:      #e85d04;

  /* Paleta del calendario y la agenda (colores institucionales: navy/azul/naranja/dorado) */
  --rf-navy:        #1f3a5f;
  --rf-navy-oscuro: #142842;
  --rf-azul:        #2f7fc1;
  --rf-naranja:     #e0862c;
  --rf-dorado:      #c9a227;
  --rf-crema:       #fffaf0;
  --rf-anillo:      #3a3a3a;
  --rf-texto:       #4a3f35;
  --rf-texto-suave: #a89a86;
}

*{box-sizing:border-box}

body{
  background:#eef1f8;
}

/* ---------- LANDING ---------- */

.landing-bg{
  background-color:#f4f4f2;
  background-image:linear-gradient(rgba(244,244,242,.6), rgba(244,244,242,.6)), url('../img/Fondo01.jpeg');
  background-repeat:no-repeat;
  background-position:left center;
  background-size:cover;
}

.landing{
  max-width:1600px;
  margin:0 auto;
  padding:48px 24px 64px;
}

.landing-texto{
  padding-top:8px;
}

/* 40% calendario / 60% resto (pisa el 50/50 de Bootstrap desde el breakpoint md) */
@media (min-width:768px){
  .landing-calendario{flex:0 0 40%; max-width:40%}
  .landing-texto{flex:0 0 60%; max-width:60%}
}

.landing-texto h1{
  font-family:'Lora', 'Georgia', serif;
  font-size:clamp(28px,4vw,42px);
  font-weight:700;
  color:var(--azul);
  line-height:1.15;
  margin-bottom:14px;
}

.landing-texto h2{
  font-family:'Lora', 'Georgia', serif;
  font-style:italic;
  font-size:clamp(16px,2vw,20px);
  font-weight:400;
  color:var(--azul-claro);
  margin-bottom:18px;
}

.landing-texto p{
  font-family:'Lora', 'Georgia', serif;
  font-size:15px;
  font-weight:400;
  line-height:1.7;
  color:var(--texto-suave);
  max-width:60ch;
  margin-bottom:14px;
}

.landing-texto p.landing-intro{
  font-weight:700;
  color:var(--texto);
}

.landing-calendario{
  min-width:0;
}

.landing-calendario .rotafolio{
  width:100%;
  margin:0 auto;
}

/* ---------- EVENTOS DESTACADOS (Bootstrap card, hasta 3 columnas) ---------- */

.destacado{
  background:#fffaf0;
  border:1px solid rgba(31,58,95,.14);
  border-radius:14px;
  box-shadow:0 8px 20px rgba(31,58,95,.14);
}

.destacado-etiqueta{
  display:inline-block;
  font-family:'Lora', 'Georgia', serif;
  font-size:12px;
  font-weight:700;
  color:#fff;
  background:linear-gradient(135deg, var(--rf-navy) 0%, var(--rf-azul) 100%);
  border-radius:999px;
  padding:2px 12px;
  margin-bottom:10px;
}

.destacado-nombre{
  font-family:'Lora', 'Georgia', serif;
  font-size:19px;
  font-weight:700;
  color:var(--rf-texto);
  margin-bottom:6px;
  line-height:1.2;
}

.destacado-meta{
  font-family:'Lora', 'Georgia', serif;
  font-size:13px;
  font-weight:400;
  color:var(--rf-texto-suave);
  margin-bottom:8px;
}

.destacado-area{
  display:inline-block;
  font-family:'Lora', 'Georgia', serif;
  font-size:11px;
  font-weight:700;
  color:#2f2a22;
  background:#d3e8fb;
  border:1.5px solid rgba(0,0,0,.15);
  border-radius:999px;
  padding:2px 10px;
  margin-bottom:10px;
}

.destacado-desc{
  font-family:'Lora', 'Georgia', serif;
  font-size:13.5px;
  color:var(--rf-texto);
  opacity:.85;
  line-height:1.55;
  margin-bottom:14px;
}

.destacado-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:linear-gradient(135deg, var(--rf-navy) 0%, var(--rf-azul) 100%);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:8px 18px;
  font-family:'Lora', 'Georgia', serif;
  font-size:13.5px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 4px 10px rgba(20,40,66,.35);
  transition:transform .15s;
}
.destacado-btn:hover{transform:translateY(-2px)}

/* ---------- CALENDARIO ROTAFOLIO ---------- */

.rotafolio{
  position:relative;
  background:var(--rf-crema);
  border-radius:14px;
  box-shadow:0 18px 36px rgba(31,58,95,.22);
  padding:26px 26px 30px;
  perspective:1400px;
  border:1px solid rgba(31,58,95,.14);
}

.rotafolio-header{
  background:linear-gradient(135deg, var(--rf-navy) 0%, var(--rf-azul) 100%);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  margin:8px 0 24px;
  box-shadow:0 6px 16px rgba(20,40,66,.3);
}

.rotafolio-mes{
  font-family:'Lora', 'Georgia', serif;
  font-size:26px;
  font-weight:700;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.5px;
  text-align:center;
  flex:1;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}

.rotafolio-nav{
  background:#fff;
  color:var(--rf-navy);
  border:1px solid rgba(31,58,95,.2);
  width:40px;
  height:40px;
  border-radius:50%;
  cursor:pointer;
  font-size:19px;
  font-weight:700;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s, background .15s;
  flex:0 0 auto;
}
.rotafolio-nav:hover:not(:disabled){background:#f0f4fa; transform:scale(1.08)}
.rotafolio-nav:disabled{opacity:.35; cursor:not-allowed}

.rotafolio-hoja{
  transform-style:preserve-3d;
  transform-origin:left center;
}
.rotafolio-hoja.flip-adelante{animation:flipAdelante .5s ease both}
.rotafolio-hoja.flip-atras{animation:flipAtras .5s ease both}

@keyframes flipAdelante{
  0%  {transform:rotateY(0deg);   opacity:1}
  49% {transform:rotateY(-90deg); opacity:.35}
  50% {transform:rotateY(90deg);  opacity:.35}
  100%{transform:rotateY(0deg);   opacity:1}
}
@keyframes flipAtras{
  0%  {transform:rotateY(0deg);  opacity:1}
  49% {transform:rotateY(90deg); opacity:.35}
  50% {transform:rotateY(-90deg);opacity:.35}
  100%{transform:rotateY(0deg);  opacity:1}
}

.rotafolio-semanas{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
  margin-bottom:10px;
}
.rotafolio-semanas span{
  text-align:center;
  font-family:'Lora', 'Georgia', serif;
  font-size:13px;
  font-weight:700;
  color:var(--rf-texto-suave);
  text-transform:uppercase;
}

.rotafolio-dias{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
}

.rf-dia{
  aspect-ratio:1;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:4px;
  font-family:'Lora', 'Georgia', serif;
  font-size:14px;
  color:var(--rf-texto);
  cursor:default;
  overflow:hidden;
}
.rf-dia.vacio{visibility:hidden}
.rf-dia.hoy{
  border-color:var(--rf-dorado);
  font-weight:700;
}

.rf-dia.con-actividad{
  cursor:pointer;
  border-color:rgba(31,58,95,.12);
  transition:transform .15s, box-shadow .15s;
  box-shadow:0 2px 6px rgba(31,58,95,.12);
}
.rf-dia.con-actividad:hover{transform:translateY(-2px); box-shadow:0 5px 12px rgba(31,58,95,.2)}
.rf-dia.con-actividad .rf-num{font-weight:700}
.rf-dia .rf-num{font-size:17px}
.rf-dia .rf-titulo{
  font-size:10px;
  font-weight:400;
  line-height:1.2;
  color:var(--rf-texto);
  opacity:.75;
  text-align:center;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  margin-top:2px;
}

/* Paleta institucional (navy / azul / naranja / dorado) para los días con actividad */
.rf-dia.rf-c1{background:#dbe4f0; border-color:var(--rf-navy)}
.rf-dia.rf-c2{background:#d3e8fb; border-color:var(--rf-azul)}
.rf-dia.rf-c3{background:#ffe6cc; border-color:var(--rf-naranja)}
.rf-dia.rf-c4{background:#faf0c8; border-color:var(--rf-dorado)}

.rotafolio-vacio{
  text-align:center;
  font-size:12px;
  color:var(--rf-texto-suave);
  padding:18px 4px;
}

/* ---------- VISTA DIARIA (AGENDA) ---------- */

.dia-wrap{
  max-width:760px;
  padding-top:40px;
  padding-bottom:64px;
}

.dia-volver{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'Lora', 'Georgia', serif;
  font-size:13.5px;
  font-weight:700;
  color:var(--rf-navy);
  text-decoration:none;
  margin-bottom:20px;
}
.dia-volver:hover{text-decoration:underline}

.dia-libro{
  position:relative;
  perspective:1800px;
}

.dia-hoja{
  background:var(--rf-crema);
  border:1px solid rgba(31,58,95,.14);
  border-radius:14px;
  box-shadow:0 18px 36px rgba(31,58,95,.22);
  padding:30px;
  min-height:320px;
  transform-style:preserve-3d;
  transform-origin:left center;
  position:relative;
}

.dia-hoja.flip-adelante{animation:flipAdelante .55s ease both}
.dia-hoja.flip-atras{animation:flipAtras .55s ease both}

.dia-titulo{
  font-family:'Lora', 'Georgia', serif;
  font-size:24px;
  font-weight:700;
  color:var(--rf-texto);
  margin-bottom:4px;
}
.dia-titulo .dia-num{color:var(--rf-navy)}

.dia-sub{
  font-family:'Lora', 'Georgia', serif;
  font-style:italic;
  font-size:13.5px;
  font-weight:400;
  color:var(--rf-texto-suave);
  text-transform:capitalize;
  margin-bottom:22px;
}

.dia-lista{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.dia-item{
  display:grid;
  grid-template-columns:104px 1fr;
  gap:14px;
  padding:14px 16px;
  border-radius:14px;
  border:1.5px solid rgba(0,0,0,.1);
}
.dia-item.dia-c1{background:#dbe4f0}
.dia-item.dia-c2{background:#d3e8fb}
.dia-item.dia-c3{background:#ffe6cc}
.dia-item.dia-c4{background:#faf0c8}

.dia-horario{
  font-family:'Lora', 'Georgia', serif;
  font-weight:700;
  color:var(--rf-texto);
  font-size:14px;
  white-space:nowrap;
}
.dia-horario small{display:block; font-weight:400; color:var(--rf-texto-suave); font-size:11px; font-family:'Lora', 'Georgia', serif}

.dia-actividad-nombre{
  font-family:'Lora', 'Georgia', serif;
  font-weight:700;
  font-size:15px;
  color:var(--rf-texto);
  margin-bottom:4px;
}
.dia-actividad-area{
  display:inline-block;
  font-family:'Lora', 'Georgia', serif;
  font-size:10.5px;
  font-weight:700;
  color:#2f2a22;
  background:rgba(255,255,255,.65);
  border:1.5px solid rgba(0,0,0,.15);
  border-radius:999px;
  padding:1px 9px;
  margin-bottom:6px;
}
.dia-actividad-desc{
  font-family:'Lora', 'Georgia', serif;
  font-size:13px;
  color:var(--rf-texto);
  opacity:.85;
  line-height:1.55;
}

.dia-vacio{
  text-align:center;
  color:var(--rf-texto-suave);
  font-size:14px;
  padding:48px 10px;
}

.dia-btn{
  background:linear-gradient(135deg, var(--rf-navy) 0%, var(--rf-azul) 100%);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:10px 20px;
  font-family:'Lora', 'Georgia', serif;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s, box-shadow .15s;
  display:inline-flex;
  align-items:center;
  gap:6px;
  box-shadow:0 4px 10px rgba(20,40,66,.35);
}
.dia-btn:hover:not(:disabled){transform:translateY(-2px)}
.dia-btn:active:not(:disabled){transform:translateY(1px); box-shadow:0 2px 6px rgba(20,40,66,.3)}
.dia-btn:disabled{opacity:.35; cursor:not-allowed; box-shadow:none}

@media(max-width:600px){
  .dia-item{grid-template-columns:1fr}
  .dia-horario{margin-bottom:2px}
}

/* ---------- /Equipos (layout con utilidades de Bootstrap) ---------- */

.eq-header{
  background:linear-gradient(135deg,var(--azul) 0%,var(--azul-claro) 100%);
}

.eq-btn{
  background:var(--azul); border-color:var(--azul);
}
.eq-btn:hover{background:var(--azul-claro); border-color:var(--azul-claro)}

.eq-nav-link{
  color:var(--texto-suave); font-weight:600; font-size:13.5px;
  padding:12px 14px; border-bottom:2.5px solid transparent;
}
.eq-nav-link:hover{color:var(--azul)}
.eq-nav-link.active{color:var(--azul); border-bottom-color:var(--azul)}

.eq-badge-publicado{background:#d1fae5; color:#059669}
.eq-badge-pendiente{background:#fff3bf; color:#8a6d00}

/* Tablas de gestión (Publicaciones, Equipos) más compactas, para que las
   columnas con botones no se aprieten y hagan wrap. */
.table-compacta{font-size:12px}
.table-compacta th, .table-compacta td{padding:6px 8px}
.table-compacta .btn{font-size:11px; padding:3px 8px}
.table-compacta .badge{font-size:10.5px; padding:3px 7px}

/* Texto largo (nombre/área/usuario) truncado con "…" en vez de romper la
   fila; el título completo queda en el atributo title (tooltip). */
.celda-truncada{
  display:inline-block; max-width:100%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom;
}

/* Insignia de estado clickeable (publicar/despublicar sin botón aparte). */
.celda-clic{cursor:pointer}
.celda-clic:hover{filter:brightness(0.92)}

/* Botón de destacado: solo el ícono, para que nunca rompa el ancho de fila. */
.btn-star{
  border:1.5px solid #e0b400; background:#fff; color:#e0b400;
  border-radius:50%; width:26px; height:26px; padding:0;
  line-height:1; font-size:14px; display:inline-flex;
  align-items:center; justify-content:center;
}
.btn-star.activa{background:#fff3bf}
.btn-star:hover{background:#fff8db}

/* ---------- MOBILE: letras más chicas y en negro ---------- */

@media(max-width:576px){
  .landing-texto h1{font-size:24px; color:#111}
  .landing-texto h2{font-size:14px; color:#111}
  .landing-texto p{font-size:13px; color:#111}
  .landing-texto p.landing-intro{color:#111}

  .destacado-nombre{font-size:16px; color:#111}
  .destacado-meta{font-size:11.5px; color:#111}
  .destacado-area{font-size:10px}
  .destacado-desc{font-size:12px; color:#111}

  .rotafolio-mes{font-size:19px}
  .rf-dia{font-size:12px; color:#111}
  .rf-dia .rf-num{font-size:14px}
  .rf-dia .rf-titulo{font-size:8.5px; color:#111}

  .dia-titulo{font-size:19px; color:#111}
  .dia-sub{font-size:12px; color:#111}
  .dia-horario{font-size:12.5px; color:#111}
  .dia-actividad-nombre{font-size:13.5px; color:#111}
  .dia-actividad-desc{font-size:12px; color:#111}
}