:root {
    --sidebar-bg: #060E1A;
    --sidebar-hover: rgba(46,80,144,0.08);
    --sidebar-active: rgba(46,80,144,0.14);
    --bg: #070d18;
    --bg-card: rgba(19,43,79,0.35);
    --bg-card-solid: #0c1a2e;
    --border: rgba(46,80,144,0.1);
    --border-light: rgba(255,255,255,0.06);
    --gold: #2E5090;
    --gold-light: #4A7BC8;
    --gold-dim: rgba(46,80,144,0.15);
    --green: #34D399;
    --green-dim: rgba(52,211,153,0.12);
    --blue: #2E86AB;
    --blue-dim: rgba(46,134,171,0.12);
    --cyan: #22D3EE;
    --cyan-dim: rgba(34,211,238,0.12);
    --red: #F87171;
    --red-dim: rgba(248,113,113,0.12);
    --orange: #FB923C;
    --orange-dim: rgba(251,146,60,0.12);
    --purple: #A78BFA;
    --purple-dim: rgba(167,139,250,0.12);
    --text: #E2E8F0;
    --text-muted: #64748B;
    --text-dim: #475569;
    --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
}

/* Reset y base oscura */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background:
        radial-gradient(circle at 15% 20%, rgba(46,80,144,0.12) 0 1px, transparent 2px),
        radial-gradient(circle at 85% 15%, rgba(46,80,144,0.18) 0 1px, transparent 2px),
        radial-gradient(circle at 12% 75%, rgba(96,165,250,0.1) 0 1px, transparent 2px),
        radial-gradient(circle at 88% 72%, rgba(46,80,144,0.14) 0 1px, transparent 2px),
        linear-gradient(145deg, #040a14 0%, #0B1426 50%, #12203d 100%);
    background-size: 200% 200%;
    animation: bgShift 12s ease-in-out infinite alternate;
    color: var(--text);
    overflow-x: hidden;
    min-height: 100vh;
}

/* Fondo ambiental con efecto de profundidad */
body::before {
    content: '';
    position: fixed;
    inset: auto 0 0 0;
    height: 45vh;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(6px 6px at 8% 12%, rgba(46,80,144,0.5), transparent),
        radial-gradient(4px 4px at 20% 28%, rgba(46,80,144,0.3), transparent),
        radial-gradient(8px 8px at 35% 8%, rgba(96,165,250,0.35), transparent),
        radial-gradient(3px 3px at 48% 22%, rgba(46,80,144,0.3), transparent),
        radial-gradient(7px 7px at 60% 5%, rgba(46,80,144,0.45), transparent),
        radial-gradient(4px 4px at 72% 18%, rgba(96,165,250,0.3), transparent),
        radial-gradient(5px 5px at 85% 10%, rgba(46,80,144,0.4), transparent),
        radial-gradient(3px 3px at 92% 25%, rgba(46,80,144,0.25), transparent),
        radial-gradient(6px 6px at 15% 38%, rgba(46,80,144,0.3), transparent),
        radial-gradient(4px 4px at 42% 32%, rgba(46,80,144,0.2), transparent),
        radial-gradient(5px 5px at 55% 35%, rgba(96,165,250,0.25), transparent),
        radial-gradient(3px 3px at 70% 42%, rgba(46,80,144,0.2), transparent),
        radial-gradient(7px 7px at 30% 50%, rgba(46,80,144,0.3), transparent),
        radial-gradient(4px 4px at 88% 48%, rgba(46,80,144,0.25), transparent),
        radial-gradient(5px 5px at 50% 55%, rgba(96,165,250,0.2), transparent),
        radial-gradient(3px 3px at 10% 60%, rgba(46,80,144,0.2), transparent),
        radial-gradient(6px 6px at 78% 55%, rgba(46,80,144,0.3), transparent),
        radial-gradient(4px 4px at 25% 70%, rgba(46,80,144,0.2), transparent),
        radial-gradient(5px 5px at 62% 68%, rgba(96,165,250,0.2), transparent),
        radial-gradient(8px 8px at 45% 78%, rgba(46,80,144,0.3), transparent),
        radial-gradient(3px 3px at 90% 72%, rgba(46,80,144,0.2), transparent),
        linear-gradient(45deg, transparent 43%, rgba(46,80,144,0.35) 43%, rgba(46,80,144,0.35) 57%, transparent 57%) no-repeat 14% 22% / 8px 8px,
        linear-gradient(45deg, transparent 43%, rgba(96,165,250,0.3) 43%, rgba(96,165,250,0.3) 57%, transparent 57%) no-repeat 33% 15% / 10px 10px,
        linear-gradient(45deg, transparent 43%, rgba(46,80,144,0.3) 43%, rgba(46,80,144,0.3) 57%, transparent 57%) no-repeat 68% 38% / 7px 7px,
        linear-gradient(45deg, transparent 43%, rgba(46,80,144,0.25) 43%, rgba(46,80,144,0.25) 57%, transparent 57%) no-repeat 50% 10% / 11px 11px,
        linear-gradient(45deg, transparent 43%, rgba(96,165,250,0.25) 43%, rgba(96,165,250,0.25) 57%, transparent 57%) no-repeat 82% 48% / 9px 9px,
        linear-gradient(45deg, transparent 43%, rgba(46,80,144,0.3) 43%, rgba(46,80,144,0.3) 57%, transparent 57%) no-repeat 5% 50% / 8px 8px,
        linear-gradient(45deg, transparent 43%, rgba(46,80,144,0.2) 43%, rgba(46,80,144,0.2) 57%, transparent 57%) no-repeat 40% 62% / 10px 10px,
        linear-gradient(45deg, transparent 43%, rgba(96,165,250,0.2) 43%, rgba(96,165,250,0.2) 57%, transparent 57%) no-repeat 75% 75% / 7px 7px,
        linear-gradient(45deg, transparent 43%, rgba(46,80,144,0.25) 43%, rgba(46,80,144,0.25) 57%, transparent 57%) no-repeat 20% 80% / 9px 9px,
        linear-gradient(45deg, transparent 43%, rgba(46,80,144,0.2) 43%, rgba(46,80,144,0.2) 57%, transparent 57%) no-repeat 95% 65% / 8px 8px;
}

body::after {
    content: '';
    position: fixed;
    inset: auto 0 0 0;
    height: 45vh;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse at 50% 70%, rgba(46,80,144,0.04), transparent 50%),
        linear-gradient(135deg, transparent 42%, rgba(46,80,144,0.04) 42%, rgba(46,80,144,0.04) 44%, transparent 44%) no-repeat 15% 15% / 120px 120px,
        linear-gradient(-135deg, transparent 42%, rgba(46,80,144,0.04) 42%, rgba(46,80,144,0.04) 44%, transparent 44%) no-repeat 15% 15% / 120px 120px,
        linear-gradient(135deg, transparent 42%, rgba(96,165,250,0.035) 42%, rgba(96,165,250,0.035) 44%, transparent 44%) no-repeat 72% 22% / 160px 160px,
        linear-gradient(-135deg, transparent 42%, rgba(96,165,250,0.035) 42%, rgba(96,165,250,0.035) 44%, transparent 44%) no-repeat 72% 22% / 160px 160px,
        linear-gradient(135deg, transparent 42%, rgba(46,80,144,0.03) 42%, rgba(46,80,144,0.03) 44%, transparent 44%) no-repeat 32% 55% / 90px 90px,
        linear-gradient(-135deg, transparent 42%, rgba(46,80,144,0.03) 42%, rgba(46,80,144,0.03) 44%, transparent 44%) no-repeat 32% 55% / 90px 90px,
        linear-gradient(135deg, transparent 46%, rgba(46,80,144,0.025) 46%, rgba(46,80,144,0.025) 48%, transparent 48%) no-repeat 5% 35% / 70px 70px,
        linear-gradient(-135deg, transparent 46%, rgba(46,80,144,0.025) 46%, rgba(46,80,144,0.025) 48%, transparent 48%) no-repeat 5% 35% / 70px 70px,
        linear-gradient(135deg, transparent 46%, rgba(96,165,250,0.02) 46%, rgba(96,165,250,0.02) 48%, transparent 48%) no-repeat 88% 60% / 85px 85px,
        linear-gradient(-135deg, transparent 46%, rgba(96,165,250,0.02) 46%, rgba(96,165,250,0.02) 48%, transparent 48%) no-repeat 88% 60% / 85px 85px,
        linear-gradient(135deg, transparent 46%, rgba(46,80,144,0.02) 46%, rgba(46,80,144,0.02) 48%, transparent 48%) no-repeat 55% 82% / 55px 55px,
        linear-gradient(-135deg, transparent 46%, rgba(46,80,144,0.02) 46%, rgba(46,80,144,0.02) 48%, transparent 48%) no-repeat 55% 82% / 55px 55px;
}

