/*
Theme Name: Grupo Home Deco - Producción
Theme URI: https://gruphomedeco.com/
Author: Juvi Web | Automatización y Desarrollo Web
Author URI: https://instagram.com/juviweb
Description: Tema personalizado para el Gestor de Flujo de Producción.
Version: 1.1 (Optimizado)
Template: hello-elementor
*/
/* ==========================================================================
   1. VARIABLES Y ESTILOS GLOBALES
   ========================================================================== */
:root {
    --color-fondo-app: #F3F4F6;
    --color-fondo-claro: #FFFFFF;
    --color-borde: #E5E7EB;
    --texto-principal: #3E3E3E;
    --texto-secundario: #6B7280;
    --texto-claro: #F1F5F1; /* Usado para texto claro sobre fondos oscuros */

    /* Colores primarios y de acción */
    --color-primario: #4A7C59; /* Verde corporativo principal */
    --color-primario-hover: #3b6348; /* Verde corporativo más oscuro para hover */
    --color-rojo: #B34A49; /* Rojo de alerta o prioridad alta */
    --color-rojo-hover: #993a39; /* Rojo más oscuro para hover */
    --color-amarillo: #F59E0B; /* Amarillo de advertencia o tiempo promedio */
    --color-azul: #3b82f6; /* Azul para "Activas" */
    --color-verde-exito: #22c55e; /* Verde brillante para "Completado" */
    --color-verde-exito-hover: #16a34a; /* Verde brillante más oscuro para hover */

    --font-family-sans: 'Inter', sans-serif;
}
body {
    background-color: var(--color-fondo-app);
    font-family: var(--font-family-sans);
    color: var(--texto-principal);
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    line-height: 1.6; /* Añadido para mejor legibilidad */
}
* { box-sizing: border-box; }

/* Enlaces generales */
a {
    color: var(--color-primario);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: var(--color-primario-hover);
    text-decoration: underline;
}


/* ==========================================================================
   2. ESTRUCTURA PRINCIPAL
   ========================================================================== */
.ghd-pro-header { 
    background-color: var(--color-fondo-claro); 
    padding: 0.75rem 2rem; 
    border-bottom: 1px solid var(--color-borde); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 

     /* --- ESTILOS STICKY --- */
    position: sticky; /* Hace que el header sea sticky */
    top: 0; /* Lo fija en la parte superior */
    z-index: 1002; /* Asegura que se superponga sobre otros elementos al hacer scroll */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Sombra suave para darle profundidad */
    /* --- FIN ESTILOS STICKY --- */
}
.header-logo-title { 
    display: flex; 
    align-items: center; 
    gap: 1rem; /* Espacio entre el logo y el texto */
}
#mobile-menu-toggle { 
    display: none; /* Asegura que esté oculto por defecto en desktop */
}

.header-app-logo {
    height: 40px; /* Ajustamos a 40px para que "GRUPO DECO HOME S.R.L" no se vea tan pequeño */
    width: auto;
    object-fit: contain;
    margin-right: 0; /* No necesitamos margen si el texto va al lado */
    flex-shrink: 0; /* Para evitar que se encoja */
}


/* .header-logo { height: 40px; } */
.header-title-group { display: flex; flex-direction: column; }
.header-logo-title .main-title { 
    font-weight: 600; 
    margin: 0; 
    font-size: 1.1rem; /* Más grande */
    color: var(--color-rojo); /* Color rojizo, como en la imagen */
    line-height: 1.1; /* Ajustar line-height */
}
.header-logo-title .sub-title { 
    font-size: 0.8rem; /* Más pequeño */
    color: var(--color-rojo); /* También rojizo */
    margin: 0;
    line-height: 1.1;
    display: block; /* Asegura que S.R.L vaya debajo */
 }
 /* Ocultar el "Gestor de Flujo de Producción" si el logo ya lo dice (como antes) */
.header-logo-title .app-name-group { /* Nuevo contenedor para "Gestor de Flujo de Producción" */
    display: flex;
    flex-direction: column;
    margin-left: 1rem; /* Espacio entre el logo/razón social y el nombre de la app */
}

.header-logo-title .app-name-group .main-title-app { /* Título de la aplicación */
    font-weight: 600; 
    margin: 0; 
    font-size: 1.1rem; 
    color: var(--texto-principal); 
}

.header-logo-title .app-name-group .sub-title-app { /* Subtítulo del panel (ej. Panel de Control) */
    font-size: 0.85rem; 
    color: var(--texto-secundario); 
    margin: 0; 
}

.header-user-profile { 
    display: flex; 
    align-items: center; 
    gap: 15px; /* Espacio entre info de usuario y avatar */
}
.user-info { 
    display: flex; 
    flex-direction: column; 
    text-align: right; 
}
.user-name { 
    font-weight: 600; 
    color: var(--texto-principal);
    font-size: 1rem;
}
.user-role { 
    font-size: 0.85rem; 
    color: var(--texto-secundario); 
}

/* Nuevo contenedor para el avatar */
.user-avatar-wrapper {
    width: 40px; /* Ancho fijo para el wrapper */
    height: 40px; /* Alto fijo para el wrapper */
    border-radius: 50%;
    overflow: hidden; /* Asegura que el avatar se recorte dentro del círculo */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0; /* Fondo si no hay imagen */
    border: 1px solid var(--color-borde);
}

/* Estilo para la imagen del avatar */
.user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen llene el círculo */
    display: block; /* Elimina espacio extra debajo de la imagen */
}

/* Estilo para el icono de Font Awesome si no hay avatar */
.user-avatar-placeholder {
    font-size: 24px; /* Tamaño del icono */
    color: var(--texto-secundario); /* Color del icono */
}

.ghd-app-wrapper { display: flex; flex-grow: 1; }
.ghd-sidebar { 
     width: var(--sidebar-width);
    background-color: var(--color-sidebar-bg);
    color: var(--color-blanco);
    padding: 20px 0; /* <-- Cambia esto */
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1000;
}
.ghd-sidebar .sidebar-header { 
    padding: 20px; /* <-- Añadir padding aquí */
    margin-bottom: 20px; /* <-- Ajustar margin-bottom */
    display: flex;
    justify-content: space-between;
    align-items: center;
 }
.ghd-sidebar .sidebar-header .logo { 
    font-size: 1.5rem; 
    font-weight: 700; 
    color: var(--texto-claro); 
    margin: 0; 
}
.sidebar-nav ul { list-style: none; padding: 0; margin: 0; }
.sidebar-nav li { margin-bottom: 0.5rem; } /* Espacio entre elementos de menú */
.sidebar-nav li a { 
    display: flex; 
    align-items: center; 
    padding: 0.75rem 1rem; 
    border-radius: 6px; 
    text-decoration: none; 
    color: #a7a7a7; /* Color de texto para enlaces inactivos */
    transition: background-color 0.2s ease, color 0.2s ease;
}
.sidebar-nav li a:hover {
    background-color: rgba(255, 255, 255, 0.1); 
    color: var(--texto-claro);
}
.sidebar-nav li.active a { 
    background-color: var(--color-primario); 
    color: white; 
    font-weight: 600;
}
.sidebar-nav li a i { width: 20px; margin-right: 12px; font-size: 1rem; }
.ghd-main-content { 
    flex-grow: 1; 
    padding: 2rem; 
    background-color: var(--color-fondo-app);
}
.ghd-main-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 1.5rem; 
}
.ghd-main-header h2 { font-size: 1.8rem; margin: 0; }

/* Estilos para el contenedor de título y botón de refresco */
.header-title-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    justify-content: space-between;
    margin-bottom: .5%;
    /* width: 100%; */
}
.header-with-back{
    width: 100%;
}
.header-title-wrapper h2 {
    margin: 0;
}


/* ==========================================================================
   3. COMPONENTES REUTILIZABLES
   ========================================================================== */
