/* ════════════════════════════════════════════════════════════════════════
   Toma de Muestra (laboratorio) — estilos de pantalla
   Alineado al sistema visual de hospitalizado/css/workspaceClinico.css
   (azul/slate, plano, radio 8px, sombras sutiles). Las variables se
   encapsulan en #moduloLabTomaMuestra para no colisionar globalmente.
   ════════════════════════════════════════════════════════════════════════ */
#moduloLabTomaMuestra {
    --primary-color: #1a6fc4;
    --primary-dark: #145390;
    --primary-soft: #eef5fc;
    --secondary-color: #6b7280;
    --text-main: #1f2937;
    --text-muted: #9ca3af;
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --surface-alt: #f9fafb;
    --border: #e5e7eb;
    --border-strong: #cbd5e1;
    --success: #198754;
    --danger: #b91c1c;
    --radius: 8px;
    --radius-sm: 6px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 6px 16px -4px rgba(15, 23, 42, 0.18);
    --focus-ring: 0 0 0 3px rgba(26, 111, 196, 0.12);
}

/* ── Banner de Información de Orden ── */
.orden-info-banner {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
}

.orden-codigo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.05rem;
    font-weight: 700;
    /* Evita que el código largo desborde y deforme el banner */
    word-break: break-all;
    overflow-wrap: anywhere;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.orden-codigo i {
    font-size: 1.35rem;
    flex-shrink: 0;
}

/* Datos de la orden en columnas que se adaptan al ancho disponible */
.orden-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem 1.5rem;
}

.orden-detail {
    font-size: 0.9rem;
    min-width: 0;
}

.orden-detail label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    opacity: 0.85;
    margin-bottom: 0.25rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.orden-detail span {
    display: block;
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* ── Card de Paciente ── */
.patient-header-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.patient-info-wrapper {
    display: flex;
    align-items: center;
    padding: 1.5rem;
}

.patient-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border);
    margin-right: 1.5rem;
}

.patient-details h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-main);
}

.patient-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-size: 0.9rem;
    color: var(--secondary-color);
    align-items: center;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* N° de ficha clínica, junto al nombre del paciente. Va en píldora para que se lea
   como un identificador y no como parte del nombre. */
