body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    background-color: #f4f5f7;
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.container {
    max-width: 960px;
    margin: 40px auto;
    padding: 20px;
}

/* Estilos generales para formularios */
.form-container {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 400px;
    margin: 50px auto;
}
.menu-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}

.menu-item {
    background-color: #fff;
    border-radius: 8px;
    border-top-style: ridge;
    border-top-color: #0084A3;
    border-bottom-style: ridge;
    border-bottom-color: #0084A3;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 15px;
    width: 200px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.menu-item:hover {
    transform: scale(1.05);
}

.menu-item h3 {
    margin-top: 0;
    color: #0084A3;
}

.menu-item a {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    height: 100%;
}


.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
    color: #555;
    font-weight: bold;
}

input[type="text"],
input[type="password"],
textarea {
    width: calc(100% - 22px);
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

button {
    background-color: #0084A3;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0084A3;
}

.logo-container {
    text-align: center;
    margin-bottom: 20px;
}

.logo-container img {
    max-width: 150px; /* Ajusta el tamaño según tu logo */
    height: auto;
}

/* Estilos específicos para la página de registro de plantillas */
.template-form {
    max-width: 800px;
    margin: 30px auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.template-form textarea {
    min-height: 200px;
    font-family: monospace; /* Para mejor visualización de HTML */
}

.template-form button {
    margin-top: 20px;
}

/* Footer (opcional) */
footer {
    background-color: #0084A3;
    color: #f4f5f7;
    text-align: center;
    padding: 1em;
    margin-top: auto; /* Empuja el footer hacia abajo */
}

.redactar-container {
    max-width: 960px;
    margin: 30px auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.recipients-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.recipients-section label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.recipients-section textarea {
    width: calc(100% - 22px);
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    min-height: 80px;
    font-family: monospace; /* Para mejor visualización de emails */
}

.editor-section label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    margin-top: 20px;
}

.editor-section textarea {
    width: calc(100% - 22px);
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    min-height: 300px; /* Altura para el editor */
}

.emoji-button {
    display: inline-block;
    padding: 8px 12px;
    background-color: #eee;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
}
.emoji-button:hover {
    background-color: #ddd;
}


.send-button-container {
    text-align: right;
    margin-top: 20px;
    width:50%;
    align:right;
}

.send-button-container .send-button-emoji button {
    background-color: #0084A3;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.send-button-container button:hover {
    background-color: #0084A3;
}

.subject-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.subject-section label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.subject-section input[type="text"] {
    width: calc(100% - 22px);
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

.mailing-container {
    max-width: 960px;
    margin: 30px auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.search-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.search-section label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.search-section select,
.search-section button {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
    margin-right: 10px;
}

.search-section button {
    background-color: #0084A3;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.search-section button:hover {
    background-color: #0084A3;
}

.results-section {
    margin-top: 20px;
}

.results-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.results-table th,
.results-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.results-table th {
    background-color: #f4f4f4;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    /* Asegura que no haya saltos de línea */
    flex-wrap: nowrap;
}

.pagination a,
.pagination span {
    padding: 8px 12px;
    border: 1px solid #ddd; /* Un borde sutil mejora el aspecto */
    margin: 0 -1px; /* Los márgenes negativos eliminan el espacio entre botones */
    text-decoration: none;
    color: #333;
    /* Quita el border-radius de los botones individuales para crearlos en grupo */
    border-radius: 0;
}

/* Redondea solo el primer y último botón */
.pagination a:first-of-type,
.pagination span:first-of-type a,
.pagination span:first-of-type span {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.pagination a:last-of-type,
.pagination span:last-of-type a,
.pagination span:last-of-type span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.pagination a:hover {
    background-color: #eee;
}

.pagination .current {
    background-color: #0084A3;
    color: white;
    border-color: #0084A3; /* Borde del mismo color para un look más sólido */
}

/* Estilo para los indicadores '...' */
.pagination span span {
    color: #888;
    background-color: transparent;
    border: none;
}

.next-button-container {
    text-align: right;
    margin-top: 20px;
}

.next-button-container button {
    background-color: #0084A3;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.next-button-container button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.next-button-container button:hover:enabled {
    background-color: #1e7e34;
}

.emoji-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.emoji-btn:hover {
    background-color: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.emoji-btn:active {
    transform: translateY(0);
}

.emoji {
    margin-right: 10px;
}

.administracion-container {
    max-width: 600px; /* Ajusta el ancho máximo según necesites */
    margin: 30px auto; /* Centra horizontalmente */
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.administracion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Hasta 6 columnas */
    gap: 15px;
    margin-top: 20px;
}

.administracion-grid a {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    transition: background-color 0.3s ease;
}

.administracion-grid a:hover {
    background-color: #eee;
}

.administracion-title {
    margin-bottom: 20px;
}

#loading-overlay {
    position: fixed; /* Cubre toda la ventana */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para bloquear la interacción */
    display: none; /* Oculto por defecto */
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
}

.loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.3);
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* detalle paciente*/
.container {
    max-width: 960px;
    margin: 30px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2, h3 {
    color: #333;
    margin-bottom: 15px;
}

/* Estilos para campos en la misma línea */
.inline-form-group {
    display: flex;
    align-items: center; /* Alineación vertical al centro */
    margin-bottom: 10px;
    gap: 10px; /* Espacio entre label e input */
}

.inline-form-group label {
    width: 100px; /* Ancho fijo para las etiquetas (ajusta según necesites) */
    flex-shrink: 0; /* Evita que la etiqueta se encoja */
    display: inline-block; /* Para que width funcione */
}

.inline-form-group .editable-field,
.inline-form-group .uneditable-field {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    width: auto; /* Ajuste automático del ancho restante */
}

.inline-form-group .uneditable-field {
    background-color: #eee;
    color: #333;
}

.form-group {
    margin-bottom: 15px; /* Espacio vertical entre grupos de campos */
}

label {
    display: block;
    margin-bottom: 5px;
    color: #555;
    font-weight: bold;
}

.button-group {
    margin-top: 20px;
    margin-bottom: 20px;
}

.button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    margin-right: 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    text-decoration: none;
}

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

/* Estilos para la modal */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #fefefe;
    margin: 1% auto; /* Ajuste del margen superior */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    border-radius: 8px;
    position: relative;
    padding-left: 40px; /* Margen izquierdo */
    padding-right: 40px; /* Margen derecho */
}

.modal-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
}

.modal-close-button:hover,
.modal-close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.respuestas-table {
    width: 100%;
    border-collapse: collapse;
}

.respuestas-table th, .respuestas-table td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
    text-align: left;
}

.respuestas-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.respuestas-table tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* Filas impares */
}

