/* ── MP Forms — CSS base del formulario (frontend) ─────────────────────────── */

/* Variables del formulario — sobrescritas por la página de Estilos */
.mp-form-wrapper {
    --mpf-accent:        #3b82f6;
    --mpf-accent-hover:  #2563eb;
    --mpf-error:         #ef4444;
    --mpf-border:        #d1d5db;
    --mpf-bg:            #ffffff;
    --mpf-bg-filled:     #f3f4f6;
    --mpf-text:          #1f2937;
    --mpf-muted:         #6b7280;
    --mpf-radius:        8px;
    --mpf-gap:           16px;
    --mpf-pad-y:         10px;
    --mpf-pad-x:         12px;
    --mpf-font-size:     14px;
    --mpf-input-weight:  400;
    --mpf-label-size:    13px;
    --mpf-label-weight:  500;
}

/* ── Contenedor y grid ─────────────────────────────────────────────────────── */

.mp-form-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: var(--mpf-font-size);
    color: var(--mpf-text);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--mpf-gap);
}

.form-col            { grid-column: span 12; }
.form-col.col-12     { grid-column: span 12; }
.form-col.col-6      { grid-column: span 6; }
.form-col.col-4      { grid-column: span 4; }
.form-col.col-3      { grid-column: span 3; }

@media (max-width: 640px) {
    .form-col.col-6,
    .form-col.col-4,
    .form-col.col-3 { grid-column: span 12; }
}

/* ── Fieldset / sección ────────────────────────────────────────────────────── */

.form-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.form-legend {
    font-size: 15px;
    font-weight: 600;
    color: var(--mpf-text);
    padding: 0;
    margin-bottom: 4px;
    width: 100%;
    border-bottom: 2px solid var(--mpf-border);
    padding-bottom: 8px;
}

/* ── Label accesible ───────────────────────────────────────────────────────── */

.form-label {
    display: block;
    font-size: var(--mpf-label-size);
    font-weight: var(--mpf-label-weight);
    color: var(--mpf-text);
    margin-bottom: 5px;
}

/* Label oculto visualmente pero legible por lectores de pantalla (WCAG 1.3.1) */
.form-label-sr {
    display: block;
    font-size: var(--mpf-label-size);
    font-weight: var(--mpf-label-weight);
    color: var(--mpf-text);
    margin-bottom: 5px;
}

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

.form-label .requerido,
.form-label-sr .requerido {
    color: var(--mpf-error);
    margin-left: 2px;
}

/* ── Wrapper del campo ─────────────────────────────────────────────────────── */

.form-field {
    position: relative;
}

/* ── Control base (input, textarea, select) ────────────────────────────────── */

.form-control {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: var(--mpf-pad-y) var(--mpf-pad-x);
    font-size: var(--mpf-font-size);
    font-weight: var(--mpf-input-weight);
    font-family: inherit;
    color: var(--mpf-text);
    background: var(--mpf-bg);
    border: 1.5px solid var(--mpf-border);
    border-radius: var(--mpf-radius);
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}

.form-control::placeholder {
    color: var(--mpf-muted);
}

.form-control:hover {
    border-color: #9ca3af;
}

