/* V 9.8 */
* {margin:0; padding:0; box-sizing:border-box;}

body {font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color:#f7eced; color:#000000; line-height:1.6; min-height:100vh;}

/* Anton Font Class */
.anton-font {font-family:"Anton", sans-serif;}

.container {max-width:800px; margin:0 auto; padding:40px 20px; background-color:#f7eced;}

/* Header Styles */
.header {text-align:center; margin-bottom:60px;}

.logo-container {margin-bottom:30px;}

.logo {height:80px; max-width:100%;}

.main-title {font-size:3.5rem; font-weight:900; color:#000000; margin-bottom:10px; letter-spacing:-0.02em;}

.subtitle {color:#666666; font-size:0.9rem; font-weight:400; text-transform:uppercase; letter-spacing:0.5px;}

/* Generic Section Styles */
.client-section,
.diagnostics-section,
.summary-box { background:#ffffff; border-radius:20px; padding:40px; margin-bottom:40px; box-shadow:0 4px 20px rgba(0, 0, 0, 0.08);}

.section-title {font-size:1.2rem; font-weight:700; color:#000000; margin-bottom:30px; text-transform:uppercase; letter-spacing:0.5px;}

/* Client Section Form Groups */
.form-group {margin-bottom:25px;}

.form-group label {display:block; margin-bottom:8px; font-weight:600; color:#000000; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.5px;}

.form-group input {width:100%; padding:15px 20px; border:none; border-radius:12px; font-size:1rem; background-color:#f7eced; color:#000000; transition:all 0.2s ease;}

.form-group input:focus {outline:none; background-color:#f0f0f0; box-shadow:0 0 0 3px rgba(34, 197, 94, 0.1);}

.form-group input::placeholder {color:#999999;}

/* Textarea styles for summary boxes */
.summary-box textarea {width:100%; min-height:150px; padding:15px 20px; border:none; border-radius:12px; font-size:1rem; font-family:inherit; resize:vertical; background-color:#f7eced; color:#000000; transition:all 0.2s ease;}

.summary-box textarea:focus {outline:none; background-color:#f0f0f0; box-shadow:0 0 0 3px rgba(34, 197, 94, 0.1);}

.summary-box textarea::placeholder {color:#999999;}

.section-subtitle {color:#666666; margin-bottom:30px; font-size:0.9rem; line-height:1.5;}

/* Diagnostic Items */
.diagnostic-item {border-radius:16px; margin-bottom:20px; overflow:hidden; background:#ffffff; border:2px solid #f0f0f0; transition:all 0.2s ease;}

.diagnostic-item:hover {border-color:#e0e0e0;}

.diagnostic-header {display:flex; align-items:center; padding:20px 25px; cursor:pointer; transition:background-color 0.2s ease; background:#fafafa;}

.diagnostic-header:hover {background:#f5f5f5;}

.diagnostic-icon {width:50px; height:50px; border-radius:50%; background:#38ed24; display:flex; align-items:center; justify-content:center; margin-right:20px; color:#000000; font-size:1.2rem;}

.diagnostic-info {flex:1;}

.diagnostic-info h3 {font-size:1rem; font-weight:700; color:#000000; text-transform:uppercase; letter-spacing:0.5px;}

.status-text {background:#22c55e; color:#ffffff; padding:6px 16px; border-radius:15px; font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; margin-right:15px;}

.status-text.attention {background:#f59e0b; color:#ffffff;}

.status-text.critical {background:#ef4444; color:#ffffff;}

.expand-icon {color:#22c55e; font-size:1rem; transition:transform 0.2s ease;}

.diagnostic-item.expanded .expand-icon {transform:rotate(180deg);}

.diagnostic-content {padding:30px; border-top:2px solid #f0f0f0; display:none; background:#ffffff;}

.diagnostic-item.expanded .diagnostic-content {display:block;}

/* Status Section */
.status-section {margin-bottom:30px;}

.status-options {display:flex; gap:15px; flex-wrap:wrap;}

.status-btn {padding:12px 24px; border:none; border-radius:25px; font-size:0.85rem; font-weight:600; cursor:pointer; transition:all 0.2s ease; text-transform:uppercase; letter-spacing:0.5px;}

.status-btn.good {background:#ffffff; color:#000000; border:2px solid #16a34a;}

.status-btn.good.active,
.status-btn.good:hover {background:#16a34a; color:#ffffff;}

.status-btn.needs-attention {background:#ffffff; color:#0a0a0a; border:2px solid #f59e0b;}

.status-btn.needs-attention.active,
.status-btn.needs-attention:hover {background:#f59e0b; color:#ffffff;}

.status-btn.critical {background:#ffffff; color:#000000; border:2px solid #ef4444;}

.status-btn.critical.active,
.status-btn.critical:hover {background:#ef4444; color:#ffffff;}

/* Estilos para vista previa de imágenes */
.file-preview-item {display:flex; align-items:center; gap:15px; padding:8px 12px;}

.file-preview-thumbnail {width:50px; height:50px; border-radius:8px; object-fit:cover; border:1px solid #ddd; flex-shrink:0;}

.file-preview-item .file-name {flex-grow:1;}

.file-preview-thumbnail {cursor:zoom-in;}

.image-modal-overlay {display:none; position:fixed; z-index:10000; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0, 0, 0, 0.85); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); animation:fadeIn 0.3s ease;}

.image-modal-content {margin:auto; display:block; max-width:85%; max-height:85%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); border-radius:8px;}

.image-modal-close {position:absolute; top:20px; right:35px; color:#fff; font-size:40px; font-weight:bold; transition:0.3s; cursor:pointer;}

.image-modal-close:hover,
.image-modal-close:focus {color:#bbb; text-decoration:none;}

@keyframes fadeIn {from {opacity:0;}
 to {opacity:1;}
}

/* Notes Section */
.notes-section {margin-bottom:30px;}

.notes-section h4 {margin-bottom:15px; font-size:0.9rem; font-weight:600; color:#000000; text-transform:uppercase; letter-spacing:0.5px;}

.notes-section textarea {width:100%; min-height:120px; padding:15px 20px; border:none; border-radius:12px; font-size:0.95rem; font-family:inherit; resize:vertical; background-color:#f8f8f8; color:#000000; transition:all 0.2s ease;}

.notes-section textarea:focus {outline:none; background-color:#f0f0f0; box-shadow:0 0 0 3px rgba(34, 197, 94, 0.1);}

.notes-section textarea::placeholder {color:#999999;}

.notes-section h4.error {color:#ef4444; transition:color 0.2s ease;}

/* Upload Section */
.upload-section h4 {margin-bottom:15px; font-size:0.9rem; font-weight:600; color:#000000; text-transform:uppercase; letter-spacing:0.5px;}

.upload-area {border:2px dashed #22c55e; border-radius:12px; padding:40px 20px; text-align:center; cursor:pointer; transition:all 0.2s ease; background:#f8fffe;}

.upload-area:hover {border-color:#16a34a; background:#ecfdf5;}

.upload-area.drag-over {border-style:solid; border-color:#16a34a; background-color:#ecfdf5; transform:scale(1.02);}

.upload-icon {font-size:2rem; margin-bottom:15px; color:#22c55e;}

.upload-area p {font-weight:600; color:#000000; margin-bottom:5px; font-size:0.9rem; text-transform:uppercase; letter-spacing:0.5px;}

.upload-area small {color:#666666; font-size:0.8rem;}

/* File Preview */
.file-preview-list {margin-top:15px; display:flex; flex-direction:column; gap:10px;}

.file-preview-item {display:flex; align-items:center; justify-content:space-between; padding:12px 15px; background-color:#f8fffe; border:1px solid #e0e0e0; border-radius:8px; font-size:0.9rem; color:#000000;}

.file-preview-item .file-name {white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-right:10px;}

.remove-file-btn {cursor:pointer; color:#ef4444; font-weight:bold; border:none; background:none; font-size:1.2rem; padding:0 8px; border-radius:4px; transition:all 0.2s ease;}

.remove-file-btn:hover {background:#fee2e2;}

/* Generate Button */
.generate-section {text-align:center; margin-top:40px;}

.generate-btn {background:#22c55e; color:#ffffff; border:none; padding:18px 50px; border-radius:50px; font-size:1rem; font-weight:700; cursor:pointer; transition:all 0.2s ease; text-transform:uppercase; letter-spacing:0.5px; box-shadow:0 4px 15px rgba(34, 197, 94, 0.3);}

.generate-btn:hover {background:#16a34a; transform:translateY(-2px); box-shadow:0 6px 20px rgba(34, 197, 94, 0.4);}

.generate-btn:active {transform:translateY(0);}

.generate-btn:disabled {background:#9ca3af; cursor:not-allowed; transform:none; box-shadow:none;}

/* Success Animation Styles */
.success-overlay {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.85); display:flex; justify-content:center; align-items:center; z-index:10000; opacity:0; transition:opacity 0.4s ease; backdrop-filter:blur(5px);}

.success-overlay.show {opacity:1;}

.success-overlay.hide {opacity:0;}

.success-animation {background:linear-gradient(135deg, #ffffff 0%, #f8fffe 100%); padding:50px 40px; border-radius:24px; text-align:center; max-width:450px; width:90%; transform:scale(0.7) translateY(50px); transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow:0 25px 80px rgba(0, 0, 0, 0.3); border:3px solid #22c55e;}

.success-overlay.show .success-animation {transform:scale(1) translateY(0);}

.success-icon-container {position:relative; margin:0 auto 30px; width:100px; height:100px;}

.success-checkmark-circle {width:100px; height:100px; position:relative; display:inline-block; vertical-align:top;}

.checkmark {width:100px; height:100px; border-radius:50%; display:block; stroke-width:3; stroke:#22c55e; stroke-miterlimit:10; box-shadow:inset 0px 0px 0px #ffffff; animation:fill 0.4s ease-in-out 0.4s forwards,
 scale 0.3s ease-in-out 0.9s both;}

.checkmark__circle {stroke-dasharray:166; stroke-dashoffset:166; stroke-width:3; stroke-miterlimit:10; stroke:#22c55e; fill:none; animation:stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;}

.checkmark__check {transform-origin:50% 50%; stroke-dasharray:48; stroke-dashoffset:48; stroke-width:4; stroke:#22c55e; animation:stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;}

.success-particles {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}

.particle {position:absolute; width:6px; height:6px; background:#22c55e; border-radius:50%; animation:particle-explosion 1s ease-out forwards;}

.particle:nth-child(1) {animation-delay:0.8s; transform:rotate(0deg) translateX(60px);}
.particle:nth-child(2) {animation-delay:0.9s; transform:rotate(60deg) translateX(60px);}
.particle:nth-child(3) {animation-delay:1s; transform:rotate(120deg) translateX(60px);}
.particle:nth-child(4) {animation-delay:1.1s; transform:rotate(180deg) translateX(60px);}
.particle:nth-child(5) {animation-delay:1.2s; transform:rotate(240deg) translateX(60px);}
.particle:nth-child(6) {animation-delay:1.3s; transform:rotate(300deg) translateX(60px);}

.success-title {color:#22c55e; font-size:2rem; font-weight:800; margin-bottom:15px; text-shadow:0 2px 4px rgba(34, 197, 94, 0.2);}

.success-message {color:#4b5563; font-size:1.1rem; margin-bottom:30px; line-height:1.6;}

.success-details {display:flex; justify-content:space-around; margin-bottom:30px; padding:20px 0; border-top:1px solid #e5e7eb; border-bottom:1px solid #e5e7eb;}

.detail-item {display:flex; flex-direction:column; align-items:center; gap:8px; font-size:0.9rem; color:#4b5563;}

.detail-icon {font-size:1.5rem;}

.success-loader {position:relative; width:100%; height:6px; background:#e5e7eb; border-radius:3px; overflow:hidden; margin-bottom:15px;}

.loader-bar {height:100%; background:linear-gradient(90deg, #22c55e, #16a34a); width:0%; border-radius:3px; animation:loading-bar 3s ease-in-out forwards;}

.loader-text {font-size:0.9rem; color:#6b7280; display:flex; align-items:center; justify-content:center; gap:5px;}

.countdown {font-weight:bold; color:#22c55e;}

/* Animations */
@keyframes stroke {100% {stroke-dashoffset:0;}
}

@keyframes scale {0%,
 100% {transform:none;}
 50% {transform:scale3d(1.1, 1.1, 1);}
}

@keyframes fill {100% {box-shadow:inset 0px 0px 0px 30px #ffffff;}
}

@keyframes loading-bar {0% {width:0%;}
 100% {width:100%;}
}

@keyframes particle-explosion {0% {opacity:1; transform:scale(1);}
 100% {opacity:0; transform:scale(0) translateX(80px);}
}

/* Responsive Design */
@media (max-width:768px) {.container {padding:20px 15px;}

 .logo {height:auto;}

 .main-title {font-size:2.5rem;}

 .client-section,
 .diagnostics-section,
 .summary-box {padding:25px;}

 .status-options {flex-direction:column;}

 .diagnostic-header {padding:15px 20px; display:flex; align-items:center; gap:15px; flex-wrap:nowrap;}

 .diagnostic-icon {width:45px; height:45px; font-size:1.1rem; flex-shrink:0;}

 .diagnostic-info {flex:1; min-width:0; overflow:hidden;}

 .diagnostic-info h3 {font-size:0.85rem; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

 .status-text {padding:5px 12px; font-size:0.7rem; border-radius:12px; white-space:nowrap; flex-shrink:0; margin-right:10px;}

 .expand-icon {flex-shrink:0; font-size:0.9rem;}

 .diagnostic-content {padding:20px;}

 .success-animation {padding:30px 20px; margin:20px;}

 .success-title {font-size:1.5rem;}

 .success-details {flex-direction:column; gap:15px;}

 .detail-item {flex-direction:row; justify-content:center;}
}

@media (max-width:480px) {.main-title {font-size:2rem;}

 .logo {height:auto;}

 .diagnostic-header {padding:12px 15px; gap:12px;}

 .diagnostic-icon {width:40px; height:40px; font-size:1rem;}

 .diagnostic-info h3 {font-size:0.8rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

 .status-text {padding:4px 10px; font-size:0.65rem; border-radius:10px;}

 .expand-icon {font-size:0.85rem;}

 .diagnostic-content {padding:15px;}

 .generate-btn {padding:15px 40px; font-size:0.9rem;}
}

@media (max-width:360px) {.diagnostic-header {padding:10px 12px; gap:8px;}

 .logo {height:auto;}

 .diagnostic-icon {width:35px; height:35px; font-size:0.9rem;}

 .diagnostic-info h3 {font-size:0.75rem; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

 .status-text {padding:3px 8px; font-size:0.6rem; border-radius:8px;}

 .expand-icon {font-size:0.8rem;}
}

/* Print Styles */
@media print {body {font-size:10pt; background-color:#fff;}

 .container {width:100%; max-width:100%; margin:0; padding:0; border:none; box-shadow:none;}

 .report-actions,
 .service-plans-section {display:none !important;}

 .report-header,
 .status-key-section,
 .client-details-section,
 .diagnostic-component {box-shadow:none !important; border:1px solid #e0e0e0; margin-bottom:15px; padding:15px;}

 .component-header {padding:10px 15px;}

 .component-content {padding:15px;}

 .diagnostic-component {page-break-inside:avoid;}

 .introduction-content {display:block !important; padding:20px;}

 .introduction-header {background:#ffffff !important; border-bottom:1px solid #e5e7eb !important; padding:15px 20px;}

 .introduction-toggle {display:none;}

 .status-badge.good,
 .status-badge.needs-attention,
 .status-badge.critical-issue {-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; color-adjust:exact !important;}
}