/**
 * Estilos para Fichas de Reunión de Apoderados
 * Liceo Bicentenario Provincial Santa Teresa de los Andes
 */

/* ========== VARIABLES ========== */
:root {
    --color-primary: #0a3d2f;
    --color-accent: #2ec4a5;
    --color-dark: #0d1b2a;
    --color-light: #f5f5f5;
    --color-white: #ffffff;
    --color-text: #333333;
    --color-text-light: #666666;
    --color-border: #e0e0e0;

    --color-success: #27ae60;
    --color-danger: #e74c3c;
    --color-warning: #f39c12;
    --color-info: #3498db;

    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);

    --radius: 12px;
    --radius-sm: 6px;

    --transition: all 0.3s ease;
}

/* ========== RESET Y ESTILOS BASE ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-light);
    line-height: 1.6;
}

/* ========== ESTILOS DE PANTALLA ========== */
@media screen {

    /* Container */
    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* Header */
    .header {
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark) 100%);
        color: var(--color-white);
        padding: 2rem 0;
        box-shadow: var(--shadow-md);
    }

    .header-content {
        display: flex;
        align-items: center;
        gap: 2rem;
    }

    .logo {
        width: 80px;
        height: auto;
        border-radius: var(--radius-sm);
        background: var(--color-white);
        padding: 0.5rem;
    }

    .header-text h1 {
        font-family: var(--font-heading);
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    .subtitle {
        font-size: 1rem;
        opacity: 0.9;
        font-weight: 400;
    }

    /* Main Content */
    .main-content {
        padding: 2rem 0 4rem;
    }

    /* Cards */
    .card {
        background: var(--color-white);
        border-radius: var(--radius);
        box-shadow: var(--shadow-sm);
        padding: 2rem;
        margin-bottom: 2rem;
    }

    .card h2 {
        font-family: var(--font-heading);
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--color-primary);
        margin-bottom: 1.5rem;
    }

    /* Form */
    .form-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .form-group {
        display: flex;
        flex-direction: column;
    }

    .form-group label {
        font-weight: 600;
        color: var(--color-text);
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }

    .form-group input,
    .form-group select {
        padding: 0.75rem;
        border: 2px solid var(--color-border);
        border-radius: var(--radius-sm);
        font-family: var(--font-body);
        font-size: 1rem;
        transition: var(--transition);
    }

    .form-group input:focus,
    .form-group select:focus {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px rgba(46, 196, 165, 0.1);
    }

    /* Form Actions */
    .form-actions {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    /* Buttons */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: var(--radius-sm);
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: var(--transition);
        text-decoration: none;
    }

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .btn-primary {
        background: linear-gradient(135deg, var(--color-accent) 0%, #249e84 100%);
        color: var(--color-white);
    }

    .btn-secondary {
        background: var(--color-text-light);
        color: var(--color-white);
    }

    .btn-accent {
        background: linear-gradient(135deg, var(--color-primary) 0%, #0d5242 100%);
        color: var(--color-white);
    }

    /* Table */
    .table-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .table-responsive {
        overflow-x: auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    thead {
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark) 100%);
        color: var(--color-white);
    }

    th {
        padding: 1rem;
        text-align: left;
        font-family: var(--font-heading);
        font-weight: 600;
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    tbody tr {
        border-bottom: 1px solid var(--color-border);
        transition: var(--transition);
    }

    tbody tr:hover {
        background: rgba(46, 196, 165, 0.05);
    }

    td {
        padding: 1rem;
        font-size: 0.95rem;
    }

    td.loading,
    td.empty {
        text-align: center;
        color: var(--color-text-light);
        font-style: italic;
        padding: 2rem;
    }

    /* Actions Column */
    .actions {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .btn-icon {
        background: none;
        border: none;
        width: 36px;
        height: 36px;
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: var(--transition);
        font-size: 1rem;
    }

    .btn-edit {
        color: var(--color-info);
        background: rgba(52, 152, 219, 0.1);
    }

    .btn-edit:hover {
        background: var(--color-info);
        color: var(--color-white);
    }

    .btn-delete {
        color: var(--color-danger);
        background: rgba(231, 76, 60, 0.1);
    }

    .btn-delete:hover {
        background: var(--color-danger);
        color: var(--color-white);
    }

    .btn-print {
        color: var(--color-text-light);
        background: rgba(102, 102, 102, 0.1);
    }

    .btn-print:hover {
        background: var(--color-text-light);
        color: var(--color-white);
    }

    /* Badges */
    .badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
        text-align: center;
    }

    .badge-green {
        background: rgba(39, 174, 96, 0.15);
        color: var(--color-success);
    }

    .badge-blue {
        background: rgba(52, 152, 219, 0.15);
        color: var(--color-info);
    }

    .badge-orange {
        background: rgba(243, 156, 18, 0.15);
        color: var(--color-warning);
    }

    /* Ocultar área de impresión */
    #print-area {
        display: none;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .header-content {
            flex-direction: column;
            text-align: center;
        }

        .header-text h1 {
            font-size: 1.5rem;
        }

        .subtitle {
            font-size: 0.9rem;
        }

        .form-grid {
            grid-template-columns: 1fr;
        }

        .table-header {
            flex-direction: column;
            align-items: stretch;
        }

        table {
            font-size: 0.85rem;
        }

        th, td {
            padding: 0.75rem 0.5rem;
        }
    }
}

