:root { 
    --brand:#0d0d55; 
    --accent:#00b894; 
}


.background-modum{
    background: var(--brand)!important;
    border-color: var(--brand)!important;
    color: white!important;
}



.label_require_field{
    background: #ffa700;
    color: black;
    padding: 5px;
    border-radius: 10px;
    position: absolute;
    margin-top: 8px;
    margin-left: 2px;
    opacity: .9;
    z-index: 10;
}


.label_error_format{
    background: #ff6100;    
    color: white;
    padding: 5px;
    border-radius: 10px;
    position: absolute;
    margin-top: -37px;
    margin-left: -2px;
    opacity: .9;
    z-index: 10;
}


.circle-icon-survey{
    font-size: 50px!important;
    background: #e5e5e5!important;
    padding: 10px!important;
    border-radius: 50%!important;
    border: 2px solid #979797!important;
}


:root { 
    --brand:#0d0d55; 
    --accent:#00b894; 
}

body{ 
    font-optical-sizing:auto; 
    padding-top: 72px;
}


.btn-brand{ 
    background:var(--brand)!important; 
    color:#fff!important; 
}

.btn-brand:hover{
    background:#5a3edd!important; 
    color:#fff!important; 
}

.text-brand{ 
    color:var(--brand)!important; 
}

.hero{ 
}

.shadow-soft{ 
    box-shadow:0 10px 30px rgba(0,0,0,.08); 
}

.shadow-container{
    background: rgba(255, 255, 255, .78);
    padding: 25px;
    border-radius: 25px;
    margin-top: 55px !important;
}

.badge-soft{ 
    background:rgba(107,78,230,.12);
    color:var(--brand)!important; 
 }

 .badge-light{ 
    background:rgba(236, 240, 241,0.15);
    color:#ffffff; 
 }

.price{ 
    font-size:clamp(28px,4vw,40px); 
    font-weight:700; 
}

.sticky-cta{ 
    position:fixed; 
    bottom:16px; 
    right:16px; 
    z-index:1050; 
}

.logo{
    height:38px; 
}

.lead-bullets li{ 
    margin:.35rem 0; 
}
.feature i{ 
    font-size:24px; 
}

.nav-link{ 
    font-weight:500; 
}

.faq summary{ 
    cursor:pointer; 
}

.main-section {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../img/background-c.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; /* hace que ocupe todo el espacio */
}

.ri-class{
    color: var(--brand);
    font-size: 1.65rem;

}

.btn-bounce {
  display: inline-block;
  animation: bounce 3s ease infinite;
  animation-delay: 0s;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-fill-mode: both;
  animation-play-state: running;
  animation-direction: normal;
  animation-delay: 5s;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}


.cards-colors{
    color: white!important;
   
}

#testimonios blockquote { font-size: 1.05rem; line-height: 1.6; }

.profile-photo{ 
    width:100%; 
    max-width:300px; 
    height:300px; 
    object-fit:cover; 
    border-radius:50%; 
}

.profile-card{ 
    position:sticky; 
    top:92px; 
}

/* Timeline */
.timeline{ 
    position:relative; 
    padding-left:.5rem; 
}

.timeline::before{ 
    content:""; 
    position:absolute; 
    left:10px; 
    top:0; 
    bottom:0; 
    width:2px; 
    background:#e5e7eb; 
}

.tl-item{ 
    position:relative; 
    margin-bottom:1.25rem; 
}

.tl-item::before{
  content:""; 
  position:absolute; 
  left:-4px; 
  top:.35rem; 
  width:14px; 
  height:14px;
  background:#fff; 
  border:3px solid var(--brand); 
  border-radius:50%;
}

.tl-card{ 
    margin-left:1.25rem; 
}
#equipo .card-body{ min-height: 100%; }
#equipo img{ width:160px; height:160px; object-fit:cover; }

.super-title{
    font-size: 3.6em;
    color: #2d3436;
}

.box-shadow-img{
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.36));
}

/* Contenedor del calendario */
/* Grilla estable */
#bs-datepicker-inline table{
  width:100%;
  table-layout:fixed;               /* 7 columnas iguales */
  color: black!important;
  cursor: pointer;
}
#bs-datepicker-inline th,
#bs-datepicker-inline td{ width:14.285%; padding:.35rem 0; text-align:center; }

/* Círculo centrado sin afectar el layout */

/* círculo detrás del texto */
#bs-datepicker-inline td.day{ position:relative; z-index:0; }
#bs-datepicker-inline td.day::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:32px; height:32px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:transparent;
  pointer-events:none;
  z-index:-1;               /* clave: detrás del número */
}

/* activo */
#bs-datepicker-inline td.day.active::before{ background:var(--brand) !important; }
#bs-datepicker-inline td.day.active{ color:#fff !important; }

