/* --- INVENTARIO DE SWITCHES COMPACTO --- */
#switch-inventory-container { 
    background-color: #ffffff; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    margin-bottom: 20px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
#switch-inventory-container .inventory-item-list {
    padding: 0;
    background-color: transparent;
}.inventory-section, .log-section { 
    background-color: #ffffff; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    margin-bottom: 20px; 
}html {
    zoom: 1.0;
}

/* --- GENERALS --- */
body {
    font-family: Tahoma, Arial, sans-serif;
    color: #333;
    margin: 0;
    /* ▼▼ FONDO SUTIL MEJORADO ▼▼ */
    background-image: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)), url('background.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#page-wrapper { max-width: 1600px; margin: 0 auto; padding: 20px; }
h1, h2, h3 { color: #0056b3; text-align: center; }

/* Forzar centrado específico para el título de Change History */
.log-section .log-header h2[data-translate="historyTitle"] {
    text-align: center !important;
    margin: 0 auto !important;
    display: block !important;
    width: 100% !important;
}
hr { border: 0; height: 1px; background: #ddd; margin: 40px 0; }
.hidden { display: none !important; }

/* Y para que el footer se quede abajo, si el body es un flex container */
.site-footer {
    margin-top: auto; /* Empuja el footer hacia abajo */
    text-align: center; /* Centra el contenido del footer */
    padding: 20px 0; /* Añade espacio arriba y abajo */
    /* ... el resto de tus estilos de footer ... */
}

/* --- HEADER & LOGIN --- */
.top-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}

.logo-container img {
    width: 220px;
    height: auto;
}

.top-actions { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
}

#language-selector button { padding: 8px 12px; font-size: 14px; background-color: #f0f0f0; color: #333; border: 1px solid #ccc; margin-top: 0; }
#language-selector button.active { background-color: #007bff; color: white; border-color: #0056b3; cursor: default; }
.auth-buttons { display: flex; gap: 10px; }
.auth-buttons button { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; background-color: #6c757d; color: white; margin-top: 0; }
#logout-btn { background-color: #dc3545; }

/* --- LOGIN MODAL --- */
#login-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 1000; display: flex; justify-content: center; align-items: center; }
#login-modal { background: white; padding: 30px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); width: 320px; }
#login-form button { width: 100%; margin-top: 15px; }
#login-form #cancel-login { background-color: #6c757d; }
#login-error { color: red; text-align: center; margin-top: 10px; }

/* --- REQUEST ITEM COMPACTO --- */
#request-item-container { 
    background-color: #ffffff; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    margin-bottom: 20px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
#request-item-container h3 { 
    text-align: center; 
    margin-top: 0; 
    margin-bottom: 20px; 
}

/* --- CONTROLES DE USO/ADMIN COMPACTOS Y CENTRADOS --- */
.controls-section { 
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px; 
    padding-bottom: 20px; 
    flex-wrap: wrap;
}

.form-card { 
    background-color: #ffffff; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    flex: none;
    min-width: 350px; 
    max-width: 450px; 
}
.admin-card { border-left: 5px solid #ffc107; }
.form-section { margin-bottom: 10px; }
.form-section.hidden { display: none; }
label { display: block; margin-bottom: 8px; font-weight: bold; }
input[type="number"], input[type="text"], input[type="password"], select { width: 100%; padding: 8px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 4px; }
button { width: 100%; padding: 12px; margin-top: 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; color: white; background-color: #6c757d; }
button:hover { opacity: 0.9; }

#use-form button[type="submit"], 
#request-form button[type="submit"],
#create-user-form button[type="submit"],
#login-form button[type="submit"],
#register-form button[type="submit"] { 
    background-color: #007bff;
}

.action-buttons { display: flex; gap: 10px; margin-top: 20px; }
.action-buttons button { margin-top: 0; }
#add-stock-btn { background-color: #28a745; }
#remove-stock-btn { background-color: #dc3545; }
#add-damaged-btn { background-color: #fd7e14; }
#remove-damaged-btn { background-color: #17a2b8; }

/* --- BUTTON GROUPS --- */
.button-group { display: flex; flex-wrap: wrap; gap: 8px; }
.button-group button { width: auto; flex-grow: 1; padding: 8px 10px; margin-top: 0; font-size: 14px; background-color: #f0f0f0; color: #333; border: 1px solid #ccc; transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
.button-group button:hover { transform: translateY(-2px); }
.type-group button { background-color: #e9d5ff; color: #6f42c1; border-color: #c084fc; font-weight: bold; }
.button-group button.selected { transform: scale(1.1); z-index: 2; box-shadow: 0 0 0 2px #007bff; }

/* --- THEMED COLOR BUTTONS (MODERN STYLE) --- */
.color-btn-Red, .color-btn-Red-Slim { background-color: rgba(220, 53, 69, 0.1); color: #b02a37; border-color: rgba(220, 53, 69, 0.4); font-weight: bold; }
.color-btn-Red.selected, .color-btn-Red-Slim.selected { background-color: #dc3545; color: white; border-color: #dc3545; box-shadow: none; }
.color-btn-Blue, .color-btn-Blue-Slim { background-color: rgba(0, 123, 255, 0.1); color: #0056b3; border-color: rgba(0, 123, 255, 0.4); font-weight: bold; }
.color-btn-Blue.selected, .color-btn-Blue-Slim.selected { background-color: #007bff; color: white; border-color: #007bff; box-shadow: none; }
.color-btn-Green { background-color: rgba(40, 167, 69, 0.1); color: #19692c; border-color: rgba(40, 167, 69, 0.4); font-weight: bold; }
.color-btn-Green.selected { background-color: #28a745; color: white; border-color: #28a745; box-shadow: none; }
.color-btn-Yellow { background-color: rgba(255, 193, 7, 0.15); color: #9e7f1a; border-color: rgba(255, 193, 7, 0.5); font-weight: bold; }
.color-btn-Yellow.selected { background-color: #ffc107; color: #333; border-color: #ffc107; box-shadow: none; }
.color-btn-White { background-color: rgba(0, 0, 0, 0.03); color: #495057; border-color: #ddd; font-weight: bold; }
.color-btn-White.selected { background-color: #343a40; color: white; border-color: #343a40; box-shadow: none; }
.color-btn-Black { background-color: rgba(52, 58, 64, 0.1); color: #343a40; border-color: rgba(52, 58, 64, 0.4); font-weight: bold; }
.color-btn-Black.selected { background-color: #212529; color: white; border-color: #212529; box-shadow: none; }
.type-group button.selected { background-color: #6f42c1; color: white; box-shadow: none; }

/* --- QUANTITY SELECTOR --- */
.quantity-input-wrapper { display: flex; flex-direction: column; gap: 10px; }
.quantity-group button { min-width: 35px; flex-grow: 0; padding: 10px; font-size: 16px; background-color: #e9ecef; color: #495057; }
.quantity-group button.clear-btn { background-color: #ffc107; color: #333; }

/* --- DANGER ZONE --- */
.danger-zone { background-color: #fff3cd; border: 1px solid #ffeeba; border-left: 5px solid #dc3545; padding: 20px; margin-bottom: 20px; border-radius: 8px; text-align: center; }
#reset-all-stock-btn { background-color: #c82333; font-weight: bold; max-width: 400px; margin: 10px auto 0 auto; display: block; }

/* --- GESTIÓN DE USUARIOS --- */
#create-user-section { padding: 20px; }
#create-user-section h3 { text-align: left; margin-top: 0; margin-bottom: 15px; }
#create-user-card { padding: 0; box-shadow: none; border-radius: 0; }
#user-management-section h3 { text-align: left; margin-top: 0; margin-bottom: 15px; }

.user-grid-wrapper {
    width: 100%;
    overflow-x: hidden;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px;
    background-color: #f8f9fa;
}
.user-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0;
    align-items: flex-start;
}
.user-card {
    width: calc(50% - 7.5px);
    min-width: 300px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}
.user-card-header {
    padding: 8px 15px;
    font-size: 1.1em;
    font-weight: bold;
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 20px;
}
.user-card-header:hover {
    background-color: #e9ecef;
}
.user-card-header::after {
    content: '▼';
    font-size: 14px;
    color: #6c757d;
    transition: transform 0.3s ease;
}
.user-card.collapsed .user-card-header::after {
    transform: rotate(-90deg);
}
.user-card-content {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    overflow: hidden;
}

.user-card:not(.collapsed) .user-card-content {
    max-height: 600px; /* Suficientemente grande para el contenido */
    opacity: 1;
    overflow: hidden; /* Previene desbordamientos */
}
.permissions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 15px; flex-grow: 1; }
.permission-item { display: flex; justify-content: space-between; align-items: center; background-color: #f8f9fa; padding: 10px; border-radius: 5px; }
.permission-item label { margin: 0; font-weight: normal; }
.user-card {
    flex: 1 1 300px;
    max-width: 500px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    overflow: visible;
    transition: all 0.3s ease;
    height: auto;
}
.user-card-actions button { width: 100%; padding: 8px; font-size: 14px; margin: 0; }
.save-perms-btn { background-color: #007bff; }
.delete-user-btn { background-color: #dc3545; }
.user-card-section { padding: 15px; border-top: 1px solid #ddd; background-color: #f8f9fa; display: flex; flex-direction: column; gap: 10px; }
.new-password-input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.change-pass-btn { width: 100%; padding: 8px; font-size: 14px; margin: 0; background-color: #ffc107; color: #333; font-weight: bold; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #28a745; }
input:checked + .slider:before { transform: translateX(20px); }

/* --- STATS & GRÁFICA --- */
#usage-stats-container { background-color: #e2f3ff; border-left: 5px solid #007bff; padding: 20px; margin-bottom: 20px; border-radius: 8px; }
#usage-stats-container h2 { text-align: center; margin: 0 0 15px 0; }
.chart-container { position: relative; height: 250px; width: 100%; margin-top: 15px; }

/* --- FILTRO DE HISTORIAL Y CAJA CON SCROLL - SIMPLIFICADO --- */
.log-header { 
    margin-bottom: 15px;
}
.log-header h2 { 
    color: #0056b3; 
    text-align: center;
    margin: 0 0 15px 0;
}
.log-filters { 
    text-align: center;
    margin-bottom: 15px;
}
.log-filters input[type="date"] { padding: 5px; border: 1px solid #ccc; border-radius: 4px; margin: 0 5px; }
.log-filters button { padding: 6px 12px; font-size: 14px; margin: 0 5px; width: auto; background-color: #6c757d; }
#log-box { background-color: #f8f9fa; border: 1px solid #ddd; border-radius: 5px; padding: 10px; height: 300px; overflow-y: auto; }
#log-container div:last-child { border-bottom: none; }

/* --- INVENTARIO CON BOXES PEGADOS AL MÍNIMO --- */
#cable-inventory-container, #switch-inventory-container { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 3px; 
    margin-top: 20px; 
}
.inventory-color-box { 
    border: 1px solid rgba(0,0,0,0.1); 
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin: 0 auto;
    max-width: 280px;
}
.color-box-header { 
    padding: 14px 18px; 
    font-size: 17px; 
    font-weight: bold; 
}
.inventory-item-list { 
    padding: 14px 18px; 
    background-color: white; 
}
.inventory-item-row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 6px 0; 
    border-bottom: none; 
    font-size: 16px;
    line-height: 1.4;
}
.inventory-item-row:last-child { 
    border-bottom: none; 
}
.item-details { 
    color: #333; 
    font-size: 16px;
    margin-right: 12px;
}
.item-quantity { 
    font-weight: bold; 
    font-size: 16px; 
    color: #333;
    background-color: #e9ecef;
    padding: 4px 10px; 
    border-radius: 4px; 
    min-width: 35px; 
    text-align: center;
}
.item-quantity { 
    font-weight: bold; 
    font-size: 15px; 
    color: #333;
    background-color: #e9ecef;
    padding: 3px 8px; 
    border-radius: 4px; 
    min-width: 30px; 
    text-align: center;
}

/* --- ÍTEMS DAÑADOS --- */
.damaged-cables-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px; text-align: center; }
.damaged-item { position: relative; padding: 15px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.1); transition: transform 0.2s ease; }
.damaged-item:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
.damaged-item .count { display: block; font-size: 1.8em; font-weight: bold; }
.damaged-item .label { font-size: 0.9em; font-weight: 500; }
.damaged-item-Red, .damaged-item-Red-Slim { background-color: rgba(220, 53, 69, 0.1); color: #dc3545; }
.damaged-item-Blue, .damaged-item-Blue-Slim { background-color: rgba(0, 123, 255, 0.1); color: #007bff; }
.damaged-item-Green { background-color: rgba(40, 167, 69, 0.1); color: #28a745; }
.damaged-item-Yellow { background-color: rgba(255, 193, 7, 0.15); color: #9e7f1a; }
.damaged-item-White { background-color: rgba(0, 0, 0, 0.03); color: #343a40; }
.damaged-item-QSFP { background-color: rgba(52, 58, 64, 0.1); color: #343a40; }
.damaged-item-SWITCHES { background-color: rgba(111, 66, 193, 0.1); color: #6f42c1; }
.damaged-item-OSFP { background-color: rgba(253, 126, 20, 0.1); color: #fd7e14; }

.damaged-tooltip { visibility: hidden; opacity: 0; position: absolute; bottom: 105%; left: 50%; transform: translateX(-50%); width: 220px; background-color: #343a40; color: #fff; text-align: left; padding: 10px; border-radius: 6px; z-index: 10; transition: opacity 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.damaged-item:hover .damaged-tooltip { visibility: visible; opacity: 1; }
.damaged-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #343a40 transparent transparent transparent; }
.tooltip-item { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px solid #495057; }
.tooltip-item:last-child { border-bottom: none; }
.tooltip-item .quantity { font-weight: bold; }

/* --- HISTORIAL DE CAMBIOS --- */
#log-container { display: flex; flex-direction: column; gap: 10px; }
.log-entry { background-color: #fff; border: 1px solid #e9ecef; border-left: 4px solid #007bff; border-radius: 5px; padding: 10px 15px; display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap; }
.log-details { display: flex; align-items: center; gap: 12px; flex-grow: 1; }
.log-user { font-weight: bold; padding: 4px 8px; border-radius: 4px; font-size: 14px; white-space: nowrap; }
.log-message { font-size: 14px; color: #495057; }
.log-timestamp { font-size: 13px; color: #6c757d; white-space: nowrap; text-align: right; }
.log-entry.negative { border-left-color: #fd7e14; }

/* Colores de Usuarios en Historial */
.log-user.super-admin { background-color: #fbe9eb; color: #c82333; border: 1px solid #f5c6cb; }
.log-user.user-daly { background-color: #e9d5ff; color: #6f42c1; border: 1px solid #d3a1f7; }
.log-user.user-eliana { background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.log-user:not(.super-admin):not(.user-daly):not(.user-eliana) { background-color: #e2f3ff; color: #0056b3; }

/* --- SECCIÓN DE CABECERA PARA DAÑADOS --- */
.section-header { 
    display: flex; 
    flex-direction: column;
    align-items: center; 
    margin-bottom: 15px; 
}
.section-header h2 { 
    margin: 0 0 10px 0; 
    text-align: center; 
}
#reset-damaged-btn { 
    width: auto; 
    padding: 8px 15px; 
    font-size: 14px; 
    margin: 0;
    background-color: #ffc107; 
    color: #333; 
    font-weight: bold;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

/* --- SISTEMA DE PESTAÑAS --- */
.tabs-container {
    background: linear-gradient(to right, #f8f9ff, #fff8f3);
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 20px;
}

.tabs {
    display: flex;
    justify-content: center;
    padding: 0 20px;
    max-width: 1600px;
    margin: 0 auto;
}

.tab {
    padding: 15px 25px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    color: #666;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    margin-top: 0;
    width: auto;
}

.tab:hover {
    background: rgba(103, 126, 234, 0.1);
    color: #667eea;
}

.tab.active {
    color: #667eea;
    border-bottom-color: #667eea;
    background: rgba(103, 126, 234, 0.05);
}

.tab-content {
    display: none;
 position: relative; /* Importante para que z-index funcione */
    z-index: 1; /* Asegura que otros elementos no lo tapen */
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease-in;
}

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


/* --- OCULTAR SECCIONES ADMIN FUERA DE SU PESTAÑA --- */
.tab-content:not(.active) #general-articles-section,
.tab-content:not(.active) #user-management-section,
.tab-content:not(.active) #admin-requests-panel,
.tab-content:not(.active) #create-user-container,
.tab-content:not(.active) .danger-zone {
    display: none !important;
}

/* Solo mostrar en pestaña admin activa */
#dashboard-content #user-management-section,
#dashboard-content #admin-requests-panel,
#dashboard-content #create-user-container,
#dashboard-content .danger-zone,
#inventario-content #user-management-section,
#inventario-content #admin-requests-panel,
#inventario-content #create-user-container,
#inventario-content .danger-zone,
#locaciones-content #user-management-section,
#locaciones-content #admin-requests-panel,
#locaciones-content #create-user-container,
#locaciones-content .danger-zone,
#request-content #user-management-section,
#request-content #admin-requests-panel,
#request-content #create-user-container,
#request-content .danger-zone {
    display: none !important;
}

/* --- LAYOUT PRINCIPAL SIMPLE --- */
.main-layout { 
    display: block;
}
.left-column { 
    margin-bottom: 20px;
}
.right-column { 
    display: block;
}
.right-column > * {
    margin-bottom: 20px;
}



/* --- GESTIÓN DE USUARIOS SOLO EN ADMIN --- */
#admin-content #user-management-section { 
    background-color: #ffffff; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    margin-bottom: 20px;
    max-width: max-content;
    margin-left: auto;
    margin-right: auto;
}
#admin-content #user-management-section h2 { 
    text-align: center; 
    margin-top: 0; 
    margin-bottom: 15px; 
}

/* --- PANEL DE SOLICITUDES SOLO EN ADMIN --- */
#admin-content #admin-requests-panel { 
    background-color: #ffffff; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    margin-bottom: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
#admin-content #admin-requests-panel h2 { 
    text-align: center; 
    margin-top: 0; 
    margin-bottom: 15px; 
}

/* --- CREAR USUARIO SOLO EN ADMIN --- */
#admin-content #create-user-container { 
    background-color: #ffffff; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    margin-bottom: 20px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
#admin-content #create-user-container h3 { 
    text-align: center; 
    margin-top: 0; 
    margin-bottom: 15px; 
}

/* --- DANGER ZONE SOLO EN ADMIN --- */
#admin-content .danger-zone { 
    background-color: #fff3cd; 
    border: 1px solid #ffeeba; 
    border-left: 5px solid #dc3545; 
    padding: 20px; 
    margin-bottom: 20px; 
    border-radius: 8px; 
    text-align: center;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
#active-locations-container { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
    gap: 20px; 
    margin-bottom: 20px;
}
.location-panel { 
    background-color: #fff; 
    border: 1px solid rgba(0,0,0,0.1); 
    border-radius: 8px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
    overflow: hidden;
    max-width: 400px;
    margin: 0 auto;
}
.location-panel-header { 
    padding: 12px 15px; 
    font-size: 1.1em; 
    font-weight: bold; 
    background-color: #e9d5ff; 
    color: #6f42c1; 
    border-bottom: 1px solid #d3a1f7; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.location-panel-body { 
    padding: 0; 
}
.location-component-row { 
    display: flex; 
    justify-content: space-between; 
    padding: 8px 15px; 
    border-bottom: 1px solid #f0f0f0; 
    font-size: 14px;
}
.location-component-row:last-child { 
    border-bottom: none; 
}
.location-component-name { 
    font-size: 13px; 
}
.location-component-quantity { 
    font-weight: bold; 
    font-size: 13px; 
    background-color: #e9ecef; 
    padding: 2px 6px; 
    border-radius: 4px; 
    min-width: 25px; 
    text-align: center; 
}

/* --- Estilos para controles de admin en paneles de locaciones --- */
.location-admin-controls { display: flex; gap: 5px; align-items: center; }
.location-qty-input { width: 60px; padding: 5px; font-size: 14px; text-align: center; border: 1px solid #ccc; border-radius: 4px; }
.location-set-btn { padding: 5px 10px; font-size: 14px; margin: 0; border-radius: 4px; background-color: #28a745; color: white; }
.location-qty-btn { width: 30px; height: 30px; padding: 0; margin: 0; font-size: 20px; font-weight: bold; border-radius: 50%; border: 1px solid #6f42c1; background-color: #fff; color: #6f42c1; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; line-height: 1; }
.location-qty-btn:hover { background-color: #6f42c1; color: #fff; }

/* Estilos Personalizados para Paneles de Locaciones */
.location-panel.panel-RA .location-panel-header { background-color: #d4edda; color: #155724; border-bottom-color: #c3e6cb; }
.location-panel.panel-RA .location-qty-btn { border-color: #155724; color: #155724; }
.location-panel.panel-RA .location-qty-btn:hover { background-color: #155724; color: white; }
.location-panel.panel-RR .location-panel-header { background-color: #f8d7da; color: #721c24; border-bottom-color: #f5c6cb; }
.location-panel.panel-RR .location-qty-btn { border-color: #721c24; color: #721c24; }
.location-panel.panel-RR .location-qty-btn:hover { background-color: #721c24; color: white; }



/* --- Estilos para nuevos botones Slim --- */
.color-btn-Green-Slim { background-color: rgba(40, 167, 69, 0.1); color: #19692c; border-color: rgba(40, 167, 69, 0.4); font-weight: bold; }
.color-btn-Green-Slim.selected { background-color: #28a745; color: white; border-color: #28a745; box-shadow: none; }

.color-btn-Yellow-Slim { background-color: rgba(255, 193, 7, 0.15); color: #9e7f1a; border-color: rgba(255, 193, 7, 0.5); font-weight: bold; }
.color-btn-Yellow-Slim.selected { background-color: #ffc107; color: #333; border-color: #ffc107; box-shadow: none; }

.color-btn-White-Slim { background-color: rgba(0, 0, 0, 0.03); color: #495057; border-color: #ddd; font-weight: bold; }
.color-btn-White-Slim.selected { background-color: #343a40; color: white; border-color: #343a40; box-shadow: none; }

/* --- Estilos para nuevos items dañados Slim --- */
.damaged-item-Green-Slim { background-color: rgba(40, 167, 69, 0.1); color: #28a745; }
.damaged-item-Yellow-Slim { background-color: rgba(255, 193, 7, 0.15); color: #9e7f1a; }
.damaged-item-White-Slim { background-color: rgba(0, 0, 0, 0.03); color: #343a40; }
/* --- Estilos para el formulario de solicitud de items --- */
#request-form label {
    margin-top: 10px;
}
#request-form input {
    margin-bottom: 5px;
}
/* --- Estilos para el panel de solicitudes del admin --- */
#requests-list-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.request-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-left: 5px solid #ffc107; /* Amarillo para 'pendiente' */
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.request-card.status-completed {
    border-left-color: #28a745; /* Verde para 'completada' */
    background-color: #f8f9fa;
}

.request-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.requester-info {
    font-weight: bold;
    font-size: 1.1em;
}

.request-date {
    font-size: 0.9em;
    color: #6c757d;
}

.request-body p {
    margin: 5px 0;
    line-height: 1.5;
}

.request-body strong {
    color: #0056b3;
}

.request-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.request-actions button {
    width: auto;
    padding: 8px 15px;
    margin-top: 0;
    font-size: 14px;
    font-weight: bold;
}

.approve-request-btn {
    background-color: #28a745; /* Verde */
}

.reject-request-btn {
    background-color: #dc3545; /* Rojo */
}

/* --- Estilos para los nuevos estados y botones de solicitud --- */
.request-card.status-in_progress {
    border-left-color: #17a2b8; /* Azul para 'en progreso' */
}

.request-card.status-rejected, .request-card.status-cancelled {
    border-left-color: #6c757d; /* Gris para 'rechazada' o 'cancelada' */
    background-color: #f8f9fa;
    opacity: 0.8;
}

.work-request-btn {
    background-color: #ffc107; /* Amarillo */
    color: #333;
}

.cancel-request-btn {
    background-color: #6c757d; /* Gris */
}

/* --- Estilos para Registro y Login Modal --- */
#register-modal {
    background: white; padding: 30px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); width: 320px;
}

.login-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 15px;
}

.login-actions > div {
    display: flex;
    gap: 10px;
}

.login-actions > div > button {
    flex: 1;
    margin-top: 0;
}

#show-register-btn {
    background-color: #17a2b8;
}

/* --- Corrección para asegurar que los inputs sean clickeables --- */
#register-form input {
    position: relative;
    z-index: 2;
}

/* --- NOTIFICATION BELL --- */
#notification-bell, #user-notification-bell {
    position: relative;
    cursor: pointer;
    color: #333;
}

#notification-bell svg, #user-notification-bell svg {
    width: 28px;
    height: 28px;
}

#notification-count, #user-notification-count {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid white;
}

#notification-panel, #user-notification-panel {
    position: absolute;
    top: 130%; /* Un poco más abajo del icono */
    right: 0;
    width: 350px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1001;
    max-height: 400px;
    overflow-y: auto;
}

.notification-panel-header {
    padding: 12px 15px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
}

.notification-item {
    display: block;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background-color: #f8f9fa;
}

.notification-item strong {
    color: #0056b3;
}

.notification-item small {
    display: block;
    color: #6c757d;
    margin-top: 4px;
}

#request-filters {
    margin-bottom: 20px;
    justify-content: center; /* <-- Cambiamos flex-start por center */
}

#request-filters button {
    flex-grow: 0; /* Para que no se estiren */
    padding: 8px 16px;
    font-weight: bold;
}

#request-filters button.selected {
    background-color: #007bff;
    color: white;
    border-color: #0056b3;
    transform: none; /* Quitar efecto de escala */
    box-shadow: none; /* Quitar sombra */
}

#request-switch-section > label {
    margin-top: 15px;
}

/* --- Estilos para Usuarios en Línea (VERSIÓN FINAL CON ETIQUETAS DE ROL) --- */

/* Contenedor principal de cada usuario (ahora para agrupar nombre y etiqueta) */
.online-user-wrapper {
    display: inline-flex; /* Usamos flex para alinear en columna */
    flex-direction: column; /* Apila el nombre y la etiqueta */
    align-items: center; /* Alinea los elementos a la izquierda */
    vertical-align: middle; /* Alinea el contenedor verticalmente con las comas */
    margin: 0 5px 0 2px; /* Espacio entre usuarios */
}

/* Contenedor del nombre de usuario (para superponer brillo y gif) */
.username-display {
    display: inline-grid;
    margin-bottom: 1px; /* Pequeño espacio entre el nombre y la etiqueta */
}

/* Las dos capas (glow y sparkle) se colocan en la misma celda de la rejilla */
.online-user-wrapper > .username-display > span {
    grid-area: 1 / 1;
    font-weight: 800;
    font-size: 1.05em;
}

/* Estilos para usuarios normales (sin efectos ni etiquetas de rol) */
.online-user-glow.user-user {
    color: #333;
}
.online-user-sparkle.user-user {
    display: none; /* Ocultamos la capa de brillo para usuarios normales */
}
.online-user-wrapper .user-role-tag.user-user {
    display: none; /* Ocultamos la etiqueta de rol para usuarios normales */
}


/* --- Estilos de las ETIQUETAS DE ROL (los "botones" debajo del nombre) --- */
.user-role-tag {
    padding: 1px 2px;
    border-radius: 5px; /* Bordes redondeados */
    font-size: 0.75em; /* Tamaño más pequeño que el nombre */
    font-weight: bold;
    text-align: center;
    white-space: nowrap; /* Evita que el texto se rompa */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra para darle profundidad */
    cursor: default; /* No es clickeable */
    margin-top: 3px; /* Espacio con el nombre */
}

/* --- Efectos para Administradores --- */
.online-user-glow.user-administrador {
    color: #d92332; /* Rojo sólido */
    text-shadow: 0 0 10px #d92332; /* Brillo rojo */
}
.online-user-sparkle.user-administrador {
    background-image: url('sparkle.gif');
    background-size: 40%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    background-clip: content-box;
    color: transparent;
}
/* Estilo del botón para Administradores */
.user-role-tag.user-administrador {
    background-color: #d92332; /* Fondo rojo */
    color: white; /* Texto blanco */
    border: 1px solid #a71d2a; /* Borde más oscuro */
}


/* --- Efectos para Moderadores --- */
.online-user-glow.user-moderador {
    color: #0d6efd; /* Azul sólido */
    text-shadow: 0 0 5px #0d6efd; /* Brillo azul */
}
.online-user-sparkle.user-moderador {
    background-image: url('sparkle2.gif');
    background-size: 150%;
    background-repeat: repeat;
    -webkit-background-clip: text;
    background-clip: content-box;
    color: transparent;
}
/* Estilo del botón para Moderadores */
.user-role-tag.user-moderador {
    background-color: #0d6efd; /* Fondo azul */
    color: white; /* Texto blanco */
    border: 1px solid #0a58ca; /* Borde más oscuro */
}
/* --- ARTÍCULOS GENERALES GRID --- */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.article-card {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.article-header {
    color: white;
    padding: 12px;
    font-weight: bold;
    font-size: 15px;
}

.article-body {
    padding: 15px;
}

.article-code {
    color: #6c757d;
    font-size: 12px;
    margin-bottom: 5px;
}

.article-category {
    color: #007bff;
    font-size: 13px;
    margin-bottom: 10px;
}

.article-quantity {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    margin: 15px 0;
    color: #333;
}

.article-actions {
    display: flex;
    gap: 5px;
}

.article-actions button {
    flex: 1;
    padding: 6px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    color: white;
    font-size: 12px;
    font-weight: bold;
    margin-top: 0;
}

.btn-use-article { background: #007bff; }
.btn-add-article { background: #28a745; }
.btn-damaged-article { background: #fd7e14; }

/* --- ESTILO PARA NUEVO CUADRO DE INVENTARIO GENERAL DAÑADO --- */
.damaged-item-Inv-General {
    background-color: rgba(111, 66, 193, 0.1);
    color: #6f42c1;
}

/* --- ESTILOS PARA IMAGENES DE ARTICULOS GENERALES --- */
.article-image-container {
    width: 100%;
    height: 150px; /* Altura fija para todas las imagenes */
    background-color: #f0f0f0;
    overflow: hidden;
}

.article-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Asegura que toda la imagen sea visible sin deformarse */
    transition: transform 0.2s ease-in-out;
}

.article-card:hover .article-image-container img {
    transform: scale(1.05); /* Efecto de zoom sutil al pasar el mouse */
}

/* --- ESTILOS PARA EDICIÓN DE ARTÍCULOS --- */
.article-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.article-title {
    flex-grow: 1;
}

.btn-edit-article {
    padding: 5px 10px;
    font-size: 12px;
    background-color: rgba(0,0,0,0.2);
    color: white;
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 5px;
    cursor: pointer;
    margin: 0;
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn-edit-article:hover {
    background-color: rgba(0,0,0,0.4);
}

/* --- ESTILOS PARA LA VENTANA MODAL DE IMAGEN --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 500px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.modal-header h3 {
    margin: 0;
    font-size: 1.2em;
}
.close-btn {
    background: none;
    border: none;
    font-size: 2em;
    cursor: pointer;
    color: #888;
    padding: 0;
    margin: -15px -10px 0 0;
    width: auto;
}

.upload-area {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    background-color: #f9f9f9;
    position: relative;
}
.upload-area.dragover {
    background-color: #e0e0e0;
    border-color: #888;
}
.upload-area p {
    margin: 5px 0 0 0;
    color: #555;
}
.upload-area .upload-area-subtext {
    color: #888;
}
.upload-area .upload-area-specs {
    font-size: 0.8em;
    color: #aaa;
    margin-top: 15px;
}
#image-preview {
    max-width: 100%;
    max-height: 200px;
    border-radius: 5px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid #eee;
}
.modal-footer button {
    width: auto;
    padding: 10px 20px;
    margin: 0;
}
.btn-success { background-color: #28a745; }
.btn-danger { background-color: #dc3545; }
.btn-secondary { background-color: #6c757d; }


/* --- ESTILOS PARA LIGHTBOX DE IMAGEN --- */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1001; /* Un poco más alto que el otro modal */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* Usamos la clase 'hidden' que ya existe para ocultarlo */
}

.lightbox-overlay img {
    max-width: 90vw;  /* Máximo 90% del ancho de la ventana */
    max-height: 90vh; /* Máximo 90% del alto de la ventana */
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
    border: 2px solid white;
    border-radius: 5px;
}

/* --- ESTILO PARA BOTÓN DE ELIMINAR ARTÍCULO --- */
.btn-delete-article {
    background: #dc3545; /* Rojo peligro */
}
input[readonly] {
    background-color: #e9ecef; /* Un color gris claro */
    cursor: not-allowed;
}

/* --- ESTILO PARA EL BOTÓN DE REGISTRO EN LA CABECERA --- */
#show-register-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    background-color: #17a2b8; /* Color azul claro/turquesa */
    color: white;
    margin-top: 0;
    width: auto;
}
/* --- ESTILO PARA EL BOTÓN DE REGISTRO EN LA CABECERA --- */
#show-register-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    background-color: #17a2b8; /* Color azul claro/turquesa */
    color: white;
    margin-top: 0;
    width: auto;
}
/* --- ESTILOS PARA EL MENÚ DE USUARIO DESPLEGABLE --- */
.user-menu-container {
    position: relative;
    display: inline-block;
}

#user-menu-trigger {
    background-color: #dc3545; /* Mismo color que el botón de logout */
    color: white;
    padding: 10px 20px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.user-menu-dropdown {
    position: absolute;
    right: 0;
    top: 110%;
    background-color: white;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
    border-radius: 5px;
    overflow: hidden;
}

.user-menu-dropdown a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
}

.user-menu-dropdown a:hover {
    background-color: #f1f1f1;
}

.user-menu-dropdown hr {
    margin: 0;
    border-color: #f0f0f0;
}
/* --- ESTILOS PARA MODALS DE PERFIL Y CONFIGURACIÓN --- */
.modal-container {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 380px;
    /* Las siguientes 2 líneas son nuevas para evitar que se superpongan */
    position: absolute; 
    z-index: 1001;
}

.profile-info p {
    font-size: 16px;
    line-height: 1.6;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

#password-change-message {
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
}

#password-change-message.success {
    color: #28a745;
}

#password-change-message.error {
    color: #dc3545;
}
/* --- ESTILOS PARA SECCIÓN DE ESTADÍSTICAS EN MENÚ --- */
.user-stats-header {
    padding: 12px 16px;
    background-color: #f8f9fa;
    font-size: 13px;
}
.user-stats-header p {
    margin: 4px 0;
    color: #333;
}
.user-stats-header .user-title {
    font-weight: bold;
    font-size: 14px;
    color: #0056b3;
    margin-bottom: 8px;
}
.user-stats-header .stats-label {
    font-weight: bold;
    margin-top: 8px;
    color: #6c757d;
}

/* --- ESTILOS PARA TOOLTIP DE ESTADÍSTICAS DE USUARIO --- */
.requester-with-stats {
    position: relative;
    display: inline-block;
    cursor: help;
    border-bottom: 1px dotted #333;
}
.requester-tooltip {
    position: fixed !important; /* Forzar fixed para mejor control */
    background-color: #383838;
    color: #ffffff;
    padding: 12px 16px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    font-size: 14px;
    line-height: 1.5;
    white-space: nowrap;
    z-index: 99999 !important; /* Z-index muy alto */
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    opacity: 0;
    visibility: hidden;
    max-width: 280px;
    word-wrap: break-word;
    white-space: normal; /* Cambiar para permitir texto en múltiples líneas */
}

.request-forms-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
    flex-wrap: wrap;
}

.requester-tooltip strong {
    color: #ffffff;
    font-weight: bold;
}

.requester-tooltip hr {
    border: 0;
    height: 1px;
    background-color: #666;
    margin: 6px 0;
}

.requester-tooltip p {
    margin: 0;
}

/* Asegurar que el contenedor padre no interfiera */
.requester-with-stats {
    position: relative;
    display: inline-block;
    cursor: help;
    border-bottom: 1px dotted #333;
}

/* Remover estilos de posicionamiento absoluto que pueden causar conflictos */
.requester-with-stats .requester-tooltip {
    /* Estos estilos se manejan ahora por JavaScript */
}

#request-support-container, #request-item-container {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    margin: 0;
}

/* --- ESTILOS MEJORADOS PARA LOS FILTROS DE SOLICITUDES --- */
#request-context-filters {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

#request-context-filters button {
    flex: none;
    padding: 12px 24px;
    border: none;
    background-color: #f8f9fa;
    color: #666;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-right: 1px solid #ddd;
    margin: 0;
    width: auto;
    white-space: nowrap;
}

#request-context-filters button:last-child {
    border-right: none;
}

#request-context-filters button:hover {
    background-color: #e9ecef;
    color: #495057;
}

#request-context-filters button.selected {
    background-color: #007bff;
    color: white;
    transform: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

#request-status-filters {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

#request-status-filters button {
    flex: none;
    padding: 10px 20px;
    border: none;
    background-color: #f8f9fa;
    color: #666;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-right: 1px solid #ddd;
    margin: 0;
    width: auto;
    white-space: nowrap;
}

#request-status-filters button:last-child {
    border-right: none;
}

#request-status-filters button:hover {
    background-color: #e9ecef;
    color: #495057;
}

#request-status-filters button.selected {
    background-color: #28a745;
    color: white;
    transform: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

#request-status-filters button[data-filter="closed"].selected {
    background-color: #6c757d;
}

/* --- ESTILOS COMPACTOS PARA REQUEST SUPPORT --- */
#request-support-container {
    padding: 15px;
}

#request-support-container h3 {
    margin: 0 0 12px 0;
    font-size: 1.1em;
}

#request-support-container label {
    margin-top: 8px;
    margin-bottom: 5px;
    font-size: 14px;
}

#request-support-container input[type="text"] {
    padding: 6px 8px;
    font-size: 14px;
    margin-bottom: 8px;
}

#support-description {
    height: 80px;
    padding: 6px 8px;
    font-size: 14px;
    margin-bottom: 8px;
}

#request-support-container button {
    padding: 10px;
    margin-top: 10px;
    font-size: 14px;
}

/* Hacer el botón Support más compacto */
.type-group button {
    padding: 6px 12px;
    font-size: 13px;
}

/* --- LAYOUT LADO A LADO PARA FORMULARIOS --- */
@media (max-width: 768px) {
    .request-forms-wrapper {
        flex-direction: column;
        align-items: center;
    }
    
    #request-support-container, #request-item-container {
        max-width: 400px;
        width: 100%;
    }
}
/* --- WIP STATUS STYLES --- */
.wip-status-section {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.wip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 15px;
}

.wip-header h2 {
    margin: 0;
    color: #0056b3;
    font-size: 1.8em;
}

.wip-controls {
    display: flex;
    gap: 10px;
}

.wip-btn {
    padding: 10px 20px; /* <-- Un poco más de espacio interno */
    border: none;
    border-radius: 8px; /* <-- Bordes un poco más redondeados */
    cursor: pointer;
    font-size: 15px; /* <-- Letra ligeramente más grande */
    font-weight: 600;
    transition: all 0.2s ease;
}

.wip-btn-primary {
    background-color: #0d6efd; /* <-- Un azul más vibrante */
    color: white;
}

.wip-btn-primary:hover {
    background-color: #0b5ed7; /* <-- Un azul más oscuro al pasar el mouse */
}

.wip-btn-secondary {
    background-color: #6c757d;
    color: white;
}

.wip-btn-secondary:hover {
    background-color: #545b62;
}

.wip-btn-small {
    padding: 4px 8px;
    font-size: 12px;
}

.wip-btn-danger {
    background-color: #dc3545;
    color: white;
}

.wip-btn-danger:hover {
    background-color: #c82333;
}

/* Grid de tarjetas WIP */
#wip-cards-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 10px;
}

.wip-card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s ease;
    min-height: 400px;
}

.wip-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.wip-card-header {
    display: grid;
    grid-template-columns: 60px 1fr 100px 120px 150px;
    gap: 10px;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.wip-card-field {
    font-size: 14px;
}

.wip-card-label {
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 2px;
}

.wip-card-comments {
    margin-top: 10px;
}

.wip-card-comments .wip-comments-section {
    max-height: 270px;
    overflow-y: auto;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 8px;
    background-color: #f8f9fa;
    margin-top: 5px;
}

.wip-add-comment {
    margin-top: 10px !important;
    padding: 8px;
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 4px;
}

.wip-card-field.wip-editable {
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 4px;
    border-radius: 4px;
}

.wip-card-field.wip-editable:hover {
    background-color: #e3f2fd;
}

.wip-card-field.wip-editing {
    background-color: #fff3cd;
    border: 2px solid #ffc107;
}

.wip-card-field.wip-readonly {
    opacity: 0.6;
    cursor: not-allowed;
}

.wip-card-field input,
.wip-card-field select {
    margin-top: 2px;
    padding: 4px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
}

.wip-card-field input:focus,
.wip-card-field select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.wip-table th {
    background-color: #f8f9fa;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid #dee2e6;
    color: #495057;
    position: sticky;
    top: 0;
    z-index: 10;
}

.wip-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
}

.wip-table tbody tr:hover {
    background-color: #f8f9fa;
}

.wip-table tbody tr:nth-child(even) {
    background-color: #fdfdfd;
}

/* Columnas específicas */
.col-seq {
    width: 60px;
    text-align: center;
}

.col-serial {
    width: 200px;
}

.col-location {
    width: 120px;
}

.col-status {
    width: 140px;
}

.col-action {
    width: 180px;
}

.col-comments {
    min-width: 300px;
}

/* Celdas editables */
.wip-editable {
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.wip-editable:hover {
    background-color: #e3f2fd !important;
}

.wip-editing {
    background-color: #fff3cd !important;
    border: 2px solid #ffc107;
}

/* Inputs y selects en la tabla */
.wip-table input,
.wip-table select {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
    background-color: white;
}

.wip-table input:focus,
.wip-table select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* Sección de comentarios */
.wip-comments-section {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 8px;
    background-color: #f8f9fa;
}

.wip-comment {
    margin-bottom: 8px;
    padding: 6px;
    background-color: white;
    border-radius: 4px;
    border-left: 3px solid #007bff;
    font-size: 13px;
    line-height: 1.4;
}

.wip-comment:last-child {
    margin-bottom: 0;
}

.wip-comment-header {
    font-weight: 600;
    color: #0056b3;
    margin-bottom: 2px;
}

.wip-comment-text {
    color: #333;
}

.wip-comment-actions {
    margin-top: 4px;
    display: flex;
    gap: 6px;
}

.wip-comment-btn {
    font-size: 11px;
    padding: 2px 6px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    background-color: #6c757d;
    color: white;
}

.wip-comment-btn:hover {
    background-color: #545b62;
}

.wip-comment-btn.delete {
    background-color: #dc3545;
}

.wip-comment-btn.delete:hover {
    background-color: #c82333;
}

/* Formulario para añadir comentarios */
.wip-add-comment {
    margin-top: 8px;
    display: flex;
    gap: 6px;
}

.wip-add-comment input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 13px;
}

.wip-add-comment button {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    background-color: #28a745;
    color: white;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.wip-add-comment button:hover {
    background-color: #1e7e34;
}

/* Modal para gestionar opciones */
.options-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

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

.options-section h4 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 16px;
}

.option-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 6px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
}

.option-item.is-default {
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.option-item .option-text {
    flex: 1;
    font-weight: 500;
}

.option-item .option-actions {
    display: flex;
    gap: 6px;
}

.add-option-form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.add-option-form input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

/* Indicadores de permisos */
.wip-permission-indicator {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 4px;
}

.wip-can-edit {
    background-color: #d4edda;
    color: #155724;
}

.wip-readonly {
    background-color: #f8d7da;
    color: #721c24;
}

/* Indicadores de usuario editando */
.wip-user-editing {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #ffc107;
    color: #333;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    z-index: 5;
}

/* Responsive para grid de tarjetas WIP */
@media (max-width: 768px) {
    #wip-cards-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .wip-card-header {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .wip-header {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }
    
    .wip-controls {
        justify-content: center;
    }
    
    #wip-table-container {
        overflow-x: scroll;
    }
}

/* Ocultar sección WIP fuera de su pestaña */
.tab-content:not(.active) #wip-status-container {
    display: none !important;
}

/* Solo mostrar contenido WIP en su pestaña correspondiente */
#dashboard-content #wip-status-container,
#inventario-content #wip-status-container,
#locaciones-content #wip-status-container,
#request-content #wip-status-container,
#admin-content #wip-status-container {
    display: none !important;
}

/* Ocultar cards container WIP en otras pestañas */
#dashboard-content #wip-cards-container,
#inventario-content #wip-cards-container,
#locaciones-content #wip-cards-container,
#request-content #wip-cards-container,
#admin-content #wip-cards-container {
    display: none !important;
}

/* Ocultar navegación de pods en otras pestañas */
#dashboard-content #wip-pods-navigation,
#inventario-content #wip-pods-navigation,
#locaciones-content #wip-pods-navigation,
#request-content #wip-pods-navigation,
#admin-content #wip-pods-navigation {
    display: none !important;
}

/* --- Nuevos Estilos para Comentarios WIP --- */
.wip-comment {
    position: relative;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-left-width: 5px; /* Hacemos el borde de color más grueso */
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.wip-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 13px;
}

.wip-comment-author {
    font-weight: bold;
    color: #333;
}

.wip-comment-date {
    color: #6c757d;
}

.wip-comment-text {
    line-height: 1.5;
    color: #212529;
    padding-right: 25px; /* Espacio para que el texto no quede debajo del botón de borrar */
}

.wip-comment-delete-btn {
    position: absolute;
    right: 8px;
    top: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: #dc3545;
    padding: 2px;
    border-radius: 3px;
    opacity: 0.7;
    width: 20px;        /* Ancho fijo pequeño */
    height: 20px;       /* Alto fijo pequeño */
    display: flex;      /* Para centrar el icono */
    align-items: center;
    justify-content: center;
}

/* Efecto al pasar el mouse sobre el comentario o el botón */
.wip-comment:hover .wip-comment-delete-btn,
.wip-comment-delete-btn:hover {
    opacity: 1; /* Hacemos el icono totalmente visible */
    color: #dc3545; /* Cambia a color rojo */
}
/* --- Fin de Nuevos Estilos --- */

/* --- ESTILOS GENERALES PARA INPUTS EN MODALES --- */
.modal input[type="text"], 
.modal-content input[type="text"],
[id*="modal"] input[type="text"],
[class*="modal"] input[type="text"] {
    width: 100% !important;
    padding: 8px 12px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    min-width: 300px !important;
}
/* --- ESTILOS PARA DROPDOWN PERSONALIZADO DE WIP --- */
.wip-custom-dropdown {
    position: relative;
    width: 100%;
    height: 100%;
}

.wip-dropdown-options {
    display: none; /* Oculto por defecto */
    position: absolute;
    background-color: #ffffff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border: 1px solid #ddd;
    border-radius: 4px;
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}

.wip-dropdown-option {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #212529; /* <-- AÑADE ESTA LÍNEA */
}

.wip-dropdown-option:hover {
    background-color: #f1f1f1;
}

.wip-option-color-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.2);
    flex-shrink: 0; /* Evita que el cuadro de color se encoja */
}

.wip-btn-danger {
    background-color: #dc3545 !important;
    color: white !important;
    font-weight: bold;
    border: none;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 8px;
}
.wip-btn-danger:hover {
    opacity: 0.9;
}

/* Estilo para el botón Reset pequeño */
.wip-btn-danger-small {
    background-color: #dc3545 !important;
    color: white !important;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    padding: 4px 8px;
    width: auto;
    margin: 0;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.wip-btn-danger-small:hover {
    background-color: #c82333 !important;
    opacity: 0.9;
}
/* Estilo para el botón Pass pequeño */
.wip-btn-pass-small {
    background-color: #28a745 !important;
    color: white !important;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    padding: 4px 8px;
    width: auto;
    margin: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.wip-btn-pass-small:hover {
    background-color: #1e7e34 !important;
    opacity: 0.9;
}

/* Estilo para el botón Delete pequeño */
.wip-btn-delete-small {
    background-color: #dc3545 !important;
    color: white !important;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    padding: 4px 8px;
    width: auto;
    margin: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.wip-btn-delete-small:hover {
    background-color: #c82333 !important;
    opacity: 0.9;
}

/* Estilos para tarjetas PASSED */
.wip-passed-card {
    background-color: #f8fff8;
    border-left: 5px solid #28a745;
    margin-bottom: 15px;
}

.wip-passed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 15px;
}

.passed-info {
    font-size: 16px;
    color: #155724;
}

.passed-date {
    font-size: 12px;
    color: #6c757d;
}

.wip-passed-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 15px;
    font-size: 14px;
}

.wip-passed-details > div {
    padding: 4px 0;
}

.wip-passed-comments {
    border-top: 1px solid #e0e0e0;
    padding-top: 15px;
}

.passed-comments-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 8px;
    background-color: #f8f9fa;
    margin-top: 8px;
}

.passed-comment {
    background-color: white;
    border: 1px solid #dee2e6;
    border-left: 3px solid #28a745;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
}

.passed-comment:last-child {
    margin-bottom: 0;
}

.passed-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-size: 12px;
}

.passed-comment-author {
    font-weight: bold;
    color: #155724;
}

.passed-comment-date {
    color: #6c757d;
}

.passed-comment-text {
    line-height: 1.4;
    color: #212529;
}

/* Asegurar que las tarjetas WIP tengan posición relativa */
.wip-card {
    position: relative;
}

/* --- ESTILOS PARA SUBPESTAÑAS DE PODS --- */
.wip-pods-nav {
    background-color: #f8f9fa;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 20px;
    padding: 0 15px;
    border-radius: 8px;
}

.wip-pods-tabs {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 10px 0;
}

.wip-pod-tab {
    padding: 8px 16px;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease;
    color: #495057;
    min-width: fit-content;
}

.wip-pod-tab:hover {
    background-color: #dee2e6;
    transform: translateY(-1px);
}

.wip-pod-tab.active {
    background-color: #007bff;
    color: white;
    border-color: #0056b3;
}

.wip-pod-tab .pod-count {
    background-color: rgba(255, 255, 255, 0.3);
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 12px;
    margin-left: 8px;
}

.wip-pod-tab.active .pod-count {
    background-color: rgba(255, 255, 255, 0.4);
}

/* Estilos especiales para la pestaña PASSED */
.wip-passed-tab {
    background-color: #e8f5e8 !important;
    color: #155724 !important;
    border-color: #c3e6cb !important;
}

.wip-passed-tab:hover {
    background-color: #d1ecf1 !important;
    color: #0c5460 !important;
}

.wip-passed-tab.active {
    background-color: #28a745 !important;
    color: white !important;
    border-color: #1e7e34 !important;
}

.wip-passed-tab.active .pod-count {
    background-color: rgba(255, 255, 255, 0.4);
}

/* Modal para crear pod */
#create-pod-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1002;
    display: flex;
    justify-content: center;
    align-items: center;
}

#create-pod-modal .modal-content {
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 400px;
}

#create-pod-modal h3 {
    margin: 0 0 20px 0;
    color: #333;
}

#create-pod-modal input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 14px;
}

#create-pod-modal .modal-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

#create-pod-modal .modal-footer button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    width: auto;
    margin: 0;
}

.btn-create-pod {
    background-color: #28a745;
    color: white;
}

.btn-cancel-pod {
    background-color: #6c757d;
    color: white;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- ESTILOS PARA LA BARRA DE ACCIONES DE LA TARJETA WIP --- */
.wip-card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid #eee;
}

.wip-danger-zone {
    display: flex;
    gap: 10px;
}

/* Estilo base para todos los botones de la barra */
.wip-card-actions button {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: bold;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0;
    width: auto;
}

/* Estilo para el botón Pass (Positivo, principal) */
.wip-btn-pass {
    background-color: #28a745;
    border-color: #1e7e34;
    color: white;
}
.wip-btn-pass:hover {
    background-color: #218838;
}
.wip-btn-pass::before {
    content: '✓';
    margin-right: 6px;
}

/* Estilo para el botón Reset (Peligro, secundario) */
.wip-btn-reset {
    background-color: transparent;
    border-color: #dc3545;
    color: #dc3545;
}
.wip-btn-reset:hover {
    background-color: #dc3545;
    color: white;
}
.wip-btn-reset::before {
    content: '↺';
    margin-right: 6px;
}

/* Estilo para el botón Delete (Peligro, principal) */
.wip-btn-delete {
    background-color: #dc3545;
    border-color: #c82333;
    color: white;
}
.wip-btn-delete:hover {
    background-color: #c82333;
}
.wip-btn-delete::before {
    content: 'X';
    margin-right: 6px;
}

/* --- MEJORAS PARA LA VENTANA MODAL DE OPCIONES (SCROLL) --- */
.modal-content {
    /* Hacemos que el contenedor principal use Flexbox en modo columna */
    display: flex;
    flex-direction: column;
    /* Limitamos la altura máxima al 80% de la altura de la pantalla */
    max-height: 80vh;
}

.modal-body {
    /* Habilitamos el scroll vertical automático para el cuerpo del modal */
    overflow-y: auto;
    /* Hacemos que ocupe el espacio disponible entre el header y el footer */
    flex: 1;
    /* Reajustamos el padding para que se vea bien con el scroll */
    padding-right: 15px;
    padding-left: 15px;
}

/* --- AJUSTE DE TAMAÑO PARA EL SELECTOR DE COLOR EN MANAGE OPTIONS --- */
.option-actions input[type="color"] {
    /* Establecemos un tamaño mínimo y una altura fija */
    min-width: 30px;
    height: 30px;
    
    /* Eliminamos cualquier padding por defecto del navegador que lo pueda encoger */
    padding: 0;

    /* Le damos un borde sutil para que se vea bien definido */
    border: 1px solid #ccc;
    
    /* Aseguramos que el cursor cambie a una mano al pasar por encima */
    cursor: pointer;
}

/* --- AJUSTE DE TAMAÑO PARA TEXTO DE COMENTARIOS WIP --- */

/* Para el nombre del autor del comentario */
.wip-comment-author {
    font-size: 13px; /* <-- Puedes cambiar este valor (ej. 15px, 1em, etc.) */
}

/* Selector corregido para el texto del comentario */
.wip-card-comments .wip-comment-text {
    font-size: 14.5px; /* <-- Puedes cambiar este valor */
    line-height: 1.6;
}

/* --- ESTILOS PARA LA BARRA DE BÚSQUEDA WIP --- */
.wip-search-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    padding: 0 20px;
}

#wip-search-input,
#article-search-input { /* <-- Solo añadimos el nuevo ID aquí */
    width: 100%;
    max-width: 400px;
    padding: 10px 15px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 20px;
    outline: none;
    transition: all 0.2s ease;
}

#wip-search-input:focus,
#article-search-input:focus { /* <-- Y también aquí para el efecto de foco */
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

/* --- CONTENEDOR PARA GRÁFICA WIP --- */
.wip-chart-container {
    position: relative;
    height: 250px; /* Altura de la gráfica, puedes ajustarla */
    width: 100%;
    max-width: 800px; /* Ancho máximo para que no se estire demasiado */
    margin: 0 auto 25px auto; /* Centra la gráfica y le da un margen inferior */
}

/* --- ESTILOS PARA MENSAJE GLOBAL --- */
.global-message-container {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 1px solid #ffc107;
    border-left: 5px solid #f39c12;
    margin: 0 20px 20px 20px;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideDown 0.3s ease-out;
}

.global-message-container.hidden {
    display: none !important;
}

.global-message-content {
    flex: 1;
    margin-right: 15px;
}

#global-message-text {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #856404;
    line-height: 1.5;
    margin-bottom: 5px;
}

.global-message-meta {
    display: flex;
    gap: 15px;
    font-size: 12px;
    color: #6c5700;
}

#global-message-author {
    font-weight: bold;
}

#global-message-date {
    opacity: 0.8;
}

.edit-global-message-btn {
    background-color: #f39c12;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: all 0.2s ease;
    margin: 0;
    width: auto;
}

.edit-global-message-btn:hover {
    background-color: #e67e22;
    transform: translateY(-1px);
}

/* Estilos para el modal del mensaje global */
#global-message-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
}

.character-count {
    text-align: right;
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

.character-count.warning {
    color: #f39c12;
}

.character-count.danger {
    color: #e74c3c;
}

/* Tipos de mensaje con colores diferentes */
.global-message-container.type-normal {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-color: #2196f3;
    border-left-color: #1976d2;
}

.global-message-container.type-normal #global-message-text {
    color: #0d47a1;
}

.global-message-container.type-normal .edit-global-message-btn {
    background-color: #1976d2;
}

.global-message-container.type-important {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-color: #ffc107;
    border-left-color: #f39c12;
}

.global-message-container.type-important #global-message-text {
    color: #856404;
}

