746 lines
24 KiB
Plaintext
746 lines
24 KiB
Plaintext
@using MieSystem.Models.ViewModels
|
|
@model ExpedienteViewModel
|
|
@{
|
|
Layout = null;
|
|
ViewData["Title"] = "Expediente - " + Model.NombreCompleto;
|
|
}
|
|
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>@ViewData["Title"]</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
|
|
<style>
|
|
/* Estilos generales - Tono ejecutivo */
|
|
:root {
|
|
--primary-color: #2c3e50;
|
|
--secondary-color: #3498db;
|
|
--accent-color: #e74c3c;
|
|
--success-color: #27ae60;
|
|
--light-bg: #f8f9fa;
|
|
--border-color: #dee2e6;
|
|
}
|
|
|
|
/* Estilos optimizados para impresión */
|
|
@@page {
|
|
size: A4;
|
|
margin: 15mm 20mm;
|
|
}
|
|
|
|
@@media print {
|
|
body {
|
|
font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
|
|
color: #000;
|
|
background: white;
|
|
font-size: 11pt;
|
|
line-height: 1.4;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.no-print, .print-controls {
|
|
display: none !important;
|
|
}
|
|
|
|
.container {
|
|
box-shadow: none !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
max-width: 100% !important;
|
|
}
|
|
|
|
.document-header {
|
|
margin-bottom: 15px !important;
|
|
padding: 15px 0 !important;
|
|
}
|
|
|
|
.document-header h1 {
|
|
font-size: 22px !important;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 15px !important;
|
|
page-break-inside: avoid;
|
|
break-inside: avoid;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 14px !important;
|
|
padding: 8px 15px !important;
|
|
margin: -15px -15px 10px -15px !important;
|
|
}
|
|
|
|
.photo {
|
|
width: 100px !important;
|
|
height: 100px !important;
|
|
}
|
|
|
|
.info-grid {
|
|
gap: 10px !important;
|
|
}
|
|
|
|
.info-item {
|
|
margin-bottom: 8px !important;
|
|
padding-bottom: 8px !important;
|
|
}
|
|
|
|
.info-label {
|
|
font-size: 10px !important;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 11px !important;
|
|
padding-left: 18px !important;
|
|
}
|
|
|
|
.row {
|
|
display: block !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.col {
|
|
padding: 0 !important;
|
|
min-width: 100% !important;
|
|
margin-bottom: 10px !important;
|
|
}
|
|
|
|
.photo-container {
|
|
margin: 10px 0 !important;
|
|
padding: 10px !important;
|
|
}
|
|
|
|
.document-footer {
|
|
margin-top: 20px !important;
|
|
font-size: 9px !important;
|
|
}
|
|
/* Eliminar todos los saltos de página automáticos */
|
|
h1, h2, h3, h4, h5, .section, .section-title, .info-grid, .info-item {
|
|
page-break-inside: avoid !important;
|
|
page-break-after: avoid !important;
|
|
page-break-before: avoid !important;
|
|
}
|
|
/* Permitir saltos de página solo donde sea necesario */
|
|
.page-break {
|
|
page-break-before: always;
|
|
}
|
|
}
|
|
|
|
/* Estilos para pantalla */
|
|
body {
|
|
font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
|
|
max-width: 210mm;
|
|
margin: 0 auto;
|
|
background-color: #f5f7fa;
|
|
color: #333;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
|
|
margin: 20px auto;
|
|
padding: 30px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Botones de control - NO se imprimen */
|
|
.print-controls {
|
|
background: linear-gradient(135deg, #2c3e50 0%, #4a6491 100%);
|
|
padding: 15px;
|
|
border-radius: 10px 10px 0 0;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.btn {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
transition: all 0.3s ease;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: linear-gradient(135deg, #2980b9 0%, #1f639e 100%);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
|
|
color: white;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: linear-gradient(135deg, #7f8c8d 0%, #6c7b7d 100%);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(149, 165, 166, 0.3);
|
|
}
|
|
|
|
.btn-info {
|
|
background: linear-gradient(135deg, #27ae60 0%, #219653 100%);
|
|
color: white;
|
|
}
|
|
|
|
.btn-info:hover {
|
|
background: linear-gradient(135deg, #219653 0%, #1e8449 100%);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
|
|
}
|
|
|
|
/* Cabecera del documento - REVISADO para impresión */
|
|
.document-header {
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
margin-bottom: 20px;
|
|
border-bottom: 2px solid var(--primary-color);
|
|
position: relative;
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.document-header::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, var(--secondary-color), var(--success-color));
|
|
}
|
|
|
|
.document-header h1 {
|
|
margin: 0 0 8px 0;
|
|
font-size: 24px;
|
|
color: var(--primary-color);
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
page-break-after: avoid;
|
|
}
|
|
|
|
.document-subtitle {
|
|
color: var(--secondary-color);
|
|
margin: 0 0 5px 0;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.document-meta {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
margin-top: 10px;
|
|
color: #666;
|
|
font-size: 11px;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Secciones del documento - REVISADO para impresión */
|
|
.section {
|
|
margin-bottom: 20px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
background: white;
|
|
position: relative;
|
|
overflow: hidden;
|
|
page-break-inside: avoid;
|
|
break-inside: avoid;
|
|
}
|
|
|
|
.section::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 4px;
|
|
background: linear-gradient(to bottom, var(--secondary-color), var(--success-color));
|
|
}
|
|
|
|
.section-title {
|
|
background: linear-gradient(135deg, var(--light-bg), #e9ecef);
|
|
padding: 10px 15px;
|
|
margin: -15px -15px 15px -15px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-weight: 600;
|
|
color: var(--primary-color);
|
|
font-size: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
page-break-after: avoid;
|
|
}
|
|
|
|
.section-title i {
|
|
color: var(--secondary-color);
|
|
}
|
|
|
|
/* Layout de información */
|
|
.info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
.info-item {
|
|
margin-bottom: 12px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px dashed #eee;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.info-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.info-label {
|
|
font-weight: 600;
|
|
color: var(--primary-color);
|
|
margin-bottom: 4px;
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.info-label i {
|
|
color: var(--secondary-color);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.info-value {
|
|
color: #444;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
/* Foto del estudiante - REVISADO para impresión */
|
|
.photo-container {
|
|
text-align: center;
|
|
margin: 15px 0;
|
|
padding: 12px;
|
|
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.photo-frame {
|
|
display: inline-block;
|
|
padding: 6px;
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
|
border: 2px solid var(--secondary-color);
|
|
}
|
|
|
|
.photo {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 3px solid white;
|
|
}
|
|
|
|
/* Layout de columnas - REVISADO para impresión */
|
|
.row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 0 -10px;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.col {
|
|
flex: 1;
|
|
padding: 0 10px;
|
|
min-width: 280px;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
/* Badges */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 5px 10px;
|
|
border-radius: 15px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.badge-male {
|
|
background: linear-gradient(135deg, #3498db, #2980b9);
|
|
color: white;
|
|
}
|
|
|
|
.badge-female {
|
|
background: linear-gradient(135deg, #e74c3c, #c0392b);
|
|
color: white;
|
|
}
|
|
|
|
.status-active {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 12px;
|
|
background: linear-gradient(135deg, #27ae60, #219653);
|
|
color: white;
|
|
border-radius: 15px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-active::before {
|
|
content: '';
|
|
width: 6px;
|
|
height: 6px;
|
|
background: white;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Pie de documento */
|
|
.document-footer {
|
|
margin-top: 30px;
|
|
padding-top: 15px;
|
|
border-top: 1px solid var(--border-color);
|
|
text-align: center;
|
|
color: #666;
|
|
font-size: 10px;
|
|
line-height: 1.5;
|
|
page-break-before: avoid;
|
|
}
|
|
|
|
.footer-note {
|
|
font-style: italic;
|
|
color: #999;
|
|
margin-top: 8px;
|
|
padding: 8px;
|
|
background: var(--light-bg);
|
|
border-radius: 4px;
|
|
border-left: 3px solid var(--secondary-color);
|
|
font-size: 9px;
|
|
}
|
|
|
|
/* Watermark solo para impresión */
|
|
@@media print {
|
|
.watermark {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
font-size: 60px;
|
|
color: rgba(0, 0, 0, 0.03);
|
|
z-index: -1;
|
|
white-space: nowrap;
|
|
font-weight: bold;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
.watermark {
|
|
display: none;
|
|
}
|
|
|
|
/* Responsive para pantalla */
|
|
@@media (max-width: 768px) {
|
|
.container {
|
|
padding: 15px;
|
|
margin: 10px;
|
|
}
|
|
|
|
.print-controls {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.col {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.document-header h1 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.photo {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.info-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* Clase especial para evitar problemas de impresión */
|
|
.keep-together {
|
|
page-break-inside: avoid !important;
|
|
break-inside: avoid !important;
|
|
}
|
|
|
|
/* Ajuste específico para la primera sección */
|
|
.first-section {
|
|
page-break-after: avoid !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Watermark solo visible al imprimir -->
|
|
<div class="watermark">CONFIDENCIAL - MIE SYSTEM</div>
|
|
|
|
<!-- Controles de impresión - NO se imprimen -->
|
|
<div class="print-controls no-print">
|
|
<div>
|
|
<button onclick="window.history.back()" class="btn btn-secondary">
|
|
<i class="bi bi-arrow-left"></i> Regresar
|
|
</button>
|
|
</div>
|
|
<div style="display: flex; gap: 10px;">
|
|
<button onclick="window.print()" class="btn btn-primary">
|
|
<i class="bi bi-printer"></i> Imprimir Documento
|
|
</button>
|
|
<button onclick="downloadPDF()" class="btn btn-info">
|
|
<i class="bi bi-download"></i> Guardar como PDF
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contenedor principal del documento -->
|
|
<div class="container keep-together">
|
|
<!-- Cabecera del documento -->
|
|
<div class="document-header keep-together">
|
|
<h1>EXPEDIENTE MIE SYSTEM</h1>
|
|
<p class="document-subtitle">Sistema Integral de Gestión Educativa</p>
|
|
<div class="document-meta">
|
|
<div class="meta-item">
|
|
<i class="bi bi-calendar"></i>
|
|
<span>Generado: @DateTime.Now.ToString("dd/MM/yyyy HH:mm")</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<i class="bi bi-hash"></i>
|
|
<span>ID Expediente: @Model.Id</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<i class="bi bi-shield-check"></i>
|
|
<span>Documento Oficial</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Información Personal -->
|
|
<div class="section first-section keep-together">
|
|
<div class="section-title">
|
|
<i class="bi bi-person-badge"></i> Información Personal
|
|
</div>
|
|
<div class="row keep-together">
|
|
<div class="col">
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<div class="info-label">
|
|
<i class="bi bi-person"></i> Nombre Completo
|
|
</div>
|
|
<div class="info-value">@Model.NombreCompleto</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">
|
|
<i class="bi bi-calendar-event"></i> Fecha de Nacimiento
|
|
</div>
|
|
<div class="info-value">@Model.FechaNacimiento.ToString("dd/MM/yyyy")</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">
|
|
<i class="bi bi-calculator"></i> Edad
|
|
</div>
|
|
<div class="info-value">@Model.Edad años</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">
|
|
<i class="bi bi-gender-ambiguous"></i> Sexo
|
|
</div>
|
|
<div class="info-value">
|
|
@if (Model.Sexo == "M")
|
|
{
|
|
<span class="badge badge-male">
|
|
<i class="bi bi-gender-male"></i> Masculino
|
|
</span>
|
|
}
|
|
else
|
|
{
|
|
<span class="badge badge-female">
|
|
<i class="bi bi-gender-female"></i> Femenino
|
|
</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="photo-container">
|
|
<div class="photo-frame">
|
|
<img src="@(string.IsNullOrEmpty(Model.FotoUrl) ? "/images/default-avatar.png" : Model.FotoUrl)"
|
|
alt="Fotografía del estudiante"
|
|
class="photo">
|
|
</div>
|
|
<p style="margin-top: 8px; font-size: 11px; color: #666;">
|
|
<i class="bi bi-camera"></i> Fotografía actual
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-grid keep-together">
|
|
<div class="info-item">
|
|
<div class="info-label">
|
|
<i class="bi bi-geo-alt"></i> Dirección
|
|
</div>
|
|
<div class="info-value">@Model.Direccion</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">
|
|
<i class="bi bi-telephone"></i> Teléfono de Contacto
|
|
</div>
|
|
<div class="info-value">@(string.IsNullOrEmpty(Model.Telefono) ? "No especificado" : Model.Telefono)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Información de Padres y Responsable -->
|
|
<div class="row keep-together">
|
|
<div class="col">
|
|
<div class="section keep-together">
|
|
<div class="section-title">
|
|
<i class="bi bi-people"></i> Información de los Padres
|
|
</div>
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<div class="info-label">
|
|
<i class="bi bi-person-standing"></i> Padre
|
|
</div>
|
|
<div class="info-value">@(string.IsNullOrEmpty(Model.NombrePadre) ? "No especificado" : Model.NombrePadre)</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">
|
|
<i class="bi bi-person-standing-dress"></i> Madre
|
|
</div>
|
|
<div class="info-value">@(string.IsNullOrEmpty(Model.NombreMadre) ? "No especificado" : Model.NombreMadre)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col">
|
|
<div class="section keep-together">
|
|
<div class="section-title">
|
|
<i class="bi bi-person-heart"></i> Responsable a Cargo
|
|
</div>
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<div class="info-label">
|
|
<i class="bi bi-person-check"></i> Nombre del Responsable
|
|
</div>
|
|
<div class="info-value">@Model.NombreResponsable</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">
|
|
<i class="bi bi-diagram-3"></i> Parentesco
|
|
</div>
|
|
<div class="info-value">@(string.IsNullOrEmpty(Model.ParentescoResponsable) ? "Responsable" : Model.ParentescoResponsable)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Observaciones -->
|
|
@if (!string.IsNullOrEmpty(Model.Observaciones))
|
|
{
|
|
<div class="section keep-together">
|
|
<div class="section-title">
|
|
<i class="bi bi-chat-left-text"></i> Observaciones y Notas
|
|
</div>
|
|
<div class="info-value" style="white-space: pre-line; background: #f8f9fa; padding: 12px; border-radius: 5px; border-left: 3px solid var(--secondary-color); font-size: 12px;">
|
|
@Model.Observaciones
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- Información del Expediente -->
|
|
<div class="section keep-together">
|
|
<div class="section-title">
|
|
<i class="bi bi-folder-check"></i> Información del Expediente
|
|
</div>
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<div class="info-label">
|
|
<i class="bi bi-hash"></i> ID del Expediente
|
|
</div>
|
|
<div class="info-value">@Model.Id</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">
|
|
<i class="bi bi-check-circle"></i> Estado
|
|
</div>
|
|
<div class="info-value">
|
|
<span class="status-active">ACTIVO</span>
|
|
</div>
|
|
</div>
|
|
<div class="info-item">
|
|
<div class="info-label">
|
|
<i class="bi bi-clock-history"></i> Última Actualización
|
|
</div>
|
|
<div class="info-value">@DateTime.Now.ToString("dd/MM/yyyy HH:mm:ss")</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pie de documento -->
|
|
<div class="document-footer keep-together">
|
|
<p><strong>MIE SYSTEM</strong> - Sistema Integral de Gestión Educativa</p>
|
|
<p>Este documento ha sido generado automáticamente y es de carácter oficial.</p>
|
|
<div class="footer-note">
|
|
<i class="bi bi-shield-exclamation"></i> Documento confidencial - Uso exclusivo institucional
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Función para simular descarga de PDF
|
|
function downloadPDF() {
|
|
alert('Funcionalidad de descarga de PDF en desarrollo.\nPor ahora, use la opción "Imprimir" y seleccione "Guardar como PDF" en el diálogo de impresión.');
|
|
}
|
|
|
|
// Prevenir que la página se cierre automáticamente
|
|
window.onbeforeunload = null;
|
|
</script>
|
|
</body>
|
|
</html> |