.ghd-card { 
    background-color: var(--color-fondo-claro); 
    border-radius: 8px; 
    padding: 1.5rem; 
    margin-bottom: 1.5rem; 
    border: 1px solid var(--color-borde); 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Soft shadow for cards */
}
.ghd-btn { 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px; 
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    text-decoration: none;
    line-height: 1;
    height: auto;
    border: none;
    white-space: nowrap; /* Previene el salto de línea en botones */
}
.ghd-btn i {
    margin-right: 8px;
    font-size: 1em;
}
.ghd-order-card .order-card-actions{
    padding: 15px;
}
/* Estilos para los botones (ghd-btn) dentro de las acciones */
.ghd-order-card .order-card-actions .ghd-btn {
    flex: 1 1 auto;
    min-width: 120px;
    max-width: 100%; /* Asegura que no desborde en móviles */
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Los estilos de white-space, height, etc., para .ghd-btn.ghd-btn-small ya los tienes más abajo y son correctos */
}
/* Estilos para los selectores (dropdowns) dentro de las acciones */
.ghd-order-card .order-card-actions select {
    flex: 1 1 auto; /* Permite que el selector crezca */
    min-width: 120px;
    max-width: 100%; /* Asegura que no desborde en móviles */
    height: 38px; /* Altura estándar para selectores */
    padding: 8px 12px;
    border: 1px solid var(--color-gris-claro);
    border-radius: var(--border-radius-base);
    background-color: var(--color-blanco);
    color: var(--color-texto);
    font-size: 0.9rem;
}
/* Asegura que los selectores también tengan una altura definida si están en la misma línea que los botones */
.ghd-order-card .order-card-actions .ghd-assignee-selector {
    height: 38px; /* O el mismo height que los botones para alinearlos */
    /* Otros estilos si necesitas diferenciarlo visualmente, ej. border: 1px solid var(--color-secondary); */
}

/* Primary buttons (e.g., Nuevo Pedido, Archivar Pedido) */
.ghd-btn-primary {
    background-color: var(--color-primario);
    color: #ffffff;
    border: 1px solid var(--color-primario);
}
.ghd-btn-primary:hover {
    background-color: var(--color-primario-hover);
    border-color: var(--color-primario-hover);
    box-shadow: 0 4px 8px rgba(74, 124, 89, 0.2);
}

/* Secondary buttons (e.g., Exportar, Ver Detalles, Refrescar) */
.ghd-btn-secondary {
    background-color: var(--color-fondo-claro); /* White background */
    color: var(--texto-secundario); /* Muted text */
    border: 1px solid var(--color-borde); /* Light gray border */
}
.ghd-btn-secondary:hover {
    background-color: var(--color-fondo-app); /* Slightly darker gray background */
    border-color: #a1a5aa;
    color: var(--texto-principal); /* Darker text on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

/* Success button (e.g., Marcar Completa) */
.ghd-btn-success {
    background-color: var(--color-verde-exito);
    color: #ffffff;
    border: 1px solid var(--color-verde-exito);
}
.ghd-btn-success:hover {
    background-color: var(--color-verde-exito-hover);
    border-color: var(--color-verde-exito-hover);
    box-shadow: 0 4px 8px rgba(34, 197, 94, 0.2);
}

/* Specific button for "Iniciar Producción" */
.start-production-btn {
    background-color: var(--color-rojo); 
    border-color: var(--color-rojo);
    color: #ffffff;
}
.start-production-btn:hover {
    background-color: var(--color-rojo-hover); 
    border-color: var(--color-rojo-hover);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.2);
}

/* Botones de Icono (mobile menu toggle, reset filters) */
.ghd-btn-icon {
    background-color: transparent;
    border: none;
    color: var(--texto-principal);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem; /* Ajuste de padding para el área de clic */
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
.ghd-btn-icon:hover {
    background-color: rgba(0,0,0,0.05);
}


.ghd-tag { 
    display: inline-block; 
    padding: 0.2rem 0.6rem; 
    border-radius: 12px; 
    font-size: 0.8rem; 
    font-weight: 500; 
}
.ghd-tag.prioridad-alta { background-color: #FEE2E2; color: #991B1B; } 
.ghd-tag.prioridad-media { background-color: #FEF3C7; color: #92400E; } 
.ghd-tag.prioridad-baja { background-color: #D1FAE5; color: #065F46; } 


/* ==========================================================================
   4. SECCIONES ESPECÍFICAS
   ========================================================================== */
/* --- PANEL DE ADMINISTRADOR --- */
.ghd-table-wrapper {
    overflow-x: auto;
    border-radius: 8px; /* Added border-radius for consistency */
    border: 1px solid var(--color-borde); /* Added border */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Added shadow */
    background-color: var(--color-fondo-claro); /* Ensure white background */
}
.ghd-table { width: 100%; border-collapse: collapse; }
.ghd-table th, .ghd-table td { 
    padding: 0.8rem 1rem; 
    text-align: left; 
    border-bottom: 1px solid var(--color-borde); 
    white-space: nowrap;
}
.ghd-table th {
    background-color: #f8fafc; /* Slightly different background for headers */
    font-weight: 600;
    color: var(--texto-secundario);
    font-size: 0.9rem;
    text-transform: uppercase;
}
.ghd-table tbody tr:last-child td {
    border-bottom: none;
}
.ghd-table tbody tr:hover {
    background-color: var(--color-fondo-app); 
}


/* --- PANEL DE SECTOR (KPI y TARJETAS DE TAREA) --- */
.ghd-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.ghd-kpi-card {
    background-color: var(--color-fondo-claro);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    padding: 20px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid var(--color-borde);
}

.ghd-kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.ghd-kpi-card .kpi-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    margin-right: 15px;
    flex-shrink: 0; /* Prevent icon from shrinking */
}

/* KPI Icon Colors (using variables) */
.kpi-icon.icon-blue { background-color: var(--color-azul); } 
.kpi-icon.icon-red { background-color: var(--color-rojo); } 
.kpi-icon.icon-green { background-color: var(--color-verde-exito); } 
.kpi-icon.icon-yellow { background-color: var(--color-amarillo); }

.kpi-info {
    display: flex;
    flex-direction: column;
}

.kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--texto-principal);
    line-height: 1.2;
}

.kpi-label {
    font-size: 14px;
    color: var(--texto-secundario);
    margin-top: 2px;
}

.ghd-sector-tasks-list { display: flex; flex-direction: column; gap: 1.5rem; }
.ghd-order-card { 
    display: flex; 
    background-color: var(--color-fondo-claro); 
    border-radius: 8px; 
    border: 1px solid var(--color-borde); 
    overflow: hidden; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Consistent card shadow */
    transition: opacity 0.3s ease-in-out; 
    flex-direction: column; /* Default a columna para móvil */
}
.order-card-main { flex-grow: 1; display: flex; flex-direction: column; }
.order-card-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 1rem 1.5rem; 
    border-bottom: 1px solid var(--color-borde); 
    flex-wrap: wrap; /* Permite que el header se envuelva */
    gap: 10px; /* Espacio entre título y tag */
}
.order-card-header h3 { margin: 0; font-size: 1.25rem; } 

.order-card-body { padding: 1.5rem; flex-grow: 1; }
.order-card-body p { margin: 0 0 0.5rem 0; font-size: 0.95rem; }
.order-card-body p:last-child { margin-bottom: 0; }
.order-card-body strong { color: var(--texto-principal); }