.form-control:focus {
    border-color: var(--mpf-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.form-control:disabled {
    background: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
}

.form-control.textarea {
    resize: vertical;
    min-height: 100px;
}

/* Select con flecha personalizada */
select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* ── Variante: Outlined (por defecto) ──────────────────────────────────────── */

.mp-form--outlined .form-control {
    border: 1.5px solid var(--mpf-border);
    background: var(--mpf-bg);
}

/* ── Variante: Filled ──────────────────────────────────────────────────────── */

.mp-form--filled .form-control {
    border: none;
    border-bottom: 2px solid var(--mpf-border);
    border-radius: var(--mpf-radius) var(--mpf-radius) 0 0;
    background: var(--mpf-bg-filled);
}

.mp-form--filled .form-control:focus {
    border-bottom-color: var(--mpf-accent);
    box-shadow: none;
}

/* ── Variante: Minimal (solo línea inferior) ───────────────────────────────── */

.mp-form--minimal .form-control {
    border: none;
    border-bottom: 1px solid var(--mpf-border);
    border-radius: 0;
    background: transparent;
    padding-left: 0;
    padding-right: 0;
}

.mp-form--minimal .form-control::placeholder {
    color: var(--mpf-border);
}

.mp-form--minimal .form-control:focus {
    border-bottom-color: var(--mpf-accent);
    box-shadow: none;
}

.mp-form--minimal select.form-control {
    background-image: none;
    padding-right: 0;
}

/* ── Variante: Flat (fondo, sin borde) ─────────────────────────────────────── */

.mp-form--flat .form-control {
    border: none;
    background: var(--mpf-bg-filled);
    border-radius: var(--mpf-radius);
}

.mp-form--flat .form-control:focus {
    background: #e8f0fe;
    box-shadow: none;
}

/* ── Radios de borde ───────────────────────────────────────────────────────── */

.mp-form--square .form-control  { --mpf-radius: 0px; }
.mp-form--soft .form-control    { --mpf-radius: 4px; }
.mp-form--rounded .form-control { --mpf-radius: 8px; }
.mp-form--pill .form-control    { --mpf-radius: 20px; }

/* Select y textarea siempre con radio máximo 8px aunque sea pill */
.mp-form--pill select.form-control,
.mp-form--pill .form-control.textarea { border-radius: 8px; }

/* ── Checkbox y radio nativos ──────────────────────────────────────────────── */

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.form-check-input {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--mpf-accent);
    cursor: pointer;
}

/* ── Checkbox personalizado (activado por clase en el wrapper) ─────────────── */

.mp-form--checkbox-square .form-check-input,
.mp-form--checkbox-rounded .form-check-input,
.mp-form--checkbox-circle .form-check-input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--mpf-border);
    background: var(--mpf-bg);
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    display: inline-grid;
    place-content: center;
    margin-top: 2px;
}

.mp-form--checkbox-square  .form-check-input { border-radius: 2px; }
.mp-form--checkbox-rounded .form-check-input { border-radius: 5px; }
.mp-form--checkbox-circle  .form-check-input { border-radius: 50%; }

.mp-form--checkbox-square .form-check-input:checked,
.mp-form--checkbox-rounded .form-check-input:checked,
.mp-form--checkbox-circle .form-check-input:checked {
    background-color: var(--mpf-accent);
    border-color: var(--mpf-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 3.5L3.8 6.5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.mp-form--checkbox-square .form-check-input:focus,
.mp-form--checkbox-rounded .form-check-input:focus,
.mp-form--checkbox-circle .form-check-input:focus {
    outline: 2px solid var(--mpf-accent);
    outline-offset: 2px;
}

.form-check-label {
    font-size: var(--mpf-font-size);
    cursor: pointer;
    line-height: 1.4;
}

.form-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-radio-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-radio-input {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--mpf-accent);
    cursor: pointer;
}

.form-radio-label {
    font-size: var(--mpf-font-size);
    cursor: pointer;
}

/* ── Tags (checkboxes como píldoras) ───────────────────────────────────────── */

.form-check-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.form-check-item {
    display: flex;
    align-items: center;
}

.form-check-item .form-check-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.form-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1.5px solid var(--mpf-border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    user-select: none;
    background: #fff;
    color: var(--mpf-muted);
}

.form-check-item .form-check-input:checked + .form-tag {
    border-color: var(--mpf-accent);
    background: var(--mpf-accent);
    color: #fff;
}

.form-check-item .form-check-input:focus-visible + .form-tag {
    outline: 2px solid var(--mpf-accent);
    outline-offset: 2px;
}

/* ── Botón submit ──────────────────────────────────────────────────────────── */

.form-submit {
    margin-top: 8px;
}

.mp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 28px;
    font-size: var(--mpf-font-size);
    font-family: inherit;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--mpf-radius);
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    border: 2px solid transparent;
}

/* Estilo sólido (por defecto) */
.mp-btn--solid {
    background: var(--mpf-accent);
    color: #fff;
    border-color: var(--mpf-accent);
}

.mp-btn--solid:hover {
    background: var(--mpf-accent-hover);
    border-color: var(--mpf-accent-hover);
}

/* Estilo outline */
.mp-btn--outline {
    background: transparent;
    color: var(--mpf-accent);
    border-color: var(--mpf-accent);
}

