/* =============================================================================
    ESTILOS MODO DARK — Cátedra Ocampo
    Solo Dark Mode | Sin Toggle | Optimizado
   ============================================================================= */


/* =============================================================================
    1. VARIABLES CSS - DARK MODE
   ============================================================================= */
:root {
    /* Colores de tema Dark */
    --background-color:    #1c1c1e;
    --text-color:          #f0f0f0;
    --text-color-secondary:#8e8e93;
    --input-background:    #2c2c2e;
    --border-color:        rgba(255, 255, 255, 0.15);
    --accent-color:        rgb(0 176 229);
    --error-color:         #ff453a;
    --success-color:       #00a92a;
    --section-background:  #2c2c2e;
    --header-background:   #1c1c1e;
    --separator-color:     rgba(255, 255, 255, 0.1);

    /* Colores semánticos de secciones */
    --asistencias: #414141;
    --estudiantes: #414141;
    --equipos:     #414141;

    /* Colores especiales */
    --nuevo:      rgba(245, 250, 177, 0.2);
    --presencial: rgba(5, 124, 139, 0.849);
    --virtual:    rgb(13, 177, 13);
    --celeste:    rgb(0 176 229);

    /* Grises */
    --gris20: #8e8e93;

    /* Variables de formulario - Dark Mode */
    --form-bg: #1c1c1e;
    --form-text: #f0f0f0;
    --form-label: #e0e0e0;
    --form-input-bg: #2c2c2e;
    --form-input-border: rgba(255, 255, 255, 0.15);
    --form-input-focus: rgba(0, 176, 229, 0.2);
    --form-placeholder: #8e8e93;
    --form-help-text: #8e8e93;
    --modal-bg: #2c2c2e;
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --card-shadow: rgba(0, 0, 0, 0.3);
    --section-border: rgba(255, 255, 255, 0.1);
}


/* =============================================================================
    2. RESET Y BASE
   ============================================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #020018;
    background-image: linear-gradient(to bottom, rgba(255, 255, 0, 0), rgba(0, 0, 255, 0.068)), url("../img/bg-blue.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    color: var(--text-color);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    min-height: 100vh;
    line-height: 1.6;
    padding: .5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

h1 {
    font-size: 1.15rem;
    text-align: center;
}

h2 {
    font-size: 1em !important;
}

h5 {
    font-size: .95rem !important;
}

h6 {
    color: var(--form-label);
    font-weight: 600;
    margin: 1rem;
    font-size: 0.8rem !important;
}

.table td {
    vertical-align: middle;
}

.text-white-50 {
    font-size: 0.7em !important;
}

.header {
    background: var(--celeste);
    color: white;
    padding: 1em;
    border-radius: 1em;
    margin-bottom: 1.2rem;
    box-shadow: 0 10px 30px rgba(0, 176, 229, 0.3);
}

.header h1 {
    font-size: 1.15em;
    margin-top: 1em;
}

.header p {
    opacity: 0.9;
    font-size: 1em;
}


/* =============================================================================
    3. NAVEGACIÓN
   ============================================================================= */
nav {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    padding: 1rem 0;
}

nav a {
    margin: 0 0 1rem 0;
}

.logo {
    width: 5rem;
    margin: 1rem auto;
    display: flex;
}

.logo h1 {
    color: var(--accent-color);
    font-size: 28px;
    margin-bottom: 5px;
}
        
.logo p {
    color: var(--text-color-secondary);
    font-size: .9rem;
    font-weight: 700;
}


/* =============================================================================
    4. LAYOUT — CONTENEDORES
   ============================================================================= */
.center {
    text-align: center;
}

.container {
    padding: 0 0.4em !important;
    max-width: 780px;
    margin: 0 auto;
}

.container-1 {
    margin-top: 1rem !important;
    padding: 0 0.5em !important;
}

.user-info {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding-bottom: 1em;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    text-align: right;
    color: yellow;
    font-size: .8em;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 600;
    justify-content: flex-end;
}

