@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');

#MenuFixed {
    display: none !important;
}

/*==================================================
=            Variables
==================================================*/

:root{

    --dnd-bg:#F8F6F3;
    --dnd-text:#2D383B;
    --dnd-border:#E7E3DD;
    --dnd-light:#FBFBFB;
    --dnd-primary:#D83A34;
    --dnd-titles: #191919;
    --space-root: 1rem;
    --space-xs: calc(var(--space-root) / 2);
    --space-s: calc(var(--space-root) / 1.5);
    --space-m: var(--space-root);
    --space-l: calc(var(--space-root) * 1.5);
    --space-xl: calc(var(--space-root) * 1.7);
    --color-primary: #F63833;
    --color-secondary: black;
    --base-border-radius: 0.25rem;
    --ease: cubic-bezier(0.075, 0.82, 0.165, 1);
    --duration: 350ms;

}


/*==================================================
=            Layout
==================================================*/


.dnd-resources-wrapper{
	background: #fdfaf6;
}

.dnd-resource-grid{
    display:flex;
    gap:60px;
    align-items:flex-start;
}

.dnd-sidebar{
    width:200px;
    flex-shrink:0;
}

.dnd-main{
    flex:1;
    min-width:0;
}


/*==================================================
=            Sidebar Header
==================================================*/

.dnd-sidebar-header{
    margin-bottom:35px;
}

.dnd-checkbox{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:18px;
    color:var(--dnd-text);
    cursor:pointer;
}


/*==================================================
=            Checkbox personalizado
==================================================*/

.dnd-checkbox input,
.dnd-filter-option input{

    appearance:none;
    -webkit-appearance:none;

    width:22px;
    height:22px;

    border:2px solid #D8D8D8;
    border-radius:6px;

    background:#FFF;

    cursor:pointer;

    position:relative;

    transition:.2s;

}

.dnd-checkbox input:hover,
.dnd-filter-option input:hover{

    border-color:#888;

}

.dnd-checkbox input:checked,
.dnd-filter-option input:checked{

    background:#4A5568;
    border-color:#4A5568;

}

.dnd-checkbox input:checked::after,
.dnd-filter-option input:checked::after{

    content:"";

    position:absolute;

    width:5px;
    height:10px;

    border:solid #FFF;
    border-width:0 2px 2px 0;

    left:7px;
    top:2px;

    transform:rotate(45deg);

}


/*==================================================
=            Filtros
==================================================*/

.dnd-filter{

    margin-bottom:32px;

}

.dnd-filter-title{

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
    cursor:pointer;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:3px;
    color:#232323;
    user-select:none;
    font-family: "Fraunces", serif;
}

.dnd-filter-title span:last-child{

    font-size:14px;
    transition:.25s;

}


/*==================================================
=            Collapse
==================================================*/

.dnd-filter-body{

    display:flex;
    flex-direction:column;
    gap:16px;

}

.dnd-filter.closed .dnd-filter-body{

    display:none;

}

.dnd-filter.closed .dnd-filter-title span:last-child{

    transform:rotate(-90deg);

}


/*==================================================
=            Opciones
==================================================*/

.dnd-filter-option{

    display:flex;
    align-items:center;
    gap:12px;
    cursor:pointer;
    font-size:17px;
    color: var(--dnd-titles);
}

.dnd-filter-option span{
    line-height:1.2;
}


/*==================================================
=            Buscador
==================================================*/

.dnd-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:0;
    padding-top:25px;
    margin-bottom:45px;
}

.dnd-page-title{
	display: flex;
	align-items: center;
	min-width: 500px;
}
.dnd-page-title h2 {
	font-size: 50px;
	line-height: 60px;
	font-weight: 600;
	margin:0;
	margin-left: 14px;
	color: var(--dnd-titles);
	font-family: "Fraunces", serif;
}


#dnd-search:focus{
    border-color:#999;
}

