/* =========================================================
   Estilos del módulo Órdenes de Exámenes
   Complemento a Wirevet / Bootstrap (no reemplaza utilidades).
   ========================================================= */

/* =========================================================
   ZONA 0 — Badges base (familia / estado)
   ========================================================= */
.tipos-resumen {
    display: flex;
    gap: .25rem;
    flex-wrap: wrap;
}

.badge-familia-lab,
.badge-familia-rx,
.badge-familia-eco,
.badge-familia-otro {
    color: #fff;
    font-size: .7rem;
    padding: .25em .5em;
    border-radius: 10px;
}
.badge-familia-lab  { background: #6f42c1; }
.badge-familia-rx   { background: #fd7e14; }
.badge-familia-eco  { background: #20c997; }
.badge-familia-otro { background: #6c757d; }

.chip-dato {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    padding: .3rem .8rem;
    display: inline-block;
    margin: .15rem;
    font-size: .85rem;
}

.section-label {
    font-size: .75rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.tutor-cell small {
    display: block;
    color: #6c757d;
    font-size: .72rem;
}

/* =========================================================
   ZONA 1 — KPI cards
   ========================================================= */
.oe-kpis-row { margin-top: .25rem; }

.oe-kpi-card {
    position: relative;
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    transition: transform .15s ease, box-shadow .15s ease;
    min-height: 110px;
    overflow: hidden;
}
.oe-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
}
.oe-kpi-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.1rem;
    height: 100%;
}
.oe-kpi-info { z-index: 1; }
.oe-kpi-label {
    margin-bottom: .25rem;
    font-size: .85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    opacity: .9;
}
.oe-kpi-value {
    margin: 0;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
}
.oe-kpi-icon {
    opacity: .35;
    font-size: 2.6rem;
}

/* Variantes con gradiente */
.oe-kpi-total     { background: linear-gradient(135deg, #8a63f7 0%, #6C63FF 100%); }
.oe-kpi-pendiente { background: linear-gradient(135deg, #f6c453 0%, #f59e0b 100%); color: #3a2a00; }
.oe-kpi-pendiente .oe-kpi-icon { opacity: .45; }
.oe-kpi-proceso   { background: linear-gradient(135deg, #4ea7f6 0%, #1d77d1 100%); }
.oe-kpi-completa  { background: linear-gradient(135deg, #48c78e 0%, #1f9d6b 100%); }

/* =========================================================
   ZONA 2 — Panel de filtros
   ========================================================= */
.search-panel {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem 1.1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
}
.oe-filtros-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .8rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #f1f3f5;
    gap: .75rem;
    flex-wrap: wrap;
}
.oe-filtros-titulo {
    font-size: .95rem;
    font-weight: 600;
    color: #495057;
}
.oe-filtros-titulo i {
    color: #6C63FF;
}
.oe-filtros-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}
.oe-filtros-chips:empty {
    display: none;
}

/* =========================================================
   ZONA 3 — Tabla de órdenes (sticky header + legibilidad)
   ========================================================= */
.oe-tabla-wrapper {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
    padding: .5rem;
}
.oe-tabla-ordenes thead th {
    position: sticky;
    top: 0;
    background: #f8f9fa;
    z-index: 2;
    border-bottom: 2px solid #dee2e6;
    color: #495057;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.oe-tabla-ordenes tbody td {
    vertical-align: middle;
    font-size: .88rem;
}

/* =========================================================
   ZONA 4 — Modal de detalle: cabecera + tarjetas
   ========================================================= */

/* SweetAlert centra el contenido del popup por defecto.
   Forzamos alineación a la izquierda para todo el detalle. */
.oe-swal-popup .swal2-html-container,
.oe-swal-popup .oe-detalle,
.oe-swal-popup .oe-detalle * {
    text-align: left;
}
.oe-swal-popup .oe-detalle table th,
.oe-swal-popup .oe-detalle table td {
    text-align: left;
    vertical-align: middle;
}

.oe-detalle-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid #f1f3f5;
}
.oe-detalle-cabecera-info { flex: 1 1 auto; min-width: 0; }
.oe-detalle-cabecera-estado {
    flex: 0 0 auto;
    align-self: center;
}
.oe-detalle-cabecera-estado .badge {
    font-size: 1rem;
    padding: .55em .9em;
    border-radius: 999px;
}

/* Tarjetas semánticas Mascota / Tutor / Veterinario */
.oe-tarjeta {
    border: 1px solid #e9ecef;
    border-radius: 10px;
    background: #fff;
    padding: .85rem 1rem;
    height: 100%;
    transition: box-shadow .15s ease;
}
.oe-tarjeta:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, .06);
}
.oe-tarjeta-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
    padding-bottom: .35rem;
    border-bottom: 1px dashed #e9ecef;
}
.oe-tarjeta-header i {
    font-size: 1rem;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
}
.oe-tarjeta-mascota      .oe-tarjeta-header i { background: #20c997; }
.oe-tarjeta-tutor        .oe-tarjeta-header i { background: #6C63FF; }
.oe-tarjeta-veterinario  .oe-tarjeta-header i { background: #fd7e14; }

.oe-tarjeta-nombre {
    font-size: 1rem;
    margin-bottom: .2rem;
    color: #212529;
}

/* Observaciones */
.oe-observaciones {
    background: #fffdf5;
    border: 1px solid #ffe9a8;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: .75rem 1rem;
}
.oe-observaciones-body {
    margin-top: .25rem;
    color: #5b4a17;
}

/* Tabla de ítems */
.oe-tabla-items thead th {
    background: #f8f9fa;
    color: #495057;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 2px solid #dee2e6;
}

/* =========================================================
   ZONA 5 — Botonera de acciones del modal (contrato JS)
   Selectores: #oe-detalle-acciones .oe-btn-accion[data-action=...]
   ========================================================= */
.oe-detalle-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: flex-start;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 2px dashed #e9ecef;
    background: linear-gradient(180deg, rgba(108, 99, 255, 0.03) 0%, rgba(108, 99, 255, 0.06) 100%);
    border-radius: 0 0 10px 10px;
    padding: 1rem 1.2rem;
}
.oe-btn-accion {
    border: none;
    border-radius: 10px;
    padding: .6rem 1.1rem;
    font-size: .92rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.oe-btn-accion i { font-size: 1rem; }
.oe-btn-accion:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .18);
}
.oe-btn-accion:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.oe-btn-imprimir { background: linear-gradient(135deg, #8a63f7 0%, #6C63FF 100%); }
.oe-btn-ver      { background: linear-gradient(135deg, #4ea7f6 0%, #1d77d1 100%); }
.oe-btn-enviar   { background: linear-gradient(135deg, #48c78e 0%, #1f9d6b 100%); }

/* Responsive: apilar en móvil */
@media (max-width: 575.98px) {
    .oe-detalle-acciones {
        flex-direction: column;
        align-items: stretch;
    }
    .oe-btn-accion {
        justify-content: center;
        width: 100%;
    }
}

/* =========================================================
   ZONA 6 — Skeleton loader (opcional)
   ========================================================= */
.oe-skeleton-row td {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: oeShimmer 1.4s ease-in-out infinite;
    height: 24px;
    border-radius: 4px;
}
@keyframes oeShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =========================================================
   ZONA 6.5 — SlimSelect (estilo Wirevet)
   Scope: solo módulo Órdenes de Exámenes (CSS cargado únicamente aquí).
   ========================================================= */

/* El <select> original queda oculto por SlimSelect; nos aseguramos
   de que no aporte alto residual ni clases form-control empujen el flujo. */
#panelFiltros select.oe-slim-target {
    display: none !important;
}

#panelFiltros .ss-main {
    min-height: calc(1.5em + .5rem + 2px);
    padding: 0 .35rem;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background: #fff;
    font-size: .85rem;
    color: #495057;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#panelFiltros .ss-main:hover {
    border-color: #b9b3ff;
}
#panelFiltros .ss-main.ss-open-above,
#panelFiltros .ss-main.ss-open-below,
#panelFiltros .ss-main:focus-within {
    border-color: #6C63FF;
    box-shadow: 0 0 0 3px rgba(108, 99, 255, .15);
    outline: none;
}
#panelFiltros .ss-main .ss-values .ss-placeholder {
    color: #adb5bd;
    font-size: .85rem;
}
#panelFiltros .ss-main .ss-values .ss-single {
    color: #343a40;
    font-size: .85rem;
}
#panelFiltros .ss-main .ss-arrow path {
    stroke: #6C63FF;
}
#panelFiltros .ss-main .ss-deselect svg path {
    stroke: #dc3545;
}

/* Dropdown portal (se monta en <body>) */
.ss-content {
    border: 1px solid #e2dffb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(108, 99, 255, .14), 0 2px 6px rgba(0, 0, 0, .06);
    overflow: hidden;
}
.ss-content .ss-search {
    padding: .55rem .65rem;
    border-bottom: 1px solid #f1f0fb;
    background: #fafaff;
}
.ss-content .ss-search input {
    border: 1px solid #d8d4f5;
    border-radius: 6px;
    padding: .3rem .55rem;
    font-size: .85rem;
    color: #343a40;
}
.ss-content .ss-search input:focus {
    border-color: #6C63FF;
    box-shadow: 0 0 0 2px rgba(108, 99, 255, .15);
    outline: none;
}
/* Ocultar X nativa de WebKit/Blink en el input[type=search] interno
   (evita la "doble X" junto al clear de SlimSelect). */
.ss-content .ss-search input::-webkit-search-cancel-button,
.ss-content .ss-search input::-webkit-search-decoration,
.ss-content .ss-search input::-webkit-search-results-button,
.ss-content .ss-search input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
.ss-content .ss-search input { -moz-appearance: textfield; }
.ss-content .ss-list .ss-option {
    padding: .5rem .75rem;
    font-size: .85rem;
    color: #343a40;
    border-bottom: 1px solid #f5f4fc;
    transition: background-color .12s ease, color .12s ease;
}
.ss-content .ss-list .ss-option:last-child { border-bottom: none; }
.ss-content .ss-list .ss-option:hover,
.ss-content .ss-list .ss-option.ss-highlighted {
    background-color: #6C63FF;
    color: #fff;
}
.ss-content .ss-list .ss-option.ss-selected {
    background-color: #ede8ff;
    color: #5a52e0;
    font-weight: 600;
}
.ss-content .ss-list .ss-option.ss-disabled {
    background: #fafbff;
    color: #c5c8d0;
}

/* =========================================================
   ZONA 6.6 — Botón "Limpiar filtros" (estilo Wirevet)
   ========================================================= */
.oe-btn-limpiar {
    background: linear-gradient(135deg, #8a63f7 0%, #6C63FF 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(108, 99, 255, .25);
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.oe-btn-limpiar:hover,
.oe-btn-limpiar:focus {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(108, 99, 255, .35);
}
.oe-btn-limpiar:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(108, 99, 255, .25);
}

/* =========================================================
   ZONA 7 — @media print
   ========================================================= */
@media print {
    .wirevet-layout,
    .oe-kpis-row,
    .search-panel,
    .oe-detalle-acciones,
    .btn,
    button {
        display: none !important;
    }
    .oe-tabla-ordenes thead th { position: static; }
}