.respuestas-table tbody tr:nth-child(even) {
    background-color: #ffffff; /* Filas pares */
}

/* Estilos para la tabla de consultas previas */
#anteriorConsultaSection {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    display: flex; /* Para centrar la tabla */
    justify-content: center; /* Centrar horizontalmente */
}

.consultas-table {
    width: auto; /* Ancho automático para ajustarse al contenido */
    border-collapse: collapse;
    margin-top: 10px;
}

.consultas-table th, .consultas-table td {
    padding: 8px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

.consultas-table th {
    background-color: #f9f9f9;
    font-weight: bold;
    text-align: center; /* Centrar encabezados si lo deseas */
}

.consultas-table td:nth-child(1), /* Fecha */
.consultas-table th:nth-child(1) {
    width: 120px; /* Ancho para la columna de fecha */
    text-align: center;
}

.consultas-table td:nth-child(2), /* Comentarios */
.consultas-table th:nth-child(2) {
    width: auto; /* Ancho automático para la columna de comentarios */
}

.consultas-table tbody tr {
    cursor: pointer;
}

.consultas-table tbody tr:hover {
    background-color: #f5f5f5;
}

/* Estilo para el botón "Guardar Comentarios" */
#nuevaConsultaSection .button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    margin-right: 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    text-decoration: none;
}

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

/* buscador lista suscriptores*/
.quick-search { margin: 1rem 0; }
.input-wrapper { position: relative; display:inline-block; width: 100%; max-width: 420px; }
#quickSearch { width: 100%; padding: 0.5rem 2rem 0.5rem 0.75rem; }
#clearSearch { position: absolute; right: 0.25rem; top: 0.25rem; bottom: 0.25rem; padding: 0 0.5rem; }
.suggestions { margin-top: 0.25rem; max-width: 420px; border: 1px solid #ddd; border-radius: 4px; background: #fff; list-style: none; padding: 0; }
.suggestions.d-none { display: none; }
.suggestion-item { padding: 0.5rem 0.75rem; cursor: pointer; display: flex; gap: 0.5rem; }
.suggestion-item:hover { background: #f6f6f6; }

.action-bar{
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* izquierda | centro | derecha */
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
}
.action-bar .left{ justify-self: start; }
.action-bar .center{ justify-self: center; }
.action-bar .right{
    justify-self: end;
    display: flex;
    align-items: center;
    gap: .5rem; /* separa spinner y botón */
}

.logout-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0 4px;
}
.logout-btn:hover img { opacity: .8; }
.btn-icon{background:transparent;border:0;padding:4px 6px;cursor:pointer;color:var(--fg,#222)}
.btn-icon:hover{opacity:.85}
.status-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;color:#fff;font-size:.85rem;line-height:1;user-select:none;min-width:38px;justify-content:center}
.status-badge.ok{background:#16a34a}.status-badge.ko{background:#dc2626}
.status-text{font-weight:600}