.row {
    padding: 0em !important;
}

.descripcion {
    color: var(--form-text);
    padding: 1rem;
    background: rgba(16, 97, 163, 0.233);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-size: .75rem;
}

.descripcion strong {
    display: flex;
    padding-left: 0;
    text-align: center;
    justify-content: center;
    font-size: .8rem;
}


.descripcion p {
    margin-bottom: 0.75rem;
}


/* =============================================================================
    5. CARDS
   ============================================================================= */
.card {
    background: #1c1c1edb;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem !important;
    box-shadow: 0 0.125rem 0.8rem var(--card-shadow) !important;
    transition: all 0.3s ease;
    padding: 1em;
    margin-bottom: 1em;
}

.card:hover {
    transform: translateY(-0.3125rem);
    box-shadow: 0 0.3125rem 0.9375rem var(--card-shadow);
    transition: all 0.3s ease;
}

.card-body {
    border-radius: 1rem;
    padding: .5rem !important;
}

.card-title {
    font-size: 1.2rem;
    text-align: center;
    text-decoration: none !important;
    color: var(--form-label);
    font-weight: 600;
    margin-bottom: .3rem;
}

.card-text {
    color: var(--text-color);
}

.card-subtitle {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--accent-color);
}

.card-header {
    border-radius: 0.8rem 0.8rem 0 0 !important;
}


/* =============================================================================
    6. FORMULARIOS — ESTILOS GENERALES
   ============================================================================= */

.formulario-tarjeta,
.tarjetas {
    background: #10101094;
    border: 1px solid var(--section-border);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px var(--card-shadow);
}

.tarjetas h2 {
    color: var(--accent-color);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--section-border);
}

.periodo {
    background: linear-gradient(135deg, rgba(0, 176, 229, 0.1), rgba(0, 176, 229, 0.05));
    border: 1px solid rgba(0, 176, 229, 0.3);
    border-radius: 0.75rem;
    padding: .5rem;
    margin: 1rem 0;
    text-align: center;
}

.periodo h2 {
    color: var(--accent-color);
    font-size: 1.4rem !important;
    margin-bottom: 0.5rem;
    border: none;
}

.periodo p {
    color: var(--form-text);
    font-size: 0.95rem;
    margin: 0;
}

/* =============================================================================
    LABELS Y HELP TEXT
   ============================================================================= */

.form-label {
    display: block;
    font-weight: 500;
    color: var(--form-label);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-label.required::after {
    content: ' *';
    color: var(--error-color);
}

small.form-text {
    color: var(--form-help-text) !important;
    font-size: 0.875rem;
}

.text-muted {
    color: var(--form-help-text) !important;
    font-size: 0.875rem;
    line-height: 1.25rem;
}





/* =============================================================================
    INPUTS Y SELECTS
   ============================================================================= */

.form-control,
.form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--form-text);
    background-color: var(--form-input-bg);
    border: 1px solid var(--form-input-border);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--form-input-focus);
    background-color: var(--form-input-bg);
}

.form-control::placeholder {
    color: var(--form-placeholder);
    opacity: 0.7;
}

.form-control:hover,
.form-select:hover {
    border-color: rgba(255, 255, 255, 0.25);
}

/* Select con flecha personalizada */
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23f0f0f0' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

/* Textarea */
textarea.form-control {
    resize: vertical;
    min-height: 6rem;
}

/* File input */
input[type="file"].form-control {
    padding: 0.5rem 1rem;
    cursor: pointer;
}