/* Contenedor principal */
.main-container {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid var(--border-light);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    margin: 2rem auto;
    max-width: 1200px;
    position: relative;
    z-index: 1;
}

/* Header Moderno - Estilo Corporativo Oscuro */
.header-modern {
    background: linear-gradient(135deg, #0a1220 0%, #0a1a2f 100%);
    border-bottom: 1px solid var(--gold-dim);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    padding: 1rem 1.5rem;
    color: var(--text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

#headerIcon{
    width:56px;height:56px;
    border-radius:18px;
    background:linear-gradient(145deg, rgba(46,80,144,0.2), rgba(255,255,255,0.03));
    border:1px solid rgba(46,80,144,0.22);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), var(--shadow-md);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size:1.45rem !important;
    color:var(--gold-light) !important;
    margin-right:16px !important;
}

.header-modern .btn-exit {
    background: rgba(46, 80, 144, 0.1);
    border: 1px solid var(--gold-dim);
    color: var(--gold-light);
    border-radius: 12px;
    padding: 8px 20px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.header-modern .btn-exit:hover {
    background: var(--gold-dim);
    color: var(--gold);
    border-color: var(--gold);
    transform: translateY(-2px);
}

/* ===== ESTILOS MODERNOS PARA FORMULARIO ===== */

/* Contenedor principal del formulario */
.form-container {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 2rem;
    margin: 1rem 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-light);
}

/* Grid moderno para formulario */
.form-grid-moderno {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    padding: 1rem;
}

/* Grupo de formulario moderno */
.form-group-moderno {
    position: relative;
    margin-bottom: 1.5rem;
    background: var(--bg-card-solid);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 3px solid var(--gold);
}

.form-group-moderno:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border-left: 3px solid var(--gold-light);
}

/* Etiquetas modernas */
.form-label-moderno {
    display: flex;
    align-items: center;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #ffffff;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 0 10px rgba(46, 80, 144, 0.3);
}

.form-label-moderno::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 16px;
    background: var(--gold);
    margin-right: 10px;
    border-radius: 2px;
}

.form-label-moderno.required::after {
    content: ' *';
    color: var(--red);
    margin-left: 4px;
}

/* Campos de entrada modernos */
.form-control-moderno {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: rgba(11, 20, 38, 0.8);
    color: var(--text);
}

.form-control-moderno:focus {
    outline: none;
    border-color: var(--gold);
    background: #0a1220;
    box-shadow: 0 0 0 3px var(--gold-dim);
    transform: translateY(-1px);
}

.form-control-moderno::placeholder {
    color: var(--text-dim);
    font-style: italic;
}

/* Select moderno */
.form-select-moderno {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    font-size: 0.9rem;
    background: rgba(11, 20, 38, 0.8) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23C9A84C' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") no-repeat right 12px center;
    background-size: 16px;
    appearance: none;
    transition: all 0.3s ease;
    color: var(--text);
}

.form-select-moderno:focus {
    outline: none;
    border-color: var(--gold);
    background-color: #0a1220;
    box-shadow: 0 0 0 3px var(--gold-dim);
}

/* Checkbox y Radio modernos */
.form-check-moderno {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.form-check-input-moderno {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    border: 2px solid var(--border-light);
    border-radius: 5px;
    transition: all 0.3s ease;
    position: relative;
    background: rgba(11, 20, 38, 0.8);
}

.form-check-input-moderno:checked {
    background-color: var(--gold);
    border-color: var(--gold);
}

.form-check-input-moderno[type="radio"] {
    border-radius: 50%;
}

.form-check-input-moderno[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #0B1426;
    border-radius: 50%;
}

.form-check-label-moderno {
    margin-bottom: 0;
    color: var(--text-muted);
    font-weight: 500;
}

/* Range moderno */
.form-range-moderno {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--border-light);
    outline: none;
    margin: 1rem 0;
}

.form-range-moderno::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gold);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(46, 80, 144, 0.4);
    transition: all 0.3s ease;
}

.form-range-moderno::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(46, 80, 144, 0.6);
}

/* Output del range */
.range-output {
    display: inline-block;
    padding: 4px 12px;
    background: var(--gold);
    color: #0B1426;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: 10px;
}

/* File input moderno */
.form-file-moderno {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}

.form-file-input-moderno {
    position: absolute;
    left: -9999px;
}

.form-file-label-moderno {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 20px;
    background: rgba(11, 20, 38, 0.8);
    border: 2px dashed var(--gold-dim);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--gold-light);
    font-weight: 600;
}

.form-file-label-moderno:hover {
    border-color: var(--gold);
    background: var(--gold-dim);
    color: #ffffff;
}

.form-file-label-moderno .file-icon {
    font-size: 1.5rem;
    color: var(--gold);
}

.form-file-browse {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--gold);
    color: #0B1426;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.form-file-browse:hover {
    background: var(--gold-light);
    transform: translateY(-1px);
}

.file-selected-name {
    display: block;
    margin-top: 10px;
    padding: 10px 14px;
    background: var(--bg-card-solid);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 500;
    border-left: 3px solid var(--gold);
    word-break: break-all;
}

.file-input-container {
    position: relative;
}

.file-input-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    background: var(--bg-card-solid);
    border: 2px dashed var(--gold-dim);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--gold-light);
    font-weight: 600;
}

.file-input-label:hover {
    border-color: var(--gold);
    background: var(--gold-dim);
    color: #ffffff;
}

.file-input-label i {
    font-size: 1.5rem;
    color: var(--gold);
}

.file-label-text {
    font-size: 0.95rem;
}

.file-browse-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--gold);
    color: #0B1426;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.file-input-label:hover .file-browse-text {
    background: var(--gold-light);
}

.file-placeholder {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.file-placeholder i {
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--gold);
    opacity: 0.5;
}

.file-placeholder p {
    margin: 0;
    color: var(--text-muted);
    font-weight: 500;
}

.file-preview {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-card-solid);
    border-radius: 10px;
    border-left: 3px solid var(--gold);
}

.file-preview img {
    max-width: 100%;
    max-height: 150px;
    border-radius: 8px;
    object-fit: contain;
}

/* Botones modernos - Estilo corporativo con dorado */
.btn-moderno {
    padding: 12px 30px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
}

.btn-moderno::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

.btn-moderno:hover::before {
    left: 100%;
}

.btn-primary-moderno {
    background: linear-gradient(135deg, var(--gold) 0%, #1E3A5F 100%);
    color: #0B1426;
    box-shadow: 0 4px 15px rgba(46, 80, 144, 0.3);
}

.btn-primary-moderno:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(46, 80, 144, 0.5);
    color: #0B1426;
}

.btn-secondary-moderno {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    color: var(--text);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-light);
}

.btn-secondary-moderno:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    color: var(--gold-light);
}

/* Iconos en botones */
.btn-icon {
    margin-right: 8px;
    font-size: 1.1em;
}