.order-card-actions { 
    display: flex;
    flex-wrap: wrap; /* <-- Permite que los elementos se envuelvan */
     align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--color-gris-claro);
}
/* Hacer que cada botón ocupe el ancho disponible si hay espacio, o la mitad si son dos */
.ghd-order-card.fletero-card .order-card-actions .ghd-btn {
    flex: 1 1 auto; /* <-- Permite que los botones crezcan y se encojan, distribuyendo el espacio */
    min-width: 120px; /* Asegura un ancho mínimo para cada botón */
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Para pantallas más grandes, las acciones vuelven a la derecha */
@media (min-width: 769px) {
    .ghd-order-card {
        flex-direction: row; /* Vuelve a fila en desktop */
    }
    .order-card-actions {
        border-top: none; /* Quita el borde de arriba */
        border-left: 1px solid var(--color-borde); /* Añade borde a la izquierda */
        width: 220px; /* Vuelve al ancho fijo */
    }
}


/* ==========================================================================
   ESTILOS PARA LA PÁGINA DE DETALLES
   ========================================================================== */

.ghd-details-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    align-items: flex-start;
}
.details-main, .details-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.card-section-title {
    margin-top: 0;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-borde);
    font-size: 1.1rem;
}
.sub-status-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}


/* ==========================================================================
   ESTILOS PARA LA PÁGINA DE LOGIN (V3 - DISEÑO REFINADO)
   ========================================================================== */

.ghd-login-split-layout {
    display: flex;
    height: 100%;
    width: 100%;
}

.login-image-panel {
    flex: 1;
    background-image: url('./img/login-bg.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    height: 100%;
    filter: grayscale(100%); /* Imagen en blanco y negro */
}

.login-image-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-primario);
    opacity: 0.5;
    z-index: 1;
}

.login-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: var(--color-fondo-app);
}

.ghd-login-box {
    background-color: var(--color-fondo-claro);
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 400px;
    text-align: center;
}
.login-form-box .login-title { margin: 0 0 0.5rem; font-size: 1.5rem; }
.login-form-box .login-subtitle { margin: 0 0 1.5rem; color: var(--texto-secundario); }
.login-form-box .login-error { background-color: #fff5f5; color: #c53030; border: 1px solid #fc8181; padding: 1rem; border-radius: 6px; margin: 1%;}
.login-error, .login-error strong {
    color: var(--color-rojo)
}

.login-form-box #loginform p { display: flex; flex-direction: column; text-align: left; margin-bottom: 1rem; }
.login-form-box #loginform label { font-weight: 500; margin-bottom: 0.5rem; }
.login-form-box #loginform input[type="text"],
.login-form-box #loginform input[type="password"] { padding: 0.75rem; border: 1px solid var(--color-borde); border-radius: 6px; width: 100%; }
.login-form-box #loginform .login-remember { flex-direction: row; align-items: center; gap: 0.5rem; }

input[type="submit"].button-primary{
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.75rem;
    border: 1px solid var(--color-primario);
    border-radius: 6px;
    background-color: transparent;
    color: var(--color-primario);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
input[type="submit"].button-primary:hover{
    background-color: var(--color-primario-hover);
    color: var(--texto-claro); /* Changed to var(--texto-claro) for better contrast */
}

/* ==========================================================================
   CORRECCIÓN FINAL - LAYOUT DE LOGIN SIN SCROLL
   ========================================================================== */

body.page-template-template-login {
    height: 100vh;
    overflow: hidden;
}

.page-template-template-login .ghd-login-split-layout {
    min-height: 100%;
    max-height: 100%;
}

/* ==========================================================================
   ESTILOS PARA LA PÁGINA DE SECTORES
   ========================================================================== */

.ghd-sector-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem; /* Aumento del gap para mejor espaciado */
}

.ghd-sector-card {
    background-color: var(--color-fondo-claro);
    border-radius: 8px;
    border: 1px solid var(--color-borde);
    padding: 1.8rem 1.5rem; /* Aumento del padding para más "aire" */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Sombra más suave y moderna */
    text-align: center;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Animación al pasar el ratón */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Empuja el botón hacia abajo */
    align-items: center;
}

.ghd-sector-card:hover {
    transform: translateY(-5px); /* Efecto "levantar" al pasar el ratón */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Sombra más intensa al pasar el ratón */
}

.sector-card-title {
    margin-top: 0;
    margin-bottom: 0.75rem; /* Ajuste de margen */
    font-size: 1.5rem; /* Título más grande */
    font-weight: 700; /* Más audaz */
    color: var(--texto-principal);
}

.sector-card-stat {
    margin-top: 0;
    margin-bottom: 1.5rem; /* Espacio antes del botón */
    color: var(--texto-secundario);
    font-size: 1rem; /* Tamaño de fuente ligeramente más grande */
    font-weight: 500;
}

/* Estilo para el botón dentro de la tarjeta de sector */
.ghd-sector-card .ghd-btn {
    width: 100%; /* Botón de ancho completo en la tarjeta */
    margin-top: auto; /* Empuja el botón hacia el final del flex container */
    padding: 0.8rem 1.2rem; /* Ajuste de padding del botón */
    font-size: 16px; /* Tamaño de fuente más legible */
    text-transform: uppercase; /* Texto en mayúsculas */
    letter-spacing: 0.5px; /* Espaciado entre letras */
}

/* Media query para ajustar el grid en pantallas más pequeñas si es necesario */
@media (max-width: 600px) {
    .ghd-sector-card-grid {
        grid-template-columns: 1fr; /* Una columna en pantallas muy pequeñas */
        gap: 1rem;
    }
}

/* ==========================================================================
   5. RESPONSIVE Y UI MÓVIL
   ========================================================================== */
@media (min-width: 1025px) { /* A partir de desktop */
    .header-logo-title .header-title-group {
        display: flex; /* Vuelve a mostrar el grupo de títulos de la razón social */
        flex-direction: column;
    }
}
@media (max-width: 1024px) {
    .ghd-sidebar {
        position: fixed;
        left: -260px;
        height: 100%;
        z-index: 1000;
        transition: left 0.3s ease-in-out;
    }
    .ghd-sidebar.sidebar-visible {
        left: 0;
    }
    #mobile-menu-toggle { 
        display: block !important; /* !important forzar si hay especificidad */
        background-color: transparent;
        border: none;
        color: var(--texto-principal);
        font-size: 1.5rem;
        cursor: pointer;
    }
    .header-title-wrapper {
        justify-content: flex-start;
    }
    .ghd-main-header {
        padding: 1rem;
        margin-bottom: 1rem;
    }
     .header-logo-title .header-title-group {
        display: none; /* Oculta la razón social si la pantalla es pequeña y el logo ya está */
    } 
    .header-logo-title .app-name-group {
        margin-left: 0.5rem; /* Menos margen en móvil */
    }
     .header-app-logo {
        height: 35px; /* Logo más pequeño en móvil */
    }
    .ghd-main-content {
        padding: 1rem;
    }
    .ghd-pro-header {
        padding: 0.5rem 1rem;
    }
     .header-user-profile {
        gap: 10px; /* Reducir gap en móvil */
    }
    .user-info {
        display: none; /* Ocultar nombre y rol en móvil si es muy estrecho */
    }
    .user-avatar-wrapper {
        width: 35px; /* Avatar más pequeño en móvil */
        height: 35px;
    }
    .user-avatar-placeholder {
        font-size: 20px;
    }
}

@media (max-width: 900px) {
    .ghd-details-grid {
        grid-template-columns: 1fr;
    }
    .ghd-filters-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    .ghd-filters-wrapper input,
    .ghd-filters-wrapper select,
    .ghd-filters-wrapper .ghd-btn-icon {
        min-width: unset;
        width: 100%;
    }
    .ghd-reports-grid {
        grid-template-columns: 1fr !important; /* Una columna en tablets y móviles */
    }
}

/* --- RESPONSIVE PARA EL LOGIN (sin cambios) --- */
@media (max-width: 768px) {
    .login-image-panel {
        display: none;
    }
    .login-form-panel {
        width: 100%;
        flex: auto;
    }
}

/* ==========================================================================
   ESTILOS PARA LA PÁGINA DE CLIENTES
   ========================================================================== */