input[type="file"].form-control::-webkit-file-upload-button {
    padding: 0.5rem 1rem;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    margin-right: 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

input[type="file"].form-control::-webkit-file-upload-button:hover {
    background: #0094c8;
}

/* Texto de ayuda */
.form-text {
    font-size: 0.875rem;
    color: var(--form-help-text);
    margin-top: 0.375rem;
    line-height: 1.4;
    display: block;
}


/* =============================================================================
    CHECKBOXES Y RADIOS
   ============================================================================= */

/* Grupo de radios/checkboxes inline */
.radio-group,
.checkbox-group {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Para grupos con escala (1-5) */
.radio-scale {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
}

.radio-scale .form-check {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    min-width: 3rem;
}

.radio-scale .form-check-label {
    order: 2;
    margin-top: 0.375rem;
    font-size: 0.875rem;
    color: var(--form-text);
}

.radio-scale .form-check-input {
    order: 1;
    margin: 0;
}

/* Labels de extremos (Nada/Mucho) */
.radio-scale-label {
    font-size: 0.875rem;
    color: var(--form-label);
    font-weight: 500;
}

.form-check {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    min-height: 1.5rem;
}

/* Cuando está dentro de d-flex (inline), no tiene margin-bottom */
.d-flex > .form-check {
    margin-bottom: 0;
}

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid var(--form-input-border);
    transition: all 0.2s ease;
}

.form-check-input[type="checkbox"] {
    border-radius: 0.25rem;
    appearance: none;
    background-color: var(--form-input-bg);
    position: relative;
}

.form-check-input[type="checkbox"]:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.form-check-input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1rem;
    font-weight: bold;
}

.form-check-input[type="radio"] {
    border-radius: 50%;
    appearance: none;
    background-color: var(--form-input-bg);
    position: relative;
}

.form-check-input[type="radio"]:checked {
    border-color: var(--accent-color);
}

.form-check-input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.625rem;
    height: 0.625rem;
    background-color: var(--accent-color);
    border-radius: 50%;
}

.form-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--form-input-focus);
}

.form-check-input:hover {
    border-color: var(--accent-color);
}

.form-check-label {
    cursor: pointer;
    user-select: none;
    font-size: 0.95rem;
    color: var(--form-text);
}


/* =============================================================================
    BOTONES
   ============================================================================= */

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary {
    background: var(--accent-color);
    color: white;
}

.btn-primary:hover {
    background: #0094c8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 176, 229, 0.4);
}

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

.btn-outline-danger {
    background: transparent;
    border: 2px solid var(--error-color);
    color: var(--error-color);
    padding: 0.5rem 1rem;
}

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

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.d-grid .btn {
    width: 100%;
}


/* =============================================================================
    IMÁGENES
   ============================================================================= */

.img-thumbnail {
    max-height: 180px;
    max-width: 100%;
    object-fit: contain;
    border-radius: 0.5rem;
    border: 2px solid var(--form-input-border);
    background-color: var(--form-input-bg);
}


/* =============================================================================
    SPINNER
   ============================================================================= */

.spinner-border {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(0, 176, 229, 0.3);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spinner-rotate 0.8s linear infinite;
    display: inline-block;
}

.text-primary {
    color: var(--accent-color) !important;
}

@keyframes spinner-rotate {
    to { transform: rotate(360deg); }
}


/* =============================================================================
    MODAL PERSONALIZADO
   ============================================================================= */

.sistema-modal {
    backdrop-filter: blur(4px);
}

.sistema-modal > div {
    background: var(--modal-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =============================================================================
    UTILIDADES
   ============================================================================= */

.d-flex {
    display: flex;
}

.gap-3 {
    gap: 1rem;
}

.align-items-center {
    align-items: center;
}

.flex-wrap {
    flex-wrap: wrap;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

.text-success {
    color: var(--success-color) !important;
}

.text-danger {
    color: var(--error-color) !important;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mt-3 {
    margin-top: 1rem;
}

.mt-4 {
    margin-top: 1.5rem;
}


/* =============================================================================
    RESPONSIVE
   ============================================================================= */

@media (max-width: 768px) {
    .form-control,
    .form-select {
        font-size: 0.95rem;
        padding: 0.625rem 0.875rem;
    }

    .btn-lg {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
    
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 480px) {
    .btn,
    .d-grid .btn {
        width: 100%;
    }
    
    .tarjetas,
    .formulario-tarjeta {
        padding: 1rem;
    }
}