:root {
            --sistec-blue: #2d3691;
            --sistec-blue-dark: #20286f;
            --sistec-green: #179c49;
            --page-bg: #f4f7fb;
            --card-border: #e5e9f2;
            --text-main: #172033;
            --text-muted: #6b7280;
        }

        * {
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            margin: 0;
            color: var(--text-main);
            background:
                radial-gradient(circle at top left, rgba(45, 54, 145, .08), transparent 30%),
                radial-gradient(circle at bottom right, rgba(23, 156, 73, .08), transparent 30%),
                var(--page-bg);
        }

        .page-header {
            position: relative;
            overflow: hidden;
            color: #fff;
            background: linear-gradient(120deg, var(--sistec-blue) 0%, #3944aa 62%, var(--sistec-green) 150%);
            border-radius: 0 0 28px 28px;
            box-shadow: 0 12px 30px rgba(45, 54, 145, .14);
        }

        .page-header::after {
            content: "";
            position: absolute;
            width: 280px;
            height: 280px;
            right: -110px;
            top: -130px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .08);
        }

        .brand-mark {
            width: 44px;
            height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            background: rgba(255, 255, 255, .14);
            border: 1px solid rgba(255, 255, 255, .18);
        }

        .brand-logo-wrap {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 72px;
            padding: .7rem 1rem;
            border-radius: 16px;
            background: rgba(255, 255, 255, .97);
            box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
        }

        .brand-logo {
            display: block;
            width: min(240px, 62vw);
            max-height: 58px;
            object-fit: contain;
        }

        .ticket-card {
            overflow: hidden;
            border: 1px solid var(--card-border);
            border-radius: 22px;
            background: rgba(255, 255, 255, .98);
            box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
        }

        .ticket-card::before {
            content: "";
            display: block;
            height: 4px;
            background: linear-gradient(90deg, var(--sistec-blue), var(--sistec-green));
        }

        .section-title {
            display: flex;
            align-items: center;
            gap: .7rem;
            margin-bottom: 1rem;
            color: var(--sistec-blue);
            font-weight: 700;
        }

        .section-icon {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            color: var(--sistec-blue);
            background: rgba(45, 54, 145, .08);
        }

        .form-label {
            font-weight: 600;
            color: #263044;
        }

        .required-mark {
            color: #dc3545;
        }

        .helper-text {
            color: var(--text-muted);
            font-size: .84rem;
        }

        .form-control,
        .form-select {
            min-height: 48px;
            border-radius: 12px;
            border-color: #dce1ea;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: rgba(45, 54, 145, .65);
            box-shadow: 0 0 0 .24rem rgba(45, 54, 145, .11);
        }

        .input-group-text {
            color: var(--sistec-blue);
            background: #f8f9fc;
            border-color: #dce1ea;
        }

        .editor-wrapper {
            overflow: hidden;
            border: 1px solid #dce1ea;
            border-radius: 14px;
            background: #fff;
        }

        .editor-wrapper.is-invalid {
            border-color: #dc3545;
            box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .08);
        }

        .editor-toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: .35rem;
            padding: .6rem;
            border-bottom: 1px solid #e8ebf2;
            background: #f8f9fc;
        }

        .editor-content {
            min-height: 220px;
            padding: 1rem;
            outline: none;
            overflow-wrap: anywhere;
        }

        .editor-content:empty::before {
            content: attr(data-placeholder);
            color: #9aa2b1;
            pointer-events: none;
        }

        .editor-content img {
            display: block;
            max-width: 100%;
            height: auto;
            margin: .9rem 0;
            border: 1px solid #e1e5ec;
            border-radius: 12px;
        }

        .drop-zone {
            padding: 1.3rem;
            text-align: center;
            cursor: pointer;
            border: 1.5px dashed #bfc7d5;
            border-radius: 14px;
            background: #fbfcfe;
            transition: .2s ease;
        }

        .drop-zone:hover,
        .drop-zone.is-dragging {
            border-color: var(--sistec-blue);
            background: rgba(45, 54, 145, .04);
        }

        .attachment-item {
            display: flex;
            align-items: center;
            gap: .75rem;
            padding: .7rem .85rem;
            border: 1px solid #e7eaf0;
            border-radius: 12px;
            background: #fff;
        }

        .attachment-icon {
            width: 38px;
            height: 38px;
            flex: 0 0 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            color: var(--sistec-blue);
            background: rgba(45, 54, 145, .08);
        }

        .priority-preview {
            min-height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e4e8ef;
            border-radius: 12px;
            color: #6c757d;
            background: #f8f9fc;
            font-weight: 700;
        }

        .priority-low {
            color: #176b37;
            background: rgba(25, 135, 84, .08);
        }

        .priority-medium {
            color: #8a6500;
            background: rgba(255, 193, 7, .12);
        }

        .priority-high {
            color: #a44b00;
            background: rgba(253, 126, 20, .10);
        }

        .priority-urgent {
            color: #a72733;
            background: rgba(220, 53, 69, .09);
        }

        .location-box,
        .recaptcha-shell {
            padding: 1rem;
            border: 1px solid #e6e9ef;
            border-radius: 16px;
            background: #fafbfe;
        }

        .map-preview {
            overflow: hidden;
            border: 1px solid #e1e5ec;
            border-radius: 14px;
            background: #eef1f5;
        }

        .map-preview iframe {
            display: block;
            width: 100%;
            height: 320px;
            border: 0;
        }

        .location-status {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            padding: .4rem .7rem;
            border-radius: 999px;
            color: #5f6775;
            background: #eef1f5;
            font-size: .82rem;
            font-weight: 600;
        }

        .location-status.is-success {
            color: #0c7131;
            background: rgba(23, 156, 73, .12);
        }

        .location-status.is-error {
            color: #a72733;
            background: rgba(220, 53, 69, .10);
        }

        .submit-button {
            min-height: 52px;
            border: 0;
            border-radius: 13px;
            font-weight: 700;
            background: linear-gradient(90deg, var(--sistec-blue), #3d47a7);
            box-shadow: 0 10px 20px rgba(45, 54, 145, .18);
        }

        .submit-button:hover {
            background: linear-gradient(90deg, var(--sistec-blue-dark), var(--sistec-blue));
        }

        .btn-sistec-outline {
            border-color: rgba(45, 54, 145, .3);
            color: var(--sistec-blue);
            background: #fff;
        }

        .btn-sistec-outline:hover {
            color: #fff;
            background: var(--sistec-blue);
        }

        .btn-sistec-green {
            border-color: var(--sistec-green);
            color: var(--sistec-green);
            background: #fff;
        }

        .btn-sistec-green:hover {
            color: #fff;
            background: var(--sistec-green);
        }

        .divider {
            height: 1px;
            margin: 1.65rem 0;
            background: linear-gradient(90deg, transparent, #e3e6ed 14%, #e3e6ed 86%, transparent);
        }

        /* Modal de Resultado Grande y Llamativo */
        .result-modal-content {
            border-radius: 26px;
            overflow: hidden;
            background: #ffffff;
        }

        .result-icon-wrapper {
            width: 88px;
            height: 88px;
            margin: 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 2.8rem;
            transition: transform 0.3s ease;
        }

        .result-icon-success {
            color: #ffffff;
            background: linear-gradient(135deg, #179c49, #1fc95f);
            box-shadow: 0 0 0 14px rgba(23, 156, 73, 0.15), 0 10px 25px rgba(23, 156, 73, 0.28);
            animation: pulse-success 1.8s infinite ease-in-out;
        }

        .result-icon-error {
            color: #ffffff;
            background: linear-gradient(135deg, #dc3545, #ff5252);
            box-shadow: 0 0 0 14px rgba(220, 53, 69, 0.15), 0 10px 25px rgba(220, 53, 69, 0.28);
            animation: pulse-error 1.8s infinite ease-in-out;
        }

        @keyframes pulse-success {

            0%,
            100% {
                box-shadow: 0 0 0 10px rgba(23, 156, 73, 0.15), 0 8px 20px rgba(23, 156, 73, 0.25);
            }

            50% {
                box-shadow: 0 0 0 18px rgba(23, 156, 73, 0.08), 0 12px 28px rgba(23, 156, 73, 0.35);
            }
        }

        @keyframes pulse-error {

            0%,
            100% {
                box-shadow: 0 0 0 10px rgba(220, 53, 69, 0.15), 0 8px 20px rgba(220, 53, 69, 0.25);
            }

            50% {
                box-shadow: 0 0 0 18px rgba(220, 53, 69, 0.08), 0 12px 28px rgba(220, 53, 69, 0.35);
            }
        }

        .ticket-code-card {
            padding: 1.25rem;
            border-radius: 18px;
            background: linear-gradient(135deg, #f0f4ff, #e9efff);
            border: 2px dashed rgba(45, 54, 145, 0.3);
        }

        .ticket-code-text {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
            font-size: 1.55rem;
            font-weight: 800;
            color: var(--sistec-blue);
            letter-spacing: 0.04em;
        }

        .copy-code-btn {
            border-radius: 10px;
            font-weight: 600;
            padding: 0.35rem 0.85rem;
        }

        .result-details-box {
            padding: 1rem 1.25rem;
            border-radius: 14px;
            background: #fff5f5;
            border: 1px solid #f8d7da;
            color: #842029;
            font-size: 0.95rem;
        }

        /* Banner de alerta en el formulario */
        .form-alert-success {
            background-color: #d1e7dd;
            color: #0f5132;
            border-left: 6px solid var(--sistec-green) !important;
        }

        .form-alert-danger {
            background-color: #f8d7da;
            color: #842029;
            border-left: 6px solid #dc3545 !important;
        }

        .input-solicitante {
            border-radius: 0 12px 12px 0 !important;
        }

        @media (max-width: 767.98px) {
            .page-header {
                border-radius: 0 0 20px 20px;
            }

            .ticket-card {
                border-radius: 16px;
            }

            .editor-content {
                min-height: 180px;
            }
        }