.client-list { display: flex; flex-direction: column; gap: 1rem; }
.client-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    transition: background-color 0.2s ease;
}
.client-list-item i { margin-right: 0.75rem; }

.client-list-item:hover { background-color: var(--color-fondo-app); }
.client-name { font-weight: 600; }

/* ==========================================================================
   ESTILOS PARA LA PÁGINA DE REPORTES
   ========================================================================== */
.ghd-reports-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; align-items: flex-start; }
.report-main, .report-sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.chart-container { position: relative; width: 100%; height: auto; min-height: 300px; }
@media (max-width: 900px) { .ghd-reports-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   ESTILOS PARA FILTROS DEL PANEL DE ADMIN (V2)
   ========================================================================== */
.ghd-filters-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 1.5rem;
    align-items: flex-end;
    padding: 1.5rem;
    background-color: var(--color-fondo-claro);
    border-radius: 8px;
    border: 1px solid var(--color-borde);
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03); /* Soft shadow for filters card */
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-grow: 1; 
}
.filter-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--texto-secundario);
}
.ghd-filters-wrapper input,
.ghd-filters-wrapper select {
    padding: 0.6rem;
    border-radius: 6px;
    border: 1px solid var(--color-borde);
    background-color: var(--color-fondo-claro);
    min-width: 180px;
    width: 100%; 
}
.ghd-filters-wrapper input[type="search"] {
    min-width: 250px;
}
.ghd-filters-wrapper .ghd-btn-icon { /* Reset filters button */
    height: 38px;
    width: 38px;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    color: var(--texto-secundario);
    transition: all 0.2s ease;
    background-color: var(--color-fondo-claro);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1rem;
    cursor: pointer;
}
.ghd-filters-wrapper .ghd-btn-icon:hover {
    background-color: var(--color-fondo-app);
    color: var(--texto-principal);
}

/* ------------ Badges de Sub-estados de Producción ------------------ */
.production-substatus-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.ghd-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.ghd-badge.status-blue { background-color: #dbeafe; color: #1e40af; } /* Pendiente */
.ghd-badge.status-yellow { background-color: #fef9c3; color: #b45309; } /* En Progreso */
.ghd-badge.status-green { background-color: #dcfce7; color: #16a34a; } /* Completado */
.ghd-badge.status-gray { background-color: #e5e7eb; color: #4b5563; } /* No Asignado */

.ghd-badge.status-en-despacho {
    background-color: var(--color-warning); /* Naranja para "En Despacho" */
    color: var(--color-negro); /* Texto oscuro para contraste en naranja */
}
/* También, para el fletero: */
.ghd-badge.status-entregado { /* Cuando el fletero lo marca como Entregado */
    background-color: var(--color-success);
}
/* Pequeño ajuste para botones en tablas que contienen badges */
.ghd-btn.ghd-btn-small {
    padding: 6px 12px;
    font-size: 0.85rem;
}

/* --- Mejoras para la sección de Información del Producto en detalles --- */
.product-details-section {
    display: flex;
    flex-direction: column; /* Por defecto columna para responsive */
    gap: 1.5rem;
}

.product-image-wrapper {
    flex-shrink: 0; /* Previene que la imagen se encoja */
    /* Ancho máximo en pantallas grandes, pero flexible */
    max-width: 350px; 
    width: 100%;
}

.product-image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra más pronunciada para la imagen */
    object-fit: cover;
    max-height: 400px; /* Limita la altura para evitar imágenes muy alargadas */
}

.product-info-wrapper {
    flex-grow: 1; /* Permite que la información crezca */
}

.product-main-info {
    margin-bottom: 1rem;
}

.product-main-info h3 {
    font-size: 1.8rem; /* Título de producto más grande */
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--texto-principal);
}

.product-specifications p {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--texto-secundario);
    margin: 0;
}

/* Responsive para la sección de producto */
@media (min-width: 769px) {
    .product-details-section {
        flex-direction: row; /* En desktop, la imagen y la info van en fila */
        align-items: flex-start; /* Alinea al inicio */
    }
    .product-image-wrapper {
        margin-right: 1.5rem; /* Espacio entre imagen e info */
    }
}

/* ------------------ Estilos para la página de Reportes ------------------------------------------------ */
.ghd-reports-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Mantiene el layout principal de 2 columnas */
    gap: 1.5rem;
    align-items: flex-start;
}

.report-card {
    min-height: 350px; /* Altura mínima para los contenedores de los gráficos */
    display: flex;
    flex-direction: column;
}

.report-card .card-section-title {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-borde);
    font-size: 1.1rem;
    color: var(--texto-principal);
}

.chart-container {
    position: relative;
    width: 100%;
    flex-grow: 1; /* Permite que el contenedor del canvas se expanda */
}

/* Responsive para la grid de reportes */
@media (max-width: 900px) {
    .ghd-reports-grid {
        grid-template-columns: 1fr; /* Una columna en tablets y móviles */
    }
}

/* ------------ Estilos para botones pequeños ------------------ 
.ghd-btn.ghd-btn-small {
    padding: 6px 12px;
    font-size: 0.85rem;
}*/

/* --- Estilos para mostrar el Color Swatch --- */
.color-swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #ccc; /* Un borde sutil para que se vea el swatch en colores claros */
    vertical-align: middle; /* Alineación con el texto */
    margin-right: 5px; /* Espacio a la derecha del swatch */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Ligera sombra */
}

/* Ajuste específico para el swatch en el detalle del producto */
.product-main-info .color-swatch {
    margin-left: 0; /* Ya lo pusimos inline, pero por si acaso */
}

/* Estilos para botones deshabilitados */
.ghd-btn[disabled] {
    opacity: 0.6; /* Hace el botón más claro */
    cursor: not-allowed; /* Muestra el cursor de "no permitido" */
    box-shadow: none; /* Quita la sombra */
    pointer-events: none; /* Evita que el botón reciba eventos de clic (fundamental!) */
}
/* Re-habilitar los eventos para los botones que están deshabilitados pero queremos que muestren un mensaje */
/* Esto puede ser necesario si el alert() se muestra antes del `pointer-events: none;` */
.ghd-btn.start-production-btn[disabled] {
    pointer-events: auto; /* Permite clicks aunque esté deshabilitado, para mostrar el alert() */
}

/* --- Estilos para el Selector de Prioridad (ghd-priority-selector) --- */
.ghd-priority-selector {
    /* Estilo base */
    appearance: none; /* Oculta la flecha por defecto del navegador */
    background-color: var(--color-fondo-claro);
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    padding: 8px 12px;
    padding-right: 30px; /* Espacio extra para el icono de flecha personalizado */
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--texto-principal);
    cursor: pointer;
    outline: none; /* Quita el outline azul al enfocar */
    transition: all 0.2s ease-in-out;
    min-width: 150px; /* Asegura un ancho mínimo */
    position: relative; /* Para posicionar el icono personalizado */
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22%236B7280%22%20d%3D%22M10.293%204.293L6%208.586%201.707%204.293A1%201%200%2000.293%205.707l5%205a1%201%200%20001.414%200l5-5a1%201%200%2000-1.414-1.414z%22%2F%3E%3C%2Fsvg%3E'); /* Icono SVG de flecha hacia abajo */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

