/* ============================================================
   Outbox · Profesores — estilos de front
   Usa las variables de marca del tema (var(--ob-*)).
   ============================================================ */

/* --- Tarjeta de profesor --- */
.ob-profe{display:flex;flex-direction:column;align-items:center;text-align:center;}
.ob-profe__foto{padding:0;overflow:hidden;}
.ob-profe__foto img{width:84px;height:84px;object-fit:cover;border-radius:50%;display:block;}
.ob-profe__centro{font-size:.82rem;color:var(--ob-azul);font-weight:700;font-family:var(--ob-font-tit);margin-top:8px;}
.ob-profe__desc{font-size:.88rem;color:var(--ob-gris);margin-top:10px;line-height:1.55;}

/* Tarjeta clicable del carrusel */
.ob-profe--card{cursor:pointer;width:100%;font:inherit;background:#fff;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.ob-profe--card:hover,.ob-profe--card:focus-visible{transform:translateY(-3px);
  border-color:var(--ob-pistacho);box-shadow:0 14px 30px rgba(0,0,0,.12);outline:none;}

/* Bloque texto + tarjetas en la home.
   Columna de texto reducida para que las tarjetas (derecha) conserven su ancho. */
.ob-equipo-50{display:grid;grid-template-columns:minmax(240px,330px) 1fr;gap:40px;align-items:center;}
.ob-equipo-50__car{min-width:0;}
@media(max-width:820px){
  .ob-equipo-50{grid-template-columns:1fr;text-align:center;}
  .ob-equipo-50 .ob-btn{margin-inline:auto;}
}

/* --- Carrusel (3 en 3) --- */
.ob-carrusel{position:relative;padding:0 6px;min-width:0;}
.ob-carrusel__track{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
  grid-auto-columns:calc((100% - 2*var(--ob-gap,24px))/3);
  gap:var(--ob-gap,24px);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 2px 14px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;}
.ob-carrusel__track::-webkit-scrollbar{display:none;}
.ob-carrusel__item{scroll-snap-align:start;display:flex;}
@media(max-width:900px){.ob-carrusel__track{grid-auto-columns:calc((100% - var(--ob-gap,24px))/2);}}
@media(max-width:600px){.ob-carrusel__track{grid-auto-columns:100%;}}
/* En el bloque 50/50 de la home: 3 columnas × 2 filas (6 a la vista).
   Cuando el 50/50 colapsa (≤820), el carrusel ocupa todo el ancho:
   el tamaño de tarjeta se adapta solo (1 en móvil, ~2 en tablet). */
.ob-equipo-50__car .ob-carrusel__track{grid-auto-columns:calc((100% - 2*var(--ob-gap,24px))/3);}
@media(max-width:820px){
  .ob-equipo-50__car .ob-carrusel__track{grid-auto-columns:clamp(220px, 44vw, 300px);}
}

.ob-carrusel__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--ob-borde);
  background:#fff;color:var(--ob-azul);font-size:1.6rem;line-height:1;cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;
  transition:.15s ease;}
.ob-carrusel__nav:hover{background:var(--ob-azul);color:#fff;}
.ob-carrusel__nav--prev{left:-10px;}
.ob-carrusel__nav--next{right:-10px;}
.ob-carrusel__nav[disabled]{opacity:.3;cursor:default;background:#fff;color:var(--ob-azul);}
@media(max-width:600px){.ob-carrusel__nav--prev{left:-2px;}.ob-carrusel__nav--next{right:-2px;}}

/* --- Rejilla estática de la home (6 tarjetas, sin carrusel) --- */
/* 6 en horizontal: 3 columnas × 2 filas. Texto alineado a la izquierda. */
.ob-equipo-mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ob-gap,24px);}
.ob-equipo-mgrid .ob-profe{align-items:flex-start;text-align:left;}
@media(max-width:560px){.ob-equipo-mgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:380px){.ob-equipo-mgrid{grid-template-columns:1fr;}}

/* Página de equipo: leyenda de colores de centro + rejilla de 24 */
.ob-equipo-leyenda{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px;margin:0 0 30px;font-size:.92rem;color:var(--ob-gris);}
.ob-equipo-leyenda .ob-leyenda__lbl{font-weight:600;color:var(--ob-carbon);}
.ob-leyenda__item{display:inline-flex;align-items:center;gap:8px;}
.ob-leyenda__sw{width:18px;height:18px;border-radius:5px;flex:0 0 auto;box-shadow:0 1px 3px rgba(0,0,0,.15);}
.ob-leyenda__sw--azul{background:var(--ob-azul);}
.ob-leyenda__sw--pistacho{background:var(--ob-pistacho);}
.ob-leyenda__sw--ambos{background:linear-gradient(135deg,var(--ob-azul) 0 50%,var(--ob-pistacho) 50% 100%);}
.ob-equipo-grid24{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:clamp(16px,1.8vw,28px);}
@media(max-width:520px){.ob-equipo-grid24{grid-template-columns:repeat(2,1fr);}}

