/* --- ESTILOS PARA LA PANTALLA --- */
    :root {
      --primary-color: #005a9c;
      --secondary-color: #333;
      --light-gray: #f4f7f9;
      --border-color: #e0e0e0;
      --placeholder-bg: #eeeeee;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      background-color: var(--light-gray);
      color: #444;
      line-height: 1.6;
      font-size: 11pt;
      padding: 2rem 1rem;
    }

    .contract-container {
      max-width: 800px;
      margin: 0 auto;
      background-color: white;
      padding: 3rem;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

    h1 { font-size: 1.8rem; font-weight: 700; color: var(--secondary-color); text-align: center; margin-bottom: 2.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: 1rem; }
    h2 { font-size: 1.3rem; font-weight: 600; color: var(--primary-color); margin-top: 2.5rem; margin-bottom: 1rem; }
    h3 { font-size: 1.1rem; font-weight: 600; color: var(--secondary-color); margin-top: 2rem; margin-bottom: 0.8rem; }
    p { margin-bottom: 1.2rem; }
    p:last-child { margin-bottom: 0; }
    
    .party-info { background-color: var(--light-gray); padding: 1rem 1.5rem; border-left: 4px solid var(--primary-color); border-radius: 4px; margin-bottom: 1rem; }

    .placeholder {
      background-color: var(--placeholder-bg);
      padding: 0.2rem 0.5rem;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      font-family: inherit;
      font-size: inherit;
    }
    input.placeholder {
        border: 1px solid #ccc;
        padding: 4px 8px;
    }
    input[type="text"].placeholder { min-width: 250px; }
    input[type="date"].placeholder { border: 1px solid #ccc; padding: 3px 8px; width: auto; }
    
    .full-width-input { width: 100%; }

    /* --- SECCIÓN DE FIRMAS --- */
    .signatures-container { display: flex; justify-content: space-around; gap: 2rem; flex-wrap: wrap; margin-top: 2rem; }
    .signature-section { display: flex; flex-direction: column; align-items: center; }
    .signature-section p { font-weight: 600; color: var(--secondary-color); margin-bottom: 0.5rem; }
    canvas { width: 300px; height: 200px; border: 2px dashed var(--border-color); border-radius: 8px; cursor: crosshair; background-color: #fcfcfc; }
    .clear-signature-btn { margin-top: 0.5rem; padding: 6px 12px; font-size: 0.8rem; color: #777; background-color: #f0f0f0; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
    .clear-signature-btn:hover { background-color: #e0e0e0; color: #333; }

    /* --- DROPDOWN --- */
    .dropdown { position: relative; width: 100%; }
    .dropdown-toggle { padding: 12px 15px; border: 1px solid var(--border-color); cursor: pointer; background-color: #fff; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; transition: border-color 0.2s; text-align: left; }
    .dropdown-toggle:hover { border-color: var(--primary-color); }
    .dropdown-toggle::after { content: '▼'; font-size: 0.8em; color: #888; margin-left: 10px; }
    .dropdown-menu { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--border-color); border-top: none; max-height: 250px; overflow-y: auto; display: none; z-index: 1000; border-radius: 0 0 6px 6px; box-shadow: 0 8px 10px rgba(0,0,0,0.1); }
    .dropdown-menu .option { padding: 12px 15px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: background-color 0.2s; }
    .dropdown-menu .option:last-child { border-bottom: none; }
    .dropdown-menu .option:hover { background-color: var(--light-gray); }
    .direccion { font-weight: bold; color: var(--secondary-color); }
    .nrua { font-size: 0.85em; color: #666; margin-top: 4px; display: block; }
    
    /* --- PURPOSE LIST CON RADIO BUTTONS --- */
    .purpose-list { background-color: #f9f9f9; border: 1px solid var(--border-color); border-radius: 6px; padding: 1rem 1.5rem; }
    .purpose-option { display: flex; align-items: center; margin-bottom: 0.8rem; }
    .purpose-option:last-child { margin-bottom: 0; }
    .purpose-option input[type="radio"] { margin-right: 10px; transform: scale(1.1); }
    .purpose-option label { cursor: pointer; flex-grow: 1; }
    #purpose-otros-details { display: none; margin-left: 10px; }

    @media (max-width: 768px) {
        body { padding: 1rem 0.5rem; }
        .contract-container { padding: 1.5rem; }
        h1 { font-size: 1.5rem; }
        h2 { font-size: 1.2rem; }
    }
    
    @media print {
        body { font-size: 10pt; line-height: 1.3; padding: 0; background-color: #fff; color: #000; }
        .contract-container { max-width: 100%; padding: 0; box-shadow: none; border-radius: 0; margin: 0; }
        h1, h2, h3 { color: #000 !important; margin-top: 1.2em; margin-bottom: 0.6em; padding-bottom: 0.2em; }
        h1 { font-size: 15pt; }
        h2 { font-size: 12pt; }
        h3 { font-size: 11pt; border-bottom: 1px solid #ccc; }
        p { margin-bottom: 0.8em; }
        .party-info, .purpose-list { padding: 0.5em 0.8em; margin-bottom: 0.8em; background-color: #f0f0f0 !important; border: 1px solid #ddd; }
        
        .placeholder, input.placeholder {
            background-color: transparent !important;
            border: none;
            border-bottom: 1px solid #999;
            border-radius: 0;
            padding: 0 2px;
        }

        .dropdown-toggle { border: none; padding: 0; }
        .dropdown-toggle::after { display: none; }
        .signatures-container { page-break-inside: avoid; }
        canvas { border: 1px solid #333; }
        .clear-signature-btn { display: none !important; }
        
        input[type="date"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
        input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
        
        /* Ocultamos los radio buttons originales para que no salgan vacíos */
        input[type="radio"] { display: none; }

        /* NUEVA REGLA: Estilo para la etiqueta de la opción seleccionada */
        .selected-for-print {
            font-weight: bold;
            text-decoration: underline;
        }
        .selected-for-print::before {
            content: '(X) '; /* Añade un marcador visual extra */
        }
    }