.ghd-priority-selector:hover {
    border-color: var(--color-primario);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.ghd-priority-selector:focus {
    border-color: var(--color-primario-hover);
    box-shadow: 0 0 0 2px rgba(74, 124, 89, 0.2); /* Anillo de foco sutil */
}

/* Colores dinámicos según la prioridad seleccionada */
.ghd-priority-selector.prioridad-alta {
    background-color: #fef2f2; /* Fondo muy claro rojo */
    border-color: #ef4444; /* Borde rojo */
    color: #b91c1c; /* Texto rojo oscuro */
}

.ghd-priority-selector.prioridad-media {
    background-color: #fffbeb; /* Fondo muy claro amarillo */
    border-color: #f59e0b; /* Borde amarillo */
    color: #92400e; /* Texto naranja oscuro */
}

.ghd-priority-selector.prioridad-baja {
    background-color: #ecfdf5; /* Fondo muy claro verde */
    border-color: #22c55e; /* Borde verde */
    color: #047857; /* Texto verde oscuro */
}

/* Estilo para la opción "Seleccionar Prioridad" */
.ghd-priority-selector option[value="Seleccionar Prioridad"] {
    color: var(--texto-secundario);
}

/*============================================================================ */
/* --- Estilos para el Selector de Vendedora (ghd-vendedora-selector) --- */
.ghd-vendedora-selector {
    /* Estilo base, similar al ghd-priority-selector */
    appearance: none;
    background-color: var(--color-fondo-claro);
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    padding: 8px 12px;
    padding-right: 30px; /* Espacio extra para el icono de flecha personalizado */
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--texto-principal);
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease-in-out;
    min-width: 150px;
    position: relative;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22%236B7280%22%20d%3D%22M10.293%204.293L6%208.586%201.707%204.293A1%201%200%2000.293%205.707l5%205a1%201%200%20001.414%200l5-5a1%201%200%2000-1.414-1.414z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}
.ghd-vendedora-selector:hover {
    border-color: var(--color-primario);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.ghd-vendedora-selector:focus {
    border-color: var(--color-primario-hover);
    box-shadow: 0 0 0 2px rgba(74, 124, 89, 0.2);
}

/* --- Estilo para Selectores de Prioridad y Vendedora cuando NO tienen una opción válida seleccionada --- */
.ghd-priority-selector.prioridad-no-seleccionada,
.ghd-vendedora-selector.vendedora-no-seleccionada { /* ¡Clase para Vendedora añadida aquí! */
    border-color: var(--color-rojo); /* Borde rojo sutil para indicar que falta seleccionar */
    box-shadow: 0 0 0 1px rgba(179, 74, 73, 0.4);
}
.ghd-priority-selector.prioridad-no-seleccionada:hover,
.ghd-vendedora-selector.vendedora-no-seleccionada:hover { /* ¡Clase para Vendedora añadida aquí! */
    border-color: var(--color-rojo-hover);
    box-shadow: 0 0 0 2px rgba(179, 74, 73, 0.6);
}

/* --- Estilos para el Selector de Asignación de Operarios (ghd-assignee-selector) --- */
.ghd-assignee-selector {
    /* Estilo base, similar a otros selectores */
    appearance: none;
    background-color: var(--color-fondo-claro);
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    padding: 8px 12px;
    padding-right: 30px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--texto-principal);
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease-in-out;
    min-width: 150px;
    position: relative;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22%236B7280%22%20d%3D%22M10.293%204.293L6%208.586%201.707%204.293A1%201%200%2000.293%205.707l5%205a1%201%200%20001.414%200l5-5a1%201%200%2000-1.414-1.414z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    width: 100%; /* Para que ocupe todo el espacio en la columna de acciones */
    margin-bottom: 0.5rem; /* Espacio debajo del selector */
}

/* --- Estilos para la información de "Asignado a" y "Completado por" en las tablas --- */
.assigned-completed-info p {
    margin: 0 0 0.25rem 0;
    font-size: 0.85rem;
    color: var(--texto-secundario);
}
.ghd-info-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7em;
    font-weight: 500;
    white-space: nowrap;
    margin-right: 5px;
    margin-bottom: 3px;
}
.ghd-info-badge.info-assigned { background-color: #e0f2fe; color: #075985; } /* Azul claro para asignado */
.ghd-info-badge.info-completed { background-color: #dcfce7; color: #16a34a; } /* Verde claro para completado */
.ghd-text-muted { color: var(--texto-secundario); font-style: italic; font-size: 0.9em;}


/* --- Estilos para el Modal de Tareas --- */
.ghd-modal {
    display: none; /* Oculto por defecto */
    position: fixed; /* Fijo en toda la pantalla */
    z-index: 9999; /* Por encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Permite scroll si el contenido es largo */
    background-color: rgba(0,0,0,0.4); /* Fondo semi-transparente */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}

.ghd-modal-content {
    background-color: var(--color-fondo-claro);
    margin: auto;
    padding: 30px;
    padding-top: 60px; /* AUMENTAR EL PADDING SUPERIOR PARA EL BOTÓN DE CIERRE */
    border: 1px solid #888;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    animation: zoomIn 0.3s ease-out;
}

@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.close-button {
    color: #aaa;
    /* float: right; <<-- ELIMINAR ESTA LÍNEA */
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 15px;
    line-height: 1; /* Para que la 'x' sea más compacta */
    z-index: 1001; /* Asegurar que esté por encima de todo lo demás en el modal */
}

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

.ghd-modal-content h3 {
    margin-top: 0;
    color: var(--texto-principal);
    border-bottom: 1px solid var(--color-borde);
    padding-bottom: 10px;
    margin-bottom: 20px;
    padding-right: 40px; /* AÑADIR PADDING A LA DERECHA PARA DEJAR ESPACIO A LA 'X' */
}

.ghd-modal-content .form-group {
    margin-bottom: 15px;
}

.ghd-modal-content label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--texto-principal);
}

.ghd-modal-content input[type="text"],
.ghd-modal-content input[type="number"],
.ghd-modal-content textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-borde);
    border-radius: 5px;
    font-size: 1rem;
    color: var(--texto-principal);
    background-color: var(--color-fondo-claro);
    box-sizing: border-box; /* Asegura que padding no aumente el ancho total */
}

.ghd-modal-content textarea {
    min-height: 80px;
    resize: vertical;
}

.ghd-modal-content .ghd-btn {
    margin-top: 15px;
    margin-right: 10px;
    /* Los estilos ya están definidos para .ghd-btn y ghd-btn-success/secondary */
}

/* Responsive para el modal */
@media (max-width: 600px) {
    .ghd-modal-content {
        width: 95%;
        padding: 20px;
    }
}


/* ==========================================================================
   MEJORAS PARA EL SCROLL HORIZONTAL Y DESBORDAMIENTO
   ========================================================================== */

/* Asegura que las celdas de tabla no tengan contenido que desborde */
.ghd-table td {
    /* Permite saltos de línea en el contenido de las celdas */
    white-space: normal !important; 
    word-wrap: break-word; /* Rompe palabras largas si es necesario */
    /* Si necesitas un control más estricto sobre la altura de la celda, considera max-height */
}

/* Contenedores específicos que pueden causar desbordamiento */
.assigned-completed-info,
.production-substatus-badges {
    overflow-x: auto; /* Añade scroll horizontal solo si es necesario */
    white-space: nowrap; /* Evita que el contenido se rompa en varias líneas dentro de estos divs */
    padding-bottom: 5px; /* Pequeño padding para que el scroll no tape el contenido */
}

/* Ajuste para los badges individuales si también se desbordan */
.ghd-badge {
    white-space: normal; /* Permite que el texto de los badges se envuelva */
    display: inline-block; /* Asegura que los badges se comporten como bloques inline */
    text-align: center;
    padding: 4px 6px; /* Ajuste de padding */
}

/* Si necesitas que el texto dentro de los badges se ajuste */
.ghd-badge span { 
    display: inline-block;
    word-break: break-word; /* Permite romper palabras largas dentro del span */
}

/* Ajuste para el selector de operarios, para que no cause scroll si el nombre es muy largo */
.ghd-assignee-selector {
    max-width: 150px; /* Limita el ancho del selector */
    overflow: hidden; /* Oculta el texto que no cabe */
    text-overflow: ellipsis; /* Muestra puntos suspensivos (...) */
    white-space: nowrap; /* Mantiene el texto en una sola línea */
}

