#main-container-test-dashboard {
    font-family: Arial, sans-serif;
}

#content-test-dashboard{
    width: 100%;
    margin-top: 30px;
}

.header-content{
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    gap: 20px;
}

.clinico-name{
    font-size: xx-large;
    font-weight: 600;
}

.dashboard-header, .test-dashboard-header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 2em;
}

.test-dashboard-header > button{
    height: fit-content;
}

#add-patient-button, #add-patient-adult-button, .descargar-excel{
    margin-bottom: 10px;
}

button[disabled] {
    background-color: #789597; /* Color de fondo cuando está deshabilitado */
    color: #fff; /* Color del texto cuando está deshabilitado */
    opacity: 0.65; /* Difuminar el botón */
    cursor: not-allowed; /* Cursor en forma de cruz */
    pointer-events: none; /* Evita que el botón reciba clics */
  }

/* AGREGAR PACIENTE */

form#datos-paciente-form{
    width: 100%;
}

form#datos-paciente-form fieldset {
    border: 1px solid #000;
    padding: 20px;
}

form#datos-paciente-form legend {
    font-size: 1em;
    font-weight: bold;
}

form#datos-paciente-form label, form#datos-paciente-form-edit label {
    display: block;
    margin-top: 10px;
}

form#datos-paciente-form input[type="text"], form#datos-paciente-form-edit input[type="text"] {
    width: 100%;
    padding: 5px;
    margin-top: 5px;
}

form#datos-paciente-form div {
    margin-top: 10px;
}

form#datos-paciente-form div,  form#datos-paciente-form-edit div{
    margin-top: 10px;
}

form#datos-paciente-form input[type="radio"], form#datos-paciente-form-edit input[type="radio"] {
    margin-right: 5px;
    margin-bottom: -5px;
}

form#datos-paciente-form input[type="submit"], form#datos-paciente-form-edit input[type="submit"] {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 1em;
}

.form-container {
    margin: 0 auto;
  }

  /* Cada fila del formulario */
  .form-row {
    display: flex;
    flex-wrap: wrap;    /* Para que si no cabe se baje a otra línea */
    gap: 1rem;          /* Espacio entre columnas */
    margin-bottom: 1rem;
    align-items: flex-end;
  }

  /* Columna por defecto */
  .form-col {
    flex: 1;            /* Se reparte el espacio disponible */
    min-width: 200px;   /* Ajusta según veas */
  }

  /* Si quieres que algo ocupe todo el ancho en la fila, le das width: 100% */
  .form-col-full {
    flex: 1 1 100%;
  }

  /* Label encima del input */
  label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }

  /* Inputs y selects al 100% */
  input[type="text"],
  input[type="number"],
  input[type="date"],
  select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.4rem;
  }

  /* Radios en línea */
  .radio-group {
    display: flex;
    align-items: center;
    gap: 0.8rem; /* Espacio entre radio y label */
  }
  /* Evita que el label de radio salte de línea */
  .radio-group label {
    display: inline;
    font-weight: normal;
    margin-bottom: 0;
  }

  .form-actions {
    text-align: right;
    margin-top: 1rem;
  }

.bolder-label{
    font-weight: 600!important;
}

.select2 .select2-container .select2-container--default{

    width: 300px!important;

}

.form-flex-container{
    display: flex;
    align-items: center!important;
}

.w-50{
    width: 50%;
}

.me-1{
    margin-right: 1em;
}

.me-2{
    margin-right: 2em;
}