.global-message-container.type-important .edit-global-message-btn {
    background-color: #f39c12;
}

.global-message-container.type-urgent {
    background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
    border-color: #f44336;
    border-left-color: #d32f2f;
    animation: urgentPulse 2s infinite;
}

.global-message-container.type-urgent #global-message-text {
    color: #b71c1c;
    font-weight: bold;
}

.global-message-container.type-urgent .edit-global-message-btn {
    background-color: #d32f2f;
}

.global-message-container.type-reminder {
    background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c8 100%);
    border-color: #4caf50;
    border-left-color: #388e3c;
}

.global-message-container.type-reminder #global-message-text {
    color: #1b5e20;
}

.global-message-container.type-reminder .edit-global-message-btn {
    background-color: #388e3c;
}

/* Selector de tipo en el modal */
.message-type-selector {
    margin-bottom: 15px;
}

.message-type-selector label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.type-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.type-btn {
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
    margin: 0;
    width: auto;
}

.type-btn.active {
    border-color: #007bff;
    background-color: #007bff;
    color: white;
}

.type-btn:hover:not(.active) {
    border-color: #007bff;
    background-color: #f8f9ff;
}

/* Animación especial para mensajes urgentes */
@keyframes urgentPulse {
    0%, 100% { 
        box-shadow: 0 2px 8px rgba(243, 156, 18, 0.2); 
    }
    50% { 
        box-shadow: 0 4px 16px rgba(244, 67, 54, 0.4); 
    }
}