/* no disponibles */
#bs-datepicker-inline td.day.disabled::before{ background:#bdc3c7 !important; }
#bs-datepicker-inline td.day.disabled{ color:white !important; cursor:not-allowed; }

.oculto {
    display: none!important;
}
.mostrar {
    display: block!important;
}

.handle { cursor: grab; user-select:none; }
li.dragging { opacity:.6 }


.shake {
    /* Deshabilitar clics durante la animación (opcional) */
    pointer-events: none; 
    /* Aplicar la animación */
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    /* Evita que el elemento se mueva fuera del flujo normal */
    transform: translate3d(0, 0, 0); 
    /* El origen de la animación debe ser 0 0 */
    backface-visibility: hidden; 
}

/* Definición de los fotogramas clave */
@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    
    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }
    
    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }
    
    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}



/* ===== Wordmark de marca (reemplazo del logo) ===== */
.brand-wordmark{
    display: inline-block;
    text-decoration: none;
    line-height: 1.05;
    color: var(--brand);
}

.brand-wordmark .brand-wordmark__eyebrow{
    display: block;
    font-size: .42em;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .35em;
}

.brand-wordmark .brand-wordmark__name{
    display: block;
    font-weight: 800;
    letter-spacing: -.02em;
    text-transform: uppercase;
}

.brand-wordmark .brand-wordmark__name span{
    color: var(--accent);
}

.brand-wordmark .brand-wordmark__rule{
    display: block;
    width: 48px;
    height: 3px;
    margin: .6em auto 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
}

.brand-wordmark--hero{ font-size: clamp(2rem, 5vw, 3.6rem); }
.brand-wordmark--md{ font-size: 1.75rem; }
.brand-wordmark--sm{ font-size: 1.05rem; }

a.brand-wordmark:hover .brand-wordmark__name{ opacity: .85; }

/* ---------------------------------------------------------------------------
   Logotipo de la escuela (escuelas.id_logotipo)

   Cada escuela sube el suyo desde "Mi escuela", así que no sabemos si llega
   horizontal, cuadrado o con fondo: la regla es CABER SIN DEFORMARSE. Por eso
   se acota por max-width y max-height a la vez y se usa object-fit: contain,
   nunca width/height fijos ni cover (que recortaría el logo).
   --------------------------------------------------------------------------- */