/* --- CORRECCIÓN DE ESTILO PARA BOTONES LARGOS --- */
.open-complete-task-modal span {
    display: inline;
}

/* En pantallas más pequeñas, ocultar el texto y dejar solo el ícono */
@media (max-width: 480px) {
    .ghd-btn span {
        display: none; /* Oculta el texto dentro de los botones */
    }
    .ghd-btn i {
        margin-right: 0; /* Quita el margen del ícono cuando no hay texto */
    }
    .open-complete-task-modal {
        min-width: 44px; /* Un ancho mínimo para que sea fácil de tocar */
    }

    .ghd-order-card .order-card-actions {
        flex-direction: column; /* Apilados en pantallas muy pequeñas */
    }
    .ghd-order-card .order-card-actions .ghd-btn,
    .ghd-order-card .order-card-actions select { /* Aplicar también a selectores */
        width: 100%; /* Ocupar todo el ancho en móvil */
        flex: none; /* Eliminar el flex-grow en esta resolución */
    }
    .ghd-order-card.fletero-card .order-card-actions {
        flex-direction: column; /* Apilados en pantallas muy pequeñas */
    }
    .ghd-order-card.fletero-card .order-card-actions .ghd-btn {
        width: 100%; /* Ocupar todo el ancho en móvil */
    }
}

/* --- MEJORA DE ESTILO PARA BOTONES LARGOS EN TARJETAS --- */

/* Asegura que el texto junto al ícono se muestre por defecto */
.order-card-actions .ghd-btn span {
    display: inline;
}

/* En pantallas pequeñas (ej. móviles), ocultar el texto y dejar solo el ícono */
@media (max-width: 480px) {
    .order-card-actions .ghd-btn span {
        display: none; 
    }
    .order-card-actions .ghd-btn i {
        margin-right: 0; /* Quita el espacio extra del ícono cuando no hay texto */
    }
    .order-card-actions .ghd-btn {
        min-width: 44px; /* Un ancho mínimo para que el botón-ícono sea fácil de tocar */
        justify-content: center;
    }
}

/* Ajustes para botones de fletero */
.ghd-order-card .order-card-actions .ghd-btn.ghd-btn-small {
    white-space: normal; /* Permite que el texto se envuelva */
    height: auto;        /* Ajusta la altura automáticamente */
    min-height: 38px;    /* Altura mínima para que no se vea demasiado estirado */
    padding: 8px 12px;   /* Ajusta el padding para mejor apariencia */
    line-height: 1.2;    /* Ajusta el espaciado entre líneas si el texto se envuelve */
}

/* --- Estilos para el Panel de Fleteros (template-fletero.php) --- */

.ghd-app-wrapper.is-mobile-optimized {
    padding: 0; /* Eliminar padding general si se quiere más ancho en móvil */
}

/* Estilos para la cuadrícula de tarjetas de fletero */
.ghd-fletero-tasks-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Ajuste responsive */
    gap: 20px;
    padding: 20px; /* Añadir padding para que las tarjetas no toquen los bordes */
}

/* Estilos base para las tarjetas de pedido del fletero */
.ghd-order-card.fletero-card {
    background-color: var(--color-blanco);
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px; /* Altura mínima para tarjetas uniformes */
}

.ghd-order-card.fletero-card .order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--color-gris-claro);
    padding-bottom: 10px;
}

.ghd-order-card.fletero-card .order-card-header h3 {
    margin: 0;
    font-size: 1.25rem; /* Tamaño de fuente para el código */
    color: var(--color-rojo);
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre icono y texto */
}

.ghd-order-card.fletero-card .order-card-body p {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
    color: var(--color-texto-oscuro);
    display: flex;
    align-items: flex-start; /* Alinea los iconos con la parte superior del texto */
    gap: 8px; /* Espacio entre icono y texto */
}

.ghd-order-card.fletero-card .order-card-body p strong {
    color: var(--color-texto);
}

.ghd-order-card.fletero-card .order-card-body p i {
    color: var(--color-gris-oscuro); /* Color para los iconos de información */
    font-size: 1.1em;
    flex-shrink: 0; /* Evita que el icono se encoja */
    margin-top: 2px; /* Pequeño ajuste vertical para los iconos */
}

.ghd-order-card.fletero-card .order-card-body .phone-link {
    color: var(--color-azul); /* Color azul para enlaces de teléfono */
    text-decoration: none;
    font-weight: 500;
}
.ghd-order-card.fletero-card .order-card-body .phone-link:hover {
    text-decoration: underline;
}

.ghd-order-card.fletero-card .order-card-actions {
    display: flex;
    flex-direction: column; /* Botones apilados en columnas */
    gap: 10px;
    width: 100%;
    margin-top: 15px;
    padding: 15px;
    border-top: 1px solid var(--color-gris-claro);
}

/* Ajustes para los botones de acción específicos del fletero */
.ghd-order-card.fletero-card .order-card-actions .ghd-btn {
    width: 100%; /* Ocupar todo el ancho */
    justify-content: center; /* Centrar texto e icono */
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre icono y texto */
}

/* Ajustes específicos para el botón truncado (resolviendo el problema anterior) */
.ghd-order-card .order-card-actions .ghd-btn.ghd-btn-small {
    white-space: normal; /* Permite que el texto se envuelva */
    height: auto;        /* Ajusta la altura automáticamente */
    min-height: 38px;    /* Altura mínima para que no se vea demasiado estirado */
    padding: 8px 12px;   /* Ajusta el padding para mejor apariencia */
    line-height: 1.2;    /* Ajusta el espaciado entre líneas si el texto se envuelve */
}

/* Estilos para el modal de comprobante de entrega */
.ghd-modal .complete-delivery-form .form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}
.ghd-modal .complete-delivery-form .form-group label i {
    color: var(--color-gris-oscuro);
}


/* Media Queries para Responsive Design (opcional, si Elementor no lo maneja completamente) */
@media (max-width: 768px) {
    .ghd-fletero-tasks-list {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
        padding: 15px;
        gap: 15px;
    }
    .ghd-order-card.fletero-card {
        padding: 15px;
    }
    .ghd-order-card.fletero-card .order-card-header h3 {
        font-size: 1.15rem;
    }
    .ghd-main-header .header-title-wrapper h2 {
        font-size: 1.5rem; /* Ajustar tamaño del título principal */
    }
}

/* --- Estilos para el Layout General y Sidebar Móvil --- */
/* Estilos generales para el wrapper de la aplicación */
.ghd-app-wrapper {
    display: flex;
    min-height: 100vh;
    background-color: var(--color-fondo-app); /* Color de fondo general de la aplicación */
    width: 100%;
}

/* Sidebar General */
.ghd-sidebar {
    width: var(--sidebar-width); /* Define una variable CSS para el ancho del sidebar */
    background-color: var(--color-sidebar-bg); /* Fondo oscuro */
    color: var(--color-blanco);
    padding: 20px 0;
    box-shadow: var(--shadow-md);
    flex-shrink: 0; /* Evita que el sidebar se encoja */
    position: sticky;
    top: 0;
    height: 100vh; /* Ocupa toda la altura de la ventana */
    overflow-y: auto; /* Para scroll si el contenido es largo */
    display: flex;
    flex-direction: column;
    justify-content: start; /* Para empujar el footer hacia abajo */
    z-index: 1000; /* Para que esté por encima de otros elementos */
}

.ghd-sidebar-header {
    padding: 0 20px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ghd-sidebar-header h3 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--color-blanco);
}
.ghd-sidebar-header .ghd-btn-icon {
    display: none; /* Ocultar en desktop, mostrar en móvil */
    color: var(--color-blanco);
}

