/*
 * Formulario Comprobante de Pago — style.css
 * Hereda tipografía y colores del tema activo mediante variables CSS
 * y propiedades heredadas. Solo agrega estructura y microestética propia.
 */

/* ============================================================
   TOKENS: hereda del tema; tiene fallbacks razonables
   ============================================================ */
.cp-wrapper {
    /* Fuentes: usa exactamente lo que el tema define en body */
    --cp-font:        inherit;
    --cp-font-size:   inherit;

    /* Colores primarios del tema (Gutenberg / Full Site Editing) */
    --cp-primary:     var(--wp--preset--color--primary,     var(--color-primary,     #2563eb));
    --cp-primary-dk:  var(--wp--preset--color--primary,     var(--color-primary,     #1d4ed8));
    --cp-accent:      var(--wp--preset--color--secondary,   var(--color-secondary,   #0ea5e9));
    --cp-text:        var(--wp--preset--color--foreground,  var(--color-text,        #1e293b));
    --cp-muted:       var(--wp--preset--color--tertiary,    var(--color-muted,       #64748b));
    --cp-border:      var(--wp--preset--color--border,      #cbd5e1);
    --cp-bg:          var(--wp--preset--color--background,  #ffffff);
    --cp-surface:     var(--wp--preset--color--base,        #f8fafc);
    --cp-success:     #16a34a;
    --cp-error-clr:   #dc2626;
    --cp-radius:      8px;
    --cp-radius-lg:   14px;
    --cp-shadow:      0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
    --cp-shadow-focus:0 0 0 3px color-mix(in srgb, var(--cp-primary) 25%, transparent);
    --cp-transition:  .18s ease;

    /* layout */
    font-family: var(--cp-font);
    font-size:   var(--cp-font-size);
    color:       var(--cp-text);
    max-width:   620px;
    margin:      0 auto;
    padding:     0 16px 40px;
}

/* ============================================================
   FORM CARD
   ============================================================ */
.cp-form {
    background:    var(--cp-bg);
    border:        1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    padding:       36px 40px;
    box-shadow:    var(--cp-shadow);
    display:       flex;
    flex-direction: column;
    gap:           24px;
}

/* ============================================================
   FIELD GROUP
   ============================================================ */
.cp-field-group {
    display:       flex;
    flex-direction: column;
    gap:           6px;
}

.cp-label {
    font-weight:  600;
    font-size:    .92em;
    color:        var(--cp-text);
    display:      flex;
    align-items:  center;
    gap:          6px;
}
.cp-label-icon { font-size: 1em; line-height: 1; }
.cp-required   { color: var(--cp-error-clr); margin-left: 2px; }
.cp-optional   { font-weight: 400; color: var(--cp-muted); font-size: .88em; }

/* ============================================================
   INPUTS & TEXTAREA
   ============================================================ */
.cp-input,
.cp-textarea {
    font-family:   inherit;
    font-size:     1em;
    color:         var(--cp-text);
    background:    var(--cp-surface);
    border:        1.5px solid var(--cp-border);
    border-radius: var(--cp-radius);
    padding:       10px 14px;
    outline:       none;
    transition:    border-color var(--cp-transition), box-shadow var(--cp-transition);
    width:         100%;
    box-sizing:    border-box;
}
.cp-input::placeholder,
.cp-textarea::placeholder { color: var(--cp-muted); opacity: .75; }

.cp-input:focus,
.cp-textarea:focus {
    border-color: var(--cp-primary);
    box-shadow:   var(--cp-shadow-focus);
    background:   var(--cp-bg);
}

.cp-input.cp-invalid,
.cp-textarea.cp-invalid {
    border-color: var(--cp-error-clr);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--cp-error-clr) 15%, transparent);
}

.cp-textarea {
    resize:     vertical;
    min-height: 90px;
    line-height: 1.6;
}

.cp-char-count {
    font-size:  .78em;
    color:      var(--cp-muted);
    text-align: right;
    margin-top: 2px;
}

/* ============================================================
   DROPZONE
   ============================================================ */
.cp-dropzone {
    position:      relative;
    border:        2px dashed var(--cp-border);
    border-radius: var(--cp-radius);
    background:    var(--cp-surface);
    cursor:        pointer;
    transition:    border-color var(--cp-transition), background var(--cp-transition);
    overflow:      hidden;
    min-height:    110px;
    display:       flex;
    align-items:   center;
    justify-content: center;
}
.cp-dropzone:hover,
.cp-dropzone.cp-drag-over {
    border-color: var(--cp-primary);
    background:   color-mix(in srgb, var(--cp-primary) 5%, var(--cp-bg));
}
.cp-dropzone.cp-invalid {
    border-color: var(--cp-error-clr);
}

.cp-file-input {
    position:  absolute;
    inset:     0;
    opacity:   0;
    cursor:    pointer;
    width:     100%;
    height:    100%;
    z-index:   2;
}

.cp-dropzone-content {
    text-align: center;
    padding:    20px 16px;
    pointer-events: none;
}
.cp-dropzone-icon { font-size: 2.2em; margin-bottom: 6px; }
.cp-dropzone-text {
    margin:     0 0 4px;
    font-size:  .94em;
    color:      var(--cp-text);
}
.cp-dropzone-hint {
    margin:     0;
    font-size:  .8em;
    color:      var(--cp-muted);
}

/* Preview */
.cp-file-preview {
    display:     flex;
    align-items: center;
    gap:         10px;
    padding:     12px 16px;
    width:       100%;
    box-sizing:  border-box;
}
.cp-file-icon { font-size: 1.6em; flex-shrink: 0; }
.cp-file-name {
    flex:        1;
    font-size:   .88em;
    color:       var(--cp-text);
    word-break:  break-all;
    font-weight: 500;
}
.cp-file-remove {
    background:    transparent;
    border:        1.5px solid var(--cp-border);
    border-radius: 50%;
    width:         26px;
    height:        26px;
    cursor:        pointer;
    font-size:     .75em;
    color:         var(--cp-muted);
    display:       flex;
    align-items:   center;
    justify-content: center;
    flex-shrink:   0;
    transition:    background var(--cp-transition), color var(--cp-transition);
    padding:       0;
    line-height:   1;
}
.cp-file-remove:hover {
    background: var(--cp-error-clr);
    color:      #fff;
    border-color: var(--cp-error-clr);
}

/* ============================================================
   ERROR MESSAGES
   ============================================================ */
.cp-error {
    font-size:  .8em;
    color:      var(--cp-error-clr);
    min-height: 1em;
    display:    block;
}

/* ============================================================
   PRIVACY NOTE
   ============================================================ */
.cp-privacy-note {
    font-size:   .82em;
    color:       var(--cp-muted);
    margin:      0;
    padding:     10px 14px;
    background:  color-mix(in srgb, var(--cp-primary) 6%, var(--cp-bg));
    border-left: 3px solid var(--cp-primary);
    border-radius: 0 var(--cp-radius) var(--cp-radius) 0;
}

/* ============================================================
   SUBMIT BUTTON
   ============================================================ */
.cp-btn-submit {
    font-family:   inherit;
    font-size:     1em;
    font-weight:   700;
    letter-spacing:.02em;
    background:    var(--cp-primary);
    color:         #fff;
    border:        none;
    border-radius: var(--cp-radius);
    padding:       13px 28px;
    cursor:        pointer;
    width:         100%;
    transition:    background var(--cp-transition), transform var(--cp-transition), box-shadow var(--cp-transition);
    box-shadow:    0 2px 8px color-mix(in srgb, var(--cp-primary) 35%, transparent);
}
.cp-btn-submit:hover:not(:disabled) {
    background:  var(--cp-primary-dk);
    transform:   translateY(-1px);
    box-shadow:  0 4px 14px color-mix(in srgb, var(--cp-primary) 40%, transparent);
}
.cp-btn-submit:active:not(:disabled) {
    transform:  translateY(0);
}
.cp-btn-submit:disabled {
    opacity:   .65;
    cursor:    not-allowed;
}

/* ============================================================
   SUCCESS MESSAGE
   ============================================================ */
.cp-success-msg {
    text-align:    center;
    padding:       48px 32px;
    background:    var(--cp-bg);
    border:        1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    box-shadow:    var(--cp-shadow);
}
.cp-success-icon {
    font-size:     3.5em;
    margin-bottom: 12px;
    animation:     cp-pop .4s cubic-bezier(.34,1.56,.64,1) both;
}
.cp-success-msg h3 {
    margin:      0 0 8px;
    font-size:   1.35em;
    color:       var(--cp-success);
}
.cp-success-msg p {
    color:       var(--cp-muted);
    margin:      0 0 24px;
}

.cp-btn-nuevo {
    font-family:   inherit;
    font-size:     .9em;
    font-weight:   600;
    background:    transparent;
    color:         var(--cp-primary);
    border:        1.5px solid var(--cp-primary);
    border-radius: var(--cp-radius);
    padding:       9px 22px;
    cursor:        pointer;
    transition:    background var(--cp-transition), color var(--cp-transition);
}
.cp-btn-nuevo:hover {
    background: var(--cp-primary);
    color:      #fff;
}

/* ============================================================
   GLOBAL ERROR
   ============================================================ */
.cp-global-error {
    background:    color-mix(in srgb, var(--cp-error-clr) 8%, var(--cp-bg));
    border:        1.5px solid var(--cp-error-clr);
    border-radius: var(--cp-radius);
    color:         var(--cp-error-clr);
    padding:       12px 16px;
    font-size:     .92em;
    margin-top:    4px;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes cp-pop {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 520px) {
    .cp-form { padding: 24px 20px; }
    .cp-wrapper { padding: 0 8px 32px; }
}

/* Field hint */
.cp-field-hint {
    font-size:  .8em;
    color:      var(--cp-muted);
    margin-top: 2px;
}