/* ========================================== */
/* ESTILOS GLOBALES                           */
/* ========================================== */
body { 
    font-family: system-ui, -apple-system, sans-serif; 
    background: #f8fafc; 
    color: #1e293b; 
    margin: 0; 
    padding: 0;
}

/* ========================================== */
/* ESTILOS DE AUTENTICACIÓN (LOGIN)           */
/* ========================================== */
.auth-wrapper { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 2rem; box-sizing: border-box;}
.auth-card { width: 100%; max-width: 400px; background: white; padding: 2.5rem 2rem; border-radius: 12px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); }
.logo { max-width: 250px; width: 100%; height: auto; display: block; margin: 0 auto 1.5rem auto; border-radius: 8px; }
.auth-card h2 { text-align: center; margin-top: 0; margin-bottom: 1.5rem; }
#authForm { display: flex; flex-direction: column; gap: 1rem; }
#authForm input { padding: 0.85rem; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 1rem; outline: none; }
#authForm input:focus { border-color: #2563eb; }
.auth-switch { text-align: center; margin-top: 1.5rem; font-size: 0.9rem; color: #475569; }
.auth-switch a { color: #2563eb; text-decoration: none; font-weight: bold; }
.auth-error { background: #fee2e2; color: #b91c1c; padding: 0.75rem; border-radius: 6px; font-size: 0.85rem; text-align: center; margin-top: 1rem; border: 1px solid #fca5a5; }
.auth-hint { text-align: center; font-size: 0.75rem; color: #64748b; margin-top: 1rem; font-style: italic; }

/* ========================================== */
/* ESTILOS DEL LOBBY DE PROYECTOS             */
/* ========================================== */
.lobby-center-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; box-sizing: border-box; }
.lobby-main-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 20px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); width: 100%; max-width: 1200px; display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 900px) { .lobby-main-card { flex-direction: row; } }
.lobby-user-panel { background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 2.5rem; display: flex; flex-direction: column; gap: 2rem; width: 100%; max-width: 320px; box-sizing: border-box; }
@media (min-width: 900px) { .lobby-user-panel { border-bottom: none; border-right: 1px solid #e2e8f0; } }
.lobby-projects-content { padding: 3rem; flex: 1; display: flex; flex-direction: column; gap: 2rem; box-sizing: border-box; }

.create-project-form-wide { display: flex; flex-direction: column; gap: 1rem; background: #f8fafc; padding: 2rem; border-radius: 14px; border: 1px solid #e2e8f0; }
.create-project-form-wide input, .create-project-form-wide textarea { width: 100%; padding: 0.85rem 1rem; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 0.95rem; outline: none; box-sizing: border-box; background: #ffffff; font-family: inherit; }
.create-project-form-wide input:focus, .create-project-form-wide textarea:focus { border-color: #10b981; }
.create-project-form-wide textarea { resize: vertical; min-height: 90px; }

.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.project-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04); transition: transform 0.2s; }
.project-card:hover { transform: translateY(-2px); box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.05); }

/* ========================================== */
/* ESTILOS DEL LABORATORIO (PANTALLA 3)       */
/* ========================================== */
.app-centered-wrapper { max-width: 950px; margin: 2.5rem auto; padding: 0 1.5rem; box-sizing: border-box; display: flex; flex-direction: column; gap: 2rem; }

.top-nav-bar { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1.25rem 2rem; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02); flex-wrap: wrap; gap: 1rem; }
.nav-left, .nav-right { display: flex; align-items: center; gap: 1.25rem; }
.project-badge { font-size: 1.15rem; font-weight: 700; color: #2563eb; }

/* Tarjetas y Botones Base */
.card { background: white; padding: 2rem; border-radius: 16px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02); }
button.main-btn, .btn-create-custom { background: #10b981; color: white; border: none; padding: 0.85rem 1rem; border-radius: 10px; cursor: pointer; font-weight: 600; width: 100%; transition: 0.2s; font-size: 1rem;}
button.main-btn:disabled { background: #6ee7b7; cursor: not-allowed; }
button.main-btn:hover:not(:disabled), .btn-create-custom:hover { background: #059669; }

.btn-return { background: #f1f5f9; color: #1e293b; border: 1px solid #e2e8f0; padding: 0.5rem 1rem; border-radius: 8px; font-weight: 500; cursor: pointer; border: none;}
.btn-logout-clean { background: #fff; color: #dc2626; border: 1px solid #fecaca; padding: 0.5rem 1rem; border-radius: 8px; font-weight: 500; cursor: pointer; }

/* Controles de Entrada (Audio/Mic) */
.input-methods { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.upload-zone { border: 2px dashed #cbd5e1; border-radius: 12px; padding: 1.5rem 1rem; text-align: center; background: #f8fafc; }
.custom-file-upload { display: inline-block; padding: 0.6rem 1.5rem; cursor: pointer; background: #2563eb; color: white; border-radius: 8px; font-weight: 600; }
#fileNameDisplay { font-size: 0.9rem; color: #64748b; margin-top: 0.75rem; }
.btn-record { background: #f1f5f9; color: #334155; border: 1px solid #cbd5e1; padding: 0.75rem; border-radius: 10px; cursor: pointer; font-weight: bold; width: 100%; font-size: 1rem; }
.recording-active { background: #fee2e2 !important; border-color: #ef4444 !important; color: #b91c1c !important; }

/* OCULTA EL BOTÓN NATIVO DE ARCHIVOS DUPLICADO */
input[type="file"] { display: none !important; }

/* Editor y Metadatos */
.metadata-inputs { display: none; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
.metadata-inputs input, .metadata-inputs textarea { width: 100%; padding: 0.75rem; border: 1px solid #cbd5e1; border-radius: 8px; font-family: inherit; box-sizing: border-box; }
.metadata-inputs textarea { resize: vertical; min-height: 80px; }
#editorWrapper { border-radius: 8px; overflow: hidden; margin-top: 1.5rem; border: 1px solid #cbd5e1; }
.ql-toolbar.ql-snow { background: #f8fafc; border: none !important; border-bottom: 1px solid #cbd5e1 !important; padding: 10px !important; }
.ql-container.ql-snow { border: none !important; background: #ffffff; font-size: 1rem; min-height: 200px; }

/* Botones de Acción (Copiar, Word, Guardar) */
.action-buttons { display: none; gap: 0.75rem; margin-top: 1.5rem; }
.action-buttons button { border: none; padding: 0.75rem; border-radius: 8px; cursor: pointer; font-weight: 600; flex: 1; color: white; }
#copyBtn { background: #64748b; }
#wordBtn { background: #2563eb; }
#saveBtn { background: #10b981; }

/* Spinner y Estado */
#status { margin-top: 1rem; font-weight: 500; color: #4b5563; text-align: center; }
.spinner { width: 40px; height: 40px; border: 4px solid #e5e7eb; border-top: 4px solid #2563eb; border-radius: 50%; animation: spin 1s linear infinite; margin: 1.5rem auto; display: none; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ========================================== */
/* HISTORIAL DE DOCUMENTOS                    */
/* ========================================== */
.history-header { margin-bottom: 1.5rem; }
.history-header h2 { margin-top: 0; }
.history-filters input { width: 100%; padding: 0.75rem; border-radius: 8px; border: 1px solid #cbd5e1; box-sizing: border-box; }

.history-item { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; display: flex; gap: 1rem; align-items: flex-start; }
input.history-checkbox { width: 18px; height: 18px; cursor: pointer; accent-color: #2563eb; margin-top: 4px; }
.history-content { flex-grow: 1; min-width: 0; }
.title-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.title-row h3 { margin: 0; font-size: 1.1rem; color: #1e293b; }
.file-name { font-size: 0.8rem; color: #64748b; }
.history-ref { font-size: 0.9rem; color: #475569; margin: 0.5rem 0; font-style: italic; }
.history-meta { display: flex; gap: 0.75rem; font-size: 0.8rem; color: #64748b; margin-top: 0.5rem; flex-wrap: wrap; }
.badge { background: #e2e8f0; padding: 0.2rem 0.6rem; border-radius: 12px; font-weight: 600; color: #475569; }

.history-actions { display: flex; flex-direction: column; gap: 0.5rem; min-width: 100px; }
.btn-action-history { border: none; padding: 0.5rem; border-radius: 6px; font-size: 0.8rem; cursor: pointer; font-weight: bold; width: 100%; }
.btn-edit-history { background: #dbeafe; color: #1e3a8a; }
.btn-copy-history { background: #f1f5f9; color: #475569; }
.btn-word-history { background: #e0e7ff; color: #4338ca; }
.btn-delete-history { background: #fee2e2; color: #ef4444; }

.history-controls { margin-top: 1.5rem; }
#loadMoreBtn { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; padding: 0.75rem; border-radius: 8px; width: 100%; font-weight: bold; cursor: pointer; display: none; }
.batch-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }
.batch-actions select { flex: 2; padding: 0.75rem; border-radius: 8px; border: 1px solid #cbd5e1; outline: none; }
.batch-actions button { flex: 1; background: #fff; color: #ef4444; border: 1px solid #fca5a5; border-radius: 8px; font-weight: bold; cursor: pointer; }

/* CAJA DE VISTA PREVIA UNIFORME Y COMPACTA PARA TODAS LAS TARJETAS */
.history-preview-box {
    height: 90px;
    min-height: 90px;
    max-height: 90px;
    overflow-y: auto;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #334155;
    margin-top: 0.5rem;
    box-sizing: border-box;
}

/* ==========================================================
   ADAPTACIÓN RESPONSIVA PARA DISPOSITIVOS MÓVILES
   ========================================================== */

@media screen and (max-width: 768px) {
    /* Ajustes generales de contenedores */
    body {
        padding: 0;
        margin: 0;
    }

    .auth-wrapper, .lobby-center-wrapper, .app-centered-wrapper {
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .lobby-main-card {
        flex-direction: column !important;
        padding: 15px !important;
        gap: 15px !important;
    }

    .lobby-user-panel {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 1rem;
    }

    .lobby-projects-content {
        width: 100% !important;
    }

    /* Barra de navegación superior en el espacio de trabajo */
    .top-nav-bar {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px;
        padding: 10px;
    }

    .nav-left, .nav-right {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    /* Zonas de subida de audio y botones */
    .input-methods {
        flex-direction: column;
    }

    .action-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .action-buttons button {
        width: 100%;
    }

    /* Tarjetas de historial y elementos */
    .history-item {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .history-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 10px;
    }

    .btn-action-history {
        flex: 1;
        text-align: center;
    }

    /* Tablas adaptables */
    table, thead, tbody, th, td, tr {
        display: block;
    }

    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        margin-bottom: 1rem;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        padding: 8px;
        background: #fff;
    }

    td {
        border: none !important;
        position: relative;
        padding-left: 50% !important;
        text-align: right !important;
    }
}