.ghd-sidebar-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ghd-sidebar-nav .nav-item {
    margin-bottom: 5px;
}
.ghd-sidebar-nav .nav-link,
.ghd-sidebar-footer .logout-link {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* <-- NUEVO: Alinea el contenido a la izquierda */
    gap: 12px;
    padding: 12px 20px;
    color: var(--color-sidebar-text);
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-left: 3px solid transparent;
}
.ghd-sidebar-nav .nav-link i,
.ghd-sidebar-footer .logout-link i {
    font-size: 1.1rem;
    color: var(--color-sidebar-icon); /* Gris más oscuro */
}
.ghd-sidebar-nav .nav-link:hover,
.ghd-sidebar-nav .nav-link.is-active,
.ghd-sidebar-footer .logout-link:hover {
    background-color: var(--color-sidebar-hover); /* Fondo más claro al pasar el ratón o activo */
    color: var(--color-sidebar-active-text); /* Texto más claro */
    border-left-color: var(--color-primary); /* Borde de color para activo */
}
.ghd-sidebar-nav .nav-link.is-active i {
    color: var(--color-primary); /* Icono del mismo color que el borde activo */
}

/* Footer del Sidebar (Cerrar Sesión) */
.ghd-sidebar-footer {
    padding: 20px 0;
    border-top: 1px solid var(--color-gris-oscuro); /* Separador */
}
.ghd-sidebar-footer .logout-link {
    color: var(--color-rojo); /* Color de logout */
}
.ghd-sidebar-footer .logout-link i {
    color: var(--color-rojo);
}
.ghd-sidebar-footer .logout-link:hover {
    background-color: rgba(255, 0, 0, 0.1); /* Fondo rojo claro al pasar el ratón */
    border-left-color: var(--color-rojo);
}


/* Main Content General */
.ghd-main-content {
    flex-grow: 1; /* Ocupa el espacio restante */
    padding: 20px; /* Padding general para el contenido principal */
    background-color: var(--color-fondo-app);
}

/* Header de la App (dentro de main-content) */
.ghd-main-header {
    background-color: var(--color-blanco);
    padding: 15px 20px;
    border-radius: var(--border-radius-base);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ghd-main-header .header-title-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}
.ghd-main-header h2 {
    margin: 0;
    font-size: 1.75rem;
    color: var(--color-titulo);
}
.ghd-main-header .ghd-btn-icon {
    background: none;
    border: none;
    color: var(--color-texto);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
    display: none; /* Ocultar en desktop */
}


/* --- Media Queries (para Responsividad) --- */
@media (max-width: 1024px) {
    .ghd-sidebar {
        position: fixed; /* Fijo para que no se mueva al scrollear */
        left: -var(--sidebar-width); /* Ocultar por defecto */
        transition: left 0.3s ease;
    }
    .ghd-sidebar.sidebar-visible {
        left: 0; /* Mostrar en móvil */
    }
    .ghd-sidebar .ghd-sidebar-header .ghd-btn-icon {
        display: block; /* Mostrar botón de cerrar en sidebar móvil */
    }
    .ghd-main-header .ghd-btn-icon {
        display: block; /* Mostrar botón de abrir menú en header móvil */
    }
}
@media (max-width: 768px) {
    .ghd-main-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .ghd-main-header .header-actions {
        width: 100%;
        display: flex;
        justify-content: flex-end; /* Alinear acciones a la derecha */
    }
}

/* Establecer variables CSS globales (ajusta a tus colores base) */
:root {
    --color-primary: #4A7C59; /* Verde oscuro */
    --color-secondary: #6B7280; /* Gris medio */
    --color-success: #10B981; /* Verde brillante */
    --color-danger: #EF4444; /* Rojo */
    --color-warning: #F59E0B; /* Naranja/Amarillo */
    --color-info: #3B82F6; /* Azul */

    --color-blanco: #FFFFFF;
    --color-negro: #1F2937; /* Gris muy oscuro */
    --color-texto: #374151; /* Texto principal */
    --color-texto-oscuro: #1F2937; 
    --color-gris-claro: #E5E7EB; /* Bordes, separadores */
    --color-gris-claro-2: #F3F4F6; /* Fondo de elementos */
    --color-gris-oscuro: #6B7280;

    --color-fondo-app: #F9FAFB; /* Fondo general de la aplicación */
    --color-sidebar-bg: #374151; /* Fondo del sidebar */
    --color-sidebar-text: #D1D5DB; /* Texto del sidebar */
    --color-sidebar-icon: #9CA3AF; /* Iconos del sidebar */
    --color-sidebar-hover: #4B5563; /* Hover del sidebar */
    --color-sidebar-active-text: #FFFFFF; /* Texto activo del sidebar */

    --color-rojo: #EF4444; /* Usado para códigos de pedido */
    
    --border-radius-base: 8px;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    --sidebar-width: 250px; /* Ancho del sidebar */
}

/* Estilos de las insignias (badges) */
.ghd-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3em 0.7em;
    border-radius: 9999px; /* Pill shape */
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    color: #FFFFFF; /* Texto blanco por defecto */
    text-transform: uppercase;
    white-space: nowrap;
}

/* Estados específicos */
.ghd-badge.status-pendiente { background-color: var(--color-info); }
.ghd-badge.status-en-progreso { background-color: var(--color-warning); }
.ghd-badge.status-recogido { color: #fff; background-color: var(--color-info); } /* Mismo que pendiente, o un azul distinto */
/* --- NUEVO ESTILO ESPECÍFICO PARA LOGÍSTICA FLETERO: RECOGIDO en Admin Panel --- */
.ghd-badge.status-recogido-admin {
    background-color: var(--color-info); /* El azul claro (o el color que quieras para el fondo de este badge) */
    color: var(--color-sidebar-text); /* <-- ¡TEXTO blanco para contraste en el fondo! */
}
.ghd-badge.status-completado { background-color: var(--color-success); }
.ghd-badge.status-no-asignado { background-color: var(--color-secondary); }
.ghd-badge.status-pendientedecierreadmin { background-color: var(--color-danger); }
/* Para otros estados, define más si es necesario */


/* Estados específicos del sistema GHD (ya existentes) */
.ghd-badge.status-pendiente { background-color: var(--color-info); }
.ghd-badge.status-en-progreso { background-color: var(--color-warning); }
.ghd-badge.status-recogido { background-color: var(--color-info); }
.ghd-badge.status-completado { background-color: var(--color-success); }
.ghd-badge.status-no-asignado { background-color: var(--color-secondary); }
.ghd-badge.status-pendientedecierreadmin { background-color: var(--color-danger); }

/* --- NUEVOS ESTILOS PARA ESTADOS GENERALES --- */
/* (Pueden reutilizar colores existentes o definir nuevos) */
.ghd-badge.status-pendiente-de-asignacion { /* Coincide con el slug de "Pendiente de Asignación" */
    background-color: var(--color-secondary); /* Gris */
}
.ghd-badge.status-en-produccion, /* Coincide con "En Producción" */
.ghd-badge.status-en-costura, /* Coincide con "En Costura", etc. */
.ghd-badge.status-en-tapiceriaembalaje { 
    background-color: var(--color-info); /* Azul para estados intermedios de producción */
}
.ghd-badge.status-listo-para-entrega { /* Coincide con "Listo para Entrega" */
    background-color: var(--color-success); /* Verde para listo para entrega */
}
.ghd-badge.status-despachado { /* Si tienes un estado "Despachado" */
    background-color: var(--color-primary); /* Verde más oscuro */
}
.ghd-badge.status-completado-y-archivado { /* Coincide con "Completado y Archivado" */
    background-color: var(--color-negro); /* Negro o un gris muy oscuro para archivado */
    color: var(--color-blanco);
}
.ghd-badge.status-cancelado { /* Si tienes un estado "Cancelado" */
    background-color: var(--color-rojo); /* Rojo para cancelado */
}

/* ------ ESTILOS ESPECÍFICOS PARA LOS ESTADOS DEL FLETERO EN SU PANEL --------- */
.ghd-badge.status-pendiente-fletero {
    background-color: var(--color-danger); /* Naranja para Pendiente (más visible) */
    color: var(--color-blanco);
}
.ghd-badge.status-recogido-fletero {
    background-color: var(--color-warning); /* Naranja para Recogido (como se veía) */
    color: var(--color-negro); /* Texto negro para contraste en naranja */
}
.ghd-badge.status-entregado { /* Si el estado final 'Entregado' se muestra como badge */
    background-color: var(--color-success);
    color: var(--color-blanco);
}
/* --- ESTILOS PARA PESTAÑAS (TABS) - ACTUALIZADO --- */
.ghd-tabs-container {
    margin-top: 2rem;
    background-color: var(--color-fondo-claro);
    border-radius: 8px;
    border: 1px solid var(--color-borde);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* Para contener los bordes internos */
}

.ghd-tabs-nav {
    display: flex;
    border-bottom: 1px solid var(--color-borde);
    background-color: #f8fafc; /* Fondo ligeramente diferente para la barra de navegación */
    padding: 0 1.5rem; /* Padding horizontal para los botones */
    overflow-x: auto; /* Permite scroll horizontal si hay muchas pestañas */
    -webkit-overflow-scrolling: touch; /* Mejora el scroll en iOS */
}

.ghd-tab-button {
    background-color: transparent;
    border: none;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--texto-secundario);
    cursor: pointer;
    transition: color 0.2s ease, border-bottom-color 0.2s ease, background-color 0.2s ease; /* Añadido background-color */
    border-bottom: 3px solid transparent; /* Borde inferior para indicar activo */
    white-space: nowrap; /* Evita que el texto del botón se rompa */
    display: flex;
    align-items: center;
    gap: 8px; /* Espacio entre el texto y el contador */
}