/* Animación para cuando aparece el mensaje */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .global-message-container {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin: 0 10px 20px 10px;
        padding: 12px 15px;
    }
    
    .global-message-content {
        margin-right: 0;
    }
    
    .edit-global-message-btn {
        align-self: flex-end;
        width: auto;
    }
   
}
/* Layout compacto para usuarios */
.user-card-actions-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background-color: #f8f9fa;
    border-top: 1px solid #ddd;
    gap: 10px;
}

.password-section {
    display: flex;
    gap: 6px;
    flex: 1;
}

.password-section .new-password-input {
    flex: 1;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.password-section .change-pass-btn {
    padding: 4px 10px;
    font-size: 12px;
    margin: 0;
    width: auto;
    background-color: #ffc107;
    color: #333;
    font-weight: bold;
}

.action-buttons-inline {
    display: flex;
    gap: 6px;
}

.action-buttons-inline button {
    padding: 4px 10px;
    font-size: 12px;
    margin: 0;
    width: auto;
}

.action-buttons-inline .save-perms-btn {
    background-color: #007bff;
}

.action-buttons-inline .delete-user-btn {
    background-color: #dc3545;
}

/* Hacer la grilla de permisos más compacta */
.permissions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 6px 12px;
    flex-grow: 1;
}

.permission-item {
    padding: 4px 6px;
    font-size: 12px;
}