.patient-ficha {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5rem;
    background: var(--primary-soft, #e0edfb);
    color: var(--primary-color, #1a6fc4);
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Dato que la ficha tiene en blanco y se recuperó del historial de la mascota. Se
   señala en ámbar para que no se confunda con un dato vigente; el detalle (y la fecha)
   están en el title. */
.patient-dato-historico {
    color: #d97706;
    font-size: 0.72rem;
    cursor: help;
    margin-left: 0.15rem;
}

/* Etiqueta del dato (Especie, Raza, Sexo, Peso). Va atenuada: identifica el campo
   sin competir con el valor, que es lo que se lee. Imprescindible desde que un dato
   sin cargar se muestra igual con "N/A" — sin la etiqueta no se sabría QUÉ es N/A. */
.patient-meta label {
    margin: 0 0.15rem 0 0;
    font-weight: 500;
    opacity: 0.7;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.patient-tutor {
    font-size: 0.9rem;
    color: var(--secondary-color);
    margin-top: 0.5rem;
}

.patient-tutor i {
    margin-right: 0.25rem;
}

.patient-weight {
    background-color: var(--primary-soft);
    color: var(--primary-color);
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
}

.patient-alert {
    background-color: #fee2e2;
    color: #991b1b;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Card de Muestra ── */
.sample-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    overflow: hidden;
}

.sample-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.sample-card-body {
    padding: 1rem 1.1rem;
    padding-left: 1.25rem;
}

.sample-card h5 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.35;
    font-size: 0.95rem;
    color: var(--text-main);
}

/* ── Muestra YA TOMADA (registrada en la lista de trabajo) ──────────────────
   La tarjeta NO se colapsa ni se esconde: se muestra con los datos reales con los
   que quedó la muestra, en modo consulta. La sección de insumos puede seguir
   activa —a una muestra ya tomada se le pueden registrar los insumos después—,
   así que acá no se oculta nada, solo se marca visualmente. */
.sample-card--tomada {
    background: #f0fdf4;
    border-color: #86efac;
}

/* Resumen de la toma: código, fecha y quién la tomó. */
.tm-toma-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #065f46;
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.tm-toma-codigo {
    font-family: monospace;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Campos bloqueados de una muestra ya tomada: legibles, no editables. El gris
   del navegador sobre fondo verde queda ilegible, por eso se fuerza. */
.sample-card--tomada .form-control-premium:disabled,
.sample-card--tomada select:disabled,
.sample-card--tomada textarea:disabled {
    background: #ffffff;
    color: var(--text-main);
    opacity: 1;
    cursor: default;
}

/* Vista compacta para muestras ya guardadas en lista de trabajo */
.sample-card--guardada {
    background: #f0fdf4;
    border-color: #86efac;
}

.sample-card--guardada .sample-card-body {
    padding: 0.5rem 0.9rem;
}

.sample-card--guardada .form-section {
    display: none;
}

.sample-card--guardada .custom-switch,
.sample-card--guardada .custom-checkbox {
    display: none;
}

.sample-card--guardada h5 {
    font-size: 0.9rem;
    margin-bottom: 0;
}

.sample-card--guardada .d-flex.justify-content-between {
    align-items: center;
    margin-bottom: 4px;
}

/* Tarjeta bloqueada tras guardado inmediato */
.sample-card--bloqueada {
    opacity: 0.65;
    pointer-events: none;
}

/* Acciones en layout compacto (muestra guardada) */
.sample-card__acciones-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 0;
}

.sample-card__guardada-text {
    color: #065f46;
    font-weight: 700;
    font-size: 0.72rem;
}

/* ── Secciones del formulario ── */
.form-section {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.section-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.section-title i {
    margin-right: 0.5rem;
    color: var(--primary-color);
}

/* ── Checkboxes / switches ── */
.custom-checkbox .custom-control-label {
    font-size: 0.82rem;
    font-weight: 500;
}

/* Header de la card: permite que tipo de muestra, switch y estado bajen de línea */
.sample-card .d-flex.justify-content-between {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.custom-checkbox .custom-control-label i {
    margin-right: 0.25rem;
}

.custom-control-input:checked~.custom-control-label::before {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.custom-control-input:focus~.custom-control-label::before {
    box-shadow: var(--focus-ring);
}

.custom-switch.custom-switch-lg .custom-control-label {
    padding-left: 2.25rem;
    padding-bottom: 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.custom-switch.custom-switch-lg .custom-control-label::before {
    height: 1.4rem;
    width: 2.5rem;
    border-radius: 0.75rem;
}

.custom-switch.custom-switch-lg .custom-control-label::after {
    height: 1.05rem;
    width: 1.05rem;
    border-radius: 50%;
    top: calc(0.25rem + 2px);
    left: calc(-2.25rem + 2px);
}

.custom-switch.custom-switch-lg .custom-control-input:checked~.custom-control-label::after {
    transform: translateX(1.1rem);
}

/* ── Inputs ── */
.form-control-premium {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.65rem;
    font-size: 0.85rem;
    height: auto;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background-color: var(--surface-alt);
}

.form-control-premium:focus {
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
    background-color: #fff;
}

.form-label-premium {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Botones ── */
.btn-action {
    background-color: var(--surface-alt);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.9rem;
    font-weight: 600;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-action:hover {
    background-color: #eef0f3;
    color: var(--primary-color);
    border-color: var(--border-strong);
}

.action-footer {
    margin-top: 2rem;
    text-align: right;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.btn-primary-premium {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border: none;
    padding: 0.65rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 6px -1px rgba(20, 83, 144, 0.35);
    transition: all 0.15s ease;
    color: white;
}

.btn-primary-premium:hover {
    background: linear-gradient(135deg, var(--primary-dark) 0%, #0f3f6e 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px -1px rgba(20, 83, 144, 0.45);
    color: white;
}

.btn-primary-premium:focus {
    box-shadow: var(--focus-ring);
    color: white;
}

/* ── Badges ── */
.tube-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 0.5rem;
}

/* Píldora estado (estilo workspaceClinico) — usada en muestra guardada */
.tm-estado-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: #d1fae5;
    color: #065f46;
}

/* Código LAB como píldora monoespaciada */
.badge-lab-code {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: #d1fae5;
    color: #065f46;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.7rem;
    font-weight: 600;
}

/* ── Lista de exámenes ── */
.exam-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--secondary-color);
    font-size: 0.9rem;
}

.exam-list li::before {
    content: "•";
    color: var(--primary-color);
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* ── Indicador de guardado automático ── */
#autosave-indicator {
    position: fixed;
    top: 80px;
    right: 20px;
    background: var(--success);
    color: white;
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    display: none;
    animation: fadeIn 0.3s;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Responsividad ── */

/* Indicadores de calidad: que envuelvan en vez de desbordar */
.sample-card .d-flex.gap-3 {
    flex-wrap: wrap;
    row-gap: 0.4rem;
}

/* En pantallas anchas, dos muestras por fila para aprovechar el espacio */
@media (min-width: 1400px) {
    #samples-container>[class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* En móvil, compactar aún más y dar aire entre campos apilados */
@media (max-width: 575.98px) {
    .sample-card-body {
        padding: 0.85rem 0.9rem;
    }

    .form-section {
        margin-bottom: 0.85rem;
        padding-bottom: 0.6rem;
    }

    .sample-card .row>[class*="col-"] {
        margin-bottom: 0.5rem;
    }

    .action-footer {
        text-align: center;
    }
}

/* ==========================================================================
   Insumos utilizados en la toma de muestra (prefijo tm-insumos)
   ========================================================================== */
.tm-insumos-ayuda {
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
    margin-bottom: 0.6rem;
}

/* ── Resumen de confirmación previa al guardado (dentro del Swal) ───────────
   Va alineado a la izquierda: Swal centra su contenido por defecto y una lista
   de datos centrada se vuelve ilegible. */
.tm-resumen {
    text-align: left;
    font-size: 0.82rem;
}

.tm-resumen-titulo {
    font-weight: 700;
    color: var(--text-main, #1e293b);
    margin: 0.5rem 0 0.4rem;
    font-size: 0.82rem;
}

.tm-resumen-lista {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
}

.tm-resumen-item {
    border: 1px solid #e2e8f0;
    border-left: 4px solid #3b82f6;
    border-radius: 6px;
    padding: 0.5rem 0.7rem;
    margin-bottom: 0.4rem;
    background: #f8fafc;
}

.tm-resumen-examen {
    font-weight: 700;
    color: #1e293b;
}

.tm-resumen-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    color: #64748b;
    font-size: 0.75rem;
    margin-top: 0.2rem;
}

.tm-resumen-insumos {
    margin-top: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.tm-resumen-sin-insumos {
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: #94a3b8;
    font-style: italic;
}

.tm-resumen-aviso {
    margin-top: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 6px;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
    font-size: 0.76rem;
    font-weight: 600;
}

.tm-resumen-aviso--suave {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #64748b;
    font-weight: 500;
}

/* Botón "+" de agregar insumo: solo ícono y compacto. Cuadrado y con la misma
   altura que el input de cantidad que tiene al lado, para que no se desalineen. */
.tm-insumos-agregar {
    /* Mismo padding vertical y tamaño de fuente que .form-control-premium: así queda
       exactamente a la altura del input de cantidad sin fijar píxeles a mano. */
    padding: 0.4rem 0;
    font-size: 0.85rem;
    width: 100%;
    min-width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.5;
}

.tm-insumos-agregar i {
    font-size: 0.85rem;
}

.tm-insumos-bodega {
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 0.45rem;
}

.tm-insumos-alerta {
    color: #b45309;
    font-weight: 600;
}

.tm-insumos-lista {
    list-style: none;
    padding: 0;
    margin: 0.6rem 0 0;
}

.tm-insumos-lista li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 6px;
}

.tm-insumos-nombre {
    flex: 1 1 auto;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
    word-break: break-word;
}

.tm-insumos-cantidad {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1a6fc4;
    white-space: nowrap;
}

.tm-insumos-quitar {
    border: none;
    background: transparent;
    color: #b91c1c;
    padding: 2px 6px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
}

.tm-insumos-quitar:hover {
    background: #fee2e2;
}

/* Bloque de insumos YA descontados: vive fuera de .form-section para seguir
   visible cuando la tarjeta pasa a su vista compacta de "guardada". */
.tm-insumos-ya {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    margin-bottom: 0.6rem;
}

.tm-insumos-ya-titulo {
    font-size: 0.72rem;
    font-weight: 700;
    color: #065f46;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.tm-insumos-chip {
    font-size: 0.75rem;
    color: #065f46;
    background: #fff;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    padding: 2px 9px;
}

.tm-insumos-ya-bodega {
    font-size: 0.68rem;
    color: #047857;
    margin-left: auto;
}

@media (max-width: 575.98px) {
    .tm-insumos-ya-bodega {
        margin-left: 0;
    }
}