/* Tooltips modernos */
.tooltip-moderno .tooltip-inner {
    background: linear-gradient(135deg, #1a2a45 0%, #0f1d35 100%);
    color: #ffffff;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(46, 80, 144, 0.15);
    border: 1px solid var(--gold);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.tooltip-moderno .tooltip-arrow::before {
    border-top-color: var(--gold);
}

/* Tooltip del formulario */
.field-tooltip {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    background: var(--bg-card-solid);
    border-radius: 8px;
    cursor: help;
    transition: all 0.3s ease;
    border: 1px solid var(--border-light);
}

.field-tooltip i {
    color: var(--gold);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.field-tooltip .tooltip-text {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-style: italic;
    line-height: 1.3;
}

.field-tooltip:hover {
    background: var(--gold-dim);
    border-color: var(--gold-dim);
}

.field-tooltip:hover i {
    color: var(--gold-light);
}

.field-tooltip:hover .tooltip-text {
    color: var(--gold-light);
}

/* Tooltip activo */
.field-tooltip.active {
    background: var(--gold-dim);
    border-color: var(--gold);
    transform: translateX(5px);
}

.field-tooltip.active i {
    color: var(--gold);
    animation: pulse-tooltip 1s infinite;
}

@keyframes pulse-tooltip {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Validación moderna */
.error-message {
    display: block;
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(220,38,38,0.12);
    color: #FCA5A5;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    border-left: 3px solid #EF4444;
    line-height: 1.3;
}

.error-message i {
    margin-right: 6px;
    font-size: 0.85rem;
}

.form-group-moderno.invalid .form-control-moderno,
.form-group-moderno.invalid .form-select-moderno {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 2px rgba(239,68,68,0.2) !important;
}

.invalid-feedback-moderno {
    display: block;
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--red-dim);
    color: var(--red);
    border-radius: 8px;
    font-size: 0.85rem;
    border-left: 3px solid var(--red);
}

.is-invalid-moderno {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 3px var(--red-dim) !important;
}

/* Estados de campos */
.field-status {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    font-size: 1rem;
}

.field-valid {
    color: var(--green);
}

.field-invalid {
    color: var(--red);
}

/* Animaciones */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-group-moderno {
    animation: slideIn 0.5s ease forwards;
}

/* Efectos de profundidad */
.card-form-moderno {
    background: var(--bg-card);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-light);
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.card-header-moderno {
    background: linear-gradient(135deg, #0a1220 0%, #0a1a2f 100%);
    color: var(--gold-light);
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--gold-dim);
}

.card-header-moderno h2 {
    margin: 0;
    font-weight: 700;
    font-size: 1.3rem;
    font-family: 'Montserrat', sans-serif;
}

/* Responsive design mejorado */
@media (max-width: 768px) {
    .form-grid-moderno {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0.5rem;
    }

    .form-group-moderno {
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .form-container {
        padding: 1rem;
        margin: 0.5rem;
    }

    .btn-moderno {
        width: 100%;
        margin-bottom: 1rem;
    }
}

/* Modo oscuro (por defecto ya es oscuro) */
@media (prefers-color-scheme: light) {
    .form-group-moderno {
        background: var(--bg-card-solid);
    }

    .form-control-moderno {
        background: rgba(11, 20, 38, 0.9);
    }
}

/* Efectos de carga */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--border-light);
    border-top: 3px solid var(--gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

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

    100% {
        transform: rotate(360deg);
    }
}

/* ===== ESTILOS PARA ELEMENTOS DINÁMICOS ===== */

/* Notificaciones */
.notifications-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1060;
    max-width: 400px;
}

.notification-moderno {
    background: var(--bg-card-solid);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-left: 4px solid var(--gold);
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-light);
}

.notification-moderno.show {
    transform: translateX(0);
    opacity: 1;
}

.notification-content {
    display: flex;
    align-items: center;
    flex: 1;
}

.notification-content i {
    margin-right: 12px;
    font-size: 1.2rem;
}

.notification-success {
    border-left-color: var(--green);
}

.notification-error {
    border-left-color: var(--red);
}

.notification-warning {
    border-left-color: var(--orange);
}

.notification-info {
    border-left-color: var(--blue);
}

.notification-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    margin-left: 10px;
    border-radius: 4px;
    transition: all 0.2s;
}

.notification-close:hover {
    background: var(--gold-dim);
    color: var(--gold);
}

/* Loaders */
.table-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(11, 20, 38, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 8px;
}

.loader-content {
    text-align: center;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-light);
    border-top: 4px solid var(--gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 10px;
}

.loader-content p {
    margin: 0;
    color: var(--text-muted);
    font-weight: 500;
}

/* Modal de confirmación */
.modal-confirmacion-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1070;
    opacity: 0;
    transition: opacity 0.3s;
}

.modal-confirmacion-overlay.show {
    opacity: 1;
}

.modal-confirmacion {
    background: var(--bg-card-solid);
    border-radius: 20px;
    padding: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border-light);
    transition: transform 0.3s;
}

.modal-confirmacion-overlay.show .modal-confirmacion {
    transform: scale(1);
}

