* { box-sizing: border-box; } 
html, body { height: 100%; margin: 0; padding: 0; } 
body { font-family: 'Roboto', Helvetica, sans-serif; line-height: 1.6; background: #f6f6f6; color: #333; display: flex; flex-direction: column; min-height: 100vh; /* Asegura altura mínima */ } 
header { background-color: #1c5587; color: #fff; padding: 10px 0; } 
nav ul.menu { display: flex; list-style: none; margin: 0; padding: 0 20px; justify-content: space-between; align-items: center; flex-wrap: wrap; } 
nav ul.menu li { margin-right: 20px; } nav ul.menu li.right { margin-left: auto; } 
nav ul.menu li a { color: #fff; text-decoration: none; font-weight: bold; } 
main { flex: 1 0 auto; padding: 20px; background-color: #fff; } 
footer { background-color: #1c5587; color: white; text-align: center; padding: 15px; font-size: 0.9em; flex-shrink: 0; } 
.bienvenida { padding: 30px; background: #e1ecf4; border-radius: 8px; text-align: center; } 
table { width: 100%; border-collapse: collapse; margin-top: 20px; background-color: #e6f2fa; box-shadow: 0 0 4px rgba(0,0,0,0.1); } 
table thead { background-color: #1c5587; color: white; } table th, table td { padding: 10px; border: 1px solid #ccc; text-align: left; } 
table tr:nth-child(even) { background-color: #f5f5f5; } 
table td a { margin-right: 8px; text-decoration: none; color: #0066cc; } 
table td a:hover { text-decoration: underline; } 
.login-box { background-color: #fff; padding: 30px 40px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); text-align: center; width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; } 
.login-box h2 { margin-top: 0; text-align: center; margin-bottom: 25px; color: #333; font-size: 1.8em; } 
.login-box label { display: block; text-align: left; margin-bottom: 6px; color: #555; font-weight: bold; font-size: 0.9em; } 
.login-box form label { text-align: left; display: block; margin-bottom: 5px; } .login-box form input { background: #f7faff; border: 1px solid #bbb; width: 100%; padding: 10px; margin-bottom: 15px; border-radius: 4px; } 
.login-box form button { background-color: #f28135; color: white; border: none; cursor: pointer; width: 100%; padding: 12px; font-size: 1em; border-radius: 4px; transition: background-color 0.2s ease-in-out; } 
.login-box form button:hover { background: #cd5a0d; } 
.login-box .login-lang-selector { margin-top: 25px; margin-bottom: 10px; position: relative; display: inline-block; } 
.login-box .login-lang-selector .lang-selector-btn { background-color: #6c757d; color: white; padding: 8px 12px; font-size: 0.9em; border: none; cursor: pointer; border-radius: 4px; width: 150px; } 
.login-box .login-lang-selector .lang-selector-btn:hover { background-color: #5a6268; } 
.login-box .login-lang-selector .lang-selector-dropdown { display: none; position: absolute; background-color: #fff; min-width: 150px; box-shadow: 0px 4px 10px rgba(0,0,0,0.15); z-index: 1002; left: 50%; 
    transform: translateX(-50%); border: 1px solid #ddd; border-radius: 4px; } 
.login-box .login-lang-selector:hover .lang-selector-dropdown { display: block; } 
.login-box .login-lang-selector .lang-selector-dropdown a { color: #333; padding: 10px 15px; text-decoration: none; display: block; font-size: 0.9em; } 
.login-box .login-lang-selector .lang-selector-dropdown a:hover { background-color: #e9ecef; } 
html, body.login-page { height: 100%; margin: 0; background-color: #f0f0f0; } 
body.login-page { display: flex; flex-direction: column; min-height: 100vh; } 
body.login-page main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 20px; background-color: transparent; } 
body.login-page footer { flex-shrink: 0; width: 100%; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding: 15px 0; background-color: #333; color: #fff; text-align: center; box-sizing: border-box; } 
.formulario-wrapper { max-width: 600px; margin: 40px auto; padding: 40px; background: #fff; border-radius: 12px; box-shadow: 0 0 15px rgba(0,0,0,0.05); border: 1px solid #e0e0e0; } 
.form-title { text-align: center; margin-bottom: 30px; font-size: 1.8em; font-weight: 600; color: #333; } 
.formulario-centrado { display: flex; flex-direction: column; gap: 15px; align-items: center; } 
.form-group { width: 100%; max-width: 400px; display: flex; flex-direction: column; } 
.form-group label { margin-bottom: 5px; font-weight: bold; text-align: left; } 
.form-group input, .form-group select { padding: 10px; font-size: 15px; border: 1px solid #ccc; border-radius: 6px; background: #fdfdfd; transition: border-color 0.3s; width: 100%; } 
.form-group input:focus, .form-group select:focus { border-color: #007bff; outline: none; } button[type="submit"], 
.btn-crear { padding: 10px 20px; font-size: 15px; font-weight: 600; background-color: #f28135; color: #fff; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.3s; width: auto; max-width: none; } 
.btn-pequeño { min-width: 120px; } button[type="submit"]:hover, .btn-crear:hover { background-color: #bd5c1b; } 
.btn-guardar { padding: 8px 14px; font-size: 14px; background-color: #007bff; color: #fff; border: none; border-radius: 4px; cursor: pointer; } 
.btn-guardar:hover { background-color: #0056b3; } 
.btn-volver { display: inline-block; margin-top: 20px; padding: 8px 14px; background-color: #f28135; color: #fff; border-radius: 6px; text-decoration: none; font-weight: 500; font-size: 14px; transition: background-color 0.2s; } 
.btn-volver:hover { background-color: #caa68e; } 
@media (max-width: 768px) { 
    table { display: block; overflow-x: auto; white-space: nowrap; }
} 
.table-wrapper { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1rem; } 
.filter-form-container { background-color: #c1d8ec; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px 20px; align-items: flex-start; } 
.filter-group { /* Los filter-group ahora son hijos del grid */ } 
.filter-group label, .filter-group > span { display: block; margin-bottom: 8px; font-weight: bold; color: #333; } 
.filter-group input[type="text"], 
.filter-group input[type="date"], 
.filter-group select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } 
.form-actions-bar { grid-column: 1 / -1; text-align: center; margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee; } 
.multiselect-dropdown { position: relative; display: inline-block; width: 100%; } 
.multiselect-dropdown-button { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; background-color: white; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
.multiselect-dropdown-content { display: none; position: absolute; background-color: white; border: 1px solid #ccc; border-top: none; border-radius: 0 0 4px 4px; width: 100%; max-height: 200px; overflow-y: auto; z-index: 1000; } 
.multiselect-dropdown-content label { display: block; padding: 8px 12px; font-weight: normal; cursor: pointer; } 
.multiselect-dropdown-content label:hover { background-color: #f1f1f1; } 
.multiselect-dropdown-content input[type="checkbox"] { margin-right: 8px; } link-row, 
.adjunto-row { display: flex; gap: 10px; margin-bottom: 8px; align-items: center; } 
.link-row input[type="text"], .link-row input[type="url"] { flex: 1; } 
.link-row button.remove-row-btn, .adjunto-row button.remove-row-btn { padding: 6px 10px; background-color: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer; line-height: 1; font-weight: bold; font-size: 0.9em; 
    transition: background-color 0.2s ease-in-out; } 
.link-row button.remove-row-btn:hover, .adjunto-row button.remove-row-btn:hover { background-color: #c82333; } 
#add-link-btn, #add-adjunto-btn, #add-enlace-btn, #add-adjunto-btn-modificar { background-color: #1c5587; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; margin-top: 8px; margin-bottom: 15px; 
    font-size: 0.95em; font-weight: bold; transition: background-color 0.2s ease-in-out; } 
#add-link-btn:hover, #add-adjunto-btn:hover, #add-enlace-btn:hover, #add-adjunto-btn-modificar:hover { background-color: #218838; } 
.link-row button.remove-row-btn, .enlace-item button.remove-row-btn, .adjunto-row button.remove-row-btn { padding: 6px 10px; background-color: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer; line-height: 1; 
    font-weight: bold; font-size: 0.9em; } 
.sugerencia-card { border: 1px solid #ddd; margin-bottom: 15px; padding: 10px; border-radius: 4px; background-color: #f9f9f9; } 
.sugerencia-card.implementada { border-left: 5px solid green; } 
.sugerencia-card.descartada { border-left: 5px solid red; opacity: 0.7; } 
.sugerencia-card.estado-propuesta { border-left: 5px solid orange; } 
.sugerencia-meta { font-size: 0.9em; color: #555; margin-bottom: 5px; } 
.sugerencia-texto { margin-bottom: 8px; white-space: pre-wrap; } 
.sugerencia-adjuntos ul { list-style-type: none; padding-left: 0; margin-top:5px; } 
.sugerencia-adjuntos li { margin-bottom: 3px; font-size:0.9em; } 
.sugerencia-acciones { margin-top: 10px; border-top: 1px dashed #eee; padding-top: 10px; } 
.sugerencia-acciones > form, .sugerencia-acciones > a { margin-right: 10px; display: inline-block; margin-bottom: 5px;} 
.sugerencia-acciones button, .sugerencia-acciones .btn-accion { font-size:0.85em; padding: 4px 8px; } 
#modalCuerpo ul.attachment-list { list-style-type: none; padding-left: 0; } 
#modalCuerpo ul.attachment-list li.attachment-item { /* Añade la clase 'attachment-item' al <li> en JS */ margin-bottom: 10px; display: flex; align-items: center; } 
#modalCuerpo img.attachment-thumbnail { width: 50px; height: 50px; object-fit: cover; border: 1px solid #ddd; margin-right: 10px; border-radius: 3px; } 
#modalCuerpo span.attachment-placeholder { display: inline-block; width: 50px; height: 50px; margin-right: 10px; border: 1px solid transparent; } 
.form-actions-bar .btn-buscar { background-color: #1c5587; color: #fff; } 
.form-actions-bar .btn-buscar:hover { background-color: #154269; } 
.form-actions-bar a.btn-limpiar-filtros-azul { display: inline-block; background-color: #1c5587; color: #fff !important; padding: 10px 20px; text-decoration: none; border-radius: 6px; transition: background-color 0.3s; } 
.form-actions-bar a.btn-limpiar-filtros-azul:hover { background-color: #154269; color: #fff !important; } 
td .btn-accion { display: inline-block; padding: 4px 8px; font-size: 0.9em; text-decoration: none; border-radius: 4px; border: 1px solid transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s; cursor: pointer; margin-bottom: 3px; }
td .btn-editar { background-color: #1c5587; /* Azul header  */ color: white; border-color: #46b8da; } 
td .btn-editar:hover { background-color: #297dc6; border-color: #269abc; color: white; } 
td .btn-sugerencias { background-color: #f28135; color: white; border-color: #eea236; } 
td .btn-sugerencias:hover { background-color: #cd5a0d; border-color: gold; color: white; } 
td .btn-eliminar { background-color: #d9534f; color: white; border-color: #d43f3a; } 
td .btn-eliminar:hover { background-color: #c9302c; border-color: #ac2925; color: white; } 
td .btn-resolver { background-color: #5cb85c; color: white; border-color: #4cae4c; } 
td .btn-resolver:hover { background-color: #449d44; border-color: #398439; color: white; } 
.multiselect-dropdown-button:hover { border-color: #a0a0a0; } 
.btn-header-style-blue { display: inline-block; background-color: #1c5587; color: #fff !important; border: 1px solid #133d60; border-top-color: #2a6ca9; border-bottom-color: #133d60; border-radius: 6px; padding: 10px 20px; 
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; position: relative; transition: all 0.15s ease-out; box-shadow: 0 2px 3px rgba(0,0,0,0.25), inset 0 1px 0px rgba(255,255,255,0.2), inset 0 -1px 0px rgba(0,0,0,0.1); vertical-align: middle; } 
.btn-header-style-blue:hover { background-color: #154269; color: #fff !important; transform: translateY(-1px); box-shadow: 0 3px 5px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -1px 0px rgba(0,0,0,0.2); } 
.btn-header-style-blue:active { background-color: #113452; color: #fff !important; transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 2px rgba(0,0,0,0.3); transition-duration: 0.05s; } 
.form-actions-bar .btn-buscar { background-color: #1c5587; color: #fff !important; border: 1px solid #133d60; border-top-color: #2a6ca9; border-bottom-color: #133d60; border-radius: 6px; padding: 10px 20px; text-shadow: 0 -1px 0 rgba(0,0,0,0.25); 
    font-weight: 600; font-size: 15px; cursor: pointer; position: relative; transition: all 0.15s ease-out; box-shadow: 0 2px 3px rgba(0,0,0,0.25), inset 0 1px 0px rgba(255,255,255,0.2), inset 0 -1px 0px rgba(0,0,0,0.1); } 
.form-actions-bar .btn-buscar:hover { background-color: #f28135; transform: translateY(-1px); box-shadow: 0 3px 5px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -1px 0px rgba(0,0,0,0.2); } 
.form-actions-bar .btn-buscar:active { background-color: #113452; transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 2px rgba(0,0,0,0.3); transition-duration: 0.05s; } 
.form-actions-bar a.btn-limpiar-filtros-azul { display: inline-block; background-color: #1c5587; color: #fff !important; border: 1px solid #133d60; border-top-color: #2a6ca9; border-bottom-color: #133d60; border-radius: 6px; padding: 10px 20px; 
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; position: relative; transition: all 0.15s ease-out; box-shadow: 0 2px 3px rgba(0,0,0,0.25), inset 0 1px 0px rgba(255,255,255,0.2), inset 0 -1px 0px rgba(0,0,0,0.1); margin-left: 10px; } 
.form-actions-bar a.btn-limpiar-filtros-azul:hover { background-color: #f28135; transform: translateY(-1px); box-shadow: 0 3px 5px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -1px 0px rgba(0,0,0,0.2); } .form-actions-bar a.btn-limpiar-filtros-azul:active { background-color: #113452; transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 2px rgba(0,0,0,0.3); transition-duration: 0.05s; } 
.export-buttons button { display: inline-block; background-color: #f28135; color: #fff !important; border: 1px solid #133d60; border-top-color: #2a6ca9; border-bottom-color: #133d60; border-radius: 6px; padding: 8px 15px 
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; position: relative; transition: all 0.15s ease-out; box-shadow: 0 2px 3px rgba(0,0,0,0.25), inset 0 1x 0px rgba(255,255,255,0.2), inset 0 -1px 0px rgba(0,0,0,0.1); margin: 0 5px; } 
.export-buttons button:hover { background-color: #154269; transform: translateY(-1px); box-shadow: 0 3px 5px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -1px 0px rgba(0,0,0,0.2); } 
.export-buttons button:active { background-color: #113452; transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 1px 2px rgba(0,0,0,0.3); transition-duration: 0.05s; }