/* Hack nuclear para permitir position: sticky liberando overflow en ancestros */
html,
body,
.wrapper,
.main_content,
.full_main_content,
.content-wrapper,
.main_content_iner,
.overly_inner,
.content,
.box,
.box-body,
.tab-content,
.tab-pane {
    overflow: visible !important;
}


.fix-to-top2 {
    position: -webkit-sticky;
    position: sticky;
    z-index: 1;
    top: 60px;

    /* Heredar ancho del padre */
    width: inherit;
    max-width: inherit;
}

.modal-content .fix-to-top2 {
    top: 35px;
}


.itemBlock {
    overflow: visible;
    display: block;
}

/* Estilos Header Petición Rediseñado */
.header-peticion.head_itemBlock {
    background: #fff;
    border: 1px solid #e2e8ef;
    /* Borde teal solicitado */
    border-left: 5px solid #1ab1b8;
    /* Acento lateral más fuerte */
    border-radius: 6px;
    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.05);
    padding: 5px 10px;
    /* Reducido para optimizar espacio */
    transition: all 0.3s ease;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

/* Contenido Izquierdo (Título + Toolbar) */
.header-content-left {
    display: flex;
    flex-direction: row;
    /* Alineación horizontal para ahorrar altura */
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    flex: 1;
    min-width: 300px;
}

.title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.analitica.text-dark {
    color: #2c3e50;
    /* Color oscuro profesional */
    font-weight: 700;
}

/* Toolbar de Acciones unificada */
.actions-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Botones Tool unificados */
.btn-tool {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    /* Más compacto */
    width: auto;
    height: 28px;
    padding: 0 6px;
    border-radius: 6px;
    background-color: #f8f9fa !important;
    /* Asegurar fondo gris claro */
    border: 1px solid #dee2e6 !important;
    color: #555 !important;
    transition: all 0.2s;
    box-shadow: none;
}

.btn-tool:hover {
    background-color: #e2e6ea !important;
    color: #1ab1b8 !important;
    border-color: #1ab1b8 !important;
    /* Borde activo */
    transform: translateY(-1px);
}

.btn-tool.active {
    background-color: #fff3cd;
    color: #856404;
    border-color: #ffeeba;
}

.btn-tool span.material-symbols-outlined {
    font-size: 16px;
    /* Iconos más pequeños */
}


/* Badges externos */
.external-badges {
    display: flex;
    gap: 5px;
}

/* Ajustes en controles derechos (ya existentes, solo retoques) */
.header-peticion.head_itemBlock .cont-btns {
    display: flex;
    gap: 15px;
    align-items: center;
    background: #f8f9fa;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.header-peticion.head_itemBlock .cont-btns label {
    margin-bottom: 0;
    font-weight: 500;
    color: #495057;
    font-size: 0.9rem;
}

