/* ==========================================================================
   1. CONFIGURACIÓN E IMPORTACIONES
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Elms+Sans:ital,wght@0,100..900;1,100..900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* --- Paleta Corporativa Principal --- */
    --primary: #01a79d;       /* Turquesa Principal */
    --primary-dark: #087770;  /* Turquesa Oscuro */
    --secondary: #3c454e;     /* Gris Azulado Oscuro */
    --accent: #3498db;        /* Azul Acento */

    /* --- Fondos y Textos --- */
    --bg-body: #eef2f6;       /* Fondo General (con trama) */
    --bg-card: #ffffff;       /* Fondo Cajas/Tarjetas */
    --text-main: #2d3748;     /* Texto Principal */
    --text-muted: #718096;    /* Texto Secundario */
    --border-color: #cccccc;  /* Color Bordes Genérico */

    /* --- Estados (Semántica) --- */
    --success: #27ae60;       /* Verde Éxito */
    --success-light: #42d392; /* Verde Claro */
	--comment-light: #aaa9a9; /* Gris Claro */
    --warning: #f1c40f;       /* Amarillo/Naranja Alerta */
    --danger: #e74c3c;        /* Rojo Error */
    --danger-dark: #c0392b;   /* Rojo Oscuro */
    --info: #3498db;          /* Azul Info */
    
    /* --- Estilos Visuales --- */
    --font-main: "Elms Sans", sans-serif;
    --font-alt: "Inter", sans-serif;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --radius: 8px;
    --radius-pill: 50px;
}

/* --- Reset Universal --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   2. ESTILOS BASE (BODY & TIPOGRAFÍA)
   ========================================================================== */
body {
    font-family: var(--font-main);
    font-optical-sizing: auto; 
    font-weight: 300; 
    font-style: normal;
    background-color: var(--bg-body);
    background-image: radial-gradient(var(--primary) 0.5px, transparent 0.5px), radial-gradient(var(--primary) 0.5px, #f0f2f5 0.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    color: var(--text-main);
    padding-top: 80px; /* Espacio para menú fijo */
    padding-bottom: 40px;
    font-size: 15px; 
    width: 100%;
    min-height: 100vh;
    display: flow-root;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 15px 0;
    font-weight: 500;
    color: var(--secondary);
}

h3 {
    font-size: 1.5rem; 
    color: var(--primary-dark); 
    margin-bottom: 25px; 
    font-weight: 300;
    border-bottom: 2px solid var(--border-color); 
    padding: 12px;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    background-color: #fff; 
    border-radius: var(--radius);
}

h3 span { font-size: 1.2rem; }

a { text-decoration: none; transition: all 0.3s ease; }
ul { list-style: none; }
b, strong { font-weight: 600; }

/* ==========================================================================
   3. LAYOUT & ESTRUCTURA
   ========================================================================== */
.cuerpo { width: 100%; min-height: 70vh; overflow-y: auto; }
.contenido { width: 99%; margin: 0 auto; padding: 0 10px; display: block; clear: both; max-width: 2100px; }

/* Columnas Flotantes (Legacy) */
.bloque1 { float: left; width: 24%; margin-right: 1%; height: auto !important; }
.bloque2 { float: left; width: 75%; height: auto !important; }
.bloque-full, .modulo-full { width: 100% !important; float: none !important; clear: both; }

/* Contenedores Modulares */
.modulo1, .modulo2, .chart-box {
    background: var(--bg-card); 
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm); 
    border: 1px solid var(--border-color);
    padding: 20px; 
    margin-bottom: 20px; 
    border-left: 4px solid var(--primary);
    height: auto !important;
    max-height: none !important; 
    overflow: visible !important;
}

