/* 
   Paleta de colores de megafarma:
     • #00d07c – Verde primario (acento y botones)
     • #1e4280 – Azul oscuro (header principal)
     • #5deb49 – Verde alternativo (hover en botones)
*/

/* =====================================================
   1. Header: Barra principal de la página
   ===================================================== */
   .headerBox {
    background-color: #1e4280; /* Fondo azul oscuro */
    padding: 15px;
  }
  
  .headerText {
    font-family: Verdana, Arial, sans-serif;
    font-size: 24px;
    color: #ffffff;           /* Texto en blanco */
    text-align: center;
  }
  
  /* =====================================================
     2. Formulario: Título del marco y texto del encabezado del formulario
     ===================================================== */
  .formCaption {
    background-color: #00d07c; /* Fondo verde primario para el título */
    padding: 10px;
  }
  
  .formCaptionText {
    padding-left: 5px;
    font-family: Verdana, Arial, sans-serif;
    font-size: 18px;
    color: #ffffff;           /* Texto en blanco */
  }
  
  /* =====================================================
     3. Formulario: Contenedor y etiquetas
     ===================================================== */
  .formElement {
    background-color: #ffffff; /* Fondo blanco para el área del formulario */
    border: 1px solid #00d07c; /* Borde en verde primario */
    padding: 15px;
    margin-bottom: 20px;
  }
  
  .formLabel {
    font-family: Verdana, Arial, sans-serif;
    font-size: 16px;
    color: #333333;
    display: block;
    margin-bottom: 5px;
    text-align: left;
  }
  
  /* =====================================================
     4. Controles de formulario
     ===================================================== */
  .inputControl {
    font-family: Verdana, Arial, sans-serif;
    font-size: 16px;
    color: #333333;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
  }
  
  .inputControl:focus {
    border-color: #00d07c; /* Enfoque en verde primario */
    outline: none;
  }
  
  /* =====================================================
     5. Botones del formulario
     ===================================================== */
  .input.btn {
    font-family: Verdana, Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    background-color: #00d07c; /* Botón en verde primario */
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .input.btn:hover {
    background-color: #5deb49; /* Hover en verde alternativo */
  }
  
  /* =====================================================
     6. Loader (Indicador de carga)
     ===================================================== */
  .loader {
    background-color: #EFEFED;
    font-size: 12px;
    padding-left: 5px;
    font-family: "Courier New", Courier, monospace;
    color: #050;
    font-weight: bold;
    border: 10px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid #00d07c; /* Loader: acento verde primario */
    width: 40px;
    height: 40px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }
  
  /* Keyframes para la animación del loader */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* =====================================================
     7. ToolTip y su texto (para campos informativos)
     ===================================================== */
  .toolTip .toolTipText {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    visibility: hidden;
    background-color: #e8e8e8;
    color: black;
    padding: 5px 10px;
    border-radius: 4px;
    position: absolute;
    width: 200px;
    text-align: center;
    top: 100%;
    left: 50%;
    margin-left: -100px;
    transition: 1s;
    box-shadow: 2px 2px 5px black;
  }
  
  .toolTip .toolTipText::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 40%;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #e8e8e8 transparent;
  }
  
  .toolTip:hover .toolTipText {
    visibility: visible;
  }
  
  /* =====================================================
     8. Flecha (indicador del tooltip)
     ===================================================== */
  .flecha {
    width: 1px;
    height: 1px;
    border-width: 5px;
    border-style: solid;
    border-color: #e8e8e8 transparent transparent transparent;
  }