/* --- Borde de color que identifica el centro del profesor --- */
/* Azul = San Blas · Pistacho = Playa San Juan · Bicolor diagonal = ambos. */
.ob-profe--card.ob-profe--san-blas{border:5px solid var(--ob-azul);}
.ob-profe--card.ob-profe--playa{border:5px solid var(--ob-pistacho);}
.ob-profe--card.ob-profe--ambos{
  border:5px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, var(--ob-azul) 0 50%, var(--ob-pistacho) 50% 100%) border-box;
}
/* Mantener el color del centro también con hover/focus (no dejar que lo pise el estilo general). */
.ob-profe--card.ob-profe--san-blas:hover,.ob-profe--card.ob-profe--san-blas:focus-visible{border-color:var(--ob-azul);}
.ob-profe--card.ob-profe--playa:hover,.ob-profe--card.ob-profe--playa:focus-visible{border-color:var(--ob-pistacho);}
.ob-profe--card.ob-profe--ambos:hover,.ob-profe--card.ob-profe--ambos:focus-visible{border-color:transparent;}

/* --- Modal / ficha del profesor --- */
.ob-modal[hidden]{display:none;}
.ob-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;}
.ob-modal__overlay{position:absolute;inset:0;background:rgba(8,30,40,.62);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:obpFade .3s ease both;}
@keyframes obpFade{from{opacity:0}to{opacity:1}}

/* Escenario: rodillo + pantalla de proyector que se desenrolla */
.ob-modal__stage{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;max-width:824px;}

.ob-modal__roller{position:relative;z-index:4;width:100%;height:18px;border-radius:10px;
  background:linear-gradient(180deg,#1f7e9e 0%,#0e5773 45%,#08303f 100%);
  box-shadow:0 7px 16px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.25);
  animation:obpRoller .25s ease both;}