#dnd-search{
	width:350px;
    max-width:100%;
	border: 1px solid #A0A1A4;
	border-radius: 10px;
	height: 40px;
	outline:none;
    transition:.2s;
}

/*==================================================
=            Toolbar
==================================================*/

.dnd-toolbar{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:28px;

}

#dnd-clear-filters{
    color: #D02927;
    text-decoration:none;z
    font-size:16px;
}

#dnd-active-filters{
    margin-left:5px;
}

.dnd-counter{
    font-size:16px;
    color:#222;
}

#dnd-counter{
    font-weight:700;
}

.dnd-resource-card-link {
    color: inherit !important;
    text-decoration: none !important;
}


.dnd-card {
  height: 206px;
  display: flex;
  border: 1px solid #E6E6EB;
  border-bottom: 1px solid #455365;
  margin-bottom: 24px;
  background: #fff;
}

.dnd-card-content {
  flex: 1;
  padding: 12px 18px 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


.dnd-card-content p {
	overflow: hidden;
  	display: -webkit-box;
  	-webkit-box-orient: vertical;
  	-webkit-line-clamp: 3;
    margin: 0;
}

.dnd-card-content h2 {
	font-family: "Fraunces", serif;
	font-size: 20px;
	font-weight: 600;
	color:var(--dnd-text);
	margin-top: 0;
	margin-bottom: 8px;
}

.dnd-card-image {
  width: 300px;
  flex-shrink: 0;
}

.dnd-card-image img {
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

.dnd-card-side {
  width: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-left: 1px solid #E6E6EB;
}

.dnd-views{
	display: flex;
  flex-direction: column;
  align-items: center;
}

.dnd-lock {
	padding-top: 16px;
}

.dnd-favorite {
   overflow: visible !important;
}  

/* Corazón vacío (estado normal) */
.dnd-favorite .heart {
    fill: #8E8E93; /* Color gris por defecto */
    transition: fill 0.3s ease;
}

/* Corazón lleno (activo) */
.dnd-favorite.active .heart {
    fill: #F63833; /* Rojo cuando está activo */
}

/* Hover en el contenedor cambia el corazón */
.dnd-favorite:hover .heart {
    fill: #F63833;
}

/* Active (click) en el contenedor */
.dnd-favorite:active .heart {
    fill: #F63833;
    transform: scale(0.9); /* Efecto de click */
}

/*círculo también cambie en hover */
.dnd-favorite.active circle, .dnd-favorite:hover circle {
    stroke: #F63833;
}

/* hover */
.dnd-favorite:hover, #dnd-clear-filters:hover {
    cursor: pointer;
}

/* Transición suave para todo */
.dnd-favorite * {
    transition: all 0.3s ease;
}

.dnd-tags {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dnd-tag {
  padding: 6px 12px;
  font-size: 12px;
  background: #f0f0f0;
}

.eje-tematico {
	background: #E4C852;
}

.tipo-actividad {
	background: #E8C5C9;
}

.competencia {
	background: #97D3B2;
}

.destinatario {
	background: #F63833;
	color: #fff;
}

.loading {
  opacity: 0.4;
  pointer-events: none;
}

/*==================================================
=            Loader
==================================================*/

#compass-arrow {
    animation: compass-spin 2s linear infinite;
}

@keyframes compass-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/*==================================================
=            login
==================================================*/
#greenOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(149, 207, 162, 0.6);
  z-index: 9998;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(2px);
}