.contenedor-diagnosticos {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

/* Área con scroll para los resultados */
.scroll-diagnosticos {
    max-height: 65vh;
    /* Ajuste dinámico a altura de pantalla */
    overflow-y: auto;
    padding: 5px;
    background-color: #f8f9fa;
}

.sticky-search-container {
    position: -webkit-sticky;
    position: sticky;
    top: 160px;
    z-index: 1;
    /* Ajustar según posición respecto al sticky header principal */
    align-self: flex-start;
    /* Necesario para que sticky funcione dentro de un flex/grid item alto */
}

.modal-content .sticky-search-container {
    top: 140px;
}

/* Estilo de cada "tarjeta" de diagnóstico */
.diag-item {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: block;
    text-decoration: none !important;
    color: inherit;
}

.diag-item:hover {
    border-color: #00a8b0;
    background-color: #f0f7ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Clase para cuando uno está seleccionado (puedes aplicarla dinámicamente) */
.diag-item.seleccionado {
    background-color: #00a8b0;
    border-color: #0056b3;
    color: white;
}

.diag-item.seleccionado .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

.badge-especie {
    font-size: 0.7rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 10px;
}

.content-wrapper>.content>.box>.box-header {
    display: none;
}

.table .btn {
    padding: 6px;
}

@media print {
    body * {
        visibility: hidden;
    }

    .print-content * {
        visibility: visible;
        overflow: visible;
    }

    #mainPage * {
        display: none;
    }


    .modal-dialog {
        visibility: visible !important;
        /**Remove scrollbar for printing.**/
        overflow: visible !important;
    }

    li {
        page-break-after: auto;
    }

    .onPrint {
        display: none;
    }
}


.to-top-fix .contaff {
    position: static;
}

@media (min-width: 992px) {

    /* .comm.to-top-fix{
            width:92%;
            position: relative;
            } */
    .comm.to-top-fix .contaff {

        top: 0px;
        position: absolute;
        width: 100%;
        /* animation: slidebottom 0.3s 0s ease-out forwards; */


    }

    /* @keyframes slidebottom {
            to {
              position: fixed;
              top: 45px;
              max-width:23%;
            }
          } */
}

/* Sticky Header para la tabla de resultados */
.sticky-header-row th {
    position: -webkit-sticky;
    position: sticky;
    top: 50px;
    z-index: 1020;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Sticky para comentarios */
.sticky-header-comm {
    position: -webkit-sticky;
    position: sticky;
    top: 60px;
    /* Ajustar posición vertical */
    z-index: 3;
    align-self: flex-start;
}

.modal-content .sticky-header-comm {
    top: 35px;
}


/* Sticky para el box superior (paciente/acciones) */
.sticky-top-main {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 999;
    width: 100%;
    margin-left: 0;
    margin-right: 0;

}

.modal-content .sticky-top-main {
    top: -28px;
}

.modal-full .modal-content {
    border-radius: 0px;
}

.modal-content .resultados-peticiones {
    margin-left: -3px;
}

.collapse-peticion {
    z-index: 999;
}

.modal-content .callout.callout-white {
    margin-left: -3px;
}

/* Extension Header Sticky */
/* Extension Header Sticky */
.extension-sticky-header {
    position: -webkit-sticky;
    position: sticky;
    top: 112px;
    left: 0;
    z-index: 3;
    width: fit-content;
    min-width: 150px;
    background-color: rgba(255, 255, 255, 0.98);
    border: 1px solid #e0e0e0;
    border-left: 5px solid #1ab1b8;
    padding: 2px 10px;
    margin-bottom: 10px !important;
    border-radius: 0 5px 5px 0;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
}

.extension-sticky-header .btn {
    padding: 0px 5px;
}

.extension-sticky-header p {
    margin-bottom: 0;
    font-size: 14px !important;
    margin-right: 10px;
}


.modal-content .extension-sticky-header {
    top: 87px;
}

.footer-fixed span.material-symbols-outlined {
    font-size: 1em;
}

@media (min-width: 992px) {
    .footer-fixed {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}

@media (max-width: 1399.98px) {

    .modal-fullscreen-xl-down .modal-body,
    .modal-full .modal-body {
        max-height: 94vh !important;
    }
}

.modal-peticion .modal-full .modal-content {
    height: calc(100vh - 60px) !important;
}

/* Bloquear scroll del fondo (body) cuando hay un modal abierto */
body.modal-open {
    overflow: hidden !important;
}

.inner-pet {
    overflow: auto;

}

/* --- Added for Batch Management --- */
.batch-card {
    margin-bottom: 40px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    border-left-width: 5px !important;
    background-color: #fcfcfc;
    /* Subtle light gray background */
}

/* Subtle background variants based on panel type for clearer distinction */
.panel-info.batch-card {
    background-color: #f7fbff;
}

.panel-success.batch-card {
    background-color: #f8fff9;
}

.panel-warning.batch-card {
    background-color: #fffdf5;
}

.batch-card:hover {
    // transform: translateY(-2px);
    //box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}


.input-group-lg>.form-control,
.input-group-lg>.input-group-addon,
.input-group-lg>.input-group-btn>.btn {
    height: 48px;
    font-size: 18px;
}

/* Force flex alignment for sample inputs */
.sample-input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
}

.sample-input-group .input-group-addon {
    width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    /* Don't grow or shrink */
    height: auto !important;
    /* Let flex alignment handle height */
    padding: 6px 12px;
}

.sample-input-group .form-control {
    width: 100% !important;
    display: block !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    height: 34px !important;
    /* Standard bootstrap height */
}


/* ... tus otros estilos anteriores ... */
/* Header del Lote */
.batch-card .panel-heading {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    /* Fondo blanco puro para contraste */
    border-bottom: 1px solid #eee;
    padding: 12px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    /* Sombra suave debajo del header */
}

/* Contenedor Flex para alinear todo */
.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Título */
.batch-title-group h3 {
    margin: 0;
    font-weight: 700;
    color: #333;
    letter-spacing: -0.5px;
}

.batch-label {
    font-size: 10px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
    font-weight: 600;
}

/* --- ESTILOS DE BOTONES "WAYS" --- */

/* Base para todos los botones ways */
.btn-way {
    border: none;
    border-radius: 6px;
    /* Bordes redondeados modernos */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* Espacio entre icono y texto */
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    outline: none !important;
}

/* Efecto Hover: Se levanta un poco y aumenta la sombra */
.btn-way:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* Efecto Click */
.btn-way:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Botón Primario (Guardar) - Azul Vibrante */
.btn-way-primary {
    background: linear-gradient(135deg, #4e54c8, #8f94fb);
    color: white;
}

/* Botón Éxito (Finalizar) - Verde Vibrante */
.btn-way-success {
    background: linear-gradient(135deg, #11998e, #38ef7d);
    color: white;
}

/* Botones Utilitarios (Rellenar/Borrar) - Estilo "Ghost" o Suave */
.btn-way-ghost {
    background: #f8f9fa;
    color: #555;
    box-shadow: none;
    border: 1px solid #e9ecef;
}

.btn-way-ghost:hover {
    background: #fff;
    color: #333;
    border-color: #ccc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Botón Peligro (Borrar) */
.btn-way-danger {
    background: #fff0f0;
    color: #dc3545;
    border: 1px solid #fadbd8;
    box-shadow: none;
}

.btn-way-danger:hover {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3);
}

/* Iconos de Material Symbols dentro de botones */
.btn-way .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
}

/* Separador vertical */
.toolbar-divider {
    width: 1px;
    height: 24px;
    background: #ddd;
    margin: 0 15px;
}

/* STICKY HEADER */
.batch-card .panel-heading {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    padding: 10px 15px;
    /* Un poco más compacto para que quepa todo */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Ajuste para botones con Material Icons para que se alineen bien con el texto */
.btn-material-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* Espacio entre icono y texto */
    font-weight: 600;
}

.btn-material-icon .material-symbols-outlined {
    font-size: 20px;
    /* Tamaño del icono */
    line-height: 1;
}

/* Footer más limpio */
.batch-card .panel-footer {
    background-color: #fff;
    border-top: 1px solid #eee;
    padding: 10px 15px;
}

/* Estilos de Columnas y Muestras (Ya definidos anteriormente) */
.sample-columns-container {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    column-gap: 20px;
}

.sample-item-card {
    display: inline-block;
    width: 100%;
    margin-bottom: 15px;
    break-inside: avoid;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sample-layout {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sample-header-visual {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.strip-visual {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    background: #f0f0f0;
    padding: 3px 6px;
    border-radius: 20px;
    border: 1px solid #e0e0e0;
}

.well-circle {
    width: 14px;
    height: 14px;
    background-color: #fff;
    border: 1px solid #bbb;
    border-radius: 50%;
    margin: 0 2px;
}

.sample-active .well-circle {
    background-color: #d9edf7;
    border-color: #31708f;
}

.form-compact-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.form-compact-group {
    flex-grow: 1;
}

.form-compact-group label {
    font-size: 10px;
    margin-bottom: 2px;
    display: block;
    color: #777;
    font-weight: 600;
}

/* --- ESTADOS DE VALIDACIÓN (260/280) --- */

/* Solo se aplican si hay datos */
.input-status-ok {
    border-color: #2ecc71 !important;
    background-color: #f0fdf4 !important;
    color: #14532d !important;
    font-weight: bold;
}

.input-status-ko {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
    font-weight: bold;
}

/* Botón Reprocesar (Estilo Badge para el Header) */
.btn-reprocess-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
    /* Separación del texto 'Muestra X' */
    background-color: #fff0f0;
    color: #d32f2f;
    border: 1px solid #ffcdd2;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}

.btn-reprocess-badge:hover {
    background-color: #d32f2f;
    color: white;
    border-color: #b71c1c;
}

/* Animación de rotación suave para el icono al pasar el ratón */
.btn-reprocess-badge:hover .material-symbols-outlined {
    transform: rotate(180deg);
    transition: transform 0.4s ease;
}

.btn-amplificada-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 8px;
    /* Separación del texto 'Muestra X' */
    background-color: #d9edf7;
    color: #11998e;
    border: 1px solid #11998e;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}

/* Ajuste para el botón dentro del input group */
.btn-comment-toggle {
    padding: 2px 6px !important;
    border-left: none !important;
    color: #999;
}

/* Resaltar si ya tiene un comentario escrito */
.btn-comment-toggle.has-comment {
    color: #2196F3;
    background-color: #e3f2fd;
}

/* Input de comentario extra pequeño */
.input-xs {
    height: 22px;
    padding: 2px 5px;
    font-size: 11px;
    line-height: 1.5;
    border-radius: 3px;
}

/* Quitar el focus azul para que no distraiga tanto */
.input-xs:focus {
    border-color: #ccc;
    box-shadow: none;
}


//PENDIENTES
/* Contenedor Principal */
.panel-pending-custom {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    overflow: hidden;
}

/* Cabecera */
.panel-heading-custom {
    background: linear-gradient(45deg, #33b9c0, #a3b4b5);
    padding: 15px;
    color: white;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-main { font-size: 24px; }

.title-stack {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
}

.panel-title {
    margin: 0;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
}

.badge-count {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    font-weight: bold;
    border-radius: 6px;
}

/* Buscador */
.panel-search-container {
    padding: 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.search-wrapper {
    position: relative;
    display: flex; /* Mantenemos el flex */
    align-items: center;
    width: 100%;
}

.search-input {
    flex: 1; /* <--- ESTO ES LA CLAVE: obliga al input a ocupar todo el ancho disponible */
    width: 100%; 
    padding-left: 32px !important;
    border-radius: 20px !important;
    border: 1px solid #ddd !important;
}

.search-icon {
    position: absolute; /* Al ser absolute, no empuja al input, se queda "flotando" encima */
    left: 10px;
    z-index: 2;
    pointer-events: none; /* Para que si clickeas el icono, el foco vaya al input */
}

.search-input:focus {
    border-color: #f39c12 !important;
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.1) !important;
}

/* Lista de Items */
.list-pending-scroll {
    max-height: 70vh;
    overflow-y: auto;
}

.pending-item {
    border-left: 4px solid transparent;
    transition: all 0.2s;
    padding: 10px 15px !important;
    cursor: pointer;
}

.pending-item:hover {
    background-color: #fff8e1 !important;
    border-left-color: #f39c12;
    transform: translateX(5px);
}

.item-id {
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
}

.item-analiticas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.analitica-tag {
    background: #eee;
    color: #666;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    text-transform: uppercase;
}

.item-active:active {
    background-color: #e3f2fd !important;
}

/* Asegura que el contenedor del buscador no limite el ancho */
.panel-search-container {
    padding: 12px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    width: 100%; /* Forzar ancho completo */
}

.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%; /* Importante para que el input crezca */
}

.search-input {
    width: 100% !important; /* Fuerza al input a llenar el flexbox */
    max-width: none !important; /* Elimina cualquier restricción previa */
    padding-left: 32px !important;
    border-radius: 20px !important;
    border: 1px solid #ddd !important;
    box-sizing: border-box; /* Asegura que el padding no sume al ancho total */
}

/* --- Estilos para la Placa de 48 posiciones --- */
.plate-wrapper {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-top: 15px;
}
.plate-header-cols {
    display: grid;
    /* CAMBIADO: Quitamos el mínimo de 100px para evitar el scroll forzado */
    grid-template-columns: 40px repeat(6, 1fr);
    gap: 10px;
    text-align: center;
    font-weight: bold;
    color: #777;
    font-size: 14px;
    margin-bottom: 8px;
    justify-content: center;
}

.plate-grid-container {
    display: grid;
    /* CAMBIADO: Quitamos el mínimo de 100px para evitar el scroll forzado */
    grid-template-columns: 40px repeat(6, 1fr);
    gap: 10px;
    justify-content: center;
}

.plate-row-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #888;
    background: #f9f9f9;
    border-radius: 4px;
}
.plate-well {
    width: 100%;
    min-width: 0; /* OBLIGA al pozo a respetar el tamaño del Grid y no el del texto interno */
    min-height: 90px;
    border: 2px solid #bbb; 
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
    padding: 6px 8px;
    box-sizing: border-box; /* Evita que los paddings sumen tamaño extra */
}
/* --- Estructura Flex Interna del Pozo --- */
.well-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 20px;
}

.well-center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    width: 100%;
    text-align: center;
    margin: 4px 0;
    overflow: hidden;
}

.well-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 20px;
}

.well-bottom-left, .well-bottom-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* --- Badges y Botones Internos --- */
.well-number-badge {
    font-size: 11px;
    color: #777;
    font-weight: bold;
    background: #f1f3f5;
    padding: 1px 5px;
    border-radius: 4px;
}

.well-delete-btn {
    padding: 0px 4px !important;
    font-size: 10px;
    line-height: 1;
    height: 20px;
    width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.well-delete-btn .material-symbols-outlined {
    font-size: 14px;
}

.well-open-btn {
    padding: 0px 4px !important;
    font-size: 10px;
    line-height: 1;
    height: 20px;
    width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.well-open-btn .material-symbols-outlined {
    font-size: 14px;
}

.well-check-icon {
    font-size: 18px !important;
    vertical-align: middle;
}

.well-comment-icon {
    font-size: 16px !important;
    color: #64748b;
    vertical-align: middle;
}

.well-title-text {
    font-size: 14px;
    font-weight: 800;
    color: #333;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    line-height: 1.2;
}

.well-sub-text {
    font-size: 10px;
    font-weight: 600;
    color: #1ab1b8;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    margin-top: 1px;
}

.well-method-text {
    font-size: 9px;
    color: #888;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    margin-top: 1px;
}

.plate-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Adaptación para pantallas de tablets (1024px o menor) */
@media (max-width: 1024px) {
    .plate-wrapper {
        padding: 10px;
    }
    .plate-header-cols, .plate-grid-container {
        gap: 6px;
    }
    .plate-well {
        min-height: 85px;
        padding: 4px 6px;
    }
    .well-title-text {
        font-size: 12px;
    }
    .well-sub-text {
        font-size: 9px;
    }
    .well-method-text {
        font-size: 8px;
    }
}

@media (max-width: 768px) {
    .plate-header-actions {
        width: 100%;
        margin-top: 10px;
        justify-content: flex-start;
    }
}

.plate-well:hover {
    border-color: #1ab1b8;
    transform: scale(1.05);
    background: #f0fbfc;
    z-index: 10;
}

.plate-well.well-active {
    border-color: #1ab1b8;
    background: #e0f7f8;
}

.plate-well.well-selected {
    border-color: #2ecc71;
    box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.2);
    background: #e8f8f5;
}

.well-number {
    font-size: 12px;
    color: #777;
    font-weight: bold;
    position: absolute;
    top: 4px;
    left: 8px;
    background: rgba(255,255,255,0.8);
    padding: 0 4px;
    border-radius: 4px;
}

.well-content {
    font-size: 16px; 
    font-weight: 900;
    color: #333;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    line-height: 1.2;
    margin-top: 8px;
}

.well-content small {
    font-size: 11px;
    font-weight: 600;
    display: block; 
    color: #1ab1b8;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.well-badge {
    position: absolute;
    bottom: 5px;
    right: 8px; /* Move dots to corner */
    display: flex;
    gap: 2px;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ccc;
}

.dot-ok { background: #2ecc71; }
.dot-ko { background: #e74c3c; }
.dot-ctrl { background: #f1c40f; }

/* Tooltip simple para el well */
.plate-well:after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 10;
}

.plate-well:hover:after {
    opacity: 1;
}

.sample-selected-highlight {
    border-color: #2ecc71 !important;
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.3) !important;
    background-color: #f0fff4 !important;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

.selected-well-detail {
    background: #fdfdfd;
    border: 1px dashed #2ecc71;
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* --- Compact Summary Badges --- */
.batch-summary-inline {
    margin-top: 5px;
    margin-bottom: 5px;
    line-height: 1.8;
}

.summary-badge {
    display: inline-block;
    padding: 1px 8px;
    margin-right: 4px;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 600;
    color: #495057;
    background-color: #f8f9fa; 
    border: 1px solid #dee2e6;
    border-radius: 10px; 
    white-space: nowrap;
}

.summary-badge strong {
    color: #212529;
    margin-left: 3px;
}

/* =====================================================
   ESTILOS TABLA BIOQUÍMICA - ESTADO "EN MÁQUINA"
   ===================================================== */

/* Transición suave en todas las filas de la tabla */
.kindling {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Fila marcada como "en máquina" */
.fila-en-maquina {
    background-color: #e8f5e9 !important;
    border-left: 4px solid #2e7d32 !important;
    box-shadow: inset 0 0 0 1px rgba(46, 125, 50, 0.2);
}

.fila-en-maquina:hover {
    background-color: #d4edda !important;
}

/* Celda clicable de marcado */
.celda-marcado {
    user-select: none;
    transition: background-color 0.2s;
}

.celda-marcado:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Número de registro */
.num-registro {
    font-size: 0.8rem;
    color: #888;
    min-width: 18px;
    text-align: right;
}

/* Icono estado NORMAL (flecha) */
.icono-marcado-off {
    font-size: 1.15rem !important;
    color: #aaa;
    transition: color 0.2s, transform 0.2s;
}

.celda-marcado:hover .icono-marcado-off {
    color: #2e7d32;
    transform: translateX(3px);
}

/* Icono estado MARCADO (check verde) */
.icono-marcado-on {
    font-size: 1.4rem !important;
    color: #2e7d32;
    animation: pop-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes pop-in {
    0%   { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

/* LIMS ID en el estado marcado */
.fila-en-maquina .lims-id-label {
    color: #1b5e20;
}

/* Badge "EN MÁQUINA" */
.badge-en-maquina {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #1b5e20;
    background-color: #c8e6c9;
    border: 1px solid #a5d6a7;
    border-radius: 4px;
    padding: 1px 5px;
    line-height: 1.4;
    animation: fade-in 0.3s ease both;
}

@keyframes fade-in {
    0%   { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Sidebar Right Modal for Non-blocking UI */
.modal-right {
    pointer-events: none !important;
    background: transparent !important;
}
.modal-right .modal-dialog {
    pointer-events: auto !important;
    position: fixed !important;
    right: 0;
    top: 0;
    margin: 0;
    height: 100vh;
    width: 450px;
    max-width: 100vw;
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
}
.modal-right.in .modal-dialog,
.modal-right.show .modal-dialog {
    transform: translateX(0);
}
.modal-right .modal-content {
    height: 100vh;
    border-radius: 0;
    overflow-y: auto;
    box-shadow: -5px 0 15px rgba(0,0,0,0.05);
    border: none;
}

@media (min-width: 768px) {
    .text-right-sm {
        text-align: right !important;
    }
}


.subanaliticasC {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: inline-block !important;
    vertical-align: middle;
    margin-left: 4px;
}

.subanaliticasC .sub{
    position:relative;
    display: inline-block;
    background:white;
    border:1px solid #c70101;
    color:#c60101;
    border-radius:2px;
    padding:2.5px;
    top: 0px;
} 

.subanaliticasC .sub:has(.ok),
.subanaliticasC .sub:has(.ko) {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.subanaliticasC .sub .ok{ 
    position:relative;
    top:0px;
    background:white;
    border:1px solid #117e83;
    color:#117e83;
    border-radius:2px;
    padding:2.5px;
    display: inline-block;
}
.subanaliticasC .sub .ko{ 
    position:relative;
    top:0px;
    background:white;
    border:1px solid #c60101;
    color:#c60101;
    border-radius:2px;
    padding:2.5px;
    display: inline-block;
}

.main-footer:not(.footer-fixed){
    margin-bottom:0px !important;
}