/* Cabeceras de Módulos */
.cabecera-modulo {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 15px;
}
.cabecera-modulo h5 { margin: 0; font-weight: 400; font-size: 1.4em; color: #333; }

.info-derecha-cabecera { text-align: right; line-height: 1.2; }
.info-derecha-cabecera .num-pedido { display: block; font-weight: 700; color: var(--primary); font-size: 1.1rem; }
.info-derecha-cabecera .fecha-pedido { display: block; font-size: 0.75rem; color: #888; text-transform: uppercase; margin-top: 2px; }

/* Solución Scroll y alturas */
.cuerpo, .contenido, .bloque1, .bloque2, 
.modulo1, .modulo2, .margen {
    height: auto !important; min-height: auto !important; max-height: none !important; overflow: visible !important;}
	
.margen P {
	font-size: 1.1em;}
	
.enlace-editar {
    color: var(--primary);
    font-size: 1.1em;
    transition: color 0.3s;
	font-size: 1.4em;
}

.enlace-editar:hover {
    color: #1e7e34;
	transform: translateY(-2px);
}

/* ==========================================================================
   4. NAVEGACIÓN (HEADER & FOOTER)
   ========================================================================== */
/* Header */
.navbar-top {
    position: fixed; top: 0; left: 0; width: 100%; height: 70px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
    display: flex; align-items: center; padding: 0 20px;
    box-shadow: 0 4px 15px rgba(0, 168, 150, 0.25);
    z-index: 1000;
}

.nav-logo img { height: 38px; vertical-align: middle; filter: brightness(0) invert(1); }
.nav-menu { flex-grow: 1; display: flex; justify-content: flex-end; margin-right: 20px; }
.nav-list { display: flex; gap: 5px; align-items: center; }
.nav-item { position: relative; height: 70px; display: flex; align-items: center; }

.nav-link {
    color: #fff; font-size: 0.95rem; font-weight: 400;
    padding: 8px 16px; border-radius: var(--radius-pill);
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.nav-link:hover, .nav-item:hover > .nav-link {
    background-color: rgba(255, 255, 255, 0.15); transform: translateY(-1px);
}

/* Dropdowns */
.dropdown-menu {
    display: none; position: absolute; top: 60px; right: 0; 
    background-color: #fff; min-width: 220px; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); padding: 10px 0; z-index: 1001;
}
.dropdown-menu::after { content: ''; position: absolute; top: -20px; left: 0; width: 100%; height: 20px; }
.nav-item:hover .dropdown-menu { display: block; }
.dropdown-item { display: flex; align-items: center; padding: 10px 20px; color: var(--text-main); font-size: 0.9rem; }
.dropdown-item:hover { background-color: #f0f7f6; color: var(--primary-dark); padding-left: 25px; }
.dropdown-item i { width: 25px; color: #ccc; text-align: center; }
.dropdown-item:hover i { color: var(--primary); }

/* Usuario & Logout */
.user-actions { 
    display: flex !important; flex-direction: row !important; align-items: center; 
    gap: 15px; flex-shrink: 0; white-space: nowrap; 
}
.user-capsule {
    background: rgba(0,0,0,0.15); padding: 5px 15px; border-radius: var(--radius-pill);
    display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1;
    border: 1px solid rgba(255,255,255,0.1);
}
.u-name { color: #fff; font-weight: 600; font-size: 0.85rem; }
.u-role { color: rgba(255,255,255,0.8); font-size: 0.7rem; text-transform: uppercase; }

.btn-logout { 
    color: white; opacity: 0.8; font-size: 1.2rem; cursor: pointer; 
    display: flex; align-items: center; height: 100%; margin: 0; transition: 0.2s; 
}
.btn-logout:hover { opacity: 1; color: #ff0000; transform: translateX(2px); }

.mobile-toggle { display: none; color: #fff; font-size: 1.5rem; cursor: pointer; margin-right: 15px; }

/* Footer */
.footer {
    height: 25px; background: #000; color: #eee;
    position: fixed; bottom: 0; left: 0; width: 100%;
    padding: 0 20px; margin: 0; z-index: 9999;
    display: flex; justify-content: space-between; align-items: center;
}
.footer P { margin: 0; padding: 0; color: #fff; font-size: 12px; }
.footer P A { color: #fff; text-decoration: none; }

/* ==========================================================================
   5. BOTONES Y ACCIONES
   ========================================================================== */
/* Botón Genérico */
button, .btn-submit, a.botoncomenzar, a.botonparar, a.botonfinalizar {
    border: none; border-radius: 6px; cursor: pointer; font-weight: 500;
    transition: all 0.3s ease; display: inline-flex; justify-content: center; align-items: center;
    box-shadow: var(--shadow-sm); font-family: var(--font-main); padding: 10px 20px;
}

/* Botones Principales (Verde/Turquesa) */
button.guardar, .btn-submit, button.entrar, a.aprobar, a.albaran {
    background: var(--primary); color: #fff; flex: 1;                /* FACTOR DE CRECIMIENTO: Ocupa todo el espacio sobrante */
    width: 100%;
}
button.guardar:hover, .btn-submit:hover { background: var(--secondary); }

/* Botón Guardar Premium (Degradado Verde) */
.guardar-btn, button.guardarpedido {
    padding: 12px 20px; border: none; border-radius: 6px;
    background: linear-gradient(135deg, var(--success-light) 0%, var(--success) 100%);
    color: white; font-weight: 600; font-size: 1rem; cursor: pointer;
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2); transition: all 0.3s ease;
    display: flex; justify-content: center; align-items: center; gap: 8px; flex: 1;                /* FACTOR DE CRECIMIENTO: Ocupa todo el espacio sobrante */
    width: 100%;
}
.guardar-btn:hover, button.guardarpedido:hover {
    transform: translateY(-2px); box-shadow: 0 6px 15px rgba(40, 167, 69, 0.35); background-color: #219150;
}

/* Botones de Icono Pequeño (Tablas/Buscadores) */
button.buscar, button.guardaritem {
    width: 42px; flex-shrink: 0;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff; border: none; border-radius: 6px; cursor: pointer;
    box-shadow: var(--shadow-sm); transition: all 0.3s ease;
    display: inline-flex; justify-content: center; align-items: center;
}
button.buscar:hover, button.guardaritem:hover {
    background: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary) 100%);
    transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 168, 150, 0.4);
}

button.eliminaritem {
    width: 42px; flex-shrink: 0;
    background: linear-gradient(90deg, #ff0000 0%, #ff5500 100%);
    color: #fff; border: none; border-radius: 6px; cursor: pointer;
    box-shadow: var(--shadow-sm); transition: all 0.3s ease;
    display: inline-flex; justify-content: center; align-items: center;
}
button.eliminaritem:hover {
    background: linear-gradient(90deg, #ff5500 0%, #ff0000 100%);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}
button.eliminaritem i { color: #ffffff !important; }

/* Botones Peligro / Volver */
button.volver, a.borrarmercancia, a.salir, a.mandaraeat, .borrar-btn {
    background-color: var(--danger); color: #fff;
}
button.volver:hover, .borrar-btn:hover { background-color: #c53030; }

.borrar-btn {
    padding: 12px 20px; border: 1px solid #ddd; border-radius: 6px; background: #ff5500;
    font-size: 1rem; font-weight: 600; display: flex; gap: 8px;
}

/* Botones Secundarios / Info */
.ficha-btn {
    padding: 12px 20px; border: 1px solid #ddd; border-radius: 6px;
    background: #b66ff7; color: #fff; font-weight: 600; font-size: 1rem;
    cursor: pointer; transition: all 0.3s; display: flex; justify-content: center; align-items: center; gap: 8px;
}
.ficha-btn:hover { background: #9851d9; }

.volver-btn, .pe-btn-volver {
    padding: 12px 20px; border: 1px solid #ddd; border-radius: 6px;
    background: #f8f9fa; color: #555; font-weight: 600; font-size: 1rem;
    cursor: pointer; transition: all 0.3s; display: flex; flex: 0 0 auto;         /* No crecer, no encoger, tamaño según contenido */
    min-width: 130px justify-content: center; align-items: center; gap: 8px;
    text-decoration: none !important;
}
.volver-btn:hover, .pe-btn-volver:hover { background: #e2e6ea; color: #333; }

/* Botones "Living Gradient" (Estilo Izquierda) */
.izquierda a {
    background-image: linear-gradient(to right, var(--primary) 0%, var(--primary-dark) 51%, var(--primary) 100%);
    background-size: 200% auto; margin-left: 10px; color: #fff;
    padding: 10px 18px; border-radius: 8px 8px 0px 0px; font-size: 1.0rem;
    text-decoration: none; letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 168, 150, 0.3);
    display: inline-flex; align-items: center; gap: 10px; transition: 0.4s ease-out; border: none !important;
}
.izquierda a:hover {
    background-position: right center; color: #fff;
    box-shadow: 0 8px 20px rgba(0, 168, 150, 0.5);
}

/* Botón Filtro */
.btn-filtrar {
    padding: 9px 25px; border: none; border-radius: 5px; cursor: pointer;
    font-weight: 600; font-size: 0.95rem; color: #fff;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2); transition: all 0.3s ease;
    display: flex; align-items: center; gap: 8px; 
}
.btn-filtrar:hover {
    transform: translateY(-2px); box-shadow: 0 6px 15px rgba(40, 167, 69, 0.35); filter: brightness(1.05);
}

/* Botón Flotante (FAB) */
.fab-btn {
    position: fixed; bottom: 40px; right: 40px; width: 60px; height: 60px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white; border-radius: 50%; box-shadow: 0 4px 15px rgba(0, 168, 150, 0.4);
    display: flex; justify-content: center; align-items: center;
    font-size: 24px; cursor: pointer; z-index: 9999; transition: transform 0.3s;
}
.fab-btn:hover { transform: scale(1.1) rotate(90deg); }

/* Contenedor Acciones Derecha */
.btn-accion-contenedor {
    margin-top: 30px; padding-top: 20px; padding-bottom: 10px;
    border-top: 2px solid #ecf0f1; text-align: right; 
}
.botones-form { display: flex; gap: 15px; padding-top: 20px; border-top: 1px solid #eee; }

a.albaran {
    /* Mismas dimensiones y estructura que .guardar-btn */
    flex: 1;                /* FACTOR DE CRECIMIENTO: Ocupa todo el espacio sobrante */
    width: 100%;
	padding: 12px 20px;
    border: none;
    border-radius: 6px;
    
    /* Degradado VERDE (Exactamente igual que Guardar Pedido) */
    background: linear-gradient(135deg, #42d392 0%, #28a745 100%);
    
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none !important;
    
    /* Sombra verde suave */
    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.2);
    
    /* Animaciones */
    transition: all 0.3s ease;
    
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* Efecto al pasar el ratón */
a.albaran:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(40, 167, 69, 0.35);
    filter: brightness(1.05);
}

/* Efecto al hacer clic */
a.albaran:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(40, 167, 69, 0.2);
}

/* ==========================================================================
   6. FORMULARIOS & INPUTS
   ========================================================================== */
input, select, textarea, .campoform {
    width: 100%; padding: 10px 15px; border: 1px solid var(--border-color);
    border-radius: 6px; background-color: #fff; font-family: var(--font-main);
    color: var(--text-main); transition: 0.2s; box-sizing: border-box;
}
input:focus, select:focus, .campoform:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 168, 150, 0.1);
}
.campoform:disabled { background-color: #f0f0f0; color: #666; cursor: not-allowed; }

/* Grupos y Layout */
.grupo { display: flex; flex-direction: column; }
.grupo label { font-weight: 600; font-size: 1.0rem; color: #555; padding-bottom: 3px; }

/* Input Subir Fichero */
.input-fichero-custom {
    display: block; width: 100%; padding: 12px; background-color: #f8f9fa;
    border: 2px dashed #ced4da; border-radius: 5px; text-align: center;
    cursor: pointer; transition: all 0.2s ease; color: #495057;
}
.input-fichero-custom:hover { background-color: #f0f7ff; border-color: var(--info); color: var(--info); }

/* Buscador Principal */
.buscadorprincipal { width: 100%; display: flex; justify-content: flex-end; margin-bottom: 10px; clear: both; }
form.buscador { display: flex; gap: 10px; width: 100%; justify-content: flex-end; align-items: center; }
form.buscador input { width: 20% !important; min-width: 200px; box-shadow: var(--shadow-sm);}
form.buscador select { width: 7% !important; min-width: 120px; box-shadow: var(--shadow-sm);}

/* Filtros */
.barra-filtros {
    display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end; justify-content: flex-end; margin-bottom: 20px;
}
.grupo-filtro { display: flex; flex-direction: column; }
.grupo-filtro label { font-size: 0.8rem; font-weight: 600; margin-bottom: 5px; color: #555; }
.select-moderno { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; background-color: #fff; min-width: 120px; }

/* Checkboxes */
.check-gigante { transform: scale(2.0); cursor: pointer; accent-color: var(--success); margin: 5px; }

/* Formulario Inline (Tablas) */
.form-inline-table {
    display: flex; align-items: center; justify-content: flex-start; gap: 5px;
}
.campoeditable { width: 60%; text-align: center; }








/* =========================================
   NUEVOS ESTILOS AGREGAR ARTÍCULOS (DIVS)
   ========================================= */

.contenedor-agregar {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 6px;
        margin-top: 20px;
        overflow: hidden;
    }

    /* Cabecera */
    .header-agregar {
        background: var(--secondary, #3c454e);
        padding: 10px 15px;
        color: #fff;
    }
    .header-agregar h6 {
        margin: 0;
        color: #fff;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.85rem;
    }

/* =========================================
   CORRECCIÓN FINAL V2: CANTIDAD MÁS ANCHA Y BOTÓN FLEXIBLE
   ========================================= */

/* 1. Forzar al formulario a ser Flexbox */
.body-agregar form {
    display: flex;
    align-items: flex-end; /* Alinea abajo los inputs y botón */
    gap: 15px;             /* Espacio entre columnas */
    width: 100%;
}

/* 2. Columna Grande (Select / Descripción) 
   Le damos "flex: 4" para que ocupe 4 veces más espacio que el botón, 
   pero que ambos sean flexibles. */
.body-agregar form .col-60,
.body-agregar form .col-40 {
    flex: 4;               
    min-width: 250px;
}

/* 3. Columna Cantidad / Precio (MÁS LARGO) 
   Lo fijamos a 140px para que sea más ancho que antes (era 100px). */
.body-agregar form .col-15 {
    flex: 0 0 140px;       /* No crece, no encoge, fijo a 140px */
    min-width: 140px;
}

/* 4. Columna Botón (EL RESTO)
   Le damos "flex: 1" para que ocupe el espacio sobrante de la derecha. */
.body-agregar form .col-btn {
    flex: 1;               /* Crece para ocupar "el resto" */
    min-width: 120px;      /* Aseguramos que no se haga muy pequeño */
}

/* 5. Asegurar que los inputs/botones llenen su contenedor */
.body-agregar form input,
.body-agregar form select,
.body-agregar form .select2-container,
.body-agregar form .btn-std {
    width: 100% !important;
}

/* 6. Ajuste de altura para Select2 y Botón para que cuadren con el Input */
.body-agregar .select2-container .select2-selection--single,
.body-agregar .btn-std {
    height: 42px !important; 
    line-height: 1.2;
}
.body-agregar .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}

/* RESPONSIVE: En móviles permitimos que se apilen */
@media (max-width: 768px) {
    .body-agregar form {
        flex-direction: column;
        align-items: stretch;
    }
    .body-agregar form .col-15, 
    .body-agregar form .col-btn {
        flex: auto;
        width: 100%;
    }
    .body-agregar form .btn-std {
        margin-top: 10px;
    }
}


    .separador { border-top: 1px dashed #ddd; }

    /* FLEXBOX MAESTRO */
    .form-fila {
        display: flex;
        align-items: flex-end; /* Alinea abajo */
        justify-content: space-between; /* Distribuye el espacio sobrante */
        gap: 2%; /* Espacio entre columnas */
        width: 100%;
    }

    /* --- COLUMNAS PORCENTUALES --- */
    
    /* 1. Descripción / Select: 60% */
    .col-60 {
        flex: 0 0 60%;
        max-width: 60%;
    }

    /* 2. Cantidad: 15% */
    .col-15 {
        flex: 0 0 15%;
        max-width: 15%;
    }

    /* 3. Botón: 15% (El resto es hueco) */
    .col-btn {
        flex: 0 0 15%;
        max-width: 15%;
    }

    /* ESTILOS VISUALES (Inputs y Botones) */
    .lbl-upper {
        display: block;
        font-size: 0.7rem;
        font-weight: 700;
        color: #666;
        margin-bottom: 5px;
        text-transform: uppercase;
        white-space: nowrap;
    }
    
    .input-std {
        width: 100%; /* Ocupa el 100% de su columna (60% o 15%) */
        height: 40px;
        padding: 5px 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box; /* Vital para que el padding no rompa el ancho */
    }

    .btn-std {
        width: 100%; /* Ocupa el 100% de su columna (15%) */
        height: 40px;
        border: none;
        border-radius: 4px;
        background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
        color: #fff;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center; /* Centrado perfecto */
        gap: 5px;
        white-space: nowrap;
        padding: 0; /* Reset padding para evitar desbordes */
    }
    .btn-std:hover { opacity: 0.9; }

    /* Icono en botón solo si cabe, o ocultar en muy pequeños */
    @media (max-width: 900px) {
        .btn-std i { display: none; } /* Ocultamos icono si falta espacio */
    }


/* =========================================
   FORMULARIO FECHA ALBARÁN (50% Ancho)
   ========================================= */

/* 1. El Formulario ocupa el 50% del contenedor padre */
.form-fecha-albaran {
    width: 30%;
    min-width: 300px; /* Evita que quede muy pequeño en pantallas chicas */
    display: block;
	margin-bottom: 20px;
}

/* 2. Contenedor interno para alinear Input + Botón */
.contenedor-inline-fecha {
    display: flex;
    align-items: flex-end; /* Alinea el botón con la parte baja del input */
    gap: 10px;             /* Separación entre fecha y botón */
}

/* 3. Grupo del input (Label + Input) */
.grupo-fecha {
    flex-grow: 1;          /* Ocupa todo el espacio disponible dentro del 50% */
    display: flex;
    flex-direction: column;
}

.grupo-fecha label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #666;
    margin-bottom: 4px;
    text-transform: uppercase;
}

/* 4. Asegurar alturas iguales */
.grupo-fecha input.campoform,
.contenedor-inline-fecha button.guardaritem {
    height: 40px !important; /* Altura forzada para que coincidan */
    margin: 0;
}

/* Responsive: En móviles que ocupe el 100% */
@media (max-width: 768px) {
    .form-fecha-albaran {
        width: 100%;
    }
}






/* ==========================================================================
   7. TABLAS (DISEÑO UNIFICADO)
   ========================================================================== */
table, table.listado, table.asignar, table.pedidoalbaran, table.asignarcompleto {
    width: 100% !important; border-collapse: collapse;
    background: #fff; border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-sm); border: none !important; margin-bottom: 20px;
    font-size: 0.9em;
}

th {
    background-color: var(--secondary); color: #fff; padding: 15px;
    text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em;
    border: none !important; text-align: left;
}
th.center { text-align: center; }
th.imgmin { text-align: center; max-width: 50px; }

td {
    padding: 12px 15px; border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-main); vertical-align: middle; text-align: left; white-space: normal;
}
td.center { text-align: center; }

tr:nth-child(even) { background-color: #f9f9f9; }
tr:hover { background-color: #edf2f7 !important; cursor: pointer; }

/* Imágenes en Tablas */
td.imgmin, td.imgmin img, table td img { max-width: 40px; max-height: 40px; }
table td img { object-fit: contain; border-radius: 4px; display: block; margin: 0 auto; }
table td img.fotoperfil { width: 40px; height: 40px; border-radius: 50%; }

/* Columnas Especiales */
table.listado th:first-child, table.listado td:first-child { width: 45px; min-width: 45px; padding: 5px; text-align: left; }
.comercial { color: var(--primary) !important; font-weight: 600; font-size: 1.0em; }

/* Estados (Celdas Coloreadas) */
td.PENDIENTE { background-color: #f9d544; color: #fff; font-weight: bold; text-align: center; }
td.REGISTRADO { background-color: var(--primary); color: #fff; font-weight: bold; text-align: center; }
td.TERMINADO { background-color: var(--success); color: #fff; font-weight: bold; text-align: center; }
td.CANCELADO { background-color: var(--danger); color: #fff; font-weight: bold; text-align: center; }
td.REVISION { background-color: #ff902d; color: #fff; font-weight: bold; text-align: center; }
td.PARADO { background-color: #4899f5; color: #fff; font-weight: bold; text-align: center; }

TR.seleccionararticulo {
	background-color: vas(--secondary) !important;
}

/* Filas Seleccionadas */
.fila-seleccionada { background-color: #d4edda !important; border-left: 5px solid var(--success); transition: background-color 0.2s ease; }
.fila-seleccionada:hover { background-color: #c3e6cb !important; }


/* =========================================
   ESTILOS AÑADIR ARTÍCULOS (Tablas)
   ========================================= */

/* Fila contenedora del formulario */
.fila-formulario td {
    padding: 15px !important;
    background-color: #fff;
}

/* Layout Flexible del Formulario */
.form-agregar-inline {
    display: flex;
    align-items: flex-end; /* Alinea los inputs y el botón abajo */
    gap: 15px;
    width: 100%;
}

/* Grupos de inputs */
.grupo-inline {
    display: flex;
    flex-direction: column;
}

.grupo-inline label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #7f8c8d;
    margin-bottom: 4px;
    text-transform: uppercase;
}

/* Tamaños de columnas */
.grupo-inline.grow { flex: 1; } /* Ocupa todo el espacio posible */
.grupo-inline.medio { width: 150px; }
.grupo-inline.corto { width: 80px; }

/* Input centrado (para cantidad) */
.campoform.center { text-align: center; }

/* Botón Añadir (Pequeño y Elegante) */
.btn-add {
    height: 42px; /* Misma altura que el input estándar */
    padding: 0 20px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--secondary) 0%, #2c3e50 100%);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1px; /* Ajuste fino de alineación */
}

.btn-add:hover {
    background: linear-gradient(90deg, #2c3e50 0%, var(--secondary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(44, 62, 80, 0.3);
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .form-agregar-inline {
        flex-direction: column;
        align-items: stretch;
    }
    .grupo-inline.medio, .grupo-inline.corto {
        width: 100%;
    }
    .btn-add {
        margin-top: 10px;
    }
}

/* ==========================================================================
   8. ICONOS
   ========================================================================== */
.icon-action { font-size: 1.4rem; transition: all 0.2s; display: inline-block; cursor: pointer; }
.icon-action:hover { transform: scale(1.25); }

/* Colores de Iconos */
.icon-pdf { color: #e74c3c; }
.icon-pdf:hover { color: #c0392b; text-shadow: 0 2px 5px rgba(231, 76, 60, 0.3); }

.icon-borrar { color: #ff5500; }
.icon-borrar:hover { color: #ff0000; text-shadow: 0 2px 5px rgba(231, 76, 60, 0.3); }

.icon-repeticion { color: var(--primary); }
.icon-repeticion:hover { color: var(--primary-dark); text-shadow: 0 2px 5px rgba(52, 152, 219, 0.3); }

.icon-manipulado { color: #9b59b6; }
.icon-manipulado:hover { color: #8e44ad; text-shadow: 0 2px 5px rgba(155, 89, 182, 0.3); }

.icon-repeat { color: var(--info); }
.icon-repeat:hover { color: #2980b9; text-shadow: 0 2px 5px rgba(52, 152, 219, 0.3); }

.icon-shipping { color: #f39c12; }
.icon-shipping:hover { color: #d35400; text-shadow: 0 2px 5px rgba(243, 156, 18, 0.3); }

/* Iconos de Control (Máquinas) */
.asignar td i { vertical-align: middle; display: inline-block; }
.icon-play { color: var(--success); font-size: 1.8rem; cursor: pointer; transition: transform 0.2s; }
.icon-play:hover { transform: scale(1.15); color: #2ecc71; }

.icon-stop { color: #c0392b; font-size: 1.8rem; cursor: pointer; transition: transform 0.2s; }
.icon-stop:hover { transform: scale(1.15); color: #e74c3c; }

.icon-no-mercancia { color: var(--danger); font-size: 1.8rem; opacity: 1; }
.icon-finish { color: var(--success); font-size: 1.8rem; cursor: pointer; transition: transform 0.2s; }
.icon-finish:hover { transform: scale(1.15); color: #2ecc71; text-shadow: 0 2px 5px rgba(39, 174, 96, 0.3); }

.icono-mapa {
    color: #ea4335; font-size: 1.3rem; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.1)); transition: transform 0.2s;
}
.icono-mapa:hover { transform: scale(1.2) translateY(-3px); color: #d93025; cursor: pointer; }

/* ==========================================================================
   9. GRIDS Y UTILIDADES
   ========================================================================== */
/* Grids */
.grid-form-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; margin-bottom: 30px; }
.grid-3-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.grid-4-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.span-2 { grid-column: 1 / -1; }

/* Utilidades Texto */
.rojo, label span.rojo, label .obligatorio { color: var(--danger) !important; font-weight: bold; margin-left: 3px; }
.gris { color: #666; }
.align-derecha { text-align: right; }
.align-centro { text-align: center; }
.align-izquierda { text-align: left; }
.una-linea { white-space: nowrap; }

/* Listas de datos */
.lista-datos { list-style: none; padding: 0; margin: 0; }
.lista-datos li {
    display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed #f0f0f0; font-size: 0.95rem;
}
.lista-datos li:last-child { border-bottom: none; }
.etiqueta { font-weight: 600; color: #555; min-width: 120px; }
.valor { color: #000; text-align: right; }

.contenido-texto {
    font-size: 0.95rem; line-height: 1.6; color: #444; background-color: #f9f9f9; padding: 10px; border-radius: 4px; border: 1px solid #eee;
}

/* Alertas Divs */
.observaciones, .advertencia, .obligacion {
    border-radius: var(--radius); padding: 15px; margin-bottom: 15px; color: #fff; box-shadow: var(--shadow-sm); border: none;
}
.observaciones { background-color: var(--comment-light); }
.advertencia { background-color: #fff3cd; border: 1px solid #ffeeba; color: #856404; }
.obligacion { background-color: var(--danger); }

/* Pantalla de carga */
.center-content { text-align: center; padding-top: 50px; }
.azul-carga { color: var(--info); }
.texto-carga { margin-top: 20px; color: var(--text-muted); font-weight: 600; }

.separador-sutil { border: 0; border-top: 1px solid #eee; margin: 20px 0; }
.separador-seccion { border: 0; border-top: 2px dashed #ccc; margin: 40px 0; position: relative; }
.separador-seccion::after {
    content: 'ZONA DE CARGA Y PENDIENTES'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: #f4f6f9; padding: 0 15px; color: #777; font-weight: bold; font-size: 0.8rem;
}

/* Paginación */
ul.paginacion { display: flex; justify-content: center; gap: 5px; margin-top: 30px; }
ul.paginacion li a { display: block; padding: 8px 14px; background: #fff; border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-main); }
ul.paginacion li.active a { background-color: var(--primary); color: #fff; border-color: var(--primary); }

/* Modal */
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); }
.modal-content {
    background-color: #fefefe; margin: 5% auto; padding: 20px; border: none; width: 90%; max-width: 1000px;
    border-radius: 12px; max-height: 85vh; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }

/* ==========================================================================
   10. MÓDULOS ESPECÍFICOS (DASHBOARD, GRÁFICOS)
   ========================================================================== */
/* Dashboard Stats */
.dashboard-stats { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.stat-card {
    flex: 1; min-width: 180px; background: #fff; border-radius: 12px;
    box-shadow: var(--shadow-sm); padding: 20px; text-align: center;
    cursor: pointer; transition: transform 0.2s; border: 1px solid var(--border-color);
}
.stat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.stat-card h2 { font-size: 2.5em; margin: 10px 0; color: var(--secondary); font-weight: 600; }
.stat-card p { margin: 0; color: var(--text-muted); font-weight: 500; font-size: 0.9em; text-transform: uppercase; }

.card-mes { border-top: 4px solid #3498db; }
.card-anio { border-top: 4px solid #9b59b6; }
.card-hoy { border-top: 4px solid #f1c40f; }
.card-retraso { border-top: 4px solid #e74c3c; }
.card-nomerc { border-top: 4px solid #e67e22; }

/* Kanban */
.kanban-board { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 10px; margin-top: 20px; }
.kanban-col { flex: 1; min-width: 300px; background: #f4f6f9; border-radius: 12px; padding: 15px; border: 1px solid #e2e8f0; }
.kanban-header { font-weight: 700; color: var(--secondary); margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid #ccc; padding-bottom: 8px; }
.k-card {
    background: #fff; padding: 15px; border-radius: 8px; margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); border-left: 4px solid #ccc; transition: transform 0.2s; cursor: pointer;
}
.k-card:hover { transform: translateY(-3px); }
.k-title { font-weight: 700; color: var(--secondary); display: block; margin-bottom: 4px; }
.k-client { color: var(--primary); font-size: 0.85em; font-weight: 600; }

.border-pend { border-bottom-color: #f1c40f; } .card-pend { border-left-color: #f1c40f; }
.border-prod { border-bottom-color: #3498db; } .card-prod { border-left-color: #3498db; }
.border-term { border-bottom-color: #2ecc71; } .card-term { border-left-color: #2ecc71; }

/* KPIs Grid */
.grid-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px; }
.kpi-card {
    background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 15px;
    display: flex; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.02); transition: transform 0.2s;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.kpi-icon {
    width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin-right: 15px;
}
.icon-success { color: #28a745; } .icon-primary { color: #007bff; }
.icon-warning { color: #ffc107; } .icon-danger  { color: #dc3545; }

.kpi-info { display: flex; flex-direction: column; }
.kpi-titulo { font-size: 0.85rem; color: #777; text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-valor { font-size: 1.4rem; font-weight: 700; color: #333; }

/* Gráficos */
.grid-graficos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.chart-box.full-width { grid-column: 1 / -1; }
.chart-header { background: #fdfdfd; padding: 10px 15px; border-bottom: 1px solid #eee; }
.chart-header h6 { margin: 0; font-weight: 600; color: #555; }
.chart-body { padding: 15px; position: relative; }

/* Calendario */
#calendar { max-width: 100%; margin: 0 auto; font-family: var(--font-main); font-size: 0.9em; }
.fc-toolbar-title { font-size: 1.2em !important; color: var(--secondary); }
.fc-button-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; }

/* Listado Cliente */
.listadocliente {
    float: left; width: 300px; margin: 15px; background: #fff; border-radius: 12px;
    box-shadow: var(--shadow-md); border: 1px solid var(--border-color); overflow: hidden;
    position: relative; transition: transform 0.2s; min-height: 480px;
}
.listadocliente:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.listadocliente img { width: 100%; height: 200px; object-fit: contain; background: #f7fafc; }
.listadocliente h4 { position: relative; margin: 0; width: 100%; background: var(--secondary); padding: 10px; font-size: 1rem; color: #fff; }

/* Visualización Montaje */
.contenedor-previa-montaje {
    display: flex; justify-content: center; align-items: center; height: 350px;
    overflow: hidden; background-color: #f9f9f9; border: 1px solid #eee; border-radius: 4px; padding: 10px;
}
.previaimg-ajustada {
    max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block;
}

/* ==========================================================================
   11. PORTAL DEL EMPLEADO (.pe-)
   ========================================================================== */
.pe-contenedor { padding: 20px; max-width: 2100px; margin: 0 auto; font-family: var(--font-alt); margin-top: -80px; }
.pe-cabecera { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid #e0e0e0; }
.pe-saludo { font-size: 1.8rem; color: #333; font-weight: 300; }
.pe-saludo strong { font-weight: 700; color: var(--primary); }
.pe-subtitulo { display: block; margin-top: 5px; color: #777; font-size: 0.95rem; }
.pe-nav-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }

/* Grid PE */
.pe-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; width: 100%; }

/* Botones Home PE */
.pe-boton {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background-color: #ffffff; padding: 40px 20px; border-radius: 16px; text-decoration: none !important;
    border: 1px solid #e0e0e0; box-shadow: 0 4px 6px rgba(0,0,0,0.05); transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative; overflow: hidden; height: 100%; min-height: 220px;
}
.pe-texto { font-size: 1.4rem; font-weight: 700; color: #444; text-align: center; line-height: 1.3; margin-top: 20px; z-index: 2; }
.pe-icono { font-size: 4rem; margin-bottom: 10px; transition: transform 0.3s ease; z-index: 2; }

/* Colores Secciones PE */
.pe-serigrafia { border-bottom: 6px solid #e74c3c; } .pe-serigrafia .pe-icono { color: #e74c3c; }
.pe-serigrafia:hover { background-color: #fdf3f2; border-color: #e74c3c; }
.pe-tampografia { border-bottom: 6px solid #3498db; } .pe-tampografia .pe-icono { color: #3498db; }
.pe-tampografia:hover { background-color: #f0f7fb; border-color: #3498db; }
.pe-digital { border-bottom: 6px solid #9b59b6; } .pe-digital .pe-icono { color: #9b59b6; }
.pe-digital:hover { background-color: #f7f1f9; border-color: #9b59b6; }
.pe-dtf { border-bottom: 6px solid #f39c12; } .pe-dtf .pe-icono { color: #f39c12; }
.pe-dtf:hover { background-color: #fefcf5; border-color: #f39c12; }

.pe-boton:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.pe-boton:hover .pe-icono { transform: scale(1.1); }
.pe-boton:active { transform: scale(0.96); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

/* Tarjetas Usuario PE */
.pe-card-user {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #fff; padding: 25px 15px; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border: 1px solid #eee; text-decoration: none !important; transition: transform 0.2s, box-shadow 0.2s;
    height: 100%; min-height: 160px;
}
.pe-card-user .pe-icono-user { font-size: 2.5rem; color: #a0aec0; margin-bottom: 12px; transition: color 0.2s; }
.pe-card-user .pe-nombre { font-size: 1.1rem; font-weight: 600; color: #2d3748; text-align: center; line-height: 1.2; }
.pe-card-user:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); border-color: var(--primary); }
.pe-card-user:hover .pe-icono-user { color: var(--primary); }
.pe-card-special { background-color: #fff8e1; border-color: #ffe082; }
.pe-card-special .pe-icono-user { color: #f39c12; }

/* Tarjetas Trabajo PE */
.pe-job-card {
    background: #ffffff; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); border: 1px solid #e0e0e0;
    display: flex; flex-direction: column; text-decoration: none !important; overflow: hidden; position: relative; transition: transform 0.2s;
}
.pe-job-card:active { transform: scale(0.98); }
.pe-job-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: #f8f9fa; border-bottom: 1px solid #eee; }
.pe-header-left { display: flex; gap: 10px; align-items: center; }
.pe-priority {
    font-size: 1.4rem; font-weight: 800; color: var(--primary); background: #fff; padding: 2px 10px;
    border-radius: 6px; border: 1px solid rgba(1, 167, 157, 0.2); box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.pe-date { font-weight: 600; color: #666; font-size: 0.9rem; }

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); } 70% { box-shadow: 0 0 0 6px rgba(231, 76, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}
.tag-express {
    background: #e74c3c; color: #fff; font-weight: 700; font-size: 0.85rem; padding: 5px 12px;
    border-radius: 50px; display: inline-flex; align-items: center; gap: 5px; text-transform: uppercase; animation: pulse-red 2s infinite;
}

.pe-img-container { width: 100%; height: 250px; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #eee; padding: 10px; }
.pe-job-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); }
.pe-job-info { padding: 20px; text-align: center; }
.pe-client { font-size: 0.9rem; color: #888; font-weight: 600; text-transform: uppercase; margin-bottom: 8px; }
.pe-product { font-size: 1.4rem; color: #2d3748; font-weight: 700; line-height: 1.3; }
.pe-job-footer { padding: 0 20px 20px 20px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.pe-tag { font-size: 0.9rem; padding: 8px 14px; border-radius: 8px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.tag-qty { background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; }
.tag-loc { background: #fff3e0; color: #ef6c00; border: 1px solid #ffe0b2; }
.tag-rep { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.tag-new { background: #e0f7fa; color: #006064; border: 1px solid #b2ebf2; }

/* Detalle PE */
.pe-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.pe-info-card { background: #fff; border-radius: 16px; padding: 25px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border: 1px solid #eee; }
.pe-detail-img-container {
    width: 100%; height: 350px; background: #f4f4f4; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; margin-bottom: 20px; border: 1px solid #ddd;
}
.pe-detail-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pe-data-list { margin: 0; padding: 0; list-style: none; }
.pe-data-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px dashed #eee; font-size: 1rem; }
.pe-data-row:last-child { border-bottom: none; }
.pe-label { color: #888; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.pe-value { color: #333; font-weight: 700; text-align: right; }

/* Acciones PE */
.pe-actions-container { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 10px; }
.pe-big-action {
    display: flex; align-items: center; justify-content: center; gap: 15px; padding: 25px;
    border-radius: 16px; font-size: 1.5rem; font-weight: 800; text-transform: uppercase; text-decoration: none !important;
    transition: transform 0.2s; box-shadow: 0 5px 15px rgba(0,0,0,0.1); border: none; cursor: pointer;
}
.pe-big-action:active { transform: scale(0.96); }
.act-start { background: linear-gradient(135deg, #2ecc71, #27ae60); color: #fff; }
.act-pause { background: linear-gradient(135deg, #f39c12, #d35400); color: #fff; }
.act-finish { background: linear-gradient(135deg, #34495e, #2c3e50); color: #fff; }

/* Inputs QTY PE */
.pe-input-qty-group { margin-bottom: 20px; }
.pe-input-qty-label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.95rem; }
.pe-input-qty {
    width: 100%; padding: 15px; font-size: 1.4rem; border: 2px solid #e0e0e0; border-radius: 10px;
    text-align: center; transition: all 0.3s; background: #fdfdfd;
}
.pe-input-qty:focus { outline: none; border-color: var(--primary); background: #fff; }
.input-good:focus { border-color: #27ae60; }
.input-bad { color: #e74c3c; background: #fdf2f2; } .input-bad:focus { border-color: #e74c3c; }
.input-warn { color: #f39c12; background: #fefcf5; } .input-warn:focus { border-color: #f39c12; }

/* Team Grid PE */
.pe-team-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; }
.pe-team-checkbox { display: none; }
.pe-team-label {
    padding: 10px 18px; background: #f0f2f5; color: #555; border-radius: 50px; font-size: 0.9rem; font-weight: 600;
    cursor: pointer; transition: all 0.2s; border: 1px solid #e0e0e0; user-select: none; display: flex; align-items: center; gap: 8px;
}
.pe-team-checkbox:checked + .pe-team-label {
    background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(1, 167, 157, 0.3);
}
.pe-team-checkbox:checked + .pe-team-label:before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; }

.pe-counter { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.85rem; margin-top: 8px; padding: 4px 12px; border-radius: 20px; transition: all 0.2s; }
.pe-counter-active { color: #e67e22; background-color: #fff8ec; font-weight: 700; border: 1px solid #fae5d3; }
.pe-counter-idle { color: #a0aec0; background-color: transparent; font-weight: 500; }
.pe-counter-urgent { color: #c0392b; background-color: #fdedec; font-weight: 700; border: 1px solid #fadbd8; }

.pe-header-unified {
    display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; margin-bottom: 25px;
    border-bottom: 2px solid #e0e0e0; flex-wrap: wrap; gap: 15px;
}
.pe-header-title-block { text-align: right; }
.pe-main-title { font-size: 1.5rem; font-weight: 700; color: #333; margin: 0; line-height: 1.1; }
.pe-section-tag { display: block; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

/* Lightbox */
.pe-lightbox {
    display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%;
    overflow: hidden; background-color: rgba(0,0,0,0.95); justify-content: center; align-items: center; flex-direction: column;
}
.pe-lightbox-content { margin: auto; display: block; max-width: 95%; max-height: 85vh; border-radius: 8px; box-shadow: 0 0 20px rgba(255,255,255,0.1); object-fit: contain; }
.pe-lightbox-close {
    position: absolute; top: 20px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold;
    cursor: pointer; transition: 0.3s; background: rgba(0,0,0,0.5); width: 50px; height: 50px; text-align: center; line-height: 50px; border-radius: 50%;
}
.pe-lightbox-close:hover { color: #bbb; background: rgba(255,255,255,0.1); }
.pe-zoomable { cursor: zoom-in; transition: transform 0.2s; }
.pe-zoomable:hover { transform: scale(1.02); }

/* Grid Empleados (Checkboxes visuales) */
.grid-empleados { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 10px; }
.chk-empleado { display: none; }
.lbl-empleado {
    display: flex; align-items: center; justify-content: center; padding: 8px 5px; background: #fff;
    border: 1px solid #ddd; border-radius: 4px; cursor: pointer; font-size: 0.8rem; font-weight: 600;
    color: #555; text-align: center; transition: all 0.2s ease; user-select: none; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.lbl-empleado:hover { background: #f0f0f0; border-color: #bbb; }
.chk-empleado:checked + .lbl-empleado {
    background: var(--info); color: #fff; border-color: #2980b9; box-shadow: 0 2px 5px rgba(52, 152, 219, 0.4); transform: translateY(-1px);
}

/* ==========================================================================
   12. LOGIN & PANTALLAS ESPECIALES
   ========================================================================== */
.login-body {
    background-color: #f0f2f5;
    background-image: radial-gradient(var(--primary) 0.5px, transparent 0.5px), radial-gradient(var(--primary) 0.5px, #f0f2f5 0.5px);
    background-size: 20px 20px; background-position: 0 0, 10px 10px;
    background-color: #eef2f6; height: 100vh; display: flex; align-items: center; justify-content: center;
    margin: 0; font-family: var(--font-main);
}
.login-container { width: 100%; max-width: 900px; padding: 20px; animation: fadeIn 0.8s ease-out; }
.login-card { display: flex; background: #ffffff; border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1); overflow: hidden; min-height: 550px; }
.login-visual { flex: 1; position: relative; background-color: var(--primary); display: none; }
.bg-image { width: 100%; height: 100%; object-fit: cover; opacity: 1.0; mix-blend-mode: multiply; }
.visual-overlay { position: absolute; bottom: 40px; left: 40px; right: 40px; color: white; z-index: 2; }
.visual-overlay h3 { color: #fff; font-size: 1.8rem; margin-bottom: 10px; font-weight: 700; background-color: transparent !important; }
.visual-overlay p { font-size: 1rem; opacity: 0.9; font-weight: 300; }

.login-form-wrapper { flex: 1; padding: 50px; display: flex; flex-direction: column; justify-content: center; position: relative; }
.login-header { margin-bottom: 30px; text-align: center; }
.login-header h4 { font-size: 1.8rem; color: var(--secondary); margin-bottom: 5px; font-weight: 700; }
.subtexto { color: var(--text-muted); font-size: 0.9rem; }
.input-group { margin-bottom: 20px; }
.input-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--secondary); margin-bottom: 8px; }
.input-wrapper { position: relative; display: flex; align-items: center; }
.input-icon { position: absolute; left: 15px; color: #a0aec0; transition: color 0.3s; }
.campo-moderno {
    width: 100%; padding: 12px 15px 12px 45px; border: 2px solid #e2e8f0; border-radius: 8px;
    font-size: 1rem; transition: all 0.3s ease; background: #f8fafc;
}
.campo-moderno:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(1, 167, 157, 0.1); }
.campo-moderno:focus + .input-icon, .input-wrapper:focus-within .input-icon { color: var(--primary); }
.btn-login-modern {
    width: 100%; padding: 14px; background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer;
    transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(1, 167, 157, 0.3); display: flex; justify-content: center; align-items: center; gap: 10px;
}
.btn-login-modern:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(1, 167, 157, 0.4); }
.btn-login-modern:active { transform: translateY(0); }
.login-footer { margin-top: 20px; text-align: center; font-size: 0.9rem; color: var(--text-muted); }
.link-contacto { color: var(--primary); font-weight: 600; text-decoration: none; }
.link-contacto:hover { text-decoration: underline; }
.brand-footer { margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: 10px; border-top: 1px solid #eee; padding-top: 20px; }
.mini-logo { height: 24px; opacity: 0.7; transition: opacity 0.3s; }
.mini-logo:hover { opacity: 1; }
.version { font-size: 0.75rem; color: #ccc; font-weight: 500; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   13. ASIGNACIÓN DE MÁQUINAS (GRID PRODUCCIÓN)
   ========================================================================== */
.grid-asignacion { display: grid; grid-template-columns: repeat(auto-fit, minmax(750px, 1fr)); gap: 25px; margin-bottom: 40px; }
.maquina-card {
    background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); display: flex; flex-direction: column;
}
.maquina-card table { width: 100%; border: none; margin: 0; }

.asignar caption {
    font-size: 1.2rem; font-weight: 500; text-transform: uppercase; padding: 8px 12px;
    text-align: left; border-radius: 5px 5px 0 0; margin-bottom: 0; background-color: #ecf0f1; color: #333;
}
.asignar caption a { text-decoration: none; color: inherit; }
.asignar caption span.contador { font-size: 0.9rem; font-weight: 400; opacity: 0.8; margin-left: 10px; }

/* Colores de Máquinas */
.asignar caption.rojo    { background-color: #e74c3c !important; color: white !important; }
.asignar caption.azul    { background-color: #3498db !important; color: white !important; }
.asignar caption.verde   { background-color: #27ae60 !important; color: white !important; }
.asignar caption.amarillo{ background-color: #f1c40f !important; color: white !important; }
.asignar caption.naranja { background-color: #e67e22 !important; color: white !important; }
.asignar caption.gris    { background-color: #95a5a6 !important; color: white !important; }
.asignar caption.marron  { background-color: #a4860f !important; color: white !important; }
.asignar caption.morado  { background-color: #8e44ad !important; color: white !important; }
.asignar caption.otros   { background-color: var(--primary-dark) !important; color: white !important; }

/* Orden de Producción */
.asignar td.orden { background-color: #eeeeee !important; text-align: center; vertical-align: middle; width: 60px; }
.asignar td.orden span { display: block; font-size: 1.6rem; font-weight: 800; color: #444; line-height: 1; }
.asignar td.orden.importante { background-color: #ffcccc !important; }
.asignar td.orden.importante span { color: #cc0000 !important; }

.bloque-asignacion {
    background-color: #fff8e1; padding: 15px; border-radius: 6px; border: 1px solid #ffe0b2; margin-top: 10px;
}

/* =========================================
   CORRECCIÓN DE GRÁFICOS (CHART FIX)
   ========================================= */

/* 1. Asegurar que la caja del gráfico tenga estructura */
.chart-box {
    display: flex;
    flex-direction: column;
    min-height: 400px; /* Altura mínima obligatoria para que no colapse */
    position: relative;
    background: #fff;
    border: 1px solid #e0e0e0; /* Aseguramos borde visible */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* 2. El cuerpo donde vive el <canvas> necesita altura explícita */
.chart-body {
    flex-grow: 1;
    position: relative;
    width: 100%;
    height: 320px; /* Altura fija para el área de dibujo */
    padding: 15px;
    overflow: hidden;
}

/* 3. Forzar al Canvas a ocupar el espacio */
.chart-body canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* 4. Si usas la rejilla de gráficos, aseguramos que no se aplasten */
.grid-graficos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* Responsive automático */
    gap: 20px;
    width: 100%;
}



/* --- Estilos para Modo Mantenimiento --- */

.body-maintenance {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #fff;
}

.maintenance-container {
    width: 100%;
    max-width: 700px;
    padding: 20px;
}

.maintenance-content {
    background: var(--primary-dark);;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 50px 30px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.maintenance-icon-box {
    font-size: 4rem;
    color: #fff; /* Azul moderno, cámbialo a tu color corporativo */
    margin-bottom: 20px;
}

/* Animación suave para el icono */
.fa-spin {
    animation: fa-spin 4s infinite linear; 
}

.maintenance-content h1 {
    font-size: 2.5rem;
    margin: 0 0 15px 0;
    font-weight: 700;
    letter-spacing: -1px;
	color: #fff;
}

.maintenance-content p {
    font-size: 1.1rem;
    color: #cbd5e1;
    margin: 0 0 10px 0;
    line-height: 1.6;
}

.subtexto-maint {
    font-size: 0.95rem;
    opacity: 0.7;
    margin-bottom: 30px !important;
}

.maintenance-footer {
    margin-top: 30px;
}

.btn-maintenance {
    display: inline-block;
    padding: 12px 30px;
    background-color: #333;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px #111;
}

.btn-maintenance:hover {
    background-color: #111;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px #111;
}



.contenedor-comparativa {
	display: flex;
	gap: 20px;           /* Separación entre tablas */
	width: 100%;
	margin-top: 20px;
	flex-wrap: wrap;     /* Permite que baje en móviles */
}

 /* Cada bloque de tabla ocupa el 50% */
.bloque-tabla {
	flex: 1;             /* Crece para ocupar espacio igual */
	min-width: 400px;    /* Ancho mínimo antes de bajar de línea (móviles) */
	background: #fff;
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #ddd;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.bloque-tabla h4 {
	margin-top: 0;
	border-bottom: 2px solid #eee;
	padding-bottom: 10px;
	margin-bottom: 15px;
	color: #333;
	font-size: 1.2em;
}

 /* Ajustes visuales tabla */
.tabla-comp {
	width: 100%;
	border-collapse: collapse;
}
.tabla-comp th {
	background: #f8f9fa;
	color: #555;
	font-weight: 600;
	text-align: center;
	padding: 10px;
}
.tabla-comp td {
	padding: 8px 10px;
	border-bottom: 1px solid #eee;
	text-align: center;
}
.ganador { color: #27ae60; font-size: 0.8em; margin-left: 5px; }
.col-anio-actual { font-weight: bold; background-color: #fdfdfd; }
.fila-total { background-color: #f0f2f5; font-weight: bold; }





    /* Grid de 3 columnas para los gráficos (33% cada uno) */
    .custom-chart-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        width: 100%;
        margin-top: 20px;
    }

    /* Tarjeta del gráfico */
    .custom-chart-card {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
        min-height: 250px;
        position: relative;
    }

    .custom-chart-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0,0,0,0.1);
        border-color: #3498db;
    }

    /* Icono lupa al pasar el ratón */
    .custom-chart-card:hover::after {
        content: '\f00e'; /* fa-search-plus */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 1.2rem;
        color: #3498db;
        opacity: 0.6;
    }

    .custom-chart-header {
        padding: 10px 15px;
        border-bottom: 1px solid #eee;
        background: #fdfdfd;
        border-radius: 8px 8px 0 0;
    }
    
    .custom-chart-title {
        font-size: 0.9rem;
        font-weight: 700;
        color: #555;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .custom-chart-body {
        flex-grow: 1;
        padding: 10px;
        height: 200px;
        position: relative;
    }

    /* Responsive: En móviles una columna */
    @media (max-width: 900px) {
        .custom-chart-grid {
            grid-template-columns: 1fr;
        }
    }

    /* --- LIGHTBOX (MODAL) PARA GRÁFICOS --- */
    .chart-lightbox-overlay {
        display: none;
        position: fixed;
        z-index: 99999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.85);
        align-items: center;
        justify-content: center;
    }

    .chart-lightbox-content {
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        width: 90%;
        max-width: 1000px;
        height: auto;
        max-height: 90vh;
        position: relative;
        box-shadow: 0 0 20px rgba(255,255,255,0.2);
        display: flex;
        flex-direction: column;
    }

    .chart-lightbox-close {
        position: absolute;
        top: -35px;
        right: 0;
        color: #fff;
        font-size: 30px;
        font-weight: bold;
        cursor: pointer;
    }
    
    .chart-big-wrapper {
        position: relative;
        width: 100%;
        height: 500px;
    }

/* Grid de 2 columnas (50% cada una) */
    .user-stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 50% - 50% */
        gap: 20px;
        width: 100%;
        margin-top: 20px;
    }

    /* Tarjeta específica para Usuario */
    .user-chart-card {
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
        min-height: 300px; /* Un poco más alta */
        position: relative;
    }

    .user-chart-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0,0,0,0.1);
        border-color: #3498db;
    }

    /* Icono lupa al pasar el ratón */
    .user-chart-card:hover::after {
        content: '\f00e'; /* fa-search-plus */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 1.2rem;
        color: #3498db;
        opacity: 0.6;
    }

    .user-chart-header {
        padding: 12px 15px;
        border-bottom: 1px solid #eee;
        background: #fdfdfd;
        border-radius: 8px 8px 0 0;
    }
    
    .user-chart-title {
        font-size: 0.95rem;
        font-weight: 700;
        color: #555;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .user-chart-body {
        flex-grow: 1;
        padding: 15px;
        height: 250px;
        position: relative;
    }

    /* Responsive: En móviles una columna */
    @media (max-width: 900px) {
        .user-stats-grid {
            grid-template-columns: 1fr;
        }
    }

    /* --- LIGHTBOX (MODAL) ÚNICO PARA USUARIO --- */
    .user-lightbox-overlay {
        display: none;
        position: fixed;
        z-index: 99999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.85);
        align-items: center;
        justify-content: center;
    }

    .user-lightbox-content {
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        width: 90%;
        max-width: 1000px;
        position: relative;
        box-shadow: 0 0 20px rgba(255,255,255,0.2);
    }

    .user-lightbox-close {
        position: absolute;
        top: -35px;
        right: 0;
        color: #fff;
        font-size: 30px;
        font-weight: bold;
        cursor: pointer;
    }
    
    .user-chart-big-wrapper {
        position: relative;
        width: 100%;
        height: 500px;
    }




/* ==========================================================================
   14. RESPONSIVE GLOBAL
   ========================================================================== */
@media (max-width: 1250px) {
    .nav-menu {
        position: fixed; top: 70px; left: -100%; width: 80%; height: calc(100vh - 70px);
        background: #fff; flex-direction: column; margin: 0; padding: 20px; overflow-y: auto;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1); transition: left 0.3s ease;
    }
    .nav-menu.active { left: 0; }
    .nav-list { flex-direction: column; align-items: flex-start; width: 100%; gap: 0; }
    .nav-item { width: 100%; height: auto; border-bottom: 1px solid #eee; }
    .nav-link { color: #333; width: 100%; padding: 15px; justify-content: space-between; }
    .dropdown-menu { position: static; box-shadow: none; display: none; background: #fafafa; padding-left: 20px; }
    .nav-item.mobile-open .dropdown-menu { display: block; }
    .nav-item:hover .dropdown-menu { display: none; }
    .mobile-toggle { display: block; }
    .user-capsule { display: none; }
    .bloque1, .bloque2 { width: 100%; float: none; margin-right: 0; height: auto !important; }
    .dashboard-stats { flex-direction: column; }
    form.buscador { flex-direction: column; width: 100%; }
    form.buscador input, form.buscador select { width: 100% !important; }
}

@media (max-width: 900px) {
    .pe-detail-grid { grid-template-columns: 1fr; }
    .pe-detail-img-container { height: 250px; }
    .grid-3-col, .grid-4-col { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .grid-graficos { grid-template-columns: 1fr; }
    .grid-form-layout { grid-template-columns: 1fr; }
    .span-2 { grid-column: span 1; }
    .btn-accion-contenedor { text-align: center; margin-top: 20px; }
    .btn-accion-contenedor button.guardar { width: 100%; display: block; }
}

@media (min-width: 768px) {
    .login-visual { display: block; }
	.grid-graficos { grid-template-columns: 1fr; }
    .chart-box { min-height: 300px; }
    .chart-body { height: 250px;}
}

@media (max-width: 450px) {
    .pe-texto { font-size: 1.2rem; }
    .pe-icono { font-size: 3rem; }
    .pe-boton { padding: 30px 15px; min-height: 180px; }
    .pe-img-container { height: 220px; }
    .pe-product { font-size: 1.25rem; }
    .pe-header-unified { justify-content: center; text-align: center; }
    .pe-header-title-block { text-align: center; }
}