.ob-modal__roller::before,.ob-modal__roller::after{content:"";position:absolute;top:-3px;width:16px;height:24px;
  border-radius:6px;background:linear-gradient(180deg,#0a3a4c,#06222d);box-shadow:0 4px 8px rgba(0,0,0,.4);}
.ob-modal__roller::before{left:-9px;}
.ob-modal__roller::after{right:-9px;}
@keyframes obpRoller{from{opacity:0;transform:scaleX(.5)}to{opacity:1;transform:scaleX(1)}}

.ob-modal__dialog{position:relative;z-index:3;background:#fff;border-radius:4px 4px 18px 18px;
  width:100%;max-height:calc(92vh - 30px);overflow:auto;padding:0;margin-top:-2px;
  box-shadow:0 40px 80px rgba(0,0,0,.4);
  transform-origin:top center;animation:obpUnroll .75s cubic-bezier(.22,.68,.28,1) both;}
@keyframes obpUnroll{
  0%{clip-path:inset(0 0 100% 0);transform:translateY(0);}
  55%{clip-path:inset(0 0 0 0);transform:translateY(8px);}
  72%{transform:translateY(-5px);}
  86%{transform:translateY(3px);}
  100%{clip-path:inset(0 0 0 0);transform:translateY(0);}
}

@media(prefers-reduced-motion:reduce){
  .ob-modal__overlay,.ob-modal__roller,.ob-modal__dialog{animation:none;}
  .ob-modal__dialog{clip-path:none;}
}
.ob-modal__close{position:absolute;top:16px;right:16px;z-index:2;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.92);border:none;font-size:1.5rem;line-height:1;color:var(--ob-carbon);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.18s ease;box-shadow:0 2px 8px rgba(0,0,0,.18);}
.ob-modal__close:hover{background:#fff;transform:rotate(90deg);}
body.ob-modal-open{overflow:hidden;}

/* Cabecera con banda de marca */
.ob-profe-modal__head{position:relative;display:flex;gap:24px;align-items:center;text-align:left;
  padding:36px 38px;color:#fff;background:linear-gradient(135deg,var(--ob-azul) 0%,var(--ob-azul-oscuro) 100%);}
.ob-profe-modal__foto{width:130px;height:130px;border-radius:50%;flex:0 0 130px;overflow:hidden;
  background:var(--ob-azul-claro);display:flex;align-items:center;justify-content:center;
  color:#08465C;font-family:var(--ob-font-tit);font-weight:800;font-size:2.5rem;
  border:4px solid rgba(255,255,255,.9);box-shadow:0 10px 28px rgba(0,0,0,.28);}
.ob-profe-modal__foto img{width:100%;height:100%;object-fit:cover;}
.ob-profe-modal__intro{min-width:0;}
.ob-profe-modal__intro h3{margin:0 0 10px;font-size:1.8rem;color:#fff;line-height:1.1;}
.ob-profe-modal__esp{display:inline-block;background:var(--ob-pistacho);color:var(--ob-pistacho-texto);
  font-family:var(--ob-font-tit);font-weight:700;font-size:.82rem;padding:5px 15px;border-radius:999px;}
.ob-profe-modal__meta{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;}
.ob-profe-modal__chip{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.16);
  color:#fff;font-size:.82rem;padding:6px 13px;border-radius:999px;}
.ob-profe-modal__chip svg{fill:currentColor;}

/* Cuerpo */
.ob-profe-modal__body{padding:30px 38px 36px;}
.ob-profe-modal__desc{color:var(--ob-gris);font-size:1.02rem;line-height:1.7;margin:0;}

/* Bloque horario semanal */
.ob-profe-horario{margin-top:26px;}
.ob-profe-horario__tit{display:flex;align-items:center;gap:9px;font-family:var(--ob-font-tit);
  font-weight:800;font-size:1.15rem;margin:0 0 16px;color:var(--ob-carbon);}
.ob-profe-horario__tit svg{fill:var(--ob-azul);flex:0 0 auto;}
.ob-tt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ob-tt{display:grid;min-width:100%;border:1px solid var(--ob-borde);border-radius:12px;overflow:hidden;background:#fff;}
.ob-tt__corner{grid-column:1;grid-row:1;background:var(--ob-azul);}
.ob-tt__dia{grid-row:1;background:var(--ob-azul);color:#fff;font-family:var(--ob-font-tit);font-weight:800;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.03em;text-align:center;padding:8px 4px;
  border-left:1px solid rgba(255,255,255,.18);}
.ob-tt__hora{grid-column:1;font-size:.66rem;color:var(--ob-gris);text-align:right;padding:1px 7px 0 3px;
  border-top:1px solid var(--ob-borde);background:#F7FAFB;line-height:1;}
.ob-tt__cell{border-top:1px solid var(--ob-borde);border-left:1px solid var(--ob-borde);}
.ob-tt__sesion{margin:2px;background:var(--ob-azul-claro);border:1px solid var(--ob-azul);
  border-left:3px solid var(--ob-pistacho-oscuro);border-radius:7px;padding:4px 7px;overflow:hidden;
  display:flex;flex-direction:column;gap:1px;z-index:2;min-height:0;}
.ob-tt__hora2{font-family:var(--ob-font-tit);font-weight:700;color:var(--ob-azul-oscuro);font-size:.68rem;line-height:1.1;}
.ob-tt__mat{color:var(--ob-carbon);font-size:.76rem;font-weight:600;line-height:1.15;}

/* Bloque de horario por centro */
.ob-profe-horario+.ob-profe-horario{margin-top:24px;}

/* Agenda (móvil): lista por días */
.ob-agenda{display:none;list-style:none;margin:0;padding:0;}
.ob-agenda__grupo{border:1px solid var(--ob-borde);border-radius:10px;overflow:hidden;margin-bottom:10px;}
.ob-agenda__dia{display:block;font-family:var(--ob-font-tit);font-weight:800;font-size:.78rem;color:#fff;
  background:var(--ob-azul);padding:7px 12px;text-transform:uppercase;letter-spacing:.03em;}
.ob-agenda__sesion{padding:9px 12px;border-left:3px solid var(--ob-pistacho-oscuro);}
.ob-agenda__sesion+.ob-agenda__sesion{border-top:1px solid var(--ob-borde);}
.ob-agenda__hora{font-family:var(--ob-font-tit);font-weight:700;color:var(--ob-azul);font-size:.82rem;margin-right:6px;}
.ob-agenda__mat{color:var(--ob-carbon);font-size:.9rem;}

@media(max-width:620px){
  .ob-modal{padding:28px 16px;}
  .ob-modal__dialog{max-height:calc(100vh - 130px);}
  .ob-profe-modal__head{flex-direction:column;text-align:center;padding:30px 22px;}
  .ob-profe-modal__meta{justify-content:center;}
  .ob-profe-modal__body{padding:24px 20px 28px;}
  /* En móvil: oculta la rejilla y muestra la agenda */
  .ob-tt-scroll{display:none;}
  .ob-agenda{display:block;}
}