/** * FastTable Editor CSS * Estilos modernos para el editor con mejor UX *//* =============================================================================   MODAL STYLES   ============================================================================= */.fte-modal-overlay {    position: fixed;    top: 0;    left: 0;    right: 0;    bottom: 0;    background-color: rgba(0, 0, 0, 0.5);    display: flex;    align-items: center;    justify-content: center;    z-index: 1050;    opacity: 0;    transition: opacity 0.3s ease;}.fte-modal-overlay.fte-modal-show {    opacity: 1;}.fte-modal {    background: white;    border-radius: 8px;    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);    width: 800px;        /* ancho fijo por defecto (lg) */    max-width: 95vw;     /* nunca sale de la pantalla */    max-height: 90vh;    overflow: hidden;    display: flex;    flex-direction: column;    transform: scale(0.9);    transition: transform 0.3s ease;}/* ── Variantes de tamaño: siempre ancho fijo ── */.fte-modal-sm { width: 420px;  max-width: 95vw; }.fte-modal-md { width: 640px;  max-width: 95vw; }.fte-modal-lg { width: 860px;  max-width: 95vw; }.fte-modal-xl { width: 1160px; max-width: 95vw; }.fte-modal-overlay.fte-modal-show .fte-modal {    transform: scale(1);}.fte-modal-header {    padding: 20px 24px;    border-bottom: 1px solid #e5e7eb;    display: flex;    align-items: center;    justify-content: space-between;}.fte-modal-title {    font-size: 20px;    font-weight: 600;    color: #111827;    margin: 0;}.fte-modal-close {    background: none;    border: none;    font-size: 24px;    color: #6b7280;    cursor: pointer;    padding: 0;    width: 32px;    height: 32px;    display: flex;    align-items: center;    justify-content: center;    border-radius: 4px;    transition: all 0.2s;}.fte-modal-close:hover {    background-color: #f3f4f6;    color: #111827;}.fte-modal-body {    padding: 24px;    overflow-y: auto;    flex: 1;    box-sizing: border-box;    width: 100%;}.fte-modal-footer {    padding: 16px 24px;    border-top: 1px solid #e5e7eb;    display: flex;    gap: 12px;    justify-content: flex-end;}/* =============================================================================   INLINE FORM STYLES   ============================================================================= */.fte-inline-form {    background: white;    border: 1px solid #e5e7eb;    border-radius: 8px;    padding: 24px;    margin: 20px 0;}.fte-form-actions {    margin-top: 24px;    padding-top: 20px;    border-top: 1px solid #e5e7eb;    display: flex;    gap: 12px;    justify-content: flex-end;}/* =============================================================================   TABS STYLES   ============================================================================= */.fte-tabs {    width: 100%;}.fte-tab-headers {    list-style: none;    padding: 0;    margin: 0 0 24px 0;    display: flex;    gap: 4px;    border-bottom: 2px solid #e5e7eb;}.fte-tab-header {    padding: 12px 20px;    cursor: pointer;    background: transparent;    border: none;    border-bottom: 2px solid transparent;    color: #6b7280;    font-weight: 500;    transition: all 0.2s;    position: relative;    bottom: -2px;}.fte-tab-header:hover {    color: #111827;    background-color: #f9fafb;}.fte-tab-header.fte-tab-active {    color: #2563eb;    border-bottom-color: #2563eb;    font-weight: 600;}.fte-tab-contents {    width: 100%;    box-sizing: border-box;}.fte-tab-content {    display: none;    width: 100%;    box-sizing: border-box;}.fte-tab-content.fte-tab-active {    display: block;    animation: fte-fade-in 0.3s ease;}@keyframes fte-fade-in {    from {        opacity: 0;        transform: translateY(10px);    }    to {        opacity: 1;        transform: translateY(0);    }}/* =============================================================================   STICKY FIELDS (Reference fields shown on all tabs)   ============================================================================= */.fte-sticky-fields {    background-color: #f9fafb;    border: 1px solid #e5e7eb;    border-radius: 6px;    padding: 12px 16px;    margin-bottom: 20px;    display: flex;    gap: 20px;    flex-wrap: wrap;}.fte-sticky-field {    font-size: 14px;}.fte-sticky-label {    font-weight: 600;    color: #6b7280;}.fte-sticky-value {    color: #111827;}/* =============================================================================   FORM LAYOUT (Rows & Columns)   ============================================================================= */.fte-row {    display: flex;    gap: 16px;    margin-bottom: 20px;    flex-wrap: wrap;}.fte-col {    flex: 1;    min-width: 0;}/* Bootstrap-like column widths -- corregidas para gap:16px   Formula: flex-basis = calc(k/12 * 100% - (12-k)/12 * 16px)   La suma de flex-basis + gaps siempre = 100% del contenedor */.fte-col-1  { flex: 0 0 calc(8.3333%  - 14.6667px); max-width: calc(8.3333%  - 14.6667px); }.fte-col-2  { flex: 0 0 calc(16.6667% - 13.3333px); max-width: calc(16.6667% - 13.3333px); }.fte-col-3  { flex: 0 0 calc(25%      - 12px);      max-width: calc(25%      - 12px); }.fte-col-4  { flex: 0 0 calc(33.3333% - 10.6667px); max-width: calc(33.3333% - 10.6667px); }.fte-col-5  { flex: 0 0 calc(41.6667% - 9.3333px);  max-width: calc(41.6667% - 9.3333px); }.fte-col-6  { flex: 0 0 calc(50%      - 8px);       max-width: calc(50%      - 8px); }.fte-col-7  { flex: 0 0 calc(58.3333% - 6.6667px);  max-width: calc(58.3333% - 6.6667px); }.fte-col-8  { flex: 0 0 calc(66.6667% - 5.3333px);  max-width: calc(66.6667% - 5.3333px); }.fte-col-9  { flex: 0 0 calc(75%      - 4px);       max-width: calc(75%      - 4px); }.fte-col-10 { flex: 0 0 calc(83.3333% - 2.6667px);  max-width: calc(83.3333% - 2.6667px); }.fte-col-11 { flex: 0 0 calc(91.6667% - 1.3333px);  max-width: calc(91.6667% - 1.3333px); }.fte-col-12 { flex: 0 0 100%; max-width: 100%; }@media (max-width: 768px) {    .fte-col,    .fte-col-1, .fte-col-2, .fte-col-3, .fte-col-4,    .fte-col-5, .fte-col-6, .fte-col-7, .fte-col-8,    .fte-col-9, .fte-col-10, .fte-col-11, .fte-col-12 {        flex: 0 0 100%;        max-width: 100%;    }}/* =============================================================================   FIELD GROUP (Label + Input wrapper)   ============================================================================= */.fte-field-group {    margin-bottom: 16px;}.fte-required {    color: #dc2626;    font-weight: bold;}.fte-input-wrapper {    position: relative;}.fte-help-text {    display: block;    font-size: 12px;    color: #6b7280;    margin-top: 4px;}/* =============================================================================   INPUT STYLES (Mejoras sobre Bootstrap)   ============================================================================= *//* Bootstrap-Select Integration   Requiere incluir:   - assets/mselect/css/bootstrap-select.min.css   - assets/mselect/js/bootstrap-select.min.js*//* Dropzone Integration   Requiere incluir:   - assets/dropzone/dropzone.min.css   - assets/dropzone/dropzone.min.js*/.fte-dropzone {    border: 2px dashed #d1d5db;    border-radius: 8px;    background: #f9fafb;    padding: 30px 20px;    text-align: center;    cursor: pointer;    transition: all 0.3s;    min-height: 150px;    margin-bottom: 15px;}.fte-dropzone:hover {    border-color: #2563eb;    background: #eff6ff;}.fte-dropzone.dz-drag-hover {    border-color: #2563eb;    background: #dbeafe;    transform: scale(1.01);    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);}.fte-dropzone .dz-message {    margin: 0;    font-size: 16px;    color: #6b7280;}.fte-dropzone .dz-message .dz-message-text {    display: inline-block;}.fte-dropzone .dz-preview {    display: inline-block;    margin: 10px;    vertical-align: top;}.fte-dropzone .dz-preview .dz-image {    border-radius: 6px;    overflow: hidden;    box-shadow: 0 2px 4px rgba(0,0,0,0.1);}.fte-dropzone .dz-preview .dz-details {    opacity: 1;    background: rgba(255,255,255,0.95);    padding: 5px 10px;    border-radius: 4px;    margin-top: 5px;}.fte-dropzone .dz-preview .dz-filename {    font-size: 12px;    overflow: hidden;    text-overflow: ellipsis;}.fte-dropzone .dz-preview .dz-size {    font-size: 11px;    color: #6b7280;}.fte-dropzone .dz-preview .dz-progress {    height: 8px;    border-radius: 4px;    background: #e5e7eb;    overflow: hidden;    margin: 5px 0;}.fte-dropzone .dz-preview .dz-upload {    display: block;    height: 100%;    background: linear-gradient(90deg, #2563eb 0%, #1e40af 100%);    transition: width 0.3s;}.fte-dropzone .dz-preview .dz-error-message {    display: none;    position: absolute;    background: #dc2626;    color: white;    padding: 5px 10px;    border-radius: 4px;    font-size: 11px;    z-index: 10;    top: 100%;    left: 50%;    transform: translateX(-50%);    white-space: nowrap;    margin-top: 5px;}.fte-dropzone .dz-preview.dz-error .dz-error-message {    display: block;}.fte-dropzone .dz-preview .dz-success-mark,.fte-dropzone .dz-preview .dz-error-mark {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    z-index: 5;    opacity: 0;    transition: opacity 0.3s;}.fte-dropzone .dz-preview.dz-success .dz-success-mark {    opacity: 1;}.fte-dropzone .dz-preview.dz-error .dz-error-mark {    opacity: 1;}.fte-dropzone .dz-preview .dz-remove {    display: inline-block;    color: #dc2626;    font-size: 12px;    text-decoration: none;    margin-top: 5px;    padding: 3px 8px;    border: 1px solid #dc2626;    border-radius: 4px;    transition: all 0.2s;}.fte-dropzone .dz-preview .dz-remove:hover {    background: #dc2626;    color: white;}/* Current files display */.fte-current-files {    margin-top: 15px;    padding: 15px;    background: #f9fafb;    border: 1px solid #e5e7eb;    border-radius: 6px;}.fte-current-file-item {    display: inline-block;    margin: 5px;    padding: 8px 12px;    background: white;    border: 1px solid #d1d5db;    border-radius: 4px;    font-size: 13px;}.fte-current-file-item img {    max-width: 100px;    max-height: 100px;    border-radius: 4px;    display: block;}.fte-current-file-item i {    color: #6b7280;    margin-right: 5px;}.fte-current-file-item a {    color: #2563eb;    text-decoration: none;}.fte-current-file-item a:hover {    text-decoration: underline;}.form-control {    transition: all 0.2s;}.form-control:focus {    border-color: #2563eb;    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);}/* Color input */.fte-input-color {    height: 44px;    padding: 4px;    cursor: pointer;}/* File input */.fte-current-file {    margin-top: 10px;    padding: 12px;    background-color: #f9fafb;    border: 1px solid #e5e7eb;    border-radius: 6px;}.fte-preview-image {    max-width: 200px;    max-height: 200px;    border-radius: 4px;    border: 1px solid #e5e7eb;}/* Checkbox */.fte-checkbox-label {    display: flex;    align-items: center;    cursor: pointer;    font-size: 14px;    color: #374151;}.fte-checkbox {    width: 18px;    height: 18px;    margin-right: 8px;    cursor: pointer;    accent-color: #2563eb;}/* Radio buttons */.fte-radio-group {    display: flex;    flex-direction: column;    gap: 10px;}.fte-radio-label {    display: flex;    align-items: center;    cursor: pointer;    font-size: 14px;    color: #374151;}.fte-radio {    width: 18px;    height: 18px;    margin-right: 8px;    cursor: pointer;    accent-color: #2563eb;}/* HTML Editor */.fte-html-editor {    min-height: 300px;}/* =============================================================================   ERROR & VALIDATION STYLES   ============================================================================= */.fte-error {    background-color: #fef2f2;    border: 1px solid #fecaca;    color: #991b1b;    padding: 12px 16px;    border-radius: 6px;    margin-bottom: 16px;}/* Error Summary Box */.fte-error-summary {    background-color: #fef2f2;    border-left: 4px solid #dc2626;    padding: 16px;    border-radius: 6px;    margin-bottom: 24px;    display: flex;    gap: 12px;    animation: errorSlideIn 0.3s ease-out;}@keyframes errorSlideIn {    from {        opacity: 0;        transform: translateY(-10px);    }    to {        opacity: 1;        transform: translateY(0);    }}.fte-error-summary-icon {    color: #dc2626;    font-size: 24px;    flex-shrink: 0;}.fte-error-summary-content {    flex: 1;}.fte-error-summary-content strong {    color: #991b1b;    display: block;    margin-bottom: 8px;}.fte-error-list {    margin: 0;    padding-left: 20px;    list-style-type: disc;}.fte-error-list li {    color: #7f1d1d;    margin-bottom: 6px;    line-height: 1.5;}.fte-error-list li:last-child {    margin-bottom: 0;}.fte-error-list li strong {    color: #991b1b;    display: inline;    margin: 0;}/* Field-level error */.fte-field-error {    border-color: #dc2626 !important;}.fte-error-message {    color: #dc2626;    font-size: 12px;    margin-top: 4px;    display: block;}.fte-success {    background-color: #f0fdf4;    border: 1px solid #bbf7d0;    color: #166534;    padding: 12px 16px;    border-radius: 6px;    margin-bottom: 16px;}/* =============================================================================   LOADING SPINNER   ============================================================================= */.fte-loading {    display: inline-block;    width: 20px;    height: 20px;    border: 3px solid rgba(255, 255, 255, 0.3);    border-top-color: white;    border-radius: 50%;    animation: fte-spin 0.8s linear infinite;}@keyframes fte-spin {    to { transform: rotate(360deg); }}.fte-loading-overlay {    position: absolute;    top: 0;    left: 0;    right: 0;    bottom: 0;    background-color: rgba(255, 255, 255, 0.8);    display: flex;    align-items: center;    justify-content: center;    z-index: 10;}/* =============================================================================   RESPONSIVE ADJUSTMENTS   ============================================================================= */@media (max-width: 768px) {    .fte-modal {        max-width: 100%;        max-height: 100vh;        border-radius: 0;    }        .fte-modal-header,    .fte-modal-body,    .fte-modal-footer {        padding: 16px;    }        .fte-inline-form {        padding: 16px;    }        .fte-row {        gap: 12px;    }        .fte-sticky-fields {        flex-direction: column;        gap: 8px;    }}/* =============================================================================   UTILITY CLASSES   ============================================================================= */.fte-hidden {    display: none !important;}/* =============================================================================   HTML ESTÁTICO  (asStaticHtml)   Bloques de solo lectura / separadores dentro del formulario del editor   ============================================================================= */.fte-html-static {    padding: 4px 2px;    color: #444;    font-size: 12px;    line-height: 1.5;}/* Separador horizontal dentro del formulario */.fte-html-static hr {    margin: 4px 0 6px;    border: none;    border-top: 1px solid #d8dee6;}/* Títulos de sección */.fte-html-static strong,.fte-html-static b {    font-size: 11.5px;    color: #2a6099;    text-transform: uppercase;    letter-spacing: .03em;}/* Avisos / alertas inline */.fte-html-static .alert {    padding: 4px 8px;    margin: 2px 0;    font-size: 11.5px;    border-radius: 4px;}/* =============================================================================   PANEL SUPERIOR (above-tabs): campos comunes visibles encima de los tabs   ============================================================================= */.fte-above-tabs {    background: linear-gradient(135deg, #f0f5fb 0%, #e8f0f9 100%);    border: 1px solid #c5d8ef;    border-bottom: 2px solid #3d7ab5;    border-radius: 6px 6px 0 0;    padding: 10px 14px 8px;    margin-bottom: 0;        /* Se pega visualmente a la barra de tabs */    position: relative;}/* Pequeña etiqueta descriptiva en la esquina */.fte-above-tabs::before {    content: 'Datos del registro';    position: absolute;    top: -9px;    left: 12px;    background: #3d7ab5;    color: #fff;    font-size: 10px;    font-weight: 600;    padding: 1px 8px;    border-radius: 3px;    letter-spacing: .04em;    text-transform: uppercase;}.fte-above-tabs .fte-row {    margin: 0 -6px;}.fte-above-tabs .fte-col {    padding: 0 6px;}/* Labels más compactos dentro del panel superior */.fte-above-tabs .fte-field-group label {    font-size: 10.5px;    font-weight: 600;    color: #4a6a8a;    margin-bottom: 2px;    text-transform: uppercase;    letter-spacing: .03em;}/* Inputs del panel superior con acento de color */.fte-above-tabs .fte-field-group .form-control {    border-color: #aac5e0;    background: #fff;    font-size: 12px;    height: 28px;    padding: 2px 7px;    box-shadow: none;}.fte-above-tabs .fte-field-group .form-control:focus {    border-color: #3d7ab5;    box-shadow: 0 0 0 2px rgba(61,122,181,.15);}.fte-above-tabs .fte-field-group {    margin-bottom: 2px;}/* Cuando los tabs van justo debajo, ajustar el borde de las tab-headers */.fte-above-tabs + .fte-tabs .fte-tab-headers {    border-top: none;    border-radius: 0;    background: #dde8f4;}.fte-above-tabs + .fte-tabs .fte-tab-header {    border-top: none;    border-radius: 0;}.fte-above-tabs + .fte-tabs .fte-tab-header.fte-tab-active {    background: #fff;    border-top: 2px solid #3d7ab5;    margin-top: -2px;}