/* Estilos de los modales de subida (uploadModal + processingConfigModal).
   Copiados de templates/home.html (líneas 153-171 y 225-737) para la landing
   (demo sin registro, docs/plan_demo_landing_sin_registro.md). La home sigue
   usando su copia inline; si se toca un modal, actualizar ambos. */

    /* Disclaimer inside the upload modal when user is free */
    .free-sample-disclaimer {
        background: #fff8e1;
        border: 1px solid #ffe082;
        color: #6d4c00;
        padding: 0.85rem 1rem;
        border-radius: 8px;
        margin: 0.5rem 0 1rem 0;
        font-size: 0.95rem;
        line-height: 1.4;
    }
    .free-sample-disclaimer strong {
        color: #5a3d00;
    }
    .free-sample-disclaimer a {
        color: #0b6146;
        font-weight: 600;
        text-decoration: underline;
    }

    /* Upload Modal Styles */
    .upload-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }

    .upload-modal.show {
        display: block;
    }

    .upload-modal-content {
        position: relative;
        background-color: white;
        margin: 2% auto;
        padding: 1.5rem;
        width: 95%;
        max-width: 1000px;
        max-height: 90vh;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
    }

    #processingConfigModal .upload-modal-content {
        max-width: 600px;
    }

    .upload-modal-close {
        position: absolute;
        right: 1rem;
        top: 1rem;
        font-size: 1.5rem;
        cursor: pointer;
        color: #666;
        z-index: 10;
    }

    .upload-modal-title {
        font-size: 1.5rem;
        color: #0b6146;
        margin-bottom: 1.5rem;
        font-weight: 500;
    }

    /* Specific styles for delete modal - narrower and better centered */
    #deleteModal .upload-modal-content {
        width: 90%;
        max-width: 400px;
        margin: 50vh auto;
        transform: translateY(-50%);
    }

    .upload-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .file-input-container {
        border: 2px dashed #0b6146;
        padding: 1rem;
        text-align: center;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .file-input-container:hover {
        background-color: #f5f5f5;
    }

    .file-input {
        display: none;
    }

    .file-input-label {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        color: #0b6146;
        cursor: pointer;
    }

    /* PDF Preview Section */
    .pdf-preview-section {
        display: none;
        margin-top: 1.5rem;
        padding: 1.5rem;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background-color: #f9f9f9;
    }

    .pdf-preview-layout {
        display: flex;
        gap: 2rem;
        align-items: flex-start;
    }

    .pdf-preview-left {
        flex: 0 0 300px;
        min-width: 300px;
    }

    .pdf-preview-right {
        flex: 1;
        min-width: 400px;
    }

    .file-input-in-preview {
        margin-bottom: 1.5rem;
    }

    .file-input-label-preview {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 6px;
        cursor: pointer;
    }

    .file-input-label-preview:hover {
        background-color: #f5f5f5;
    }

    .pdf-preview-title {
        font-size: 1.2rem;
        color: #0b6146;
        margin-bottom: 1.5rem;
        font-weight: 500;
    }

    .pdf-preview-subtitle {
        font-size: 0.85rem;
        font-weight: normal;
    }

    .starting-page-info {
        background-color: #e8f5e8;
        padding: 1rem;
        border-radius: 6px;
        text-align: center;
    }

    .starting-page-text {
        color: #666;
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .starting-page-text strong {
        color: #0b6146;
    }

    #startingPageDisplay {
        color: #0b6146;
        font-size: 1.1rem;
    }

    .ending-page-info {
        padding: 0.5rem 1rem;
        text-align: center;
    }

    .ending-page-text {
        color: #666;
        font-size: 0.95rem;
    }

    .ending-page-text .page-input {
        width: 60px;
        text-align: center;
        font-weight: bold;
    }

    .pdf-canvas-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 1rem;
        min-height: 400px;
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
    }

    #pdfCanvas {
        max-width: 100%;
        max-height: 400px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .pdf-loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1rem;
        color: #666;
    }

    .pdf-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .pdf-nav-button {
        background-color: #0b6146;
        color: white;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.9rem;
        transition: background-color 0.3s;
    }

    .pdf-nav-button:hover {
        background-color: #0a5238;
    }

    .pdf-nav-button:disabled {
        background-color: #ccc;
        cursor: not-allowed;
    }

    .page-info {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        color: #666;
    }

    .page-input {
        width: 60px;
        padding: 0.25rem;
        text-align: center;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .pdf-preview-layout {
            flex-direction: column;
            gap: 1.5rem;
        }

        .pdf-preview-left,
        .pdf-preview-right {
            min-width: unset;
        }

        .pdf-canvas-container {
            min-height: 300px;
        }

        #pdfCanvas {
            max-height: 300px;
        }

        .pdf-file-info {
            margin-bottom: 1rem;
        }

        .pdf-preview-title {
            margin-bottom: 1rem;
        }
    }

    @media (max-width: 480px) {
        .pdf-preview-section {
            padding: 1rem;
        }

        .pdf-canvas-container {
            min-height: 250px;
        }

        #pdfCanvas {
            max-height: 250px;
        }

        .pdf-controls {
            gap: 0.5rem;
        }

        .pdf-nav-button {
            padding: 0.4rem 0.8rem;
            font-size: 0.8rem;
        }
    }

    .upload-submit {
        background-color: #0b6146;
        color: white;
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 8px;
        font-size: 1.1rem;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .upload-submit:hover {
        background-color: #094a37;
    }

    .upload-submit:disabled {
        background-color: #ccc;
        cursor: not-allowed;
    }

    /* Processing Configuration Modal Styles */
    .processing-config-form {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .config-field {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .config-field label {
        font-weight: 600;
        color: #0b6146;
        font-size: 0.95rem;
    }

    .config-input,
    .config-select {
        padding: 0.75rem;
        border: 2px solid #e1e5e9;
        border-radius: 8px;
        font-size: 1rem;
        transition: border-color 0.3s;
    }

    .config-input:focus,
    .config-select:focus {
        outline: none;
        border-color: #0b6146;
        box-shadow: 0 0 0 3px rgba(11, 97, 70, 0.1);
    }

    .config-select option {
        padding: 0.5rem;
    }

    /* Voice Picker */
    .voice-picker-list {
        border: 2px solid #e1e5e9;
        border-radius: 8px;
        max-height: 260px;
        overflow-y: auto;
    }

    .voice-picker-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.6rem 0.9rem;
        cursor: pointer;
        transition: background-color 0.15s;
        position: relative;
    }

    .voice-picker-item:not(:last-child) {
        border-bottom: 1px solid #f0f0f0;
    }

    .voice-picker-item:hover {
        background-color: #f7faf9;
    }

    .voice-picker-item.selected {
        background-color: #eef6f2;
        box-shadow: inset 3px 0 0 #0b6146;
    }

    .voice-picker-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }

    .voice-picker-name {
        font-weight: 600;
        font-size: 0.95rem;
        color: #333;
        white-space: nowrap;
    }

    .voice-picker-right {
        margin-left: auto;
        display: flex;
        align-items: center;
        min-width: 120px;
        justify-content: flex-end;
    }

    .voice-picker-desc {
        color: #999;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .voice-picker-play {
        display: none;
        background: none;
        border: 1px solid #ccc;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
        cursor: pointer;
        color: #555;
        transition: all 0.15s;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        line-height: 1;
        padding: 0;
    }

    .voice-picker-play:hover {
        background-color: #0b6146;
        border-color: #0b6146;
        color: white;
    }

    .voice-picker-play.playing {
        background-color: #0b6146;
        border-color: #0b6146;
        color: white;
    }

    .voice-picker-item:hover .voice-picker-desc {
        display: none;
    }

    .voice-picker-item:hover .voice-picker-play {
        display: flex;
    }

    .voice-picker-item .voice-picker-play.playing {
        display: flex;
    }

    .voice-picker-item:has(.voice-picker-play.playing) .voice-picker-desc {
        display: none;
    }

    .config-buttons {
        display: flex;
        gap: 1rem;
        margin-top: 1rem;
    }

    .config-btn {
        flex: 1;
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s;
    }

    .config-btn-cancel {
        background-color: #6c757d;
        color: white;
    }

    .config-btn-cancel:hover {
        background-color: #5a6268;
    }

    .config-btn-accept {
        background-color: #28a745;
        color: white;
    }

    .config-btn-accept:hover {
        background-color: #218838;
    }

    .config-btn:disabled {
        background-color: #666;
        cursor: not-allowed;
    }