/* ============================================== */
/* ROOT */
/* ============================================== */

:root{

/*-- Color  --*/

  --color-pri:    #E4022C; /* red */ 
  --color-sec:    #DCA635; /* yellow */ 
  --color-ter:    #00B451; /* green */ 
  --color-com:    #4F90E6; /* blue */

  --color-bla:    #0F1417; /* black */ 
  --color-blu:    #96B1D1; /* blue */
  --color-gre:    #182126; /* grey */
  --color-sky:    #EDF3FA; /* blue sky */ 
  --color-lig:    #F7F9FC; /* blue light */ 
  --color-tex:    #616161; /* text */ 
  --color-tit:    #2C3E2C; /* titles */ 

  --color-pri-h:  #F53357;
  --color-sec-h:  #F6C256;
  --color-ter-h:  #19D36D;
  --color-com-h:  #78B2FF;

  --color-blu-h:  #7296C1;
  --color-footer: #6A888C;

/*-- Font Family --*/

  --f-family-h: "Poppins", serif;
  --f-family:   "Inter", sans-serif;

/*-- Font Size --*/

  --fs-base:    1rem;
  --lh-base:    1.5;

}

/* ============================================== */
/* COLOR */
/* ============================================== */

.c-pri  {  background:var(--color-pri);  }
.c-sec  {  background:var(--color-sec);  }
.c-ter  {  background:var(--color-ter);  }

.c-bla  {  background:var(--color-bla);  }
.c-gre  {  background:var(--color-gre);  }
.c-blu  {  background:var(--color-blu);  }
.c-sky  {  background:var(--color-sky);  }
.c-lig  {  background:var(--color-lig);  }

.tc-tex {  color:var(--color-tex);       }
.tc-tit {  color:var(--color-tit);       }
.tc-pri {  color:var(--color-pri);       }
.tc-sec {  color:var(--color-sec);       }
.tc-ter {  color:var(--color-ter);       }
.tc-0   {  color:var(--color-0);         }
.tc-footer {  color:var(--color-footer); }

/* ============================================== */
/* TEXT */
/* ============================================== */

h1,h2,h3,h4,h5,h6    {  color: var(--color-tit);  }
p,li                 {  color: var(--color-tex);  }
a                    {  color: var(--color-100);  }

p,h1,h2,h3,h4,h5,h6  {  margin:10px 0;  }

p,li,a,body,pre,label{  font-weight: 400;  }
h1,h2,h3,h4,h5,h6    {  font-weight: 600;  }
b                    {  font-weight: 600;  }


@media only screen and (max-width: 768px){
  h1{
    font-size: 1.2rem;
  }
}

/* ============================================== */
/* ALERTS */
/* ============================================== */

.alert-empty,
.alert-send{
  width: 100%;
  text-align: center;
  padding: 10px 20px;
  border-radius: 5px;
  background: var(--color-5);
}

.alert{
  width: auto;
  padding: 15px 20px;
  position: fixed;
  text-align: center;
  z-index: 999;
  top: 75px;
  right: 25px;
  border-radius: 10px;

  pointer-events: none;
  opacity: 0;
  transform: translateX(150%);
}

/* Texto */
.alert p,
.alert-send p{
  font-weight: 600;
  margin: 0;
}

/* WARNING */
.alert.alert-warning,
.alert-send.alert-warning{
  background: #FFCCCC;
  border: 1px solid #F7A7A7;
}

.alert.alert-warning p,
.alert-send.alert-warning p{
  color: #4F2222;
}

/* SUCCESS */
.alert.alert-success,
.alert-send.alert-success{
  background: #A3EF97;
  border: 1px solid #7FD072;
}

.alert.alert-success p,
.alert-send.alert-success p{
  color: #284F22;
}

/* Mostrar */
.show{
  pointer-events: all;
  animation: show 5s forwards;
}

/* Animación desktop */
@keyframes show{
  0%   { transform: translateX(150%); opacity: 0; }
  10%  { transform: translateX(0); opacity: 1; }
  90%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(150%); opacity: 0; }
}

/* Responsive */
@media screen and (max-width: 1080px){

  .alert{
    left: 50%;
    right: auto;
    top: 80px;
    width: 95%;
    transform: translateX(-50%) translateY(-20px);
  }

  @keyframes show{
    0%   { transform: translateX(-50%) translateY(-20px); opacity: 0; }
    10%  { transform: translateX(-50%) translateY(0); opacity: 1; }
    90%  { transform: translateX(-50%) translateY(0); opacity: 1; }
    100% { transform: translateX(-50%) translateY(-20px); opacity: 0; }
  }

}

/* ============================================== */
/* PROGRESO */
/* ============================================== */

.progress-wrapper {
    position: relative;
    width: 100%;
    margin-top: 20px;
}

.progress-dates{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.progress-start,
.progress-end {
  font-size: 0.85rem;
}

.progress-start { left: 0; }
.progress-end { right: 0; }

.progress-container {
  width: 100%;
  display: block;
  background-color: var(--color-blu);
  border-radius: 10px;
  overflow: hidden;
  height: 25px;
  position: relative;
  margin-right: 10px;
}

.progress-bar {
  width: var(--progress);
  height: 100%;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition: width 1s ease-in-out;

  /* Rayas diagonales */
  background: repeating-linear-gradient(
    45deg,          /* ángulo diagonal */
    #1EC04C,        /* color principal */
    #1EC04C 10px,
    #9bf673 10px,
    #9bf673 20px
  );

  /* Animación de movimiento */
  background-size: 56px 56px;
  animation: diagonalMove 1s linear infinite;
}

@keyframes diagonalMove {
  0% { background-position: 0 0; }
  100% { background-position: 56px 0; }
}

/* ============================================== */
/* P-TINY */
/* ============================================== */

.p-tiny label,
.p-tiny{
  font-size: 0.85rem;
}