/* --- ESTILOS PARA SUB-PESTAÑAS DEL PANEL DE ADMIN --- */
.sub-tabs-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.sub-tab {
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.2s ease;
    background-color: #f1f1f1;
    color: #555;
    border: 1px solid #ddd;
}

.sub-tab:hover {
    background-color: #e9ecef;
    color: #000;
}

.sub-tab.active {
    background-color: #667eea; /* Un color similar al de las pestañas principales */
    color: white;
    border-color: #667eea;
}

.sub-tab-content {
    display: none; /* Ocultar contenido por defecto */
}

.sub-tab-content.active {
    display: block; /* Mostrar solo el contenido de la sub-pestaña activa */
    animation: fadeIn 0.3s ease-in; /* Reutilizamos la animación existente */
}

/* --- ESTILOS PARA BOTONES DE FILTRO DE ARTÍCULOS MÁS COMPACTOS --- */

#article-filter-buttons {
    gap: 6px; /* Reduce el espacio entre los botones */
}

#article-filter-buttons button {
    padding: 5px 15px;    /* Reduce el alto y ajusta el ancho del botón */
    font-size: 13px;      /* Hace la letra un poco más pequeña */
    font-weight: 500;     /* Ligeramente menos grueso */
    border-radius: 15px;  /* Hace los bordes más redondeados y compactos */
    flex-grow: 0;         /* Evita que los botones se estiren innecesariamente */
    border: 1px solid #d1d5db; /* Un borde más sutil */
    background-color: #f9fafb; /* Un fondo muy claro */
    color: #374151; /* Color de texto oscuro */
}