.confirmacion-header {
    background: linear-gradient(135deg, #2d1a1a 0%, #3a1a1a 100%);
    padding: 20px;
    border-radius: 20px 20px 0 0;
    text-align: center;
    color: var(--red);
    border-bottom: 1px solid var(--red-dim);
}

.confirmacion-header i {
    font-size: 2rem;
    margin-bottom: 10px;
}

.confirmacion-header h4 {
    margin: 0;
    font-weight: 600;
    color: var(--red);
}

.confirmacion-body {
    padding: 20px;
    text-align: center;
}

.confirmacion-body p {
    margin: 0 0 10px;
    color: var(--text);
}

.confirmacion-actions {
    padding: 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Estados de la tabla */
.fila-registro {
    transition: all 0.2s;
}

.fila-registro:hover {
    background-color: rgba(46, 80, 144, 0.05);
}

.fila-registro.seleccionada {
    background-color: var(--gold-dim);
    border-left: 3px solid var(--gold);
}

.acciones-cell {
    min-width: 120px;
}

.acciones-group {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.btn-accion {
    background: none;
    border: none;
    padding: 6px;
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-accion:hover {
    background: var(--gold-dim);
    color: var(--gold);
}

.btn-ver:hover {
    color: var(--blue);
}

.btn-editar:hover {
    color: var(--green);
}

.btn-eliminar:hover {
    color: var(--red);
}

.btn-estado:hover {
    color: var(--gold);
}

/* Contador de registros */
.registros-counter {
    background: var(--bg-card);
    padding: 10px 15px;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.registros-counter i {
    margin-right: 8px;
    color: var(--gold);
}

/* Paginación moderna */
.pagination-info {
    padding: 10px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.pagination-controls {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.pagination-btn {
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    background: var(--bg-card-solid);
    color: var(--text);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 40px;
    text-align: center;
}

.pagination-btn:hover:not(.active) {
    background: var(--gold-dim);
    border-color: var(--gold);
    color: var(--gold);
}

.pagination-btn.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #0B1426;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Estados vacíos */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.empty-state i {
    margin-bottom: 15px;
    opacity: 0.5;
}

/* Animaciones */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOutDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(30px);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .notifications-container {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }

    .modal-confirmacion {
        width: 95%;
        margin: 20px;
    }

    .confirmacion-actions {
        flex-direction: column;
    }

    .pagination-controls {
        gap: 2px;
    }

    .pagination-btn {
        padding: 6px 8px;
        min-width: 35px;
        font-size: 0.85rem;
    }
}

/* ===== ESTILOS MODERNOS PARA MODAL DE DETALLES ===== */

.modal-moderno {
    border-radius: 24px;
    border: none;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
}

.modal-header-moderno {
    background: linear-gradient(135deg, #0a1220 0%, #0a1a2f 100%);
    color: var(--gold-light);
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--gold-dim);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Form header icon and title */
.form-icon {
    width: 60px;
    height: 60px;
    background: var(--gold-dim);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.form-icon i {
    font-size: 1.5rem;
    color: var(--gold);
}

.form-title {
    flex: 1;
}

.form-title h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
    text-shadow: 0 0 10px rgba(46, 80, 144, 0.3);
}

.form-title p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    font-weight: 500;
}

.form-title p .text-danger {
    color: #ff6b6b;
    font-weight: 700;
}

.modal-title-section {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.modal-title-section i {
    font-size: 2rem;
    margin-top: 5px;
    opacity: 0.9;
    color: var(--gold);
}

.modal-title {
    font-weight: 700;
    margin-bottom: 5px;
    font-family: 'Montserrat', sans-serif;
}

.modal-subtitle {
    opacity: 0.7;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.modal-actions {
    display: flex;
    gap: 10px;
}

.btn-modal {
    background: rgba(46, 80, 144, 0.1);
    border: 1px solid var(--gold-dim);
    color: var(--gold-light);
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-modal:hover {
    background: var(--gold-dim);
    color: var(--gold);
    transform: translateY(-2px);
}

.modal-body-moderno {
    padding: 0;
    background: var(--bg);
    max-height: 70vh;
    overflow-y: auto;
}

.details-container-moderno {
    padding: 2rem;
}

.details-summary-moderno {
    background: var(--bg-card-solid);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-left: 3px solid var(--gold);
}

.summary-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.summary-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--gold) 0%, #1E3A5F 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #0B1426;
}

.summary-info {
    flex: 1;
}

.summary-info h4 {
    margin: 0 0 5px;
    color: var(--gold-light);
    font-weight: 700;
}

.summary-info p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.summary-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-primary {
    background: var(--gold-dim);
    color: var(--gold);
}

.badge-success {
    background: var(--green-dim);
    color: var(--green);
}

.badge-secondary {
    background: var(--text-dim);
    color: var(--text);
}

.details-grid-moderno {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.details-section {
    background: var(--bg-card-solid);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-light);
}

.section-title {
    background: linear-gradient(135deg, #0a1220 0%, #0f1a2a 100%);
    padding: 1rem 1.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    border-bottom: 1px solid var(--gold-dim);
    display: flex;
    align-items: center;
    text-shadow: 0 0 10px rgba(46, 80, 144, 0.3);
}

.section-title i {
    color: var(--gold);
    margin-right: 10px;
}

.section-content {
    padding: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.detail-item-moderno {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 1rem;
    background: rgba(11, 20, 38, 0.5);
    border-radius: 12px;
    transition: all 0.3s ease;
    border-left: 3px solid var(--gold);
}

.detail-item-moderno:hover {
    background: var(--gold-dim);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.detail-item-moderno.fecha {
    border-left-color: var(--green);
}

.detail-item-moderno.email {
    border-left-color: var(--orange);
}

.detail-item-moderno.seleccion {
    border-left-color: var(--purple);
}

.detail-item-moderno.opcion {
    border-left-color: var(--cyan);
}

.detail-item-moderno.archivo {
    border-left-color: var(--red);
}

.detail-item-moderno.seguro {
    border-left-color: var(--red);
}

.detail-item-moderno.telefono {
    border-left-color: var(--blue);
}

.detail-item-moderno.numero {
    border-left-color: var(--cyan);
}

.detail-item-moderno.sistema {
    border-left-color: var(--text-muted);
    background: var(--bg-card);
}

.detail-label-moderno {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #ffffff;
    font-size: 0.9rem;
    text-shadow: 0 0 10px rgba(46, 80, 144, 0.3);
}

.detail-label-moderno i {
    color: var(--gold);
    width: 16px;
    text-align: center;
}

.detail-value-moderno {
    color: var(--text);
    word-break: break-word;
    font-size: 0.9rem;
    line-height: 1.5;
}

.email-link,
.phone-link {
    color: var(--blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

.email-link:hover,
.phone-link:hover {
    color: var(--gold);
    text-decoration: underline;
}

.file-display {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-card);
    border-radius: 8px;
    color: var(--text);
}

.system-section .section-title {
    background: linear-gradient(135deg, #0a1220 0%, #0f1a2a 100%);
}

.modal-footer-moderno {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--border-light);
    background: var(--bg-card-solid);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Scrollbar personalizado para el modal */
.modal-body-moderno::-webkit-scrollbar {
    width: 6px;
}

.modal-body-moderno::-webkit-scrollbar-track {
    background: var(--bg);
}

.modal-body-moderno::-webkit-scrollbar-thumb {
    background: var(--gold-dim);
    border-radius: 4px;
}

.modal-body-moderno::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

/* Responsive */
@media (max-width: 768px) {
    .modal-header-moderno {
        padding: 1rem;
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .modal-actions {
        align-self: flex-end;
    }

    .details-container-moderno {
        padding: 1rem;
    }

    .summary-header {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .section-content {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .modal-footer-moderno {
        padding: 1rem;
        flex-direction: column;
        gap: 10px;
    }

    .modal-footer-moderno .btn {
        width: 100%;
    }
}

/* Animaciones */
@keyframes slideInDetails {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.detail-item-moderno {
    animation: slideInDetails 0.5s ease forwards;
}

/* Retrasos escalonados para la animación */
.detail-item-moderno:nth-child(1) {
    animation-delay: 0.1s;
}

.detail-item-moderno:nth-child(2) {
    animation-delay: 0.2s;
}

.detail-item-moderno:nth-child(3) {
    animation-delay: 0.3s;
}

.detail-item-moderno:nth-child(4) {
    animation-delay: 0.4s;
}

.detail-item-moderno:nth-child(5) {
    animation-delay: 0.5s;
}

.modal-confirmacion {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-confirmacion.show {
    opacity: 1;
    visibility: visible;
}

.confirmacion-content {
    background: var(--bg-card-solid);
    padding: 2rem;
    border-radius: 20px;
    min-width: 400px;
    max-width: 90%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(-50px) scale(0.9);
    transition: transform 0.3s ease;
    position: relative;
    z-index: 10000;
    border: 1px solid var(--border-light);
}

.modal-confirmacion.show .confirmacion-content {
    transform: translateY(0) scale(1);
}

/* Asegurar que el body no tenga scroll cuando el modal esté abierto */
body.modal-open {
    overflow: hidden;
}

.notification-moderno {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--bg-card-solid);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10000;
    transform: translateX(150%);
    transition: transform 0.3s ease;
    border: 1px solid var(--border-light);
}

.notification-moderno.show {
    transform: translateX(0);
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notification-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 10px;
}

/* Colores para cada tipo */
.notification-success {
    border-left: 4px solid var(--green);
}

.notification-error {
    border-left: 4px solid var(--red);
}

.notification-warning {
    border-left: 4px solid var(--orange);
}

.notification-info {
    border-left: 4px solid var(--blue);
}

/* Estilos para el menú flotante */
.menu-flotante {
    background: var(--bg-card-solid);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    font-family: inherit;
    border: 1px solid var(--border-light);
    backdrop-filter: blur(10px);
}

.menu-flotante-content {
    padding: 5px 0;
}

.menu-flotante .menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 15px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    gap: 10px;
    color: var(--text-muted);
    transition: background-color 0.2s ease;
    font-size: 0.85rem;
    font-family: inherit;
}

.menu-flotante .menu-item:hover {
    background: var(--gold-dim);
    color: var(--gold);
}

.menu-flotante .menu-item i {
    width: 16px;
    text-align: center;
}

/* Colores específicos para cada acción */
.menu-flotante .btn-ver {
    color: var(--blue);
}

.menu-flotante .btn-editar {
    color: var(--green);
}

.menu-flotante .btn-eliminar {
    color: var(--red);
}

.menu-flotante .btn-ver:hover {
    background: var(--blue-dim);
}

.menu-flotante .btn-editar:hover {
    background: var(--green-dim);
}

.menu-flotante .btn-eliminar:hover {
    background: var(--red-dim);
}

/* El overlay transparente */
.menu-overlay {
    /* Los estilos se aplican via JavaScript */
}

.btn-menu {
    background: var(--bg-card-solid);
    border: 1px solid var(--border-light);
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.btn-menu:hover {
    background: var(--gold-dim);
    color: var(--gold);
    border-color: var(--gold);
}

td.acciones-cell {
    vertical-align: middle;
    text-align: center;
}

.btn-accion.btn-menu {
    margin: 0 auto;
}

.btn-menu {
    background: var(--bg-card-solid);
    border: 1px solid var(--border-light);
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    color: var(--gold);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.btn-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: left 0.5s ease;
}

.btn-menu:hover::before {
    left: 100%;
}

.btn-menu:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46, 80, 144, 0.2);
    color: var(--gold-light);
    border-color: var(--gold);
}

.btn-menu::after {
    content: "⌄";
    font-size: 12px;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.btn-menu.menu-abierto::after {
    transform: rotate(180deg);
}

/* ===== BOTONES DEL PANEL CENTRAL ===== */
.action-buttons-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.main-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid var(--border-light);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}

.main-action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.main-action-btn:hover::before {
    left: 100%;
}

.main-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.main-action-btn i {
    font-size: 0.95rem;
}

.btn-crear-nuevo {
    background: linear-gradient(135deg, var(--gold) 0%, #1E3A5F 100%);
    color: #0B1426;
    border-color: var(--gold);
    box-shadow: 0 4px 15px rgba(46, 80, 144, 0.3);
}

.btn-crear-nuevo:hover {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
    color: #0B1426;
    border-color: var(--gold-light);
    box-shadow: 0 8px 25px rgba(46, 80, 144, 0.5);
}

.btn-lista-info {
    background: linear-gradient(135deg, #0f1d35 0%, #1a2d47 100%);
    color: var(--text);
    border-color: var(--border-light);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.btn-lista-info:hover {
    background: linear-gradient(135deg, #162442 0%, #223a5c 100%);
    color: var(--gold-light);
    border-color: var(--gold-dim);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.btn-lista-info::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: 4px;
    transition: transform 0.3s ease;
}

.btn-lista-info.show::after {
    transform: rotate(180deg);
}

.btn-desplegar-info {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    color: var(--text);
    border-color: var(--border-light);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.btn-desplegar-info:hover {
    background: linear-gradient(135deg, #3d4f69 0%, #2a3a4d 100%);
    color: var(--gold-light);
    border-color: var(--gold-dim);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.btn-chat-ia {
    background: linear-gradient(135deg, #553c9a 0%, #6b46c1 100%);
    color: #fff;
    border-color: #7c3aed;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.btn-chat-ia:hover {
    background: linear-gradient(135deg, #6b46c1 0%, #805ad5 100%);
    border-color: #8b5cf6;
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.5);
    color: #fff;
}

.dropdown-menu-moderno {
    background: var(--bg-card-solid);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 8px 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px);
    min-width: 220px;
}

.dropdown-menu-moderno .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.dropdown-menu-moderno .dropdown-item:hover {
    background: var(--gold-dim);
    color: var(--gold);
    padding-left: 20px;
}

.dropdown-menu-moderno .dropdown-item i {
    width: 18px;
    text-align: center;
    color: var(--gold);
}

.dropdown-menu-moderno .dropdown-divider {
    margin: 6px 0;
    border-color: var(--border-light);
}

.search-group {
    display: flex;
    align-items: center;
    background: var(--bg-card-solid);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.search-group:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-dim);
}

.search-group .input-group-text {
    background: var(--bg-card);
    border: none;
    color: var(--gold);
    padding: 0 14px;
}

.search-group .form-control {
    background: transparent;
    border: none;
    color: var(--text);
    padding: 12px 14px;
    font-size: 0.9rem;
}

.search-group .form-control:focus {
    box-shadow: none;
    background: transparent;
}

.search-group .form-control::placeholder {
    color: var(--text-muted);
}

.search-group .btn {
    margin: 4px;
    border-radius: 8px;
}

.btn-buscar {
    background: linear-gradient(135deg, #0f1d35 0%, #1a2d47 100%);
    color: var(--text);
    border: 1px solid var(--border-light);
    padding: 8px 16px;
}

.btn-buscar:hover {
    background: var(--gold-dim);
    color: var(--gold);
    border-color: var(--gold-dim);
}

@media (max-width: 768px) {
    .action-buttons-container {
        width: 100%;
    }

    .main-action-btn {
        flex: 1;
        justify-content: center;
    }

    .btn-lista-info::after {
        margin-left: auto;
    }
}

/* ===== ESTILOS PARA IMPRESIÓN ===== */
@media print {
    .btn-print,
    .btn-back,
    .footer-report,
    .modal-footer-moderno,
    .modal-actions,
    .btn-close,
    .notifications-container,
    .menu-flotante,
    .menu-overlay {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    .main-container {
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
    }

    .modal-moderno {
        box-shadow: none !important;
        border: none !important;
    }

    .modal-body-moderno {
        max-height: none !important;
        overflow: visible !important;
    }

    .detail-item-moderno {
        break-inside: avoid;
    }
}

/* ============================================================
   LOGIN — LAYOUT / TEMA CLARO (unificado desde stylesLogin.css)
   Scoped bajo body.tf-login-page para no afectar al backoffice
   ============================================================ */
:root{
  --tf-green:#0b2418;--tf-green-2:#17452e;--tf-gold:#d9a83f;--tf-ink:#081a10;
  --tf-panel:#fbfaf7;--tf-line:#d2d0cc;
  --tf-accent:#00D4FF;--tf-accent-strong:#00A6E3;--tf-accent-soft:#A5F3FC;--tf-accent-deep:#07799A;
}
html,body{width:100%;height:100%;margin:0}
body.tf-login-page{min-height:100vh;overflow-x:hidden;overflow-y:auto;background:#031239;color:var(--tf-ink);font-family:"Poppins",Arial,sans-serif;-webkit-overflow-scrolling:touch}
body.tf-login-page::before,body.tf-login-page::after{display:none!important}

.tf-reference-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#031239}
.tf-reference-photo{position:absolute;inset:0;background:url("../logo/realestate-bg.webp") center center / cover no-repeat}
.tf-photo-shade{display:none!important}

/* ============================================================
   LAYOUT GENERAL — flex fila: izquierda y derecha PEGADAS
   ============================================================ */
.tf-reference-layout{position:relative;z-index:2;width:100%;min-height:100vh;display:flex;flex-direction:row;align-items:stretch;justify-content:flex-end;gap:0;padding:0;margin:0}

/* ============================================================
   PANEL DE MARCA (IZQUIERDA) — azul marino casi negro + neón
   ============================================================ */
.tf-brand-panel{
  position:relative;
  width:42%;
  min-height:100vh;
  display:flex;
  align-items:stretch;
  padding:5vh 3vw 7vh 6vw;
  background:transparent;
  z-index:5;
}
.tf-brand-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:560px;
  display:flex;
  flex-direction:column;
  gap:44px;
}

/* 1. Espacio reservado para el logotipo */
.tf-brand-logo-space{
  min-height:120px;
  width:100%;
  display:flex;
  align-items:center;
}
.tf-brand-logo{
  display:block;
  position:relative;
  top:1vh;
  width:min(400px,100%);
  max-width:100%;
  height:auto;
  margin:-2vh 0 0;
  filter:drop-shadow(0 8px 26px rgba(2,6,18,.85)) drop-shadow(0 0 34px rgba(0,212,255,.25));
}

/* 2. Eslogan en dos líneas */
.tf-brand-slogan{
  position:relative;
  top:-4%;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-family:"Poppins",Arial,sans-serif;
  font-size:clamp(26px,2.3vw,40px);
  line-height:1.34;
  letter-spacing:-.4px;
}
.tf-brand-slogan span{color:#FFFFFF;font-weight:300;text-shadow:0 2px 22px rgba(2,6,18,.9),0 1px 4px rgba(2,6,18,.75)}
.tf-brand-slogan strong{color:#00D4FF;font-weight:600;text-shadow:0 0 26px rgba(0,212,255,.55),0 2px 18px rgba(2,6,18,.9)}

/* 3. Fila de 4 módulos con separadores — anclada abajo, centrada bajo la imagen 3D */
.tf-brand-modules{
  position:fixed;
  left:30%;
  bottom:2.5vh;
  transform:translateX(-50%);
  z-index:6;
  display:flex;
  align-items:flex-start;
  gap:4px;
  background:rgba(2,10,28,.14);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:8px 16px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  overflow:hidden;
  isolation:isolate;
  transition:transform .4s cubic-bezier(.2,.8,.25,1),
             background .4s ease;
  animation:tf-modulesIn .8s cubic-bezier(.2,.8,.25,1) .35s backwards;
}
/* Brillo superior tipo cristal */
.tf-brand-modules::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.07) 0%,transparent 45%,rgba(0,212,255,.05) 100%);
}
.tf-brand-modules:hover{
  transform:translateX(-50%) translateY(-4px);
  background:rgba(4,14,36,.20);
}
.tf-brand-module{
  position:relative;
  z-index:1;
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:5px;
  padding:0 13px;
  transition:transform .3s cubic-bezier(.2,.8,.25,1);
}
.tf-brand-module:hover{transform:translateY(-3px)}
.tf-brand-module:first-child{padding-left:0}
.tf-brand-module:last-child{padding-right:0}
.tf-brand-module + .tf-brand-module{border-left:1px solid rgba(255,255,255,.14)}
.tf-brand-module svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:#00D4FF;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(0,212,255,.5));
  transition:transform .3s cubic-bezier(.2,.8,.25,1),filter .3s ease;
}
.tf-brand-module:hover svg{
  transform:scale(1.15);
}
.tf-brand-module span{
  color:#FFFFFF;
  font-family:"Poppins",Arial,sans-serif;
  font-size:10px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.2px;
  text-shadow:0 1px 2px rgba(0,0,0,.95),0 4px 14px rgba(2,6,18,.95);
  transition:color .3s ease,text-shadow .3s ease;
}
.tf-brand-module:hover span{
  color:#A5F3FC;
}
/* Entrada: desenfoque + subida */
@keyframes tf-modulesIn{
  from{opacity:0;transform:translateX(-50%) translateY(28px) scale(.95);filter:blur(8px)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1);filter:blur(0)}
}
@media (prefers-reduced-motion:reduce){
  .tf-brand-modules,.tf-brand-module,.tf-brand-module svg,.tf-brand-module span{animation:none;transition:none}
  .tf-brand-modules:hover{transform:translateX(-50%)}
}

/* ============================================================
   PANEL DE LOGIN — alineado a la derecha sobre el fondo
   ============================================================ */
.tf-reference-login{
  position:relative;
  right:auto;
  top:auto;
  width:58%;
  height:auto;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0 6vw 0 0;
  z-index:10;
}
.tf-login-surface{
  position:relative;
  width:100%;
  max-width:540px;
  height:auto;
  margin:auto 0;
  padding:36px 46px 32px;
  border-radius:28px;
  transform:translateX(-3%);
  background:linear-gradient(155deg,rgba(20,48,98,.30) 0%,rgba(7,22,54,.20) 55%,rgba(14,38,80,.26) 100%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  backdrop-filter:blur(10px) saturate(120%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 34px 70px rgba(2,10,28,.55),0 8px 24px rgba(2,10,28,.35),
             inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 60px rgba(255,255,255,.05);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  overflow:hidden;
  transition:transform .45s ease,box-shadow .45s ease;
}
.tf-login-surface:hover{
  transform:translateX(-3%) translateY(-4px);
  box-shadow:0 42px 80px rgba(2,10,28,.6),0 10px 28px rgba(2,10,28,.4),
             inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 60px rgba(255,255,255,.07);
}
/* Brillo superior del cristal */
.tf-login-surface::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% -12%,rgba(255,255,255,.30),transparent 46%),
             linear-gradient(135deg,rgba(255,255,255,.16),transparent 40%,rgba(130,175,255,.10));
  z-index:0;
}
/* Siluetas arquitectónicas decorativas — se ocultan para un diseño limpio */
.tf-panel-architecture{
  display:none!important;
}
/* Acento superior — arista iluminada del cristal */
.tf-login-surface::after{
  content:"";
  position:absolute;
  top:0;left:16%;right:16%;
  height:3px;
  border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,transparent,var(--tf-accent) 22%,var(--tf-accent-soft) 50%,var(--tf-accent) 78%,transparent);
  box-shadow:0 0 14px rgba(74,222,128,.75);
  z-index:3;
  pointer-events:none;
}
/* Todos los hijos del surface van encima de pseudo-elementos */
.tf-login-surface>*:not(.tf-panel-architecture){position:relative;z-index:2}

/* --- 5.1 Logo (imagen TierraFirme): centrado --- */
.tf-panel-logo-wrap{
  position:relative;
  width:fit-content;
  max-width:100%;
  margin:0 auto 18px;
  display:flex;
  justify-content:center;
}
/* Halo #C1D8F8 contenido: resaltado del logo sin empañar el cristal */
.tf-panel-logo-wrap::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:132%;
  aspect-ratio:1.4/1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 45%,rgba(193,216,248,.38) 0%,rgba(193,216,248,.11) 42%,transparent 68%),
    radial-gradient(ellipse at center,rgba(255,255,255,.08) 0%,transparent 60%);
  filter:blur(7px);
  pointer-events:none;
  opacity:.75;
  transition:opacity .45s ease,filter .45s ease;
  animation:tfLogoHalo 6s ease-in-out infinite;
}
/* Al pasar el cursor sobre la tarjeta el halo gana cuerpo */
.tf-login-surface:hover .tf-panel-logo-wrap::before{
  opacity:.95;
  filter:blur(9px);
}
@keyframes tfLogoHalo{
  0%,100%{opacity:.65;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.9;transform:translate(-50%,-50%) scale(1.03)}
}
.tf-panel-logo{
  position:relative;
  display:block;
  width:185px;
  max-width:100%;
  height:auto;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  object-fit:contain;
  filter:brightness(1.15) saturate(1.12) drop-shadow(0 5px 12px rgba(0,0,0,.45)) drop-shadow(0 12px 22px rgba(0,0,0,.35));
  animation:tf-logoFloat 3.4s ease-in-out infinite;
  transition:filter .45s ease;
}
.tf-login-surface:hover .tf-panel-logo{
  filter:brightness(1.2) saturate(1.14) drop-shadow(0 5px 12px rgba(0,0,0,.45)) drop-shadow(0 12px 22px rgba(0,0,0,.35));
}
@keyframes tf-logoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}

/* --- 5.2 Badge "Sistema de administración" --- */
.tf-system-pill{
  box-sizing:border-box;
  align-self:center;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0 auto 14px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:rgba(226,236,252,.94);
  text-shadow:0 1px 8px rgba(0,0,0,.55),0 0 14px rgba(0,212,255,.28);
  font-family:Arial,sans-serif;
  font-size:11px;
  letter-spacing:2.4px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  overflow:hidden;
  text-align:center;
  text-transform:uppercase;
  box-shadow:none;
}

/* --- Contenedor del formulario --- */
.tf-form{
  position:relative;
  width:100%;
  max-width:100%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
}

/* --- 5.3/5.4 Campo Usuario / Contraseña --- */
#alertContainer{
  position:relative;
  z-index:20;
  width:100%;
  max-width:100%;
  margin:0 auto 14px;
}
/* Sin alerta no se reserva espacio (evita huecos fantasma) */
#alertContainer:empty{margin-bottom:0}
/* Alerta de login — cristal plano, minimal, sin rieles ni bordes decorativos */
#alertContainer .alert-custom{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  box-sizing:border-box;
  margin:0;
  padding:11px 36px 11px 13px;
  border-radius:14px;
  font-family:Arial,sans-serif;
  font-size:12.5px;
  line-height:1.35;
  background:linear-gradient(90deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.07) 55%,rgba(255,255,255,0) 100%);
  border:1px solid rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
  color:#f6f3ec;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
  box-shadow:0 10px 26px rgba(2,10,28,.26);
  overflow:hidden;
  animation:alertCustomIn .35s ease;
}
#alertContainer .alert-custom.alert-custom-hide{
  animation:alertCustomOut .3s ease forwards;
}
@keyframes alertCustomIn{
  from{opacity:0;transform:translateY(-10px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes alertCustomOut{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(-8px) scale(.98)}
}
/* Chip de ícono — círculo plano, sin líneas interiores */
#alertContainer .alert-custom-icon{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex-shrink:0;border-radius:50%;
  font-size:14px;
  background:rgba(255,255,255,.14);
}
#alertContainer .alert-custom .btn-close{
  position:absolute;top:50%;right:12px;transform:translateY(-50%);
  width:10px;height:10px;background-size:10px;opacity:.5
}
#alertContainer .alert-custom .btn-close:hover{opacity:.85}
#alertContainer .alert-custom-body{display:flex;flex-direction:column;min-width:0;flex:1}
#alertContainer .alert-custom-title{font-size:12.5px;font-weight:700;letter-spacing:.2px}
#alertContainer .alert-custom-message{font-size:11.5px;opacity:.85;word-break:break-word}
/* Sin barra de progreso: se oculta para evitar líneas extra */
#alertContainer .alert-custom .alert-custom-progress{display:none}

/* Éxito — efecto verde */
#alertContainer .alert-success{
  background:linear-gradient(90deg,rgba(52,211,153,.40) 0%,rgba(34,197,94,.16) 45%,rgba(34,197,94,0) 100%);
  border-color:rgba(255,255,255,.05);
  box-shadow:0 10px 26px rgba(2,10,28,.26),0 0 20px rgba(74,222,128,.16);
  animation:alertCustomIn .35s ease,tfGlowGreen .9s ease .05s both;
}
#alertContainer .alert-success .alert-custom-icon{background:rgba(74,222,128,.20);color:#4ade80}
#alertContainer .alert-success .alert-custom-title{color:#f0fdf4}
#alertContainer .alert-success .alert-custom-message{color:rgba(226,255,236,.9)}
@keyframes tfGlowGreen{
  0%{box-shadow:0 10px 26px rgba(2,10,28,.26),0 0 0 rgba(74,222,128,0)}
  35%{box-shadow:0 10px 26px rgba(2,10,28,.26),0 0 30px rgba(74,222,128,.5)}
  100%{box-shadow:0 10px 26px rgba(2,10,28,.26),0 0 20px rgba(74,222,128,.16)}
}

/* Error / peligro — efecto rojo */
#alertContainer .alert-error,
#alertContainer .alert-danger{
  background:linear-gradient(90deg,rgba(248,113,113,.40) 0%,rgba(239,68,68,.16) 45%,rgba(239,68,68,0) 100%);
  border-color:rgba(255,255,255,.05);
  box-shadow:0 10px 26px rgba(2,10,28,.26),0 0 20px rgba(248,113,113,.16);
  animation:alertCustomIn .35s ease,tfGlowRed .9s ease .05s both;
}
#alertContainer .alert-error .alert-custom-icon,
#alertContainer .alert-danger .alert-custom-icon{background:rgba(248,113,113,.20);color:#fca5a5}
#alertContainer .alert-error .alert-custom-title,
#alertContainer .alert-danger .alert-custom-title{color:#fef2f2}
#alertContainer .alert-error .alert-custom-message,
#alertContainer .alert-danger .alert-custom-message{color:rgba(254,226,226,.9)}
@keyframes tfGlowRed{
  0%{box-shadow:0 10px 26px rgba(2,10,28,.26),0 0 0 rgba(248,113,113,0)}
  35%{box-shadow:0 10px 26px rgba(2,10,28,.26),0 0 30px rgba(248,113,113,.5)}
  100%{box-shadow:0 10px 26px rgba(2,10,28,.26),0 0 20px rgba(248,113,113,.16)}
}

/* Otros tipos (fallback) */
#alertContainer .alert-warning{background:linear-gradient(90deg,rgba(251,191,36,.36) 0%,rgba(245,158,11,.14) 45%,rgba(245,158,11,0) 100%);border-color:rgba(255,255,255,.05)}
#alertContainer .alert-warning .alert-custom-icon{background:rgba(245,158,11,.18);color:#fbbf24}
#alertContainer .alert-info{background:linear-gradient(90deg,rgba(96,165,250,.36) 0%,rgba(59,130,246,.14) 45%,rgba(59,130,246,0) 100%);border-color:rgba(255,255,255,.05)}
#alertContainer .alert-info .alert-custom-icon{background:rgba(59,130,246,.18);color:#93c5fd}

/* Badge de empresa — ancho completo como el campo usuario, cristal translúcido
   para no resultar invasivo y con #companyName resaltado (acento del surface) */
.company-badge{
  position:relative;
  z-index:20;
  align-self:stretch;
  width:100%;
  box-sizing:border-box;
  display:block;
  margin:0 auto 14px;
  padding:8px 20px;
  min-height:40px;
  line-height:24px;
  border-radius:23px;
  border:1px solid rgba(255,255,255,.05);
  background:linear-gradient(90deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.07) 50%,rgba(255,255,255,0) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
  color:rgba(226,236,252,.95);
  font-size:15px;
  font-weight:700;
  letter-spacing:normal;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 1px 6px rgba(0,0,0,.45);
  box-shadow:0 10px 26px rgba(2,10,28,.22);
  animation:companyBadgeIn .45s ease both;
  transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.company-badge:hover{
  background:linear-gradient(90deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.11) 50%,rgba(255,255,255,.02) 100%);
  border-color:rgba(255,255,255,.09);
}
.company-badge i{
  position:relative;
  z-index:1;
  margin-right:8px;
  font-size:15px;
  color:var(--tf-accent-soft);
}
.company-badge span{
  position:relative;
  z-index:1;
  margin-right:4px;
  font-weight:700;
}
/* #companyName — negrita, tamaño destacado y familia heredada del surface */
#companyName{
  position:relative;
  z-index:1;
  font-family:"Poppins",Arial,sans-serif;
  color:#f2fdff;
  font-size:17px;
  font-weight:800;
  text-shadow:0 0 14px rgba(0,212,255,.55),0 1px 4px rgba(0,0,0,.5);
}
@keyframes companyBadgeIn{
  from{opacity:0;transform:translateY(-8px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.login-field{
  position:relative;
  width:100%;
  height:54px;
  display:flex;
  align-items:center;
  gap:0;
  margin-bottom:16px;
  border:1px solid rgba(255,255,255,.30);
  border-radius:29px;
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  overflow:hidden;
  box-shadow:0 4px 14px rgba(2,10,28,.28),inset 0 1px 0 rgba(255,255,255,.35);
  transition:border-color .25s,box-shadow .25s,transform .25s,background .25s;
}
.login-field:hover{
  background:rgba(255,255,255,.17);
  border-color:rgba(255,255,255,.45);
}
.login-field:focus-within{
  border-color:rgba(0,212,255,.9);
  background:rgba(255,255,255,.18);
  box-shadow:0 0 0 4px rgba(0,212,255,.22),0 12px 26px rgba(2,10,28,.34);
  transform:translateY(-2px);
}
/* Ícono: cuadrado translúcido, esquinas redondeadas */
.tf-input-icon{
  flex-shrink:0;
  width:44px;
  height:44px;
  margin-left:4px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,.16);
  color:#e7eefb;
  font-size:17px;
  transition:background .2s,color .2s,transform .2s;
}
.login-field:focus-within .tf-input-icon{
  background:linear-gradient(145deg,#67e8f9,#22d3ee);
  color:#10151f;
  transform:scale(1.06);
}
.field-stack{
  flex:1;
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 18px 0 14px;
  text-align:left;
}
.field-label{
  display:none;
}
.login-field .form-control{
   width:100%;
   height:100%;
   padding:0;
   border:0!important;
   outline:0!important;
   background:transparent!important;
   color:#ffffff;
   font-size:15px;
   font-weight:500;
   letter-spacing:.3px;
   box-shadow:none!important;
   /* Autofill: el relleno que Chrome fuerza con !important (UA) nunca llega
      a pintarse porque su cambio de color queda en una transicion infinita */
   transition:background-color 9999999s step-end,color 9999999s step-end;
}
.login-field .form-control::placeholder{color:rgba(226,236,252,.62);opacity:1}
.login-field .form-control:focus{
   border:0;
   outline:none;
   background:transparent;
   color:#ffffff;
   box-shadow:none;
}

/* --- Autofill: sin color solido ---
   1) El input se queda transparente (transicion infinita + -webkit-text-fill-color).
   2) El degradado llena toda la pilula .login-field (campo + badge) al autollenar,
      arrancando tras el cuadro del icono para no tocarlo. --- */
.login-field input.form-control:-webkit-autofill,
.login-field input.form-control:-webkit-autofill:hover,
.login-field input.form-control:-webkit-autofill:focus,
.login-field input.form-control:-webkit-autofill:active{
  -webkit-text-fill-color:#ffffff!important;
  caret-color:#00d4ff;
  background-color:transparent!important;
  background-image:none!important;
  transition:background-color 9999999s step-end,color 9999999s step-end;
}
.login-field:has(input.form-control:-webkit-autofill){
  background-image:linear-gradient(90deg,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,0) 46px,
    rgba(255,255,255,.20) 72px,
    rgba(255,255,255,.07) 58%,
    rgba(0,212,255,.13) 100%);
}
/* --- 5.4 Botón ojo mostrar contraseña --- */
.btn-toggle-password{
  position:relative;
  top:auto;
  right:auto;
  width:34px;
  height:34px;
  flex-shrink:0;
  margin-right:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:50%;
  background:transparent;
  color:rgba(226,236,252,.72);
  font-size:16px;
  cursor:pointer;
  transform:none;
  transition:color .2s,background .2s,transform .2s;
}
.btn-toggle-password:hover{color:#a5f3fc;background:rgba(255,255,255,.14);transform:scale(1.1)}

/* --- 5.5 Olvidaste tu contraseña --- */
.forgot-password{
  width:100%;
  margin:0 0 10px;
  text-align:right;
}
.forgot-password a{
  color:#67e8f9;
  text-decoration:none;
  font-family:Arial,sans-serif;
  font-size:13px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:5px;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
  transition:color .2s,text-shadow .2s,letter-spacing .2s;
}
.forgot-password a:hover{color:#cffafe;text-shadow:0 0 12px rgba(103,232,249,.8);letter-spacing:.4px}

/* --- Contador de intentos --- */
.attempts-counter{
  font-size:12px;
  margin-bottom:14px;
  text-align:center;
  color:#ffb4ab;
  padding:10px 12px;
  border:1px solid rgba(255,120,110,.35);
  border-radius:14px;
  background:rgba(180,30,30,.28);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  text-shadow:0 1px 6px rgba(0,0,0,.45);
}

/* --- 5.6 Botón "Ingresar al Sistema" --- */
.btn-login{
  position:relative;
  width:100%;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:0;
  border-radius:30px;
  color:#fff;
  background:linear-gradient(105deg,#37d2ff 0%,#1e9be8 28%,#155ecd 62%,#082a6e 100%);
  background-size:220% 100%;
  background-position:0% 50%;
  font-family:Arial,sans-serif;
  font-size:16px;
  font-weight:700;
  letter-spacing:.8px;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  cursor:pointer;
  overflow:hidden;
  border:1px solid rgba(0,212,255,.45);
  box-shadow:0 16px 34px rgba(2,10,28,.55),0 0 0 1px rgba(0,212,255,.12),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -12px 22px rgba(2,18,48,.35);
  transition:transform .22s ease,box-shadow .22s ease,background-position .5s ease,filter .22s ease,letter-spacing .22s ease;
  animation:tf-loginPulse 3.4s ease-in-out infinite;
}
.btn-login:hover{
  transform:translateY(-3px) scale(1.01);
  background-position:100% 50%;
  filter:brightness(1.08) saturate(1.1);
  letter-spacing:1px;
  animation:none;
  box-shadow:0 24px 44px rgba(2,10,28,.62),0 0 30px rgba(0,212,255,.55),0 0 0 1px rgba(0,212,255,.45),inset 0 1px 0 rgba(255,255,255,.55);
}
.btn-login:active{transform:translateY(1px) scale(.99);box-shadow:0 10px 18px rgba(2,10,28,.5),inset 0 2px 10px rgba(0,0,0,.4);filter:brightness(.95)}
.btn-login:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(0,212,255,.35),0 16px 34px rgba(2,10,28,.55)}
.btn-login:disabled{opacity:.6;cursor:not-allowed;animation:none;filter:grayscale(.4)}
.btn-login i{font-size:18px;transition:transform .25s ease}
.btn-login:hover i{transform:translateX(5px)}
.btn-shine{position:absolute;top:0;bottom:0;left:-40%;width:24%;transform:skewX(-22deg);background:rgba(255,255,255,.32);filter:blur(1px);animation:tf-shine 4.5s ease-in-out infinite}
@keyframes tf-shine{0%,50%{left:-40%;opacity:0}60%{opacity:.65}76%,100%{left:140%;opacity:0}}
@keyframes tf-loginPulse{
  0%,100%{box-shadow:0 16px 34px rgba(2,10,28,.55),0 0 0 1px rgba(0,212,255,.12),0 0 10px rgba(0,212,255,.22),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -12px 22px rgba(2,18,48,.35)}
  50%{box-shadow:0 16px 34px rgba(2,10,28,.55),0 0 0 1px rgba(0,212,255,.22),0 0 26px rgba(0,212,255,.5),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -12px 22px rgba(2,18,48,.35)}
}

/* --- 5.7 Separador decorativo con rombo --- */
.tf-divider{
  width:280px;
  height:20px;
  margin:20px auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
}
.tf-divider::before,.tf-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
}
.tf-divider-diamond{
  width:10px;
  height:10px;
  margin:0 12px;
  background:linear-gradient(145deg,#a5f3fc,#22d3ee);
  box-shadow:0 0 12px rgba(34,211,238,.85);
  transform:rotate(45deg);
  flex-shrink:0;
}

/* --- 5.8 Bloque "Acceso Seguro" --- */
.tf-security-note{
  width:100%;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.tf-security-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#0d1a14;
  background:linear-gradient(145deg,#67e8f9 0%,#22d3ee 60%,#0e7490 100%);
  box-shadow:0 7px 16px rgba(2,10,28,.45),0 0 14px rgba(34,211,238,.45);
  font-size:18px;
}
.tf-security-text{display:flex;flex-direction:column;gap:3px}
.tf-security-text strong{color:#f3f7ff;font-family:Arial,sans-serif;font-size:15px;font-weight:700;letter-spacing:.3px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.tf-security-text span{color:rgba(226,236,252,.75);font-family:Arial,sans-serif;font-size:13px;font-style:italic;text-shadow:0 1px 6px rgba(0,0,0,.45)}

/* --- 6. Footer fuera del panel --- */
.tf-footer{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:20px 0 0;
  color:rgba(226,236,252,.7);
  font-family:Arial,sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.6px;
  white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.tf-footer b{color:#67e8f9;font-weight:700}
.tf-footer i{position:relative;top:-1px;color:#67e8f9;font-size:9px}

.invalid-feedback{
  font-size:11px;
  margin:4px 0 0;
  text-align:left;
  color:#ff9d94;
  text-shadow:0 1px 5px rgba(0,0,0,.5);
}
.is-invalid{border-color:rgba(255,120,110,.9)!important}
.login-field:has(.is-invalid){border-color:rgba(255,120,110,.9)!important;box-shadow:0 0 0 3px rgba(255,90,80,.28),0 10px 22px rgba(2,10,28,.35)}

/* ============================================================
   RESPONSIVE (LOGIN) — organizado por puntos de quiebre
   Estrategia: la página crece con su contenido (min-height),
   nunca recorta contenido y los paneles se compactan cuando la
   ventana es pequeña en ancho o en alto (incluida orientación).
   ============================================================ */

/* --- Tablet / pantallas medianas: columna única centrada --- */
@media (max-width: 1100px) {
  .tf-login-page{overflow-y:auto}
  .tf-reference-layout{justify-content:center}
  .tf-brand-panel{display:none}
  .tf-reference-login{
    position:relative;right:auto;top:auto;bottom:auto;
    width:min(540px, calc(100vw - 32px));
    height:auto;
    margin:4vh auto;
    padding:0;
    align-self:center;
    justify-content:center;
    transform:none;
  }
  .tf-footer{margin:16px 0 0}
}

/* --- Móviles grandes / tablets pequeñas --- */
@media (max-width: 700px) {
  .tf-reference-login{width:calc(100vw - 20px);margin:12px auto;padding:0 10px}
  .tf-login-surface{max-width:480px;padding:30px 26px 22px;border-radius:20px;transform:translateX(-3%)}
  .tf-login-surface:hover{transform:translateX(-3%) translateY(-3px)}
  .tf-panel-logo{width:172px}
  .tf-system-pill{font-size:10px;letter-spacing:.5px}
  .login-field{height:54px;margin-bottom:16px}
  .tf-input-icon{width:44px;height:44px;border-radius:10px;font-size:18px}
  .btn-login{height:54px}
  .tf-divider{width:220px}
  .tf-footer{flex-wrap:wrap;gap:4px 10px;white-space:normal}
}

/* --- Teléfonos pequeños --- */
@media (max-width: 480px) {
  .tf-login-surface{max-width:100%;padding:26px 16px 18px;border-radius:18px}
  .tf-panel-logo{width:150px}
  .tf-system-pill{font-size:9px}
  .tf-divider{width:180px}
  .tf-security-text strong{font-size:14px}
  .tf-security-text span{font-size:12.5px}
}

/* --- Pantallas bajas (laptops, tablets horizontales) --- */
@media (max-height: 780px) {
  .tf-login-surface{padding-top:24px;padding-bottom:20px}
  .tf-panel-logo{width:150px;margin-bottom:6px}
  .tf-system-pill{margin-bottom:10px}
  .login-field{height:50px;margin-bottom:12px}
  .btn-login{height:50px}
  .tf-divider{margin:10px auto}
  .tf-security-note{margin:0;padding:0}
  .tf-security-icon{width:38px;height:38px;flex-basis:38px;font-size:16px}
  .tf-footer{margin:12px 0 0}
}