.mp-btn--outline:hover {
    background: var(--mpf-accent);
    color: #fff;
}

/* Estilo ghost */
.mp-btn--ghost {
    background: transparent;
    color: var(--mpf-accent);
    border-color: transparent;
    padding-left: 4px;
    padding-right: 4px;
}

.mp-btn--ghost:hover {
    background: var(--mpf-accent);
    color: #fff;
    border-color: var(--mpf-accent);
    padding-left: 28px;
    padding-right: 28px;
}

/* Radios del botón */
.mp-form--square  .mp-btn { border-radius: 0; }
.mp-form--soft    .mp-btn { border-radius: 4px; }
.mp-form--rounded .mp-btn { border-radius: 8px; }
.mp-form--pill    .mp-btn { border-radius: 999px; }

/* Ancho del botón */
.mp-btn--full { width: 100%; }

/* Alineación */
.form-submit--left   { text-align: left; }
.form-submit--center { text-align: center; }
.form-submit--right  { text-align: right; }

/* Estilo link (texto con subrayado + flecha →) */
.mp-btn--link {
    background: transparent;
    color: var(--mpf-accent);
    border-color: transparent;
    border-bottom: 2px solid var(--mpf-accent);
    border-radius: 0;
    padding: 0 0 2px;
    font-size: var(--mpf-font-size);
    gap: 8px;
}

.mp-btn--link::after {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 14px;
    height: 10px;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M9.64218 11.7969L8.68164 10.9231L12.7457 6.55383H0.00561523V5.26387H12.7422L8.67817 0.89465L9.63871 0L15.1002 5.89845L9.63871 11.7969H9.64218Z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath d='M9.64218 11.7969L8.68164 10.9231L12.7457 6.55383H0.00561523V5.26387H12.7422L8.67817 0.89465L9.63871 0L15.1002 5.89845L9.63871 11.7969H9.64218Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    transition: transform 0.15s;
}

.mp-btn--link:hover {
    opacity: 0.7;
    background: transparent;
    border-radius: 0;
}

.mp-btn--link:hover::after {
    transform: translateX(4px);
}

/* Spinner de carga */
.mp-btn .mp-boton-loading { display: none; }
.mp-btn.is-loading .mp-boton-texto { display: none; }
.mp-btn.is-loading .mp-boton-loading { display: inline; }

/* ── Notificación de resultado ─────────────────────────────────────────────── */

.form-notification {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: var(--mpf-radius);
    font-size: 14px;
    font-weight: 500;
    display: none;
}

.form-notification--success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.form-notification--error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ── Campos especiales — heredados y extendidos de forms-frontend.css ──────── */

/* El archivo forms-frontend.css sigue activo para yesno, rating, range y file */
/* Solo se añaden aquí las piezas que dependen de las variables del tema */

.form-yesno-label {
    border-radius: var(--mpf-radius);
}

.form-file {
    border-radius: var(--mpf-radius);
}

.form-range::-webkit-slider-thumb {
    background: var(--mpf-accent);
}

.form-range::-moz-range-thumb {
    background: var(--mpf-accent);
}

/* ── Label flotante (Material style) ───────────────────────────────────────── */

.mp-form--label-floating .form-field {
    position: relative;
    padding-top: 18px;
}

.mp-form--label-floating .form-label-sr {
    position: absolute;
    top: 18px;
    left: var(--mpf-pad-x);
    font-size: var(--mpf-font-size);
    font-weight: 400;
    color: var(--mpf-muted);
    pointer-events: none;
    transition: top 0.15s, font-size 0.15s, color 0.15s, font-weight 0.15s;
    margin: 0;
    /* Cancelamos el sr-only cuando es flotante */
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

.mp-form--label-floating .form-control:focus ~ .form-label-sr,
.mp-form--label-floating .form-control:not(:placeholder-shown) ~ .form-label-sr {
    top: 2px;
    font-size: 10px;
    font-weight: 600;
    color: var(--mpf-accent);
}

/* Para que el truco funcione, el placeholder debe ser transparente en floating */
.mp-form--label-floating .form-control::placeholder {
    color: transparent;
}

.mp-form--label-floating .form-control:focus::placeholder {
    color: var(--mpf-muted);
}