/* Estilo para cuando pasas el mouse por encima */
#article-filter-buttons button:hover {
    background-color: #f3f4f6;
}

/* Estilo para el botón que está seleccionado */
#article-filter-buttons button.selected {
    background-color: #3b82f6; /* Un azul moderno */
    color: white;
    border-color: #3b82f6;
    transform: none; /* Anula cualquier efecto de escala */
    box-shadow: none; /* Anula cualquier sombra */
}

/* --- ESTILO PARA JUNTAR LABEL Y BOTÓN DE GESTIONAR CATEGORÍA --- */
#category-label-container {
    display: flex;
    justify-content: flex-start; /* <-- La clave: junta los elementos al inicio */
    align-items: center;
    gap: 10px; /* Un pequeño espacio entre la etiqueta y el botón */
    margin-bottom: 8px;
}

/* --- ESTILO PARA HACER EL BOTÓN 'GESTIONAR' MÁS COMPACTO --- */
#manage-categories-btn {
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 500;
    width: auto; /* <-- AÑADE ESTA LÍNEA PARA ARREGLAR EL ANCHO */
    margin-top: 7px;
}

#user-menu-dropdown .user-stats-header span {
    color: #333 !important; /* Un color oscuro y visible */
    font-weight: bold;      /* Para que resalten más */
}