/* Contenido del modal (para que se vea nítido) */
.modal-contenido {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  z-index: 9999;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.modal-contenido input {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 8px;
  box-sizing: border-box;
}

.modal-contenido button {
  margin-top: 10px;
  padding: 8px 20px;
}


/* Estilos del formulario */

.form h2 {
    font-size: 30px;
    font-weight: 600;
    color: var(--dnd-titles);
    font-family: "Fraunces", serif;
}

.form a {
    color: #F63833 !important;
}

.form {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  transform: skewY(-5deg) translateY(10%) scale(0.94);
  transition: 
    box-shadow var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

.form::before,
.form::after {
  content: '';
  position: absolute;
  pointer-events: none;
  background-color: #ebebeb; /* darken(white, 8%) */
  width: 25%;
  height: 100%;
  transition: 
    background-color var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

.form::before {
  top: 0;
  right: calc(100%);
  transform-origin: 100% 100%;
  transform: skewY(-35deg) scaleX(-1);
  z-index: -1;
  background: #97D3B2;
}

.form::after {
  top: 0;
  left: calc(100%);
  transform-origin: 0 0;
  transform: skewY(-35deg) scaleX(-1);
  z-index: 2;
  background: #E4C852;
}

.form:hover,
.form:focus-within {
  transform: scale(1.0001);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
}

.form:hover::before,
.form:hover::after,
.form:focus-within::before,
.form:focus-within::after {
  background-color: #ffffff;
  transform: skewY(0);
}

/* Inner del formulario */
.form-inner {
  padding: var(--space-xl);
  background-color: #ffffff;
  z-index: 1;
}

.form-inner > * + * {
  margin-top: var(--space-xl);
}

/* Wrapper de inputs */

.input-wrapper:focus-within .icon {
    /* background-color: #F63833;*/
}

.input-wrapper:focus-within input {
    /* border-color: #F63833;*/
}

.input-wrapper + .input-wrapper {
  margin-top: var(--space-l);
}

/* Grupo de input */
.input-group {
  position: relative;
}

.form .input-group input {
  border-radius: 10px !important;
  padding-left: 50px !important;
}

.input-group .icon {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  pointer-events: none;
}


/* Iconos */
.icon {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #A0A1A4;
  border-right-color: #E8E8EC;
}

.icon svg {
  width: 1rem
  height: 1rem;
  pointer-events: none;
  user-select: none;
  transition: transform var(--duration) var(--ease);
}

/* Inputs */
.form input {
  flex: 1 1 0;
  width: 100%;
  outline: none;
  padding: var(--space-m);
  font-size: 18px !important;
  border: 1px solid #A0A1A4 !important;
  border-radius: 10px !important;
  background-color: #ffffff;
  box-sizing: border-box;
}

.fom input:focus {
    /* color: var(--color-primary);*/
}

/* Grupo de botones */
.btn-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-group > * + * {
  margin-left: var(--space-s);
}

/* Botones */
.btn {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 30px;
  border: 1px solid #A0A1A4;
  border-radius: 0;
  font-size: 19px;
  transition: all var(--duration) var(--ease);
  font-family: 'Gochi Hand', serif;
}

.btn--primary {
  background-color:#F63833 !important;
  border-color: #F63833 !important;
  color: #ffffff;
}

/*.btn--primary:focus {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn--primary:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(149, 207, 162, 0.4);
}*/


.cerrar-modal, .cerrar-modal:active, .cerrar-modal:hover, .cerrar-modal:focus {
    background-color:#fff !important;
    border-color: #A0A1A4 !important;
    color: #A0A1A4;
}


/* Responsive */
@media (max-width: 480px) {
  .form {
    transform: skewY(0) translateY(0) scale(1);
    max-width: 100%;
    margin: 0 10px;
  }
  
  .form::before,
  .form::after {
    display: none;
  }
  
  .form-inner {
    padding: var(--space-l);
  }
  
  .btn-group {
    flex-direction: column;
    gap: 10px;
  }
  
  .btn-group > * + * {
    margin-left: 0;
  }
  
  .btn--text {
    font-size: var(--font-size);
  }
}


/*==================================================
=            Responsive
==================================================*/

@media(max-width:1100px){

    .dnd-resource-grid{

        flex-direction:column;

        gap:30px;

    }

    .dnd-sidebar{

        width:100%;

    }

    .dnd-header{

        flex-direction:column;
        align-items:flex-start;
        gap:25px;

    }

    #dnd-search{

        width:100%;

    }

}