/* BusinessConnect — wwwroot/css/connect-shared.css del proyecto actual (antes global en _Host). Verbatim. */
/* ============================================================
   Vantastic Connect - Estilos compartidos (Cobalt Elegante)
   Agregar el link a este archivo en tu _Host.cshtml / index.html
   junto a tus demás hojas de estilo, o fusionar su contenido
   dentro de tu site.css existente.
   ============================================================ */

:root {
    --em-cobalt: #1a4fba;
    --em-cobalt-deep: #0f3494;
    --em-cobalt-light: #2d6ae0;
    --em-cobalt-pale: #e8eef9;
    --em-cobalt-subtle: #f0f4fb;
}

.ce-page { padding: 18px 22px; }
.ce-page-header { margin-bottom: 18px; }

/* NUEVO (KPI cards, 01/10/2026 -- pedido de Ivan, A.5): mismo patron visual que
   .gv-kpis/.gv-kpi de Guias V2 (grid responsive + borde izquierdo de color por estado),
   pero con prefijo ce- propio: Facturacion Masiva conserva su propio estilo, no se
   reutiliza directo el CSS de Guias para no acoplar ambos modulos. */
.ce-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 14px; }
@media (max-width: 900px) { .ce-kpis { grid-template-columns: repeat(2,1fr); } }
.ce-kpi { background: #fff; border: 1px solid #e5e9f2; border-left: 3px solid #cfd6d2; border-radius: 10px; padding: 10px 12px; min-width: 0; overflow: hidden; }
.ce-kpi small { display: block; color: #6b7280; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ce-kpi b { display: block; font-size: 24px; font-weight: 600; margin-top: 2px; color: #1f2937; }
.ce-kpi span { font-size: 11.5px; color: #6b7280; }
.ce-kpi.ce-kpi-acc { border-left-color: var(--em-cobalt); }
.ce-kpi.ce-kpi-ok { border-left-color: #16a34a; }
.ce-kpi.ce-kpi-warn { border-left-color: #d97706; }
.ce-kpi.ce-kpi-err { border-left-color: #dc2626; }
.ce-page-header h3 { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; color: #1f2937; margin: 0; }
.ce-page-subtitle { color: #6b7280; font-size: 13px; margin: 4px 0 0; }

.ce-loading-overlay {
    position: fixed; inset: 0; background: rgba(255,255,255,.6);
    display: flex; align-items: center; justify-content: center; z-index: 2000;
}
.ce-spinner {
    width: 40px; height: 40px; border: 4px solid var(--em-cobalt-pale);
    border-top-color: var(--em-cobalt); border-radius: 50%;
    animation: ce-spin 0.8s linear infinite;
}
@keyframes ce-spin { to { transform: rotate(360deg); } }

.ce-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; height: 31px; font-size: 13px; font-weight: 600;
    border: none; border-radius: 5px; color: #fff; cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.ce-btn-secondary { background: #374151; }
.ce-btn-danger { background: #dc2626; }
.ce-btn-success { background: #16a34a; }
.ce-btn-primary { background: #1a56db; }
/* NUEVO (01/10/2026 -- pedido de Ivan: "no quiero botones negros" en Facturacion Masiva):
   variante clara, estilo "Cobalt Elegante" (mismo criterio de colores que los modales),
   para acciones secundarias que no ameritan el gris oscuro de .ce-btn-secondary -- ej. "Ver
   PDF" / "Generar guia" en la tabla de Facturados. No se toca .ce-btn-secondary: sigue
   usandose tal cual en el resto de la pantalla (toggle de filtros, "Actualizar", "Cerrar"). */
.ce-btn-light {
    background: var(--em-cobalt-pale); color: var(--em-cobalt-deep);
    border: 1px solid var(--em-cobalt-light); box-shadow: none;
}
.ce-btn-light:hover { background: var(--em-cobalt-subtle); }
.ce-btn-light:disabled { opacity: .6; cursor: default; }

.ce-icon-btn {
    width: 31px; height: 31px; border-radius: 6px; border: none;
    box-shadow: 0 1px 2px rgba(0,0,0,.08); color: #fff; cursor: pointer;
}
.ce-icon-btn-light {
    width: 31px; height: 31px; border-radius: 6px; cursor: pointer;
    background: var(--em-cobalt-pale); color: var(--em-cobalt-deep);
    border: 1px solid var(--em-cobalt-light); box-shadow: none;
}
.ce-icon-btn-light:hover { background: var(--em-cobalt-subtle); }
.ce-icon-btn-light:disabled { opacity: .6; cursor: default; }

/* NUEVO: reglas de color para los badges de ConnectPedidos.razor -- cubren los estados
   granulares que salen de EstadoPedidoReal (código crudo del backend, pasado por Slug() para
   armar el nombre de clase). Antes solo existían reglas (si acaso) para los 4 estados base de
   la solicitud (pendiente/aprobado/rechazado/cancelado); agrego esas 4 también por si acaso
   no estuvieran -- si ya las tienes en tu hoja de estilos actual, borra esos 2 bloques de acá
   para no duplicar (los valores no chocan, son los mismos colores, pero mejor no repetir).

   Slugs que arma Slug() en ConnectPedidos.razor (minúsculas, sin tildes/espacios) para cada
   código real:
     "Pendiente"                         -> pendiente
     "Aprobado"                          -> aprobado
     "Rechazado"                         -> rechazado
     "Cancelado"                         -> cancelado
     "Aprobado - Pendiente de pago"      -> aprobado-pendiente-de-pago
     "PendienteConfirmacionPago"         -> pendienteconfirmacionpago
     "PagoConfirmado"                    -> pagoconfirmado
     "EnPreparacion"                     -> enpreparacion
     "ListoParaRecoger"                  -> listopararecoger
     "EnviadoCourier"                    -> enviadocourier
     "Anulado"                           -> anulado
*/

.ce-badge {
    /* Si .ce-badge base YA existe en tu hoja de estilos (padding/border-radius/font-size),
       ignora esta regla -- la dejo solo como mínimo viable por si no existiera. */
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* ---- estados base de la solicitud (por si no existían ya) ---- */
.ce-badge-rechazado {
    background: #fff1f0;
    color: #cf1322;
    border-color: #ffa39e;
}

.ce-badge-cancelado {
    background: #fafafa;
    color: #8c8c8c;
    border-color: #d9d9d9;
}

/* ---- estados granulares del Pedido real (EstadoPedidoReal) ---- */

/* esperando que el cliente pague / suba el voucher */
.ce-badge-pendiente,
.ce-badge-aprobado-pendiente-de-pago {
    background: #fff7e6;
    color: #ad6800;
    border-color: #ffd591;
}

/* el cliente ya subió el voucher -- esperando que el admin lo verifique (necesita atención) */
.ce-badge-pendienteconfirmacionpago {
    background: #fff2e8;
    color: #d4380d;
    border-color: #ffbb96;
}

/* pago verificado */
.ce-badge-pagoconfirmado {
    background: #f6ffed;
    color: #389e0d;
    border-color: #b7eb8f;
}

/* en curso */
.ce-badge-enpreparacion,
.ce-badge-aprobado {
    background: #e6f4ff;
    color: #0958d9;
    border-color: #91caff;
}

/* listo para el siguiente paso */
.ce-badge-listopararecoger {
    background: #e6fffb;
    color: #08979c;
    border-color: #87e8de;
}

/* en camino */
.ce-badge-enviadocourier {
    background: #f9f0ff;
    color: #722ed1;
    border-color: #d3adf7;
}

/* anulado -- terminal, mismo tono que rechazado */
.ce-badge-anulado {
    background: #fff1f0;
    color: #cf1322;
    border-color: #ffa39e;
}

/* NUEVO (01/10/2026 -- pedido de Ivan): pedidos viejos/semilla sin ninguna fila en
   PedidoEstadoBC -- EstadoPedido.Texto() no tiene nada que mostrar. Antes del fix caian en
   .ce-badge-pagoconfirmado (verde) con texto vacio, un badge "en blanco" confuso en la tabla
   de Facturados. */
.ce-badge-sin-estado {
    background: #fafafa;
    color: #8c8c8c;
    border-color: #d9d9d9;
}

/* ===== Chrome comun de modales (antes duplicado por cada Modal*.razor) =====
   Los modales nuevos (ModalSolicitudCotizacion, ModalSolicitudPedido) dependen de esto
   en vez de repetirlo. Los modales viejos ya traen su propia copia inline y siguen
   funcionando igual -- no se tocaron para no arriesgar nada que ya estaba andando. */
.ce-modal-overlay { position:fixed; inset:0; background:rgba(15,52,148,.35); display:flex; align-items:center; justify-content:center; z-index:1000; }
.ce-modal-container { background:#fff; border-radius:14px; width:90%; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.25); }
.ce-modal-header { background:linear-gradient(135deg,var(--em-cobalt),var(--em-cobalt-deep)); color:#fff; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; font-weight:600; }
.ce-modal-close { background:none; border:none; color:#fff; cursor:pointer; font-size:15px; }
.ce-modal-body { padding:18px; max-height:60vh; overflow-y:auto; }
.ce-modal-footer { padding:14px 18px; display:flex; justify-content:flex-end; gap:8px; border-top:1px solid #f0f4fb; }
.ce-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; }
.ce-detail-grid label { font-size:11.5px; color:#9ca3af; text-transform:uppercase; }
.ce-detail-grid p { margin:2px 0 0; font-size:14px; color:#1f2937; }
.ce-form-label { display:block; font-size:12.5px; font-weight:600; color:#374151; margin-bottom:6px; }
.ce-textarea { width:100%; border:1px solid #d1d9e6; border-radius:5px; padding:8px 10px; font-size:13.5px; resize:vertical; }
.ce-error-text { color:#dc2626; font-size:12px; margin-top:6px; }
.ce-form-group { margin-bottom:16px; }