.escuela-logo{
    display: block;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Menú lateral: la franja .app-brand mide 64px de alto (demo.css) y comparte
   renglón con el botón de colapsar, de ahí los 48px x 170px. */
.escuela-logo--menu{
    max-height: 48px;
    max-width: 170px;
    transition: max-width .3s ease-in-out;
}

/* Menú colapsado (solo escritorio, igual que el template): la franja se
   angosta a 4.375rem, así que el logo baja al ancho de un ícono y vuelve a su
   tamaño al pasar el mouse, cuando el menú se despliega. */
@media (min-width: 1200px){
    .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu .escuela-logo--menu{
        max-width: 2.375rem;
    }
}

/* Tarjeta de bienvenida del dashboard (views/index.php). Aquí el logo es el
   protagonista: un logo horizontal llega a 440px de ancho y uno cuadrado se
   frena en los 140px de alto, para que no empuje el saludo fuera de la
   tarjeta. El 100% lo encoge en celular. */
.escuela-logo--bienvenida{
    max-height: 140px;
    max-width: min(100%, 440px);
}

/* ---------------------------------------------------------------------------
   Calendario escolar (views/calendario-dias.php)

   Rejilla de siete columnas arrancando en lunes, igual que el SET dias_semana
   de la base.

   El principio del diseno: UN DIA NORMAL DE CLASES NO DICE NADA. Solo su
   numero. Escribir "Dia de clases / Alumnos / Personal" en las veintitantas
   celdas lectivas del mes convierte el calendario en una lista de registros
   acomodada en columnas: el ojo tiene que leer para encontrar la excepcion, que
   es justo lo unico que importa aqui.

   Asi, lo que resalta es lo que se sale de la norma: el festivo, el consejo
   tecnico, el puente. El resto es fondo.
   --------------------------------------------------------------------------- */

.cta-cal-grid{
    display: grid;
    grid-template-columns: repeat(7, minmax(96px, 1fr));
    gap: 4px;
    min-width: 700px;
}

.cta-cal-head{
    text-align: center;
    font-weight: 600;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 4px 0 6px;
    color: var(--bs-secondary-color);
}

.cta-cal-dia{
    --cta-tint: transparent;
    position: relative;
    min-height: 78px;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    padding: 6px 8px 8px;
    cursor: pointer;
    background: var(--cta-tint);
    transition: box-shadow .15s ease, transform .15s ease;
    overflow: hidden;
}

.cta-cal-dia:hover{
    box-shadow: 0 3px 12px rgba(0,0,0,.14);
    transform: translateY(-1px);
    z-index: 1;
}

/* El numero es el elemento principal de la celda. */
.cta-cal-num{
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.1;
}

/* Punto del color del tipo de dia. Solo aparece cuando el dia se sale de la
   norma: en un dia de clases normal seria un adorno repetido 22 veces. */
.cta-cal-punto{
    position: absolute;
    top: 9px;
    right: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.cta-cal-tipo{
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 3px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.cta-cal-motivo{
    font-size: .68rem;
    line-height: 1.2;
    margin-top: 2px;
    color: var(--bs-secondary-color);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Marca discreta para el dia que el personal labora sin alumnos. Es la
   distincion que justifica las dos banderas de la base, asi que tiene que
   verse, pero sin gritar. */
.cta-cal-solo-personal{
    display: inline-block;
    margin-top: 4px;
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: .1em .4em;
    border-radius: 4px;
    background: rgba(3,195,236,.16);
    color: #0091ae;
}

/* Fin de semana o dia que la regla del ciclo deja fuera: se apaga y calla.
   No es una excepcion que revisar, es el fondo del calendario. */
.cta-cal-dia--libre{
    background: var(--bs-tertiary-bg);
    border-color: transparent;
}

.cta-cal-dia--libre .cta-cal-num{
    font-weight: 500;
    opacity: .45;
}

/* Fecha fuera del ciclo, o hueco antes del dia 1. */
.cta-cal-vacio,
.cta-cal-fuera{
    cursor: default;
    border: 1px dashed var(--bs-border-color);
    border-radius: 8px;
    background: transparent;
}

.cta-cal-vacio:hover,
.cta-cal-fuera:hover{
    box-shadow: none;
    transform: none;
}

.cta-cal-fuera{ padding: 6px 8px; }
.cta-cal-fuera .cta-cal-num{ font-weight: 500; opacity: .25; }

.cta-cal-hoy{
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

.cta-cal-hoy .cta-cal-num{
    color: var(--bs-primary);
    opacity: 1;
}

/* Leyenda: el unico lugar donde se escribe el nombre de cada tipo. */
.cta-cal-leyenda{
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.1rem;
    align-items: center;
}

.cta-cal-leyenda span.cta-cal-leyenda-item{
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
}

.cta-cal-leyenda i.cta-cal-leyenda-punto{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* ---------------------------------------------------------------------------
   Dashboard (views/index.php)

   El calendario de aquí NO es el de calendario-dias.php: aquel es la
   herramienta para editar días; este es para leer el mes de un vistazo. Por
   eso lleva sus propias clases (dash-*) y no reusa cta-cal-*: un cambio en la
   pantalla de edición no debe mover el dashboard, ni al revés.

   Igual que allá, el principio es que UN DÍA DE CLASES NORMAL NO DICE NADA:
   solo su número. El color y el texto se reservan para lo que se sale de la
   norma, y cada tipo trae su color del catálogo en la variable --tipo.
   --------------------------------------------------------------------------- */

.dash-etiqueta{
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.dash-stat{
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
}
.dash-stat:has(.stretched-link):hover{
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1.25rem rgba(38, 43, 67, .12);
}
.dash-stat__valor{
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-heading-color);
}

.dash-progreso{
    height: .65rem;
    border-radius: 1rem;
    background: var(--bs-tertiary-bg);
}
.dash-progreso .progress-bar{
    border-radius: 1rem;
    background: var(--accent);
}

/* ----- La rejilla del mes ----- */
.dash-cal{
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .5rem;
}

.dash-cal__head{
    text-align: center;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    padding-bottom: .25rem;
}
.dash-cal__head--fin{ opacity: .6; }

.dash-cal__dia{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-height: 5.75rem;
    padding: .5rem .6rem;
    border-radius: .75rem;
    border: 1px solid var(--bs-border-color);
    background: #fff;
    overflow: hidden;
}

.dash-cal__cabeza{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .25rem;
}

.dash-cal__num{
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
    color: var(--bs-heading-color);
}

/* Fin de semana: el fondo del calendario, no una excepción. */
.dash-cal__dia--libre{
    background: var(--bs-tertiary-bg);
    border-color: transparent;
}
.dash-cal__dia--libre .dash-cal__num{
    color: var(--bs-secondary-color);
    font-weight: 500;
}

/* Fecha sin renglón en calendario_dias: fuera del ciclo o sin generar. */
.dash-cal__dia--fuera{
    background: transparent;
    border-style: dashed;
}
.dash-cal__dia--fuera .dash-cal__num{
    color: var(--bs-secondary-color);
    font-weight: 400;
}

/* La excepción: la celda se tiñe con el color de su tipo y lleva una franja
   sólida a la izquierda, que es lo que el ojo encuentra primero. */
.dash-cal__dia--actividad{
    background: color-mix(in srgb, var(--tipo) 13%, #fff);
    border-color: color-mix(in srgb, var(--tipo) 45%, #fff);
    padding-left: .85rem;
}
.dash-cal__dia--actividad::before{
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--tipo);
}
.dash-cal__dia--actividad .dash-cal__num{
    color: color-mix(in srgb, var(--tipo) 65%, #1f1f2e);
}

.dash-cal__tipo,
.dash-cal__motivo{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 1.2;
}
.dash-cal__tipo{
    font-size: .74rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--tipo) 60%, #1f1f2e);
}
.dash-cal__motivo{
    font-size: .7rem;
    color: var(--bs-body-color);
}

/* Lo que ya pasó se aparta, sin desaparecer. */
.dash-cal__dia--pasado{ opacity: .5; }

.dash-cal__dia--hoy{
    border: 2px solid var(--brand);
    box-shadow: 0 0 0 4px rgba(13, 13, 85, .1);
}
.dash-cal__hoy{
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .15rem .45rem;
    border-radius: 1rem;
    background: var(--brand);
    color: #fff;
}

/* ----- Leyenda ----- */
.dash-leyenda{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    font-size: .8rem;
}
.dash-leyenda__item{
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.dash-leyenda__muestra{
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--tipo) 13%, #fff);
    border: 1px solid color-mix(in srgb, var(--tipo) 45%, #fff);
    box-shadow: inset 3px 0 0 var(--tipo);
}
.dash-leyenda__muestra--clases{
    background: #fff;
    border-color: var(--bs-border-color);
    box-shadow: none;
}
.dash-leyenda__muestra--libre{
    background: var(--bs-tertiary-bg);
    border-color: transparent;
    box-shadow: none;
}
.dash-leyenda__muestra--hoy{
    background: #fff;
    border: 2px solid var(--brand);
    box-shadow: none;
}

/* ----- Actividades del mes (el calendario leído en renglones) ----- */
.dash-act{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.dash-act__item{
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: .8rem .9rem;
    border-radius: .75rem;
    border-left: 5px solid var(--tipo);
    background: color-mix(in srgb, var(--tipo) 9%, #fff);
}
.dash-act__item--pasado{ opacity: .55; }
.dash-act__item--hoy{ box-shadow: 0 0 0 2px var(--brand); }

.dash-act__fecha{
    flex: 0 0 3.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.dash-act__dia{
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: color-mix(in srgb, var(--tipo) 65%, #1f1f2e);
}
.dash-act__dia--rango{
    font-size: 1.1rem;
    white-space: nowrap;
}
.dash-act__semana{
    margin-top: .2rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

.dash-act__cuerpo{
    flex: 1 1 auto;
    min-width: 0;
}
.dash-act__tipo{
    font-weight: 600;
    color: var(--bs-heading-color);
}
.dash-act__cuando{
    flex-shrink: 0;
    font-size: .72rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}
.dash-act__item--hoy .dash-act__cuando,
.dash-act__item--proximo .dash-act__cuando{
    color: var(--brand);
}
.dash-act__motivo{
    font-size: .85rem;
    color: var(--bs-body-color);
    margin-top: .15rem;
}

.dash-act-vacio{
    text-align: center;
    padding: 2rem 1rem;
    border-radius: .75rem;
    background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color);
}
.dash-act-vacio i{
    display: block;
    font-size: 2rem;
    margin-bottom: .5rem;
}

/* En celular la celda no alcanza para texto: queda el número y la franja de
   color. El detalle completo está en la lista de actividades, justo debajo. */
@media (max-width: 575.98px){
    .dash-cal{ gap: .25rem; }
    .dash-cal__dia{
        min-height: 2.9rem;
        padding: .35rem;
        border-radius: .5rem;
        align-items: center;
    }
    .dash-cal__dia--actividad{ padding-left: .35rem; }
    .dash-cal__dia--actividad::before{ width: 4px; }
    .dash-cal__tipo,
    .dash-cal__motivo,
    .dash-cal__hoy{ display: none; }
    .dash-cal__num{ font-size: .95rem; }
    .dash-cal__head{ font-size: .65rem; letter-spacing: 0; }
}

/* Buscador del menú lateral (components/left-menu.php). Con el menú colapsado
   la franja solo mide un ícono de ancho: el buscador se esconde y vuelve al
   pasar el mouse, cuando el menú se despliega. */
@media (min-width: 1200px){
    .layout-menu-collapsed:not(.layout-menu-hover):not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-menu .menu-buscador{
        display: none;
    }
}