:root {
--primary-color: #1a3a5f;
--secondary-color: #2c5282;
--accent-color: #4299e1;
--light-color: #f7fafc;
--dark-color: #2d3748;
--success-color: #48bb78;
--success-dark-color: #097034;
--danger-color: #f56565;
--warning-color: #ed8936;
--warning-color: #ffc107;
--info-color: #4299e1; --bs-primary: #1A3A5F;
--bs-primary-rgb: 26, 58, 95;
--surface-bg: #f7f9fb;
--azure-card-bg: #f2f4f6;
--on-surface-variant: #43474e;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background-color: #f8f9fa;
color: var(--dark-color);
line-height: 1.6;
overflow-x: hidden;
margin-bottom: 0 !important;
} .material-symbols-outlined,
.material-icons {
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
vertical-align: middle;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.site {
width: 100%;
min-height: 100vh;
margin: 0;
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.bg-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(var(--accent-color) 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.05;
z-index: -1;
}
.bg-shape {
position: absolute;
border-radius: 50%;
filter: blur(60px);
z-index: 0;
}
.bg-shape-1 {
top: -100px;
right: -100px;
width: 300px;
height: 300px;
background-color: rgba(66, 153, 225, 0.15);
}
.bg-shape-2 {
bottom: -50px;
left: -50px;
width: 250px;
height: 250px;
background-color: rgba(44, 82, 130, 0.1);
}
.content-area {
padding: 2rem;
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
}
.site-main {
flex: 1;
display: flex;
flex-direction: column;
}
.container-bd {
background-color: white;
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
margin-bottom: 2rem;
width: 100%;
}
.filtro-anio {
display: flex;
align-items: center; justify-content: space-between;
}
.filtro-anio label {
font-weight: 500;
margin-right: 1rem;
color: var(--dark-color);
}
.filtro-anio .form-select {
padding: 0.5rem;
border: 1px solid #e2e8f0;
border-radius: 4px;
min-width: 150px;
background-color: white;
max-width: 5%;
}
.table-title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.table-title .header-table {
font-size: 1.5rem;
font-weight: 600;
color: #2c5386;
}
.table-title .table-info {
font-size: 0.94rem;
color: #718096;
}
.title-table {
display: flex;
align-items: center;
gap: 10px; }
.title-table h2 {
font-size: 1.8rem;
font-weight: 700;
color: var(--primary-color); display: flex;
align-items: center;
margin: 0;
}
h2 i {
margin-right: 0.5rem;
font-size: 1.8rem;
}
#tabla-cotizaciones-container {
flex: 1;
display: flex;
flex-direction: column;
width: 100%;
}
.dataTables_wrapper {
padding: 0;
width: 100%;
overflow-x: auto;
}
.dataTables_filter input {
border: 1px solid #e2e8f0;
border-radius: 4px;
padding: 0.5rem;
margin-left: 0.5rem;
}
.dataTables_length select {
border: 1px solid #e2e8f0;
border-radius: 4px; }
.table {
margin-top: 1rem;
}
.table thead th {
background-color: var(--primary-color) !important;
color: white;
font-weight: 600;
border: none;
text-align: right !important; }
.table thead th.acciones-edit .dt-column-header .dt-column-title {
text-align: center !important;
}
.table tbody tr td {
text-align: right !important;     }
.table tbody tr:nth-child(even) {
background-color: #f8f9fa;
}
.table tbody tr:hover {
background-color: #edf2f7;
}
.action-cell {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
align-items: center;
white-space: nowrap;
}
th.acciones-edit,
td.action-cell {
display: table-cell !important;
vertical-align: middle;
white-space: nowrap;
width: 110px !important;
min-width: 110px !important;
max-width: 110px !important;
box-sizing: border-box;
padding-left: 20px !important;
padding-right: 10px !important;
}
.my_fecha_creacion_class {
min-width: 125px !important;
}
.my_status_class {
min-width: 100px !important;
padding-left: 30px !important;
padding-right: 30px !important;
}
.btn-table {
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
border: none;
cursor: pointer;
width: 36px;
height: 36px;
text-decoration: none;
}
.btn-table i {
font-size: 1.2rem;
text-decoration: none;
}
.btn-view {
background-color: var(--info-color) !important;
color: white;
}
.btn-view:hover {
background-color: #3182ce !important;
}
.btn-edit {
background-color: var(--warning-color) !important;
color: white;
}
.btn-edit:hover {
background-color: #c9a42d !important;
}
.btn-restore {
background-color: var(--bs-success) !important;
color: white !important;
}
.btn-restore:hover {
background-color: #157347 !important;
}
.btn-duplicate {
background-color: #0284c7 !important;
color: white !important;
}
.btn-duplicate:hover {
background-color: #0369a1 !important;
}
.btn-delete {
background-color: var(--danger-color) !important;
color: white;
}
.btn-delete:hover {
background-color: #e53e3e !important;
}
.btn-delete:disabled,
.btn-delete[disabled] {
background-color: #cbd5e0 !important;
color: #718096 !important;
cursor: not-allowed !important;
opacity: 0.6;
}
.btn-invoice {
background-color: var(--success-color) !important;
color: white;
}
.action-cell .btn-invoice,
td.action-cell .btn-invoice,
table.dataTable .btn-invoice {
background-color: var(--success-color) !important;
color: white !important;
}
.btn-invoice:hover {
background-color: #38a169 !important;
}
.btn-task {
background-color: #805ad5;
color: white;
}
.btn-task:hover {
background-color: #6b46c1;
}
.btn-view-tareas {
background-color: #805ad5;
color: white;
}
.btn-view-tareas:hover {
background-color: #6b46c1;
}
.btn-pdf {
background-color: #dd6b20;
color: white;
}
.btn-pdf:hover {
background-color: #c05621;
}
.btn-volver {
background-color: var(--info-color) !important;
color: white !important;
}
.btn-volver i {
color: white !important;
}
.btn-volver:hover {
background-color: #3182ce !important;
}
.btn-comentarios {
position: relative;
background-color: #805ad5 !important;
color: white !important;
}
.btn-comentarios:hover {
background-color: #6b46c1 !important;
}
.btn-comentarios i {
color: white !important;
} .btn-comentarios.sin-comentarios {
background-color: #f1f5f9 !important;
color: #94a3b8 !important;
border: 1px solid #e2e8f0 !important;
}
.btn-comentarios.sin-comentarios:hover {
background-color: #e2e8f0 !important;
color: #64748b !important;
border-color: #cbd5e1 !important;
}
.btn-comentarios.sin-comentarios i {
color: #94a3b8 !important;
}
.btn-comentarios.sin-comentarios:hover i {
color: #64748b !important;
} .btn-comentarios.con-comentarios {
background-color: #805ad5 !important;
color: white !important;
}
.btn-comentarios.con-comentarios:hover {
background-color: #6b46c1 !important;
} .badge-comentarios {
position: absolute;
top: -5px;
right: -5px;
background-color: #ef4444;
color: #ffffff;
font-size: 0.65rem;
font-weight: 700;
min-width: 17px;
height: 17px;
line-height: 15px;
border-radius: 9999px;
padding: 0 4px;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
border: 1.5px solid #ffffff;
pointer-events: none;
z-index: 2;
}
.btn-dropdown-acciones {
background-color: transparent !important;
color: #64748b !important;
border: none !important;
box-shadow: none !important;
border-radius: 50% !important;
}
.btn-dropdown-acciones::after {
display: none !important;
}
.btn-dropdown-acciones:hover,
.btn-dropdown-acciones:focus {
background-color: #f1f5f9 !important;
color: #1e293b !important;
}
.btn-dropdown-acciones i {
color: #64748b !important;
font-size: 1.35rem !important;
}
.btn-dropdown-acciones:hover i,
.btn-dropdown-acciones:focus i {
color: #0f172a !important;
}
.action-cell .dropdown {
display: inline-block;
}
.action-cell .dropdown-menu {
min-width: 200px;
padding: 0.4rem 0;
border-radius: 8px;
border: 1px solid #e2e8f0;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
z-index: 1060 !important;
}
.action-cell .dropdown-item {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 1rem;
font-size: 0.85rem;
font-weight: 500;
color: #334155;
background: none;
border: none;
width: 100%;
text-align: left;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.action-cell .dropdown-item i {
font-size: 1.15rem;
color: #64748b;
flex-shrink: 0;
}
.action-cell .dropdown-item:hover {
background-color: #f8fafc;
color: #0f172a;
}
.action-cell .dropdown-item:hover i {
color: #0f172a;
}
.action-cell .dropdown-item.text-danger {
color: #dc2626 !important;
}
.action-cell .dropdown-item.text-danger i {
color: #dc2626 !important;
}
.action-cell .dropdown-item.text-danger:hover {
background-color: #fef2f2 !important;
color: #b91c1c !important;
}
.action-cell .dropdown-item.text-danger:hover i {
color: #b91c1c !important;
}
.link-numero-cotizacion,
.link-numero-tarea,
.link-numero-factura,
.link-numero-producto,
.link-nombre-cliente {
color: #0284c7;
font-weight: 600;
text-decoration: none;
transition: color 0.2s ease, text-decoration 0.2s ease;
cursor: pointer;
}
.link-numero-cotizacion:hover,
.link-numero-tarea:hover,
.link-numero-factura:hover,
.link-numero-producto:hover,
.link-nombre-cliente:hover {
color: #0369a1;
text-decoration: underline;
} .comentarios-tarea-header {
padding: 15px;
background-color: #f8f9fa;
border-bottom: 1px solid #dee2e6;
}
.comentarios-tarea-body {
min-height: 400px;
}
.comentarios-tarea-form {
border-top: 1px solid #dee2e6;
}
.site-footer {
background-color: var(--primary-color) !important;
color: white;
padding: 1.5rem 2rem;
text-align: center;
position: relative;
z-index: 1;
}
.site-info {
font-size: 0.9rem;
opacity: 0.8;
}
.site-info a {
color: white;
}
.site-info a:hover {
color: var(--accent-color);
}
.sep {
margin: 0 0.5rem;
} .modal-content {
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.modal-header {
background-color: var(--primary-color);
color: white; border-top-left-radius: unset;
border-top-right-radius: unset;
}
.modal-header .btn-close {
filter: invert(1);
}
.modal-header:not(.bg-white):not([class*="bg-light"]) .modal-title i,
.modal-header:not(.bg-white):not([class*="bg-light"]) .modal-title .material-icons,
.modal-header:not(.bg-white):not([class*="bg-light"]) .modal-title .material-symbols-outlined {
color: #ffffff !important;
vertical-align: middle;
}
.modal-footer .btn-danger {
background-color: var(--danger-color);
border-color: var(--danger-color);
}
.modal-footer .btn-danger:hover {
background-color: #e53e3e;
border-color: #e53e3e;
} @media (max-width: 992px) {
.site-header {
flex-direction: column;
align-items: flex-start;
}
.site-branding {
margin-bottom: 1rem;
}
.main-navigation {
width: 100%;
justify-content: space-between;
}
.menu-toggle {
display: block;
}
#primary-menu {
display: none;
}
#primary-menu.toggled {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 1rem;
}
#primary-menu li {
margin-right: 0;
margin-bottom: 0.5rem;
}
}
@media (min-width: 1920px) {
.content-area {
max-width: 1920px;
margin: 0 auto; width: 100%;
}
} #primary-menu .current-menu-item>a,
#primary-menu .current_page_item>a,
#primary-menu .current-menu-parent>a {
color: #cff4fc; font-weight: 500;
position: relative;
} #primary-menu .current-menu-item>a::after,
#primary-menu .current_page_item>a::after,
#primary-menu .current-menu-parent>a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #cff4fc }  table.dataTable th.dt-orderable-asc.dt-orderable-desc div.dt-column-header,
table.dataTable th.dt-orderable-asc.dt-orderable-desc div.dt-column-footer {
flex-direction: row !important; } input:disabled,
select:disabled,
textarea:disabled {
background-color: #e9ecef !important;
color: #6c757d !important;
border: 1px solid #ced4da !important;
cursor: not-allowed !important;
} .data-na {
color: #999ea3 !important;
color: #b5c4d4 !important; font-size: 0.85rem;
font-weight: 600;
} input[readonly],
select[readonly],
textarea[readonly] {
background-color: #e9ecef !important; color: #1e293b !important; font-weight: 500 !important;
font-style: normal !important;
border: 1px solid #ced4da !important; cursor: not-allowed !important; opacity: 1 !important;
}  .site-main {
padding: 2rem;
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
} .post-container {
background-color: white;
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
margin-bottom: 2rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.post-container:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
} .login-redirect-button {
margin: 2rem auto;
max-width: 500px;
}
.login-redirect-button .btn {
background-color: var(--primary-color);
color: white;
border: none;
padding: 0.75rem 2rem;
font-size: 1.1rem;
font-weight: 500;
border-radius: 8px;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.login-redirect-button .btn:hover {
background-color: var(--secondary-color);
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
} article.post {
margin-bottom: 2rem;
}
article.post:last-child {
margin-bottom: 0;
}
.post-title {
font-size: 1.8rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 1rem;
line-height: 1.3;
}
.post-title a {
color: var(--primary-color);
text-decoration: none;
transition: color 0.3s ease;
}
.post-title a:hover {
color: var(--accent-color);
}
.post-meta {
font-size: 0.9rem;
color: #718096;
margin-bottom: 1rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.post-meta span {
display: flex;
align-items: center;
}
.post-meta .material-icons {
font-size: 1rem;
margin-right: 0.3rem;
}
.post-content {
font-size: 1rem;
line-height: 1.7;
color: var(--dark-color);
margin-bottom: 1.5rem;
}
.post-content p {
margin-bottom: 1rem;
}
.post-content p:last-child {
margin-bottom: 0;
}
.post-thumbnail {
margin-bottom: 1.5rem;
border-radius: 8px;
overflow: hidden;
}
.post-thumbnail img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}
.post-thumbnail img:hover {
transform: scale(1.05);
}
.post-excerpt {
font-size: 1rem;
line-height: 1.7;
color: var(--dark-color);
margin-bottom: 1.5rem;
}
.read-more {
display: inline-block;
background-color: var(--accent-color);
color: white;
padding: 0.5rem 1.2rem;
border-radius: 4px;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
}
.read-more:hover {
background-color: var(--secondary-color);
color: white;
text-decoration: none;
} .posts-navigation {
margin-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-links {
display: flex;
width: 100%;
justify-content: space-between;
}
.nav-links a {
background-color: var(--primary-color);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
display: flex;
align-items: center;
}
.nav-links a:hover {
background-color: var(--secondary-color);
color: white;
text-decoration: none;
}
.nav-links .material-icons {
font-size: 1.2rem;
margin: 0 0.5rem;
}
.nav-previous .material-icons {
margin-right: 0.5rem;
margin-left: 0;
}
.nav-next .material-icons {
margin-left: 0.5rem;
margin-right: 0;
} .no-posts {
text-align: center;
padding: 3rem 1rem;
background-color: white;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.no-posts h2 {
font-size: 1.8rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
.no-posts p {
font-size: 1.1rem;
color: var(--dark-color);
margin-bottom: 1.5rem;
} @media (max-width: 768px) {
.site-main {
padding: 1rem;
}
.post-title {
font-size: 1.5rem;
}
.post-meta {
flex-direction: column;
gap: 0.5rem;
}
.nav-links {
flex-direction: column;
gap: 1rem;
}
.nav-links a {
width: 100%;
justify-content: center;
}
} body.login {
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
background-image: radial-gradient(var(--accent-color) 1px, transparent 1px);
background-size: 20px 20px;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
body.login::before {
content: "";
position: absolute;
top: -100px;
right: -100px;
width: 300px;
height: 300px;
background-color: rgba(66, 153, 225, 0.15);
border-radius: 50%;
filter: blur(60px);
z-index: -1;
}
body.login::after {
content: "";
position: absolute;
bottom: -50px;
left: -50px;
width: 250px;
height: 250px;
background-color: rgba(44, 82, 130, 0.1);
border-radius: 50%;
filter: blur(60px);
z-index: -1;
}
#login {
width: 400px;
background-color: white;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
padding: 2rem;
position: relative;
z-index: 1;
}
#login h1 {
text-align: center;
margin-bottom: 2rem;
}
#login h1 a {
background-image: url(https://via.placeholder.com/200x50/1a3a5f/ffffff?text=MiTemaWP);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 200px;
height: 50px;
margin: 0 auto;
font-size: 0;
}
#loginform {
padding: 0;
}
#loginform p {
margin-bottom: 1.5rem;
}
#loginform label {
font-weight: 500;
color: var(--dark-color);
margin-bottom: 0.5rem;
display: block;
}
#loginform .input {
width: 100%;
padding: 0.75rem;
border: 1px solid #e2e8f0;
border-radius: 4px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
#loginform .input:focus {
border-color: var(--accent-color);
outline: none;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}
#loginform .forgetmenot {
margin-bottom: 1.5rem;
}
#loginform .forgetmenot label {
display: flex;
align-items: center;
font-weight: normal;
}
#loginform .forgetmenot input[type="checkbox"] {
margin-right: 0.5rem;
}
#loginform p.submit {
margin: 0;
}
#loginform p.submit input {
width: 100%;
background-color: var(--primary-color);
border: none;
color: white;
padding: 0.75rem;
border-radius: 4px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s ease;
}
#loginform p.submit input:hover {
background-color: var(--secondary-color);
}
#nav,
#backtoblog {
text-align: center;
margin: 1.5rem 0 0;
padding: 1rem 0 0;
border-top: 1px solid #e2e8f0;
}
#nav a,
#backtoblog a {
color: var(--accent-color);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
#nav a:hover,
#backtoblog a:hover {
color: var(--secondary-color);
} .login #login_error {
border-left: 4px solid var(--danger-color);
background-color: rgba(245, 101, 101, 0.1);
padding: 1rem;
margin-bottom: 1.5rem;
border-radius: 0 4px 4px 0;
}
.login .message {
border-left: 4px solid var(--info-color);
background-color: rgba(66, 153, 225, 0.1);
padding: 1rem;
margin-bottom: 1.5rem;
border-radius: 0 4px 4px 0;
} @media (max-width: 480px) {
#login {
width: 90%;
padding: 1.5rem;
}
}  .site-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
z-index: 2;
}
.main-navigation {
flex-grow: 1;
display: flex;
justify-content: center;
} .user-dropdown {
margin-left: 1.5rem;
}
.user-dropdown-toggle {
display: flex;
align-items: center;
background: none;
border: none;
padding: 5px 10px;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s;
color: white;
}
.user-dropdown-toggle:hover,
.user-dropdown-toggle:focus {
background-color: rgba(255, 255, 255, 0.1);
color: white;
}
.user-dropdown-toggle::after {
display: none;
}
.user-dropdown .user-avatar {
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--accent-color);
flex-shrink: 0;
width: 40px;
height: 40px;
margin-right: 0;
}
.user-dropdown .user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-dropdown .user-name {
font-weight: 500;
color: white;
font-size: 0.9rem;
white-space: nowrap;
margin-left: 0.75rem;
margin-right: 0.25rem;
}
.user-dropdown .dropdown-arrow {
color: white;
font-size: 1.2rem;
}
.user-dropdown .dropdown-menu {
border: none;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
padding: 0.5rem 0;
margin-top: 0.5rem;
}
.user-dropdown .dropdown-item {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
font-size: 0.9rem;
color: var(--dark-color);
transition: background-color 0.2s;
}
.user-dropdown .dropdown-item:hover {
background-color: #f5f5f5;
color: var(--bs-primary);
}
.user-dropdown .dropdown-item i {
font-size: 1.1rem;
margin-right: 0.5rem;
color: var(--bs-primary);
} .user-avatar {
width: 50px;
height: 50px;
}
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-info {
display: flex;
align-items: center;
gap: 0.75rem; }
.user-name {
font-weight: 500;
color: white;
font-size: 0.9rem;
white-space: nowrap; }
.logout-btn {
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 0.4rem 0.8rem;
border-radius: 4px;
font-size: 0.8rem;
display: flex;
align-items: center;
transition: all 0.3s;
text-decoration: none;
white-space: nowrap; }
.logout-btn:hover {
background-color: rgba(255, 255, 255, 0.3);
text-decoration: none;
color: white;
}
.logout-btn i {
font-size: 1rem;
margin-right: 0.3rem;
} .site-header {
background-color: var(--primary-color) !important;
color: white;
padding: 1rem 2rem;
display: flex !important;
justify-content: space-between !important;
align-items: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: relative;
z-index: 2;
}
.site-branding {
display: flex;
align-items: center;
}
.site-title {
font-size: 1.5rem;
font-weight: 700;
margin: 0;
}
.site-title a {
color: white;
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
}
.site-title a:hover {
color: var(--accent-color);
}
.site-title a i {
margin-right: 0.5rem;
font-size: 1.8rem;
}
.site-branding .custom-logo-link .site-title a .custom-logo-image {
width: 60px !important;
height: 50px !important;
}
.site-description {
font-size: 0.9rem;
opacity: 0.8;
margin: 0.25rem 0 0 0;
position: absolute;
left: 210px;
}
.main-navigation {
display: flex;
align-items: center;
}
.menu-toggle {
display: none;
}
#primary-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
#primary-menu li {
margin-right: 1.5rem;
}
#primary-menu a {
color: white;
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}
#primary-menu a:hover {
color: var(--accent-color);
} @media (max-width: 992px) {
.site-header {
flex-direction: column;
align-items: flex-start;
}
.site-branding {
margin-bottom: 1rem;
}
.main-navigation {
width: 100%;
justify-content: space-between;
}
.user-profile {
margin-left: 0;
margin-top: 1rem;
}
.user-info {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
} .detalle-cotizacion-container { }
.detalle-item {   }
.detalle-item:hover { }
.detalle-item strong { }
.detalle-item .badge { } .modal-detalles-cotizacion .modal-dialog,
.modal-detalles-cliente .modal-dialog,
.modal-detalles-contacto .modal-dialog,
#modal-ver-tarea .modal-dialog {
max-width: 900px;
}
.modal-detalles-cotizacion .modal-content {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
border: none;
}
.modal-detalles-cotizacion .modal-header {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: white;
border: none;
padding: 1.5rem;
position: relative;
overflow: hidden;
}
.modal-detalles-cotizacion .modal-header::before {
content: "";
position: absolute;
top: -50px;
right: -50px;
width: 150px;
height: 150px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
z-index: 0;
}
.modal-detalles-cotizacion .modal-title {
font-weight: 600;
font-size: 1.5rem;
position: relative;
z-index: 1;
display: flex;
align-items: center;
}
.modal-detalles-cotizacion .modal-title .estado-badge {
margin-left: 1rem;
font-size: 0.8rem;
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-weight: 500;
}
.modal-content .modal-title .estado-badge {
margin-left: 1rem;
font-size: 0.8rem;
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-weight: 500;
margin-left: 0.6rem;
}
.modal-detalles-cotizacion .modal-body {
padding: 0;
}
.modal-detalles-cotizacion .modal-footer {
border-top: 1px solid rgba(0, 0, 0, 0.05);
padding: 1rem 1.5rem;
} .modal-editar-cotizacion .modal-dialog {
max-width: 900px;
}
.modal-editar-cotizacion .modal-content {
border: none;
border-radius: 0.75rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
.modal-editar-cotizacion .modal-header {
background-color: white;
border-bottom: 1px solid #e2e8f0;
padding: 1.25rem 1.5rem;
}
.modal-editar-cotizacion .modal-header .modal-title {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 1.25rem;
color: var(--primary-color);
}
.modal-editar-cotizacion .modal-header .btn-close {
filter: none;
opacity: 0.5;
}
.modal-editar-cotizacion .modal-header .btn-close:hover {
opacity: 1;
}
.modal-editar-cotizacion .modal-body {
padding: 1.5rem 2rem;
background-color: #f7f9fb;
}
.modal-editar-cotizacion .form-label {
font-size: 0.75rem;
font-weight: 600;
color: #43474e;
margin-bottom: 0.5rem;
}
.modal-editar-cotizacion .form-control,
.modal-editar-cotizacion .form-select {
background-color: #f2f4f6;
border: none;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-weight: 500;
}
.modal-editar-cotizacion .form-control:focus,
.modal-editar-cotizacion .form-select:focus {
background-color: #f2f4f6;
box-shadow: 0 0 0 3px rgba(26, 58, 95, 0.1);
outline: none;
border: none;
}
.modal-editar-cotizacion .form-control[readonly] {
background-color: #e9ecef !important;
cursor: not-allowed !important;
color: #1e293b !important;
font-weight: 500 !important;
font-style: normal !important;
opacity: 1 !important;
}
.modal-editar-cotizacion .section-title {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #e2e8f0;
}
.modal-editar-cotizacion .info-card {
background-color: #f2f4f6;
border-radius: 0.75rem;
padding: 1rem;
margin-bottom: 1.25rem;
border: none;
}
.modal-editar-cotizacion .tracking-wider {
letter-spacing: 0.05em;
}
.modal-editar-cotizacion .form-label {
font-size: 0.75rem;
font-weight: 600;
color: #43474e;
margin-bottom: 0.5rem;
}
.modal-editar-cotizacion #seccion-detalles-cotizacion .row,
.modal-editar-cotizacion #seccion-detalles-crear .row {
margin-bottom: 1rem;
}
.modal-editar-cotizacion #seccion-detalles-cotizacion .row>div,
.modal-editar-cotizacion #seccion-detalles-crear .row>div {
margin-bottom: 0.5rem;
}
.modal-editar-cotizacion .form-control,
.modal-editar-cotizacion .form-select {
background-color: #f2f4f6;
border: none;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-weight: 500;
}
.modal-editar-cotizacion .form-control:focus,
.modal-editar-cotizacion .form-select:focus {
background-color: #f2f4f6;
box-shadow: 0 0 0 3px rgba(26, 58, 95, 0.1);
outline: none;
}
.modal-editar-cotizacion .form-control[readonly] {
background-color: #e9ecef !important;
cursor: not-allowed !important;
color: #1e293b !important;
font-weight: 500 !important;
font-style: normal !important;
opacity: 1 !important;
}
.modal-editar-cotizacion .info-card .info-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
color: #64748b;
margin-bottom: 0.25rem;
}
.modal-editar-cotizacion .info-card .info-value {
font-weight: 600;
color: #1a3a5f;
font-size: 0.9rem;
}
.modal-editar-cotizacion .info-card .info-value .material-symbols-outlined {
font-size: 16px;
vertical-align: middle;
margin-right: 0.25rem;
color: var(--primary-color);
}
.modal-editar-cotizacion .status-badge {
background-color: rgba(180, 197, 255, 0.3);
color: #001e5c;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
width: 100%;
}
.modal-editar-cotizacion .status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--primary-color);
}
.modal-editar-cotizacion .modal-footer {
background-color: #f8f9fa;
border-top: 1px solid #e2e8f0;
padding: 1rem 1.5rem;
}
.modal-editar-cotizacion .btn-primary-azure {
background: linear-gradient(to right, #1A3A5F, #00318a);
border: none;
font-weight: 700;
padding: 0.625rem 2rem;
border-radius: 0.5rem;
color: white;
}
.modal-editar-cotizacion .btn-primary-azure:hover {
background: linear-gradient(to right, #00318a, #1A3A5F);
}
.modal-editar-cotizacion .customer-input-group .form-control {
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.modal-editar-cotizacion .btn-add-customer {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
border: none;
background-color: #e9ecef;
color: #1A3A5F;
padding-left: 1rem;
padding-right: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.modal-editar-cotizacion .btn-add-customer:hover {
background-color: #1A3A5F;
color: white;
box-shadow: 0 4px 8px rgba(26, 58, 95, 0.2);
} .detalles-tabs {
display: flex;
border-bottom: 1px solid #e2e8f0;
background-color: #f8f9fa;
flex-wrap: nowrap;
overflow-x: auto;
}
.detalles-tab {
padding: 1rem 1rem;
font-weight: 500;
color: #64748b;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
border-bottom: 3px solid transparent;
white-space: nowrap;
}
.detalles-tab:hover {
color: var(--primary-color);
background-color: rgba(26, 58, 95, 0.05);
}
.detalles-tab.active {
color: var(--primary-color);
border-bottom: 3px solid var(--primary-color);
background-color: white;
}
.detalles-tab i {
margin-right: 0.5rem;
font-size: 1.1rem;
} .detalles-tab-content {
padding: 2rem;
background-color: white;
min-height: 400px;
}
.detalles-tab-pane {
display: none;
}
.detalles-tab-pane.active {
display: block;
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .detalle-cotizacion-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
.detalle-item { }
.detalle-item strong { }
.detalle-item span { } .badge {
padding: 0.35rem 0.65rem;
font-size: 0.75rem;
font-weight: 500;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.bg-primary {
background-color: var(--primary-color) !important;
color: white !important;
}
.bg-success {
background-color: var(--success-color) !important;
color: white !important;
}
.bg-danger {
background-color: var(--danger-color) !important;
color: white !important;
}
.bg-warning {
background-color: var(--warning-color) !important;
color: var(--dark-color) !important;
}
.bg-secondary {
background-color: #6c757d !important;
color: white !important;
} .btn-imprimir {
background: linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-color) 100%);
color: white;
border: none;
padding: 0.6rem 1.5rem;
border-radius: 6px;
font-weight: 500;
display: flex;
align-items: center;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.btn-imprimir:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
color: white;
}
.btn-imprimir i {
margin-right: 0.5rem;
}   .container-btn-agregar-cotizacion,
.container-btn-agregar-producto,
.container-btn-agregar-cliente,
.container-btn-agregar-tarea {
display: inline-block; margin-bottom: 1rem; } .frutiger-button {
cursor: pointer;
position: relative;
padding: 2px; border-radius: 6px; border: 0;     background: linear-gradient(135deg, var(--success-color) 0%, var(--success-dark-color) 100%); box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.2); transition: 0.3s all; display: inline-flex; align-items: center; justify-content: center;                                      }
.frutiger-button:hover {
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);   }
.frutiger-button:active {
box-shadow: 0px 0px 0px 0px #0000;   } .inner {
position: relative;  padding: 1em;         overflow: hidden; transition: inherit; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; }         .inner::before {
content: "";
position: absolute;
inset: 0;  background: linear-gradient(-65deg, #0c610900 40%, #34924c77 50%, #0000 70%); background-size: 200% 100%;
background-repeat: no-repeat;
animation: thing 10s ease infinite;
} @keyframes thing {
0% {
background-position: 130%;
opacity: 1;
} 30% { background-position: -166%;
opacity: 0;
} 100% { background-position: -166%; opacity: 0;  }
}
.frutiger-button:active .inner::after {
box-shadow: inset 0px 2px 8px -2px #000a; } .text {
position: relative;
z-index: 1; color: white; font-weight: 550; transition: inherit;  font-size: 1rem;
text-align: center;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }    .detalle-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
.detalle-item {
background-color: #f8f9fa;
border-radius: 8px;
padding: 1.2rem;
border-left: 4px solid var(--accent-color);
transition: all 0.3s ease;
}
.detalle-item:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.detalle-item-title {
font-weight: 600;
color: var(--secondary-color);
margin-bottom: 0.5rem;
font-size: 0.9rem;
display: flex;
align-items: center;
}
.detalle-item-title i {
margin-right: 0.5rem;
font-size: 1.1rem;
}
.detalle-item-value {
font-size: 1rem;
color: var(--dark-color);
}
.detalle-item[data-campo="comentarios_cotizacion"] {
grid-column: span 2;
}
.detalle-row {
display: flex;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.detalle-row .detalle-item {
flex: 1;
margin-bottom: 0;
}
.detalle-item-full-width {
width: 100%;
flex: none;
grid-column: 1 / -1;
}
.contacto-grid .col-12,
.detalle-cotizacion-container .col-12 {
grid-column: 1 / -1;
} .contacto-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.contacto-item {
background-color: #f8f9fa;
border-radius: 8px;
padding: 1.2rem;
border-left: 4px solid var(--accent-color);
transition: all 0.3s ease;
}
.contacto-item:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.contacto-item-title {
font-weight: 600;
color: var(--secondary-color);
margin-bottom: 0.5rem;
font-size: 0.9rem;
display: flex;
align-items: center;
}
.contacto-item-title i {
margin-right: 0.5rem;
font-size: 1.1rem;
}
.contacto-item-value {
font-size: 1rem;
color: var(--dark-color);
}
.contacto-item[data-campo="direccion"],
.contacto-item[data-campo="notas_contacto"],
.contacto-item[data-campo="direccion_personal"],
.detalle-item[data-campo="direccion"],
.detalle-item[data-campo="notas_contacto"],
.detalle-item[data-campo="direccion_personal"],
.contacto-item-full-width {
grid-column: 1 / -1;
} .contacto-empresa-grid {
display: grid;
grid-template-columns: minmax(180px, 1.8fr) minmax(160px, 1.5fr) minmax(120px, 1.1fr) auto;
align-items: center;
gap: 0.75rem;
}
.contacto-item-pie-negociacion {
font-size: 0.78rem;
font-weight: 500;
color: var(--danger-color);
}
@media (max-width: 768px) {
.contacto-empresa-grid {
grid-template-columns: 1fr;
gap: 0.5rem;
}
} .productos-grid {
display: flex;
flex-direction: column;
gap: 1rem;
}
.producto-item {
background-color: #f8f9fa;
border-radius: 8px;
border-left: 4px solid var(--accent-color);
transition: all 0.3s ease;
width: 100%;
}
.producto-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.producto-item-body {
padding: 1rem 1.25rem;
}
.producto-numero-badge {
background-color: var(--accent-color);
color: white;
padding: 0.2rem 0.6rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
display: inline-block;
}
.producto-campo {
margin-bottom: 0.75rem;
}
.producto-campo:last-child {
margin-bottom: 0;
}
.producto-campo-nombre {
margin-bottom: 1rem;
}
.producto-campo-label {
font-weight: 600;
color: var(--secondary-color);
font-size: 0.8rem;
display: flex;
align-items: center;
margin-bottom: 0.25rem;
}
.producto-campo-label .material-icons {
margin-right: 0.35rem;
font-size: 1rem;
color: var(--accent-color);
}
.producto-campo-value {
font-size: 0.95rem;
color: var(--dark-color);
padding-left: 1.35rem;
}
.producto-nombre-largo {
word-wrap: break-word;
overflow-wrap: break-word;
white-space: normal;
display: flex;
align-items: flex-start;
}
.producto-nombre-largo .material-icons {
margin-right: 0.5rem;
flex-shrink: 0;
margin-top: 0.15rem;
color: var(--accent-color);
}
.producto-campo-row {
display: flex;
gap: 2rem;
margin-top: 0.75rem;
padding-left: 1.35rem;
}
.producto-campo-half {
flex: 1;
}
.producto-campo-third {
flex: 1;
min-width: 0;
} .auditoria-timeline {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.auditoria-item {
background-color: #f8f9fa;
border-radius: 8px;
padding: 1.2rem;
border-left: 4px solid var(--accent-color);
transition: all 0.3s ease;
}
.auditoria-item:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.auditoria-item-title {
font-weight: 600;
color: var(--secondary-color);
margin-bottom: 0.5rem;
font-size: 0.9rem;
display: flex;
align-items: center;
}
.auditoria-item-title i {
margin-right: 0.5rem;
font-size: 1.1rem;
}
.auditoria-item-value {
font-size: 1rem;
color: var(--dark-color);
}   .detalle-factura-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
.detalle-item[data-campo="descripcion_factura"] {
grid-column: span 2;
}    .detalle-item.detalle-item-borde-rojo {
background: linear-gradient(135deg, rgba(245, 101, 101, 0.1) 0%, rgba(245, 101, 101, 0.05) 100%);
border-left: 4px solid var(--danger-color);
}
.detalle-item.detalle-item-borde-rojo .detalle-item-title {
color: var(--danger-color);
}
.detalle-item.detalle-item-borde-rojo .detalle-item-title i {
color: var(--danger-color);
}
.contacto-item.contacto-item-borde-rojo {
background: linear-gradient(135deg, rgba(245, 101, 101, 0.1) 0%, rgba(245, 101, 101, 0.05) 100%);
border-left: 4px solid var(--danger-color);
}
.contacto-item.contacto-item-borde-rojo .contacto-item-title {
color: var(--danger-color);
}
.contacto-item.contacto-item-borde-rojo .contacto-item-title i {
color: var(--danger-color);
}
.auditoria-item.auditoria-item-borde-rojo {
background: linear-gradient(135deg, rgba(245, 101, 101, 0.1) 0%, rgba(245, 101, 101, 0.05) 100%);
border-left: 4px solid var(--danger-color);
}
.auditoria-item.auditoria-item-borde-rojo .auditoria-item-title {
color: var(--danger-color);
}
.auditoria-item.auditoria-item-borde-rojo .auditoria-item-title i {
color: var(--danger-color);
} .detalle-item[data-campo="asignado_a"].detalle-item-borde-rojo {
background: linear-gradient(135deg, rgba(245, 101, 101, 0.1) 0%, rgba(245, 101, 101, 0.05) 100%);
border-left: 4px solid var(--danger-color);
}
.detalle-item[data-campo="asignado_a"].detalle-item-borde-rojo .detalle-item-title {
color: var(--danger-color);
}
.detalle-item[data-campo="asignado_a"].detalle-item-borde-rojo .detalle-item-title i {
color: var(--danger-color);
} .detalle-item[data-campo="asignado_a_display"].detalle-item-borde-rojo {
background: linear-gradient(135deg, rgba(245, 101, 101, 0.1) 0%, rgba(245, 101, 101, 0.05) 100%);
border-left: 4px solid var(--danger-color);
}
.detalle-item[data-campo="asignado_a_display"].detalle-item-borde-rojo .detalle-label {
color: var(--danger-color);
} .contacto-item[data-campo="pais"].contacto-item-borde-rojo {
background: linear-gradient(135deg, rgba(245, 101, 101, 0.1) 0%, rgba(245, 101, 101, 0.05) 100%);
border-left: 4px solid var(--danger-color);
}
.contacto-item[data-campo="pais"].contacto-item-borde-rojo .contacto-item-title {
color: var(--danger-color);
}
.contacto-item[data-campo="pais"].contacto-item-borde-rojo .contacto-item-title i {
color: var(--danger-color);
} .auditoria-item[data-campo="fecha_actualizacion"].auditoria-item-borde-rojo {
background: linear-gradient(135deg, rgba(245, 101, 101, 0.1) 0%, rgba(245, 101, 101, 0.05) 100%);
border-left: 4px solid var(--danger-color);
}
.auditoria-item[data-campo="fecha_actualizacion"].auditoria-item-borde-rojo .auditoria-item-title {
color: var(--danger-color);
}
.auditoria-item[data-campo="fecha_actualizacion"].auditoria-item-borde-rojo .auditoria-item-title i {
color: var(--danger-color);
}   @media (max-width: 768px) {
.modal-detalles-cotizacion .modal-dialog {
max-width: 95%;
margin: 1rem auto;
}
.detalles-tab {
padding: 0.8rem 1rem;
font-size: 0.9rem;
}
.detalles-tab i {
margin-right: 0.3rem;
font-size: 1rem;
}
.detalle-cotizacion-container,
.contacto-grid,
.auditoria-timeline {
grid-template-columns: 1fr;
}
.auditoria-timeline {
padding-left: 20px;
}
.auditoria-item::before {
left: -25px;
}
}       .importacion-container {
background-color: white;
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
max-width: max-content;
}
.revertir-importacion-container {      display: none;
}
.card-title-advertencia {
font-size: 1.5rem;
font-weight: 700;
color: var(--danger-color);
margin-bottom: 1rem;
}   .form-select { border: 1px solid #e2e8f0;
border-radius: 4px;
font-size: 1rem;
transition: border-color 0.3s ease;
padding: 0.5rem 2rem;
}
.form-select:focus {
border-color: var(--accent-color);
outline: none;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}
input[type="number"],
input[type="email"],
input[type="text"],
input[type="file"] { padding: 0.5rem 0.75rem;
border: 1px solid #e2e8f0;
border-radius: 4px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
input[type="number"]:focus,
input[type="email"]:focus,
input[type="text"]:focus,
input[type="file"]:focus {
border-color: var(--accent-color);
outline: none;
box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}
input[type="submit"] {
background-color: var(--primary-color);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 4px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
input[type="submit"]:hover {
background-color: var(--secondary-color);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} .btn {
padding: 0.75rem 1.5rem;
border-radius: 4px;
font-weight: 500;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
cursor: pointer;
}
.btn i {
margin-right: 0.5rem;
font-size: 1.2rem;
}
.btn-secondary {
background-color: #6c757d;
color: white;
}
.btn-secondary:hover {
background-color: #5a6268;
}
.modal .modal-footer .btn-secondary {
font-weight: 700;
padding: 0.625rem 2rem;
border-radius: 0.5rem;
}
.btn-warning {
background-color: var(--warning-color);
color: var(--dark-color);
}
.btn-warning:hover {
background-color: #e0a800;
color: white;
} h2,
h3 {
font-size: 1.8rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
}
h2 i,
h3 i {
margin-right: 0.5rem;
font-size: 1.8rem;
}
hr {
border: none;
height: 1px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
margin: 2rem 0;
}
p {
margin-bottom: 1rem;
line-height: 1.6;
} .alert {
padding: 1rem;
border-radius: 8px;
margin-bottom: 1.5rem;
border-left: 4px solid;
}
.alert-info {
background-color: rgba(66, 153, 225, 0.1);
border-left-color: var(--info-color);
color: var(--dark-color);
}
.alert-success {
background-color: rgba(72, 187, 120, 0.1);
border-left-color: var(--success-color);
color: var(--dark-color);
}
.alert-warning {
background-color: rgba(237, 137, 54, 0.1);
border-left-color: var(--warning-color);
color: var(--dark-color);
}
.alert-error {
background-color: rgba(245, 101, 101, 0.1);
border-left-color: var(--danger-color);
color: var(--dark-color);
} .form-selection {
background-color: white;
border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
margin-bottom: 2rem;
}
.form-selection label {
display: block;
margin-bottom: 1rem;
font-weight: 500;
color: var(--dark-color);
}
.radio-group {
display: flex;
gap: 1.5rem;
margin-bottom: 1rem;
}
.radio-option {
display: flex;
align-items: center;
}
.radio-option input[type="radio"] {
margin-right: 0.5rem;
} .action-section {
background-color: white;
border-radius: 8px;
padding: 2rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
margin-bottom: 2rem;
}
.action-section h3 {
color: var(--primary-color);
margin-bottom: 1.5rem;
}
.action-section p {
margin-bottom: 1.5rem;
line-height: 1.6;
}
.action-section strong {
color: var(--dark-color);
}  .site-info {
font-size: 0.9rem;
opacity: 0.8;
}
.site-info a {
color: white;
text-decoration: none;
}
.site-info a:hover {
color: var(--accent-color);
}
.site-info .sep {
margin: 0 0.5rem;
} @media (max-width: 768px) {
.content-area {
padding: 1rem;
}
.container {
padding: 1rem;
}
.form-selection {
padding: 1.5rem;
}
.radio-group {
flex-direction: column;
gap: 1rem;
}
.action-section {
padding: 1.5rem;
}
.site-main {
gap: 1.5rem;
}
}
@media (max-width: 576px) {
.content-area {
padding: 0.5rem;
}
.container {
padding: 1rem;
margin-bottom: 1rem;
}
.form-selection {
padding: 1rem;
}
.action-section {
padding: 1rem;
}
.site-main {
gap: 1rem;
}
} .selector-cliente-container {
position: relative;
}
.selector-cliente-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1050;
max-height: 300px;
overflow-y: auto;
border-radius: 0.375rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.selector-cliente-item {
cursor: pointer;
padding: 0.5rem 1rem;
}
.selector-cliente-item:hover {
background-color: var(--light-color);
}
#btn-crear-cliente-rapido {
display: flex;
align-items: center;
justify-content: center;
}
#btn-crear-cliente-rapido .material-icons {
font-size: 1.25rem;
}
.detalle-item-full {
padding: 0.75rem;
background-color: var(--light-color);
border-radius: 0.375rem;
}
.detalle-item-full i {
margin-right: 0.5rem;
color: var(--primary-color);
}
.detalle-item-full strong {
color: var(--dark-color);
}
.detalle-cliente-container .detalle-item {
padding: 0.75rem;
background-color: var(--light-color);
border-radius: 0.375rem;
height: 100%;
}
.detalle-cliente-container .detalle-item i {
margin-right: 0.5rem;
color: var(--primary-color);
}
.detalle-cliente-container .detalle-item strong {
color: var(--dark-color);
}
.detalle-cliente-container .row {
margin-top: 1rem;
} .section-datos-cliente .card {
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
}
.section-datos-cliente .card-header {
padding: 0.75rem 1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
.section-datos-cliente .card-header i {
color: var(--primary-color);
font-size: 1.25rem;
}
.datos-cliente-item {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.datos-cliente-item i {
color: var(--primary-color);
font-size: 1.25rem;
margin-top: 0.25rem;
}
.datos-cliente-item small {
display: block;
font-size: 0.75rem;
}
.datos-cliente-item .fw-normal {
color: var(--dark-color);
}
#btn-cambiar-cliente {
color: var(--accent-color);
font-size: 0.875rem;
padding: 0;
} .comentarios-tarea-container {
padding: 15px;
}
.comentarios-lista {
max-height: 400px;
overflow-y: auto;
}
.comentario-item {
background-color: #f8f9fa;
transition: background-color 0.2s;
}
.comentario-item:hover {
background-color: #e9ecef;
}
.comentarios-formulario textarea {
resize: vertical;
min-height: 80px;
}
.comentarios-formulario .btn-agregar-comentario {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.comentarios-formulario .btn-agregar-commentario:hover {
background-color: var(--secondary-color);
border-color: var(--secondary-color);
}
.btn-eliminar-comment {
padding: 2px 6px;
line-height: 1;
}
.btn-responder {
font-size: 0.8rem;
text-decoration: none;
}
.btn-responder:hover {
text-decoration: underline;
}
.formulario-respuesta {
background-color: #f0f0f0;
padding: 10px;
border-radius: 5px;
}
.comentario-item {
border: 1px solid #dee2e6;
} .modal-premium .font-headline {
font-family: 'Manrope', sans-serif;
}
.modal-premium .card-custom {
border: none;
border-radius: 0.75rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
width: 100%;
}
.modal-premium .info-card {
background-color: var(--azure-card-bg);
border-radius: 0.75rem;
border: none;
}
.modal-premium .form-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--on-surface-variant);
margin-bottom: 0.5rem;
}
.modal-premium .form-control,
.modal-premium .form-select {
background-color: var(--azure-card-bg);
border: none;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-weight: 500;
transition: all 0.2s ease;
}
.modal-premium .form-control:focus,
.modal-premium .form-select:focus {
background-color: var(--azure-card-bg);
box-shadow: 0 0 0 3px rgba(26, 58, 95, 0.1);
outline: none;
}
.modal-premium .form-control[readonly] {
background-color: #e9ecef !important;
cursor: not-allowed !important;
color: #1e293b !important;
font-weight: 500 !important;
font-style: normal !important;
opacity: 1 !important;
}
.modal-premium .btn-primary-azure {
background: linear-gradient(to right, #1A3A5F, #00318a);
border: none;
font-weight: 700;
padding: 0.625rem 2rem;
border-radius: 0.5rem;
color: white;
}
.modal-premium .status-badge {
background-color: rgba(180, 197, 255, 0.3);
color: #001e5c;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
width: 100%;
}
.modal-premium .status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--bs-primary);
}
.modal-premium .btn-outline-primary-azure {
color: var(--bs-primary);
border-color: var(--bs-primary);
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
background: transparent;
border: 1px solid var(--bs-primary);
padding: 0.5rem 1rem;
border-radius: 0.5rem;
}
.modal-premium .btn-outline-primary-azure:hover {
background-color: var(--bs-primary);
color: white;
box-shadow: 0 4px 8px rgba(26, 58, 95, 0.2);
}
.modal-premium .customer-input-group .form-control {
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.modal-premium .customer-input-group .btn-add-customer {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
border: none;
background-color: #e9ecef;
color: var(--bs-primary);
padding-left: 1rem;
padding-right: 1rem;
transition: all 0.2s ease;
}
.modal-premium .customer-input-group .btn-add-customer:hover {
background-color: var(--bs-primary);
color: white;
}
.modal-premium .modal-header {
background-color: white !important;
color: var(--bs-primary) !important;
border-bottom: 1px solid #e2e8f0 !important;
padding: 1.5rem 2rem !important;
}
.modal-premium .modal-title {
color: var(--bs-primary);
font-weight: 700;
font-family: 'Manrope', sans-serif;
margin-bottom: 0;
}
.modal-premium .modal-header .btn-close {
filter: none !important;
}
.modal-premium .modal-footer {
background-color: #f8f9fa !important;
border-top: none !important;
padding: 1.5rem 2rem !important;
}
.modal-premium .tracking-wider {
letter-spacing: 0.05em;
} .modal-editar-factura .modal-dialog {
max-width: 900px;
}
.modal-editar-factura .modal-content {
border: none;
border-radius: 0.75rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
.modal-editar-factura .modal-header {
background-color: white;
border-bottom: 1px solid #e2e8f0;
padding: 1.25rem 1.5rem;
}
.modal-editar-factura .font-headline {
font-family: 'Manrope', sans-serif;
}
.modal-editar-factura .modal-title {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 1.25rem;
color: var(--bs-primary);
}
.modal-editar-factura .modal-header .btn-close {
filter: none;
opacity: 0.5;
}
.modal-editar-factura .modal-header .btn-close:hover {
opacity: 1;
}
.modal-editar-factura .modal-body {
padding: 1.5rem 2rem;
background-color: var(--surface-bg);
}
.modal-editar-factura .form-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--on-surface-variant);
margin-bottom: 0.5rem;
}
.modal-editar-factura .form-control,
.modal-editar-factura .form-select {
background-color: var(--azure-card-bg);
border: none;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-weight: 500;
}
.modal-editar-factura .form-control:focus,
.modal-editar-factura .form-select:focus {
background-color: var(--azure-card-bg);
box-shadow: 0 0 0 3px rgba(26, 58, 95, 0.1);
outline: none;
border: none;
}
.modal-editar-factura .form-control[readonly] {
background-color: #e9ecef !important;
cursor: not-allowed !important;
color: #1e293b !important;
font-weight: 500 !important;
font-style: normal !important;
opacity: 1 !important;
}
.modal-editar-factura textarea.form-control {
resize: vertical;
min-height: 80px;
}
.modal-editar-factura .section-title {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #e2e8f0;
}
.modal-editar-factura .info-card {
background-color: var(--azure-card-bg);
border-radius: 0.75rem;
padding: 1rem;
margin-bottom: 1.25rem;
border: none;
}
.modal-editar-factura .info-card .info-label {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
color: #64748b;
margin-bottom: 0.25rem;
}
.modal-editar-factura .info-card .info-value {
font-weight: 600;
color: var(--bs-primary);
font-size: 0.9rem;
}
.modal-editar-factura .info-card .info-value .material-symbols-outlined {
font-size: 16px;
vertical-align: middle;
margin-right: 0.25rem;
color: var(--bs-primary);
}
.modal-editar-factura .status-badge {
background-color: rgba(180, 197, 255, 0.3);
color: #001e5c;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
width: 100%;
}
.modal-editar-factura .status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--bs-primary);
}
.modal-editar-factura .modal-footer {
background-color: #f8f9fa;
border-top: 1px solid #e2e8f0;
padding: 1rem 1.5rem;
}
.modal-editar-factura .btn-primary-azure {
background: linear-gradient(to right, #1A3A5F, #00318a);
border: none;
font-weight: 700;
padding: 0.625rem 2rem;
border-radius: 0.5rem;
color: white;
}
.modal-editar-factura .btn-primary-azure:hover {
background: linear-gradient(to right, #00318a, #1A3A5F);
}
.modal-editar-factura .btn-outline-primary-azure {
color: var(--bs-primary);
border-color: var(--bs-primary);
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.modal-editar-factura .btn-outline-primary-azure:hover {
background-color: var(--bs-primary);
color: white;
box-shadow: 0 4px 8px rgba(26, 58, 95, 0.2);
}
.modal-editar-factura .customer-input-group .form-control {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.modal-editar-factura .customer-input-group .btn-add-customer {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border: none;
background-color: #e9ecef;
color: var(--bs-primary);
padding-left: 1rem;
padding-right: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
.modal-editar-factura .customer-input-group .btn-add-customer:hover {
background-color: var(--bs-primary);
color: white;
box-shadow: 0 4px 8px rgba(26, 58, 95, 0.2);
} .modal-agregar-cliente .modal-dialog {
max-width: 900px;
}
.modal-agregar-cliente .modal-content {
border: none;
border-radius: 0.75rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
.modal-agregar-cliente .modal-header {
background-color: white;
border-bottom: 1px solid #e2e8f0;
padding: 1.25rem 1.5rem;
}
.modal-agregar-cliente .font-headline {
font-family: 'Manrope', sans-serif;
}
.modal-agregar-cliente .modal-title {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 1.25rem;
color: var(--bs-primary);
}
.modal-agregar-cliente .modal-header .btn-close {
filter: none;
opacity: 0.5;
}
.modal-agregar-cliente .modal-header .btn-close:hover {
opacity: 1;
}
.modal-agregar-cliente .modal-body {
padding: 1.5rem 2rem;
background-color: var(--surface-bg);
}
.modal-agregar-cliente .form-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--on-surface-variant);
margin-bottom: 0.5rem;
}
.modal-agregar-cliente .form-control,
.modal-agregar-cliente .form-select {
background-color: var(--azure-card-bg);
border: none;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-weight: 500;
}
.modal-agregar-cliente .form-control:focus,
.modal-agregar-cliente .form-select:focus {
background-color: var(--azure-card-bg);
box-shadow: 0 0 0 3px rgba(26, 58, 95, 0.1);
outline: none;
border: none;
}
.modal-agregar-cliente .modal-footer {
background-color: #f8f9fa;
border-top: 1px solid #e2e8f0;
padding: 1rem 1.5rem;
}
.modal-agregar-cliente .btn-primary-azure {
background: linear-gradient(to right, #1A3A5F, #00318a);
border: none;
font-weight: 700;
padding: 0.625rem 2rem;
border-radius: 0.5rem;
color: white;
}
.modal-agregar-cliente .btn-primary-azure:hover {
background: linear-gradient(to right, #00318a, #1A3A5F);
} .modal-editar-cliente .modal-dialog {
max-width: 900px;
}
.modal-editar-cliente .modal-content {
border: none;
border-radius: 0.75rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
.modal-agregar-producto .modal-header {
background-color: white;
border-bottom: 1px solid #e2e8f0;
padding: 1.25rem 1.5rem;
}
.modal-agregar-producto .font-headline {
font-family: 'Manrope', sans-serif;
}
.modal-agregar-producto .modal-title {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 1.25rem;
color: var(--bs-primary);
}
.modal-agregar-producto .modal-header .btn-close {
filter: none;
opacity: 0.5;
}
.modal-agregar-producto .modal-header .btn-close:hover {
opacity: 1;
}
.modal-agregar-producto .modal-body {
padding: 1.5rem 2rem;
background-color: var(--surface-bg);
}
.modal-agregar-producto .form-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--on-surface-variant);
margin-bottom: 0.5rem;
}
.modal-agregar-producto .form-control,
.modal-agregar-producto .form-select {
background-color: var(--azure-card-bg);
border: none;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-weight: 500;
}
.modal-agregar-producto .form-control:focus,
.modal-agregar-producto .form-select:focus {
background-color: var(--azure-card-bg);
box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.1);
}
.modal-editar-producto .modal-header {
background-color: white;
border-bottom: 1px solid #e2e8f0;
padding: 1.25rem 1.5rem;
}
.modal-editar-producto .font-headline {
font-family: 'Manrope', sans-serif;
}
.modal-editar-producto .modal-title {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 1.25rem;
color: var(--bs-primary);
}
.modal-editar-producto .modal-header .btn-close {
filter: none;
opacity: 0.5;
}
.modal-editar-producto .modal-header .btn-close:hover {
opacity: 1;
}
.modal-editar-producto .modal-body {
padding: 1.5rem 2rem;
background-color: var(--surface-bg);
}
.modal-editar-producto .form-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--on-surface-variant);
margin-bottom: 0.5rem;
}
.modal-editar-producto .form-control,
.modal-editar-producto .form-select {
background-color: var(--azure-card-bg);
border: none;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-weight: 500;
}
.modal-editar-producto .form-control:focus,
.modal-editar-producto .form-select:focus {
background-color: var(--azure-card-bg);
box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.1);
}
.modal-editar-cliente .modal-header {
background-color: white;
border-bottom: 1px solid #e2e8f0;
padding: 1.25rem 1.5rem;
}
.modal-editar-cliente .font-headline {
font-family: 'Manrope', sans-serif;
}
.modal-editar-cliente .modal-title {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 1.25rem;
color: var(--bs-primary);
}
.modal-editar-cliente .modal-header .btn-close {
filter: none;
opacity: 0.5;
}
.modal-editar-cliente .modal-header .btn-close:hover {
opacity: 1;
}
.modal-editar-cliente .modal-body {
padding: 1.5rem 2rem;
background-color: var(--surface-bg);
}
.modal-editar-cliente .form-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--on-surface-variant);
margin-bottom: 0.5rem;
}
.modal-editar-cliente .form-control,
.modal-editar-cliente .form-select {
background-color: var(--azure-card-bg);
border: none;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-weight: 500;
}
.modal-editar-cliente .form-control:focus,
.modal-editar-cliente .form-select:focus {
background-color: var(--azure-card-bg);
box-shadow: 0 0 0 3px rgba(26, 58, 95, 0.1);
outline: none;
border: none;
}
.modal-editar-cliente .modal-footer {
background-color: #f8f9fa;
border-top: 1px solid #e2e8f0;
padding: 1rem 1.5rem;
}
.modal-editar-cliente .btn-primary-azure {
background: linear-gradient(to right, #1A3A5F, #00318a);
border: none;
font-weight: 700;
padding: 0.625rem 2rem;
border-radius: 0.5rem;
color: white;
}
.modal-editar-cliente .btn-primary-azure:hover {
background: linear-gradient(to right, #00318a, #1A3A5F);
} .modal-agregar-tarea-desde-cotizacion .modal-dialog,
.modal-agregar-tarea .modal-dialog {
max-width: 900px;
}
.modal-agregar-tarea-desde-cotizacion .modal-content,
.modal-agregar-tarea .modal-content {
border: none;
border-radius: 0.75rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
.modal-agregar-tarea-desde-cotizacion .modal-header,
.modal-agregar-tarea .modal-header {
background-color: white;
border-bottom: 1px solid #e2e8f0;
padding: 1.25rem 1.5rem;
}
.modal-agregar-tarea-desde-cotizacion .font-headline,
.modal-agregar-tarea .font-headline {
font-family: 'Manrope', sans-serif;
}
.modal-agregar-tarea-desde-cotizacion .modal-title,
.modal-agregar-tarea .modal-title {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 1.25rem;
color: var(--bs-primary);
}
.modal-agregar-tarea-desde-cotizacion .modal-header .btn-close,
.modal-agregar-tarea .modal-header .btn-close {
filter: none;
opacity: 0.5;
}
.modal-agregar-tarea-desde-cotizacion .modal-header .btn-close:hover,
.modal-agregar-tarea .modal-header .btn-close:hover {
opacity: 1;
}
.modal-agregar-tarea-desde-cotizacion .modal-body,
.modal-agregar-tarea .modal-body {
padding: 1.5rem 2rem;
background-color: var(--surface-bg);
}
.modal-agregar-tarea-desde-cotizacion .row.g-4>div,
.modal-agregar-tarea .row.g-4>div {
margin-bottom: 1.5rem;
}
.modal-agregar-tarea-desde-cotizacion .form-label,
.modal-agregar-tarea .form-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--on-surface-variant);
margin-bottom: 0.5rem;
}
.modal-agregar-tarea-desde-cotizacion .form-control,
.modal-agregar-tarea-desde-cotizacion .form-select,
.modal-agregar-tarea .form-control,
.modal-agregar-tarea .form-select {
background-color: var(--azure-card-bg);
border: none;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-weight: 500;
}
.modal-agregar-tarea-desde-cotizacion .form-control:focus,
.modal-agregar-tarea-desde-cotizacion .form-select:focus,
.modal-agregar-tarea .form-control:focus,
.modal-agregar-tarea .form-select:focus {
background-color: var(--azure-card-bg);
box-shadow: 0 0 0 3px rgba(26, 58, 95, 0.1);
outline: none;
border: none;
}
.modal-agregar-tarea-desde-cotizacion .modal-footer,
.modal-agregar-tarea .modal-footer {
background-color: #f8f9fa;
border-top: 1px solid #e2e8f0;
padding: 1rem 1.5rem;
}
.modal-agregar-tarea-desde-cotizacion .btn-primary-azure,
.modal-agregar-tarea .btn-primary-azure {
background: linear-gradient(to right, #1A3A5F, #00318a);
border: none;
font-weight: 700;
padding: 0.625rem 2rem;
border-radius: 0.5rem;
color: white;
}
.modal-agregar-tarea-desde-cotizacion .btn-primary-azure:hover,
.modal-agregar-tarea .btn-primary-azure:hover {
background: linear-gradient(to right, #00318a, #1A3A5F);
} .modal-editar-tarea .modal-dialog {
max-width: 900px;
}
.modal-editar-tarea .modal-content {
border: none;
border-radius: 0.75rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}
.modal-editar-tarea .modal-header {
background-color: white;
border-bottom: 1px solid #e2e8f0;
padding: 1.25rem 1.5rem;
}
.modal-editar-tarea .font-headline {
font-family: 'Manrope', sans-serif;
}
.modal-editar-tarea .modal-title {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 1.25rem;
color: var(--bs-primary);
}
.modal-editar-tarea .modal-header .btn-close {
filter: none;
opacity: 0.5;
}
.modal-editar-tarea .modal-header .btn-close:hover {
opacity: 1;
}
.modal-editar-tarea .modal-body {
padding: 1.5rem 2rem;
background-color: var(--surface-bg);
}
.modal-editar-tarea .row.g-4>div {
margin-bottom: 1.5rem;
}
.modal-editar-tarea .form-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--on-surface-variant);
margin-bottom: 0.5rem;
}
.modal-editar-tarea .form-control,
.modal-editar-tarea .form-select {
background-color: var(--azure-card-bg);
border: none;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
font-weight: 500;
}
.modal-editar-tarea .form-control:focus,
.modal-editar-tarea .form-select:focus {
background-color: var(--azure-card-bg);
box-shadow: 0 0 0 3px rgba(26, 58, 95, 0.1);
outline: none;
border: none;
}
.modal-editar-tarea .form-control[readonly] {
background-color: #e9ecef !important;
cursor: not-allowed !important;
color: #1e293b !important;
font-weight: 500 !important;
font-style: normal !important;
opacity: 1 !important;
}
.modal-editar-tarea .modal-footer {
background-color: #f8f9fa;
border-top: 1px solid #e2e8f0;
padding: 1rem 1.5rem;
}
.modal-editar-tarea .btn-primary-azure {
background: linear-gradient(to right, #1A3A5F, #00318a);
border: none;
font-weight: 700;
padding: 0.625rem 2rem;
border-radius: 0.5rem;
color: white;
}
.modal-editar-tarea .btn-primary-azure:hover {
background: linear-gradient(to right, #00318a, #1A3A5F);
}  ::placeholder,
.form-control::placeholder,
.form-select::placeholder,
input::placeholder,
textarea::placeholder {
color: #94a3b8 !important;
font-weight: 400 !important;
font-style: normal !important;
opacity: 0.85 !important;
transition: opacity 0.2s ease;
} ::-webkit-input-placeholder {
color: #94a3b8 !important;
font-weight: 400 !important;
font-style: normal !important;
opacity: 0.85 !important;
}
.form-control::-webkit-input-placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #94a3b8 !important;
font-weight: 400 !important;
font-style: normal !important;
opacity: 0.85 !important;
} ::-moz-placeholder {
color: #94a3b8 !important;
font-weight: 400 !important;
font-style: normal !important;
opacity: 0.85 !important;
}
.form-control::-moz-placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder {
color: #94a3b8 !important;
font-weight: 400 !important;
font-style: normal !important;
opacity: 0.85 !important;
} :-ms-input-placeholder {
color: #94a3b8 !important;
font-weight: 400 !important;
font-style: normal !important;
opacity: 0.85 !important;
} .modal-premium .form-control::placeholder,
.modal-editar-cotizacion .form-control::placeholder,
.modal-editar-factura .form-control::placeholder,
.modal-agregar-cliente .form-control::placeholder,
.modal-editar-cliente .form-control::placeholder,
.modal-agregar-producto .form-control::placeholder,
.modal-editar-producto .form-control::placeholder,
.modal-agregar-tarea-desde-cotizacion .form-control::placeholder,
.modal-agregar-tarea .form-control::placeholder,
.modal-editar-tarea .form-control::placeholder,
.modal-premium textarea::placeholder,
.modal-editar-cotizacion textarea::placeholder {
color: #94a3b8 !important;
font-weight: 400 !important;
font-style: normal !important;
opacity: 0.85 !important;
}
.modal-premium .form-control::-webkit-input-placeholder,
.modal-editar-cotizacion .form-control::-webkit-input-placeholder,
.modal-editar-factura .form-control::-webkit-input-placeholder,
.modal-agregar-cliente .form-control::-webkit-input-placeholder,
.modal-editar-cliente .form-control::-webkit-input-placeholder,
.modal-agregar-producto .form-control::-webkit-input-placeholder,
.modal-editar-producto .form-control::-webkit-input-placeholder,
.modal-agregar-tarea-desde-cotizacion .form-control::-webkit-input-placeholder,
.modal-agregar-tarea .form-control::-webkit-input-placeholder,
.modal-editar-tarea .form-control::-webkit-input-placeholder,
.modal-premium textarea::-webkit-input-placeholder,
.modal-editar-cotizacion textarea::-webkit-input-placeholder {
color: #94a3b8 !important;
font-weight: 400 !important;
font-style: normal !important;
opacity: 0.85 !important;
} .form-control:focus::placeholder,
input:focus::placeholder,
textarea:focus::placeholder {
opacity: 0.35 !important;
}
.form-control:focus::-webkit-input-placeholder,
input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
opacity: 0.35 !important;
} .modal-premium .form-control[readonly],
.modal-editar-cotizacion .form-control[readonly],
.modal-editar-factura .form-control[readonly],
.modal-agregar-cliente .form-control[readonly],
.modal-editar-cliente .form-control[readonly],
.modal-agregar-producto .form-control[readonly],
.modal-editar-producto .form-control[readonly],
.modal-agregar-tarea-desde-cotizacion .form-control[readonly],
.modal-agregar-tarea .form-control[readonly],
.modal-editar-tarea .form-control[readonly] {
background-color: #e9ecef !important;
cursor: not-allowed !important;
color: #1e293b !important;
font-weight: 500 !important;
font-style: normal !important;
opacity: 1 !important;
} .font-xs {
font-size: 0.75rem !important;
}
.font-sm {
font-size: 0.875rem !important;
}
#seccion-productos-proveedores {
border-radius: 12px;
overflow: hidden;
}
#seccion-productos-proveedores .card-header {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#toggle-modo-productos .btn {
font-weight: 600;
letter-spacing: 0.2px;
padding: 0.35rem 0.75rem;
transition: all 0.2s ease-in-out;
border-color: #0d6efd;
color: #6ea8fe;
background-color: transparent;
}
#toggle-modo-productos .btn.active {
background-color: #0d6efd !important;
border-color: #0d6efd !important;
color: #ffffff !important;
box-shadow: 0 2px 6px rgba(13, 110, 253, 0.4);
}
#toggle-modo-productos .btn:not(.active):hover {
background-color: rgba(13, 110, 253, 0.2);
border-color: #0d6efd;
color: #ffffff;
}
#tabla-ranking-productos tbody tr:hover,
#tabla-lideres-paises tbody tr:hover {
background-color: #f8fafc !important;
} .dashboard-header-periodo {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
border: 1px solid #e2e8f0;
}
.dashboard-header-periodo .periodo-icon-box {
width: 52px;
height: 52px;
background: rgba(2, 132, 199, 0.1);
color: #0284c7;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.dashboard-header-periodo .periodo-titulo {
font-size: 1.45rem;
font-weight: 700;
color: #0f172a;
letter-spacing: -0.3px;
}
.dashboard-header-periodo .periodo-badge {
background-color: #f0f9ff;
color: #0284c7;
border: 1px solid #bae6fd;
font-size: 0.875rem;
font-weight: 600;
padding: 0.45rem 1rem;
border-radius: 20px;
} .link-documentos-btn {
background-color: #f0f9ff;
color: #0284c7 !important;
border: 1px solid #bae6fd;
padding: 0.35rem 0.75rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.875rem;
transition: all 0.2s ease-in-out;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.link-documentos-btn:hover {
background-color: #0284c7;
color: #ffffff !important;
border-color: #0284c7;
box-shadow: 0 3px 8px rgba(2, 132, 199, 0.25);
transform: translateY(-1px);
}
.link-documentos-btn .material-icons {
font-size: 16px;
transition: transform 0.2s ease;
}
.link-documentos-btn:hover .material-icons {
color: #ffffff !important;
} .form-control,
.form-select,
textarea {
color: #5a6268 !important;
} .historial-comercial-container {
width: 100%;
}
.historial-toolbar {
background-color: #f8fafc;
padding: 0.75rem 1rem;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.historial-subtabs {
display: flex;
gap: 0.5rem;
}
.historial-subtab-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 1rem;
border: 1px solid #cbd5e1;
background-color: #ffffff;
color: #475569;
font-size: 0.875rem;
font-weight: 600;
border-radius: 20px;
cursor: pointer;
transition: all 0.2s ease;
}
.historial-subtab-btn:hover {
background-color: rgba(26, 58, 95, 0.06);
color: var(--primary-color);
border-color: var(--primary-color);
}
.historial-subtab-btn.active {
background-color: var(--primary-color);
color: #ffffff;
border-color: var(--primary-color);
box-shadow: 0 2px 6px rgba(26, 58, 95, 0.25);
}
.historial-subtab-btn .material-icons {
font-size: 1.1rem;
}
.historial-pill-badge {
font-size: 0.75rem;
padding: 0.2rem 0.5rem;
border-radius: 10px;
background-color: #e2e8f0;
color: #334155;
font-weight: 700;
}
.historial-subtab-btn.active .historial-pill-badge {
background-color: rgba(255, 255, 255, 0.25);
color: #ffffff;
}
.historial-kpi-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1rem;
}
.historial-kpi-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
gap: 1rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.historial-kpi-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.historial-kpi-icon {
width: 46px;
height: 46px;
min-width: 46px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.historial-kpi-icon i {
font-size: 24px;
}
.historial-kpi-icon.icon-cot {
background-color: #e0f2fe;
color: #0284c7;
}
.historial-kpi-icon.icon-fac {
background-color: #dcfce7;
color: #16a34a;
}
.historial-kpi-info {
display: flex;
flex-direction: column;
overflow: hidden;
}
.historial-kpi-lbl {
font-size: 0.75rem;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.historial-kpi-val {
font-size: 1.35rem;
font-weight: 700;
color: var(--primary-color);
line-height: 1.2;
margin: 2px 0;
}
.historial-kpi-sub {
font-size: 0.8rem;
color: #64748b;
}
.historial-tabla-wrapper {
max-height: 360px;
overflow-y: auto;
overflow-x: auto;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #ffffff;
}
.historial-tabla {
font-size: 0.875rem;
}
.historial-tabla thead th {
position: sticky;
top: 0;
z-index: 2;
background-color: var(--primary-color) !important;
color: #ffffff !important;
font-size: 0.78rem !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.6px;
border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
padding: 0.75rem 0.9rem !important;
text-align: right !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.historial-tabla thead th.text-start {
text-align: left !important;
}
.historial-tabla thead th.text-center {
text-align: center !important;
}
.historial-tabla tbody td {
padding: 0.75rem 0.9rem !important;
vertical-align: middle;
border-bottom: 1px solid #f1f5f9;
text-align: right !important;
}
.historial-tabla tbody td.text-start {
text-align: left !important;
}
.historial-tabla tbody td.text-center {
text-align: center !important;
}
.historial-tabla tbody tr:hover {
background-color: rgba(26, 58, 95, 0.02);
}
.link-cotizacion-detalle {
color: var(--secondary-color);
transition: color 0.15s ease, transform 0.15s ease;
}
.link-cotizacion-detalle:hover {
color: var(--accent-color);
text-decoration: underline !important;
transform: translateX(1px);
}
.historial-empty-state {
text-align: center;
padding: 3rem 1.5rem;
background-color: #f8fafc;
border-radius: 8px;
border: 1px dashed #cbd5e1;
}
.historial-empty-state i {
font-size: 3rem;
color: #94a3b8;
margin-bottom: 0.5rem;
}
.historial-empty-state h6 {
font-size: 1rem;
font-weight: 600;
color: #475569;
margin-bottom: 0.25rem;
} .modal-submodal-empresa {
z-index: 1056 !important;
}
.modal-submodal-contacto {
z-index: 1070 !important;
}
.modal-submodal-empresa .modal-header,
.modal-submodal-contacto .modal-header {
background-color: #ffffff !important;
color: #1A3A5F !important;
}
.modal-submodal-empresa .modal-title,
.modal-submodal-contacto .modal-title {
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 1.25rem;
color: #1A3A5F !important;
}
.modal-submodal-empresa .modal-header .btn-close,
.modal-submodal-contacto .modal-header .btn-close {
filter: none !important;
opacity: 0.5;
}
.modal-submodal-empresa .modal-header .btn-close:hover,
.modal-submodal-contacto .modal-header .btn-close:hover {
opacity: 1;
}
.modal-backdrop.submodal-backdrop {
z-index: 1055 !important;
}
.modal-backdrop.submodal-contacto-backdrop {
z-index: 1065 !important;
}
.seccion-contacto-selector {
background-color: #f8fafc;
border: 1px solid #e2e8f0;
transition: border-color 0.2s ease;
}
.seccion-contacto-selector:hover {
border-color: #cbd5e1;
}
.dropdown-resultados-contacto {
z-index: 1056;
}
.dropdown-resultados-contacto .dropdown-item {
font-size: 0.9rem;
transition: background-color 0.15s ease;
white-space: normal;
}
.dropdown-resultados-contacto .dropdown-item:hover {
background-color: #f1f5f9;
}
.avatar-contacto {
background: linear-gradient(135deg, #1A3A5F 0%, #2A5298 100%);
box-shadow: 0 2px 4px rgba(26, 58, 95, 0.15);
}
.customer-input-group .form-control {
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.customer-input-group .btn-add-customer {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
border: 1px solid #ced4da;
border-left: none;
background-color: #f1f5f9;
color: #1A3A5F;
padding-left: 1rem;
padding-right: 1rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.customer-input-group .btn-add-customer:hover {
background-color: #1A3A5F;
color: white;
box-shadow: 0 4px 8px rgba(26, 58, 95, 0.2);
} .item-contacto-tarjeta {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-selector-negociacion {
transition: transform 0.15s ease;
outline: none !important;
box-shadow: none !important;
}
.btn-selector-negociacion:hover .ic-negociacion {
color: var(--danger-color, #dc3545) !important;
transform: scale(1.15);
}
.btn-quitar-contacto-lista {
transition: transform 0.15s ease, color 0.15s ease;
outline: none !important;
box-shadow: none !important;
}
.btn-quitar-contacto-lista:hover {
color: var(--danger-color, #dc3545) !important;
transform: scale(1.15);
}
.btn-abrir-modal-nuevo-contacto,
.btn-crear-cliente-rapido {
color: #64748b;
transition: all 0.2s ease;
outline: none !important;
box-shadow: none !important;
}
.btn-abrir-modal-nuevo-contacto:hover,
.btn-crear-cliente-rapido:hover {
color: var(--primary-color, #1A3A5F) !important;
transform: scale(1.15);
}
.dropdown-item-bloqueado {
cursor: not-allowed !important;
user-select: none;
transition: background-color 0.15s ease;
}
.dropdown-item-bloqueado:hover {
background-color: #fef2f2 !important;
}
.badge-contador-contactos {
font-size: 0.75rem;
font-weight: 600;
border-radius: 9999px;
}
.msg-sin-contactos {
border: 2px dashed #cbd5e1;
background-color: #f8fafc;
}
.link-correo-provisional-icon {
color: #d97706 !important;
cursor: help !important;
transition: transform 0.15s ease;
}
.link-correo-provisional-icon:hover {
transform: scale(1.2);
color: #b45309 !important;
}
.badge-propuesta,
.badge.bg-propuesta {
background-color: #6f42c1 !important;
color: #ffffff !important;
}