/* ========== ESTILOS DE IMPRESIÓN ========== */
@media print {

    /* Ocultar todo excepto el área de impresión */
    body * {
        visibility: hidden;
    }

    #print-area,
    #print-area * {
        visibility: visible;
    }

    #print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        display: block;
    }

    /* Configuración de página */
    @page {
        size: A4 portrait;
        margin: 0;
    }

    /* Cada ficha ocupa una página completa */
    .print-page {
        width: 100%;
        height: 100vh;
        page-break-after: always;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 2cm;
        position: relative;
    }

    .print-page:last-child {
        page-break-after: auto;
    }

    /* Logo */
    .print-logo {
        margin-bottom: 1.5cm;
    }

    .print-logo img {
        width: 150px;
        height: auto;
    }

    /* Nombre del liceo */
    .print-liceo {
        font-family: 'Montserrat', sans-serif;
        font-size: 28pt;
        font-weight: 700;
        color: #0a3d2f;
        margin-bottom: 0.5cm;
        line-height: 1.2;
    }

    /* Ciudades */
    .print-ciudades {
        font-family: 'Open Sans', sans-serif;
        font-size: 16pt;
        color: #666666;
        margin-bottom: 1.5cm;
    }

    /* Título "REUNIÓN DE APODERADOS" */
    .print-titulo {
        font-family: 'Montserrat', sans-serif;
        font-size: 32pt;
        font-weight: 900;
        color: #0d1b2a;
        text-transform: uppercase;
        letter-spacing: 2px;
        padding: 0.5cm 0;
        border-top: 4px solid #2ec4a5;
        border-bottom: 4px solid #2ec4a5;
        margin-bottom: 1cm;
    }

    /* Fecha */
    .print-fecha {
        font-family: 'Open Sans', sans-serif;
        font-size: 18pt;
        color: #333333;
        margin-bottom: 1.5cm;
        font-style: italic;
    }

    /* Curso - EL MÁS VISIBLE */
    .print-curso {
        font-family: 'Montserrat', sans-serif;
        font-size: 80pt;
        font-weight: 900;
        color: #0a3d2f;
        margin-bottom: 1cm;
        line-height: 1;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Información adicional */
    .print-info {
        font-family: 'Open Sans', sans-serif;
        font-size: 20pt;
        color: #333333;
        line-height: 1.8;
    }

    .print-info-item {
        margin-bottom: 0.5cm;
    }

    .print-info-item strong {
        color: #0a3d2f;
        font-weight: 600;
    }
}