.user-role-tag {
    display: none !important;
}
.sub-tab-content.active


/* --- ESTILOS REFINADOS PARA ÁRBOL DE OPCIONES DINÁMICAS (ADMIN) --- */

/* Contenedor principal del árbol */
#dynamic-options-tree-container {
    border: 1px solid #ddd;        /* Borde alrededor de todo */
    border-radius: 8px;           /* Esquinas redondeadas */
    padding: 15px;                /* Espacio interior */
    background-color: #f9f9f9;    /* Fondo gris claro */
    max-width: 800px;             /* Ancho máximo para que no sea demasiado ancho */
    margin: 20px auto;            /* Centrar el contenedor en la página */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Sombra sutil */
}

/* Estilo base para cada fila de opción */
#dynamic-options-tree-container .dynamic-option-item {
    display: flex;                /* Alinea nombre y botones horizontalmente */
    justify-content: space-between; /* Empuja los botones a la derecha */
    align-items: center;          /* Centra verticalmente */
    padding: 8px 12px;            /* Espacio interior de la fila */
    border-bottom: 1px solid #eee;/* Línea separadora */
    background-color: #fff;       /* Fondo blanco para cada fila */
    margin-bottom: 3px;           /* Pequeño espacio entre filas */
    border-radius: 4px;           /* Esquinas redondeadas para la fila */
    transition: background-color 0.2s ease; /* Efecto suave al pasar el mouse */
}
#dynamic-options-tree-container .dynamic-option-item:last-child {
    border-bottom: none;          /* Quita la línea de la última fila */
}
#dynamic-options-tree-container .dynamic-option-item:hover {
    background-color: #f0f5ff;    /* Fondo azulado claro al pasar el mouse */
}