/* LISTAR TODOS LOS PACIENTES DE UN CLINICO */
        /* Estilos del acordeón */
        .accordion-container {
            width: 100%;
            margin: 0 0 20px;
            clear: both;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .accordion-titulo {
            position: relative;
            display: block;
            padding: 16px 20px;
            font-size: 18px;
            font-weight: 500;
            background: linear-gradient(135deg, #00b09b, #00a884);
            color: #fff;
            text-decoration: none;
            border-radius: 8px 8px 0 0;
            transition: all 0.3s ease;
        }
        
        .accordion-titulo.open {
            background: linear-gradient(135deg, #00b09b, #00a884);
        }
        
        .accordion-titulo:hover {
            background: linear-gradient(135deg, #00a884, #009e7a);
        }
        
        .accordion-titulo span.toggle-icon {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 24px;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        
        .accordion-titulo span.toggle-icon:before {
            content: "+";
        }
        
        .accordion-titulo.open span.toggle-icon:before {
            content: "-";
        }
        
        .accordion-content {
            display: none;
            padding: 0;
            overflow: auto;
            border: 1px solid #e9ecef;
            border-top: none;
            border-radius: 0 0 8px 8px;
            background-color: #fff;
        }
        
        .accordion-content.open {
            display: block;
        }
        
        /* Contenedor de información del paciente */
        .patient-info-container {
            padding: 20px;
        }
        
        /* Filas de información */
        .info-row {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 15px;
        }
        
        /* Elementos individuales de información */
        .info-item {
            flex: 1 1 33.333%;
            min-width: 250px;
            padding: 8px 15px;
        }
        
        /* Etiquetas de información */
        .info-label {
            font-size: 0.8rem;
            color: #6c757d;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
            font-weight: 500;
        }
        
        /* Valores de información */
        .info-value {
            font-size: 1rem;
            color: #333;
            font-weight: 500;
        }
        
        /* Contenedor de acciones */
        .actions-patients-container {
            display: flex;
            justify-content: space-between;
            padding: 15px 20px;
            background-color: #f8f9fa;
            border-top: 1px solid #e9ecef;
        }
        
        /* Grupos de botones */
        .display-flex, .actions-patients-end {
            display: flex;
            gap: 10px;
        }
        
        /* Estilos de botones */
        button {
            padding: 8px 16px;
            border-radius: 6px;
            font-weight: 500;
            font-family: 'Poppins', sans-serif;
            font-size: 0.9rem;
            cursor: pointer;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }
        
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        /* Botones específicos */
        .btn-tests {
            background-color: #487073;
            color: white;
        }
        
        .btn-results {
            background-color: #487073;
            color: white;
        }
        
        .edit-patient-btn, .edit-patient-adult-btn {
            background-color: #dd9015;
            color: white;
            height: fit-content;
        }
        
        .delete-patient-btn {
            background-color: #e74c3c;
            color: white;
            height: fit-content;
        }
        
        /* Badges para estados */
        .badge {
            display: inline-block;
            font-size: 0.75rem;
            padding: 5px 8px;
            border-radius: 4px;
            font-weight: 500;
        }
        
        .badge-success {
            background-color: #d4edda;
            color: #155724;
        }
        
        .badge-danger {
            background-color: #f8d7da;
            color: #721c24;
        }
        
        /* Iconos */
        .icon {
            margin-right: 8px;
            font-size: 0.9rem;
        }
        
        .icon-primary {
            color: #3498db;
        }

.ms{
    margin-left: 5px;
}

.ations-patients-end{
    text-align: end;
}

.delete-patient-btn{
    background-color: #a23232;
    border-color: #a23232;
}

.edit-patient-btn{
    background-color: #BFC82A;
    border-color: #BFC82A;
}

.display-flex{
    display: flex;
}
/* BUSCADOR DE PACIENTE */

.search-container {
    margin-bottom: 10px;
}

#patient-search-input {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* SPINNER */

.loader-container {
    display: none; /* Oculto inicialmente */
    position: fixed; /* Fijo en toda la pantalla */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparente */
    z-index: 9999; /* Asegura que el loader esté sobre otros elementos */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    display: flex;
  }
  
  .loader {
    border: 5px solid #f3f3f3; /* Color de fondo */
    border-top: 5px solid #3498db; /* Color del spinner */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

/* TESTS */

.btn-ejecutar-tests{position:relative;transition:opacity .2s;}
/* sin opacity aquí */
.btn-ejecutar-tests.loading{pointer-events:none;}

.btn-ejecutar-tests .btn-text{transition:opacity .2s;}
.btn-ejecutar-tests.loading .btn-text{opacity:.25;}

.mini-spinner{
  display:none;
  width:18px;height:18px;
  border:3px solid #FFF;border-top-color:transparent;
  border-radius:50%;
  animation:spin .7s linear infinite;
  margin-right:6px;vertical-align:-3px;
}
.btn-ejecutar-tests.loading .mini-spinner{display:inline-block;}

/* El botón se vuelve el contenedor de referencia */
#ejecutar-tests{
    padding: 14px 0px 14px 0px!important;           /* si lo quieres bien compacto */
}

#ejecutar-tests > a{
    padding: 19px 17px 19px 17px!important;                /* si lo quieres bien compacto */
}

/* (Opcional) si quieres efecto hover en todo el botón */
#ejecutar-tests:hover{
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
}


@keyframes spin{to{transform:rotate(360deg)}}


.tests-grid-container {
    display: grid;
    /* Define un tamaño mínimo de 200px para las columnas y usa auto-fit para llenar el espacio disponible */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 10px;
    padding: 10px;
}

.tests-grid-container > div {
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-align: left;
    padding: 20px;
    margin: 10px;
    min-width: 200px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar el contenido */
    justify-content: flex-start; /* Alinea el contenido al inicio */
}

/* Contenedor de los labels */
.tests-grid-container > div .test-labels {
    display: flex;
    flex-wrap: wrap; /* Permite que los labels ocupen varias líneas si es necesario */
    gap: 5px; /* Espacio entre los labels */
    justify-content: center; /* Centrar los labels */
    margin-bottom: 10px; /* Espaciado inferior */
    width: 100%;
}

.test-dashboard-header-buttons{

}

/* Estilo individual de cada label */
.tests-grid-container > div .test-labels .label {
    background-color: #f0f0f0; /* Fondo azul */
    color: black; /* Texto blanco */
    font-size: 0.8em; /* Tamaño del texto */
    padding: 2px 7px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    text-align: center; /* Centrar texto */
    white-space: nowrap; /* Evita que el texto se corte */
}


.tests-grid-container > div img {
    width: 100%; /* Ajustar la imagen al ancho del contenedor */
    height: 200px; /* Fijar la altura de la imagen */
    object-fit: cover; /* Asegurar que la imagen cubra el área del contenedor */
    border-radius: 5px; /* Bordes redondeados */
    margin-bottom: 5px;
}


/* Ajustes para el título y la descripción */
.tests-grid-container > div .test-title,
.tests-grid-container > div .test-description {
    margin-bottom: 10px; /* Margen para separar del resto del contenido */
}

/* Ajustes para el botón */
.npl-test-button.deselected {
    background-color: #f0f0f0;
    color: black;
}

.npl-test-button.selected {
    background-color: #487073; /* Color de fondo para el botón */
    color: #fff; /* Color de texto para el botón */
}

.test-selector{
    margin-top: 10px!important;
    width: 100%!important;
}

.test-actions{
    display: flex;
    justify-content: space-between;
    width: 100%;
}


/* LISTA DE ORDEN TESTS*/

.test-list-item{
    display: flex;
    width: 100%;
    background-color: #487073;
    color: #FFF;
    padding: 0.5rem;
    margin-bottom: 10px;
    align-items: center
}

.numero{
    margin-right: 3px;
}

.icon-order-test{
    margin-right: 10px;
    font-size: xx-large;
}


/* TABLA PANTIENT RESULTS */

.wp-block-test-results-table {
    margin: 2rem 0;
}
.wp-block-test-results-table__title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    text-align: center;
}
.wp-block-test-results-table__container {
    overflow-x: auto;
}
.wp-block-test-results-table__table {
    width: 100%;
    border-collapse: collapse;
}
.wp-block-test-results-table__table th,
.wp-block-test-results-table__table td {
    border: 1px solid #ddd;
    padding: 0.5rem;
    text-align: center;
    vertical-align: middle;
}
.wp-block-test-results-table__table th {
    background-color: #f2f2f2;
    font-weight: bold;
}
.wp-block-test-results-table__table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}
.wp-block-test-results-table__table tbody tr:hover {
    background-color: #f5f5f5;
}
/* END TABLA PANTIENT RESULTS */


.test-card {
    position: relative; /* Necesario para que los elementos hijos como .test-info se posicionen dentro de esta tarjeta */
    overflow: hidden; /* Asegura que nada salga de la tarjeta */
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-align: left;
    padding: 20px;
    margin: 10px;
    min-width: 200px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.test-actions, .test-selector {
    margin-top: auto;
}

/* Contenedor dinámico dentro de la tarjeta */
.test-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro */
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    z-index: 10;
    flex-direction: column;
    text-align: center;
    padding: 20px;
}

/* Contenido del cuadro */
.test-info-content {
    max-width: 90%;
}

.test-info-content > .test-info{
    text-align: left;
}

.test-info-content h4 {
    margin-bottom: 10px;
    font-size: 1.2em;
    font-weight: bold;
}

.test-info-content p {
    font-size: 1em;
    margin-bottom: 15px;
}

.close-info {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5em;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
}

.title-info {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5em;
    position: absolute;
    top: 20px;
    left: 20px;
}


@media (max-width: 767px) {
    .accordion-content {
        padding: 10px 0;
    }

    .test-dashboard-header{
        flex-direction: column;
        gap: 0.5rem; /* Espacio vertical entre campos */
        align-content: flex-start; /* Alinea los elementos al inicio */
        align-items: start; /* Alinea los elementos al inicio */
    }

    .header-content{
        display: flex;
        flex-direction: column;
    }

    .actions-patients-end{
        margin-left: 5px;
    }

    .delete-patient-btn{
        margin-top: 5px;
    }
}

@media (max-width: 500px) {
    /* Cada fila pasa a dirección columna */
    .form-row {
      flex-direction: column;
      gap: 0.5rem; /* Espacio vertical entre campos */
      align-content: flex-start; /* Alinea los elementos al inicio */
      align-items: start; /* Alinea los elementos al inicio */
    }
  
    /* Cada columna ahora ocupa todo el ancho */
    .form-col, .form-col-full {
      flex: 1 1 100%;
      min-width: auto; /* Quita cualquier ancho mínimo fijo */
    }
  
    /* Si quieres que los radios no se queden apretados, permite que se partan de línea */
    .radio-group {
      flex-wrap: wrap;
    }

    .form-col{
        width: 100%;
    }

    .form-col > input{
        width: 100%;
    }
  }