.ghd-tab-button:hover {
    color: var(--texto-principal);
    border-bottom-color: var(--color-borde);
    background-color: rgba(74, 124, 89, 0.05); /* Fondo suave al pasar el ratón */
}

.ghd-tab-button.active {
    background-color: #e6f2e9; /* Un verde muy suave para el fondo de la pestaña activa */
    color: var(--color-primario); /* Texto verde corporativo principal */
    border-bottom-color: var(--color-primario); /* Borde inferior verde corporativo */
}

.ghd-tab-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 6px;
    border-radius: 9999px; /* Pill shape */
    background-color: rgba(74, 124, 89, 0.1); /* Verde claro */
    color: var(--color-primario);
    font-size: 0.75rem;
    font-weight: 600;
}

.ghd-tab-button.active .ghd-tab-counter {
    background-color: var(--color-primario); /* Fondo del contador verde corporativo */
    color: var(--color-fondo-claro); /* Texto blanco para el contador activo */
}

.ghd-tab-content {
    display: none; /* Oculto por defecto */
    padding: 1.5rem;
}

.ghd-tab-content.active {
    display: block; /* Mostrar el contenido activo */
}

/* Ajustes para el contenido dentro de las pestañas */
.ghd-tab-content .header-title-wrapper {
    margin-top: 0 !important; /* Anular el margen superior si se aplica desde el PHP */
    margin-bottom: 1.5rem;
}
.ghd-tab-content .ghd-kpi-grid {
    margin-bottom: 1.5rem; /* Ajustar margen inferior de los KPIs */
}
.ghd-tab-content .ghd-card.ghd-table-wrapper {
    margin-bottom: 0; /* Eliminar margen inferior si es el último elemento en la pestaña */
}

/* Responsive para las pestañas */
@media (max-width: 768px) {
    .ghd-tabs-nav {
        padding: 0 1rem; /* Menos padding en móvil */
    }
    .ghd-tab-button {
        padding: 0.8rem 1rem; /* Menos padding en móvil */
        font-size: 0.9rem;
    }
    .ghd-tab-content {
        padding: 1rem; /* Menos padding en móvil */
    }
}

/* --- MEJORAS VISUALES DEFINITIVAS PARA EL PANEL DE ADMINISTRADOR --- */

/* 1. Mejora General de la Tabla: Filas alternas y alineación */
.ghd-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}
.ghd-table th, .ghd-table td {
    vertical-align: top;
    padding: 12px 10px;
}

/* 2. Estilos para Badges de Estado y Prioridad */
.ghd-status-tag {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.8em;
    font-weight: 600;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tag-alta { background-color: #fee2e2; color: #b91c1c; }
.tag-media { background-color: #fef3c7; color: #b45309; }
.tag-baja { background-color: #e0e7ff; color: #3730a3; }
.tag-listo-entrega { background-color: #d1fae5; color: #065f46; }
.tag-en-progreso { background-color: #dbeafe; color: #1d4ed8; }

/* 3. Barra de Progreso Visual */
.ghd-progress-bar {
    width: 100%;
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 5px;
}
.ghd-progress-bar-inner {
    height: 100%;
    background-color: #28a745;
    transition: width 0.3s ease-in-out;
}

/* 4. Columna "Asignación/Completado" - LA SOLUCIÓN FINAL */
.ghd-table .assignment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.ghd-table .task-status-item {
    padding: 8px;
    border-radius: 5px;
    background-color: #f1f3f5;
    border-left: 3px solid #ced4da; /* Borde neutral por defecto */
    line-height: 1.4;
    font-size: 0.9em;
}
/* LA REGLA CLAVE: Permite que el texto se divida en varias líneas */
.ghd-table .task-status-item,
.ghd-table .task-status-item span {
    white-space: normal;
    word-break: break-word;
}
/* Estructura vertical dentro de cada item */
.ghd-table .task-status-item strong {
    display: block;
    font-size: 0.95em;
    color: #495057;
    margin-bottom: 4px;
}
/* Colores dinámicos para el borde izquierdo */
.ghd-table .task-status-item .status-asignado {
    color: #0d6efd;
}
.ghd-table .task-status-item .status-completado {
    color: #198754;
    font-weight: 600;
}
.task-status-item:has(.status-asignado) {
    border-left-color: #0d6efd; /* Borde azul si está asignado */
}
.task-status-item:has(.status-completado) {
    border-left-color: #198754; /* Borde verde si está completado */
}

/* 5. Mejora para la columna de Acciones */
.ghd-table .actions-cell {
    text-align: right;
}
.ghd-table .actions-cell .ghd-btn-icon {
    padding: 8px 10px;
}

/*
 * Corrección de Estilos para Badges de Estado
 * -------------------------------------------------- */

.ghd-badge.status-completado-archivado {
    background-color: #6c757d; /* Un gris oscuro estándar */
    color: #fff !important; /* Forzar el color del texto a blanco */
}

/* ========================================================================
   Estilos para el Widget de Perfil de Usuario en el Header
   ======================================================================== */

.user-profile-widget {
    display: flex;
    align-items: center; /* Centra verticalmente el icono y el texto */
    gap: 12px; /* Espacio entre el icono y el texto */
    margin-left: auto; /* Empuja el widget al extremo derecho del header */
}

.user-profile-widget .user-icon {
    font-size: 2.2rem; /* Tamaño del icono */
    color: var(--color-gris-azulado, #64748B); /* Usa una variable de color si existe, si no un gris */
}

.user-profile-widget .user-info {
    display: flex;
    flex-direction: column; /* Apila el nombre y el rol verticalmente */
    align-items: flex-start; /* Alinea el texto a la izquierda */
    line-height: 1.3;
}

.user-profile-widget .user-name {
    font-weight: 600; /* Texto en negrita */
    font-size: 0.9rem;
    color: var(--color-texto-principal, #1F2937);
}

.user-profile-widget .user-role {
    font-size: 0.75rem;
    color: var(--color-texto-secundario, #6B7280);
    text-transform: capitalize; /* Pone la primera letra en mayúscula (ej: Vendedora) */
}