/* Indentación y borde izquierdo según el nivel (usa el data-level que agregamos en JS) */
.dynamic-option-item[data-level="location"] { margin-left: 25px; border-left: 3px solid #007bff; }
.dynamic-option-item[data-level="rack"]     { margin-left: 50px; border-left: 3px solid #17a2b8; }
.dynamic-option-item[data-level="tray"]     { margin-left: 75px; border-left: 3px solid #6f42c1; }
/* Los items (nivel 0) no necesitan margen ni borde izquierdo */

/* Nombre de la opción */
#dynamic-options-tree-container .option-name {
    flex-grow: 1;                 /* Ocupa el espacio disponible */
    margin-right: 15px;           /* Espacio antes de los botones */
    font-size: 14px;              /* Tamaño de letra */
    font-weight: 500;             /* Un poco más grueso */
    color: #333;                  /* Color de texto */
}
.dynamic-option-item[data-level="item"] .option-name {
    font-weight: 600; /* Nombres de Item un poco más destacados */
    color: #0056b3;
}


/* Contenedor de los botones de acción */
#dynamic-options-tree-container .option-actions {
    display: flex;                /* Botones en línea */
    gap: 6px;                     /* Espacio entre botones */
    flex-shrink: 0;               /* Evita que los botones se achiquen */
}

/* Estilo general de los botones de acción */
#dynamic-options-tree-container .option-actions button {
    width: auto;                  /* Ancho automático */
    padding: 5px 10px;            /* Relleno compacto */
    font-size: 12px;              /* Letra pequeña */
    margin: 0;                    /* Sin margen extra */
    white-space: nowrap;          /* Texto en una línea */
    border-radius: 5px;           /* Esquinas redondeadas */
    border: none;                 /* Sin borde */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}
 #dynamic-options-tree-container .option-actions button:hover {
    transform: translateY(-1px); /* Efecto ligero al pasar el mouse */
 }


/* Colores específicos para cada botón */
#dynamic-options-tree-container .btn-add-child { background-color: #28a745; color: white; }
#dynamic-options-tree-container .btn-edit-option { background-color: #ffc107; color: #333; }
#dynamic-options-tree-container .btn-delete-option { background-color: #dc3545; color: white; }

/* Efectos hover para los botones */
#dynamic-options-tree-container .btn-add-child:hover { background-color: #218838; }
#dynamic-options-tree-container .btn-edit-option:hover { background-color: #e0a800; }
#dynamic-options-tree-container .btn-delete-option:hover { background-color: #c82333; }

/* Estilo para el botón "+ Add Item" (el que está fuera de las filas) */
#dynamic-options-tree-container .btn-add-root-item {
     width: auto;
     padding: 8px 16px;
     font-size: 14px;
     display: block; /* Ocupa su propia línea */
     margin: 25px auto 10px auto; /* Centrado con margen superior */
     background-color: #007bff;
     color: white;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.2s ease;
}
#dynamic-options-tree-container .btn-add-root-item:hover {
    background-color: #0056b3;
}

/* --- ESTILOS PARA FORMULARIO DINÁMICO VISUAL (COMO IMAGEN) --- */

/* Contenedor principal del formulario dinámico */
#dynamic-request-form {
    max-width: 650px; /* Ancho máximo del formulario */
    margin: 20px auto; /* Centrar el formulario */
    padding: 20px;
    background-color: #f8f9fa; /* Fondo ligeramente gris */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* Estilo para cada grupo (Item, Location, Rack, Tray) */
