/* Estilos para la clase "card" */
.c_card {
    background-color: #fff; /* Color de fondo */
    border-radius: 8px; /* Borde redondeado */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra */
    padding: 16px; /* Espaciado interno */
    text-align: left; /* Alineación del texto al centro */
  }

  /* Estilos para el botón primario */
.c_button_primary {
    background-color: #007bff; /* Color de fondo del botón */
    color: #fff; /* Color del texto del botón */
    border: none; /* Sin borde */
    border-radius: 4px; /* Borde redondeado */
    padding: 10px 20px; /* Espaciado interno (arriba/abajo izquierda/derecha) */
    font-size: 16px; /* Tamaño de fuente */
    cursor: pointer; /* Cambiar el cursor al pasar el ratón por encima */
    transition: background-color 0.3s ease; /* Transición suave para el color de fondo */
  }
  
  /* Estilos para el botón primario al pasar el ratón por encima */
  .c_button_primary:hover {
    background-color: #0056b3; /* Nuevo color de fondo al pasar el ratón por encima */
  }

  .c_button_primary_disabled {
    background-color: rgb(114, 169, 228); /* Color de fondo del botón */
    color: #fff; /* Color del texto del botón */
    border: none; /* Sin borde */
    border-radius: 4px; /* Borde redondeado */
    padding: 10px 20px; /* Espaciado interno (arriba/abajo izquierda/derecha) */
    font-size: 16px; /* Tamaño de fuente */
    cursor: pointer; /* Cambiar el cursor al pasar el ratón por encima */
    transition: background-color 0.3s ease; /* Transición suave para el color de fondo */
  }

  .c_button_success {
    background-color: #28a745; /* Color de fondo del botón */
    color: #fff; /* Color del texto del botón */
    border: none; /* Sin borde */
    border-radius: 4px; /* Borde redondeado */
    padding: 10px 20px; /* Espaciado interno (arriba/abajo izquierda/derecha) */
    font-size: 16px; /* Tamaño de fuente */
    cursor: pointer; /* Cambiar el cursor al pasar el ratón por encima */
    transition: background-color 0.3s ease; /* Transición suave para el color de fondo */
  }

  .c_button_success:hover {
    background-color: #1e7e34; /* Nuevo color de fondo al pasar el ratón por encima */
  }

  .c_button_success_disabled {
    background-color: rgb(114, 169, 228); /* Color de fondo del botón */
    color: #fff; /* Color del texto del botón */
    border: none; /* Sin borde */
    border-radius: 4px; /* Borde redondeado */
    padding: 10px 20px; /* Espaciado interno (arriba/abajo izquierda/derecha) */
    font-size: 16px; /* Tamaño de fuente */
    cursor: pointer; /* Cambiar el cursor al pasar el ratón por encima */
    transition: background-color 0.3s ease; /* Transición suave para el color de fondo */
  }


  
  /* draggable-list */
  /* .drag-list {
    list-style: none;
    padding: 0;
  }
  .drag-item {
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      padding: 5px;
      margin: 5px;
  }
  .drag-handle {
      cursor: pointer;
  } */

  .c_text_area{
    width: 100%; /* Ancho del textarea al 100% del contenedor */
    padding: 10px; /* Espaciado interno */
    border: 1px solid #ccc; /* Borde con color gris claro */
    border-radius: 4px; /* Borde redondeado */
    font-size: 16px; /* Tamaño de fuente */
    resize: vertical; /* Permite redimensionar verticalmente */
  }

  /* Estilos adicionales para el textarea enfocado */
  .c_text_area:focus {
    border-color: #007bff; /* Cambia el color del borde al enfocar el textarea */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Sombra al enfocar */
  }




  /* Estilos para el alert */
.alert {
  background-color: #f2f2f2;
  border: 2px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  text-align: center;
}

/* Estilos para el botón de cierre */
.alert button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
}

.alert button:hover {
  background-color: #0056b3;
}

/* Estilos para el overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Fondo oscurecido semitransparente */
  z-index: 998; /* Por debajo del alert */
}

[v-cloak] {
  display: none;
}