.dynamic-request-group {
    border: 1px solid #d1d9e6; /* Borde del cuadro */
    border-radius: 8px; /* Esquinas redondeadas */
    padding: 15px; /* Espacio interior */
    margin-bottom: 20px; /* Espacio entre grupos */
    background-color: #ffffff; /* Fondo blanco */
    box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* Sombra sutil */
}

/* Etiqueta de cada grupo (Item:, Ubicación:, etc.) */
.dynamic-request-group label {
    font-weight: bold;
    font-size: 1.1em;
    color: #0d6efd; /* Azul */
    margin-bottom: 12px;
    display: block; /* Para que ocupe su propia línea */
}

/* Contenedor de la cuadrícula de botones */
.dynamic-button-grid {
    display: flex; /* Alinea botones horizontalmente */
    flex-wrap: wrap; /* Permite que pasen a la siguiente línea */
    gap: 10px; /* Espacio entre botones */
}

/* Estilo de los botones de selección (RJ45, AA, 00, 101, etc.) */
.dynamic-button-grid button {
    padding: 8px 15px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #b0c4de; /* Borde azul claro */
    border-radius: 6px;
    background-color: #f0f4f8; /* Fondo muy claro */
    color: #334e68; /* Color de texto oscuro */
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 50px; /* Ancho mínimo */
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    margin: 0; /* Asegura que no haya margen extra */
    width: auto; /* Ancho según contenido */
}

/* Efecto al pasar el mouse sobre los botones */
.dynamic-button-grid button:hover {
    background-color: #d9e2ec;
    border-color: #8faecf;
}

/* Estilo del botón SELECCIONADO */
.dynamic-button-grid button.selected {
    background-color: #0d6efd; /* Fondo azul */
    color: white; /* Texto blanco */
    border-color: #0a58ca; /* Borde azul oscuro */
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.4); /* Sombra azul */
    transform: scale(1.05); /* Ligeramente más grande */
}

/* Contenedor de los botones de admin (+Add, Edit, Delete) */
.dynamic-admin-actions {
    margin-top: 15px; /* Espacio arriba */
    padding-top: 10px; /* Espacio arriba del borde */
    border-top: 1px solid #eee; /* Línea separadora */
    display: flex; /* Botones en línea */
    justify-content: flex-end; /* Botones a la derecha */
    gap: 8px; /* Espacio entre botones */
}

/* Estilo de los botones de admin (+Add, Edit, Delete) */
.dynamic-admin-actions button {
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: opacity 0.2s ease;
    margin: 0; /* Sin margen extra */
    width: auto; /* Ancho según contenido */
}
.dynamic-admin-actions button:hover {
    opacity: 0.85;
}

/* Colores específicos para botones de admin */
.dynamic-admin-actions .btn-add-child { background-color: #28a745; color: white; }
.dynamic-admin-actions .btn-edit-option { background-color: #ffc107; color: #333; }
.dynamic-admin-actions .btn-delete-option { background-color: #dc3545; color: white; }

/* Ocultar botones de admin por defecto */
.admin-only {
    display: none; /* Cambiaremos esto con JS si el usuario es admin */
    
}
#dynamic-admin-add-item-container.admin-only {
    display: none; /* Asegura que el contenedor se oculte si no es admin */
}

/* Estilo para el botón final "Send Request" */
.dynamic-request-send-button {
    display: block; /* Ocupa su propia línea */
    width: auto; /* Ancho según contenido */
    min-width: 150px; /* Ancho mínimo */
    padding: 12px 25px;
    font-size: 16px;
    font-weight: bold;
    margin: 15px auto 0 auto; /* Centrado y con margen superior */
    background-color: #6c757d; /* Gris oscuro (similar a la imagen) */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.dynamic-request-send-button:hover:not(:disabled) {
    background-color: #5a6268; /* Gris más oscuro al pasar el mouse */
}
.dynamic-request-send-button:disabled {
    background-color: #adb5bd; /* Gris claro cuando está deshabilitado */
    cursor: not-allowed;
    opacity: 0.7;
}

/* Clase para ocultar elementos (ya la deberías tener, pero por si acaso) */
.hidden {
    display: none !important;
}

/* --- ESTILOS PARA GESTIÓN DE PLANTILLAS DE TRAYS --- */

#tray-templates-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.tray-template-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-left: 4px solid #007bff;
    padding: 12px 15px;
    border-radius: 6px;
}

.tray-template-info strong {
    font-size: 1.1em;
    color: #0056b3;
}

.tray-template-info span {
    display: block;
    font-size: 0.9em;
    color: #6c757d;
    margin-top: 4px;
}

.tray-template-actions button {
    width: auto;
    padding: 6px 12px;
    font-size: 13px;
    margin: 0;
    background-color: #dc3545; /* Rojo para eliminar */
}

/* --- ESTILOS PARA EL MÓDULO DE MANTENIMIENTO --- */
.maintenance-container {
    display: flex;
    gap: 20px;
    height: 700px; /* Altura fija para que se vea bien */
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Sidebar de Tareas */
.maintenance-sidebar {
    width: 250px;
    flex-shrink: 0;
    border-right: 1px solid #eee;
    padding-right: 15px;
    display: flex;
    flex-direction: column;
}
.add-task-wrapper {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
}
.add-task-wrapper input {
    flex: 1;
    padding: 5px;
    font-size: 12px;
}
.tasks-list-scroll {
    flex: 1;
    overflow-y: auto;
}
.task-type-item {
    background: #f8f9fa;
    border: 1px solid #ddd;
    padding: 8px;
    margin-bottom: 5px;
    border-radius: 4px;
    font-size: 13px;
    cursor: grab;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.task-type-item:hover {
    background: #e9ecef;
    border-color: #007bff;
}

/* Calendario Principal */
.maintenance-calendar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.calendar-header h2 {
    margin: 0;
    color: #333;
}
.cal-nav-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 5px 15px;
    border-radius: 4px;
    cursor: pointer;
}

/* Grid del Calendario */
.calendar-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: bold;
    background: #f1f1f1;
    padding: 10px 0;
    border-radius: 4px 4px 0 0;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr; /* Filas iguales */
    flex: 1;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
}
.calendar-day {
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 5px;
    position: relative;
    min-height: 80px;
    transition: background 0.2s;
}
.calendar-day:hover {
    background-color: #fafafa;
    z-index: 10; /* Esto eleva la celda activa sobre las demás */
    overflow: visible; /* Asegura que nada corte el tooltip */
}

/* Mostrar al pasar el mouse por el día */
.calendar-day:hover .btn-add-event-day {
    opacity: 1;
}

.calendar-day.empty {
    background-color: #f9f9f9;
}
.calendar-day.today {
    background-color: #e8f0fe;
}
.day-number {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 5px;
    display: block;
    color: #666;
}

/* Eventos dentro del calendario */
.cal-event {
    font-size: 11px;
    padding: 2px 4px;
    margin-bottom: 2px;
    border-radius: 3px;
    color: white;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* Colores por estado */
.cal-event.status-pending { background-color: #6c757d; } /* Gris */
.cal-event.status-in_progress { background-color: #007bff; } /* Azul */
.cal-event.status-completed { background-color: #28a745; } /* Verde */

/* Tooltip MEJORADO */
.cal-event:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%; /* Aparece arriba del evento */
    left: 50%;    /* Centrado */
    transform: translateX(-50%); /* Ajuste de centrado */
    background: rgba(0, 0, 0, 0.9); /* Fondo más oscuro */
    color: #fff;
    padding: 8px;
    border-radius: 5px;
    font-size: 12px;
    line-height: 1.4;
    z-index: 9999; /* ¡Muy arriba! */
    white-space: pre-wrap; /* Respeta los saltos de línea */
    width: max-content;    /* Se adapta al texto */
    max-width: 250px;      /* Pero no demasiado ancho */
    pointer-events: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Botón "+" pequeño y fijo en la esquina */
.btn-add-event-day {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;          /* Tamaño fijo pequeño */
    height: 18px;
    font-size: 14px;
    line-height: 14px;    /* Centrar verticalmente el signo + */
    font-weight: bold;
    padding: 0;
    background: rgba(255, 255, 255, 0.9); /* Casi sólido para que se vea */
    color: #007bff;
    border: 1px solid #007bff; /* Borde azul para que resalte */
    border-radius: 50%;   /* Hacemos que sea un círculo perfecto */
    cursor: pointer;
    opacity: 0;           /* Oculto por defecto */
    z-index: 50;
    transition: all 0.2s;
    display: flex;        /* Flexbox para centrar el + perfectamente */
    align-items: center;
    justify-content: center;
}
/* Efecto hover sobre el propio botón */
.btn-add-event-day:hover {
    background-color: #007bff;
    color: white;
    transform: scale(1.1); /* Pequeño efecto de zoom */
}

/* --- CORRECCIÓN VISUAL PARA EL INPUT DE TAREAS --- */
.add-task-wrapper button {
    width: auto !important; /* Anula el 100% global solo aquí */
    min-width: 40px;        /* Un tamaño mínimo cómodo para el click */
    margin-top: 0 !important; /* Alineación vertical correcta */
}

.add-task-wrapper input {
    flex-grow: 1;           /* Obliga al input a ocupar el espacio sobrante */
    width: auto !important; /* Resetea anchos fijos si los hubiera */
}

/* --- TOOLTIP FLOTANTE PARA CALENDARIO (JS) --- */
#calendar-tooltip {
    position: fixed; /* Flota sobre toda la pantalla */
    background: rgba(0, 0, 0, 0.95);
    color: #fff;
    padding: 10px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    z-index: 99999; /* Siempre encima de todo */
    pointer-events: none; /* El mouse lo ignora */
    display: none; /* Oculto por defecto */
    max-width: 250px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    border: 1px solid #444;
    white-space: pre-wrap;
}

/* Desactivar el tooltip viejo que se cortaba */
.cal-event:hover::after {
    display: none !important;
}