/* =============================================================
   qp-forms.css — Capa compartida de formularios y tarjetas
   =============================================================

   QUÉ ES
   Los primitivos visuales que hoy están duplicados en cada
   pantalla (tarjeta, sección, cabecera con chip, etiqueta,
   input, botón de guardado). Se extrajeron del patrón `gf-*`
   de business-edit.css, que es el más maduro del proyecto.

   REGLA DE USO
   Si un estilo sirve para dos pantallas, vive aquí. Si es de
   una sola, vive en el CSS de esa pantalla. No copiar bloques
   de aquí a un archivo de página: extender con el prefijo
   propio de la página.

   TOKENS
   Este archivo SOLO AGREGA variables nuevas (prefijo --qp-).
   No sobreescribe ni una sola regla de app.css. Es seguro
   cargarlo en cualquier página sin revisar regresiones.

   PALETA
   Rampa slate — es la que ya usan business-edit.css (222
   ocurrencias), Pedidos.css, Carrito.css y ProductoDetalle.css.
   Los grises de Bootstrap (#6c757d, #f8f9fa, #343a40) NO se
   usan aquí ni deberían usarse en pantallas nuevas.
============================================================= */

:root {
    /* ── Rampa neutral (slate) ── */
    --qp-n-50:  #f8fafc;
    --qp-n-100: #f1f5f9;
    --qp-n-200: #e2e8f0;
    --qp-n-300: #cbd5e1;
    --qp-n-400: #94a3b8;
    --qp-n-500: #64748b;
    --qp-n-600: #475569;
    --qp-n-700: #334155;
    --qp-n-800: #1e293b;
    --qp-n-900: #0f172a;

    /* ── Escala de espaciado (la que faltaba) ── */
    --qp-space-1: 0.25rem;
    --qp-space-2: 0.4rem;
    --qp-space-3: 0.6rem;
    --qp-space-4: 0.85rem;
    --qp-space-5: 1.1rem;
    --qp-space-6: 1.5rem;
    --qp-space-7: 2rem;
    --qp-space-8: 2.75rem;

    /* ── Radios del nivel de formulario ── */
    --qp-r-input: 10px;
    --qp-r-btn:   14px;
    --qp-r-card:  20px;

    /* ── Elevación: 3 pasos, no cuatro sombras improvisadas ── */
    --qp-elev-1: 0 2px 16px rgba(0,0,0,.05);
    --qp-elev-2: 0 10px 25px -5px rgba(0,0,0,.08);
    --qp-glow:   0 6px 20px rgba(14,165,233,.35);

    /* ── Tipografía del formulario ── */
    --qp-fs-label: 0.72rem;
    --qp-fs-hint:  0.72rem;
    --qp-fs-input: 0.935rem;
    --qp-fs-title: 0.92rem;

    --qp-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =============================================================
   TARJETA + SECCIONES
   Una sola tarjeta con secciones divididas por línea.
   No una tarjeta por bloque.
============================================================= */
.qp-card {
    background: #fff;
    border: 1px solid var(--qp-n-200);
    border-radius: var(--qp-r-card);
    overflow: hidden;
    box-shadow: var(--qp-elev-1);
    animation: qp-card-in .28s var(--qp-ease) both;
}

@keyframes qp-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.qp-section {
    padding: var(--qp-space-5) var(--qp-space-6);
}

.qp-section + .qp-section {
    border-top: 1px solid var(--qp-n-100);
}

/* =============================================================
   CABECERA DE SECCIÓN — chip + título + subtítulo
   Reemplaza el "panel-heading" gris con línea de acento.
============================================================= */
.qp-section-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--qp-space-5);
}

.qp-section-icon {
    width: 34px;
    height: 34px;
    border-radius: var(--qp-r-input);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Variantes por color, no por semántica de una sola pantalla */
.qp-section-icon--sky     { background: linear-gradient(135deg, #0ea5e9, #0284c7); box-shadow: 0 3px 8px rgba(14,165,233,.25); }
.qp-section-icon--violet  { background: linear-gradient(135deg, #0ea5e9, #7c3aed); box-shadow: 0 3px 8px rgba(124,58,237,.25); }
.qp-section-icon--teal    { background: linear-gradient(135deg, #14b8a6, #0891b2); box-shadow: 0 3px 8px rgba(20,184,166,.25); }
.qp-section-icon--indigo  { background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 3px 8px rgba(99,102,241,.25); }
.qp-section-icon--emerald { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 3px 8px rgba(16,185,129,.25); }
.qp-section-icon--slate   { background: linear-gradient(135deg, #64748b, #334155); box-shadow: 0 3px 8px rgba(51,65,85,.22); }
.qp-section-icon--amber   { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 3px 8px rgba(245,158,11,.25); }

.qp-section-title {
    font-size: var(--qp-fs-title);
    font-weight: 700;
    color: var(--qp-n-800);
    line-height: 1.2;
}

.qp-section-sub {
    font-size: 0.72rem;
    color: var(--qp-n-400);
    line-height: 1.35;
}

/* =============================================================
   REJILLA Y CAMPOS
============================================================= */
.qp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--qp-space-4);
}

.qp-grid--1 { grid-template-columns: 1fr; }

.qp-field {
    display: flex;
    flex-direction: column;
    gap: var(--qp-space-2);
    min-width: 0;
}

.qp-field--full { grid-column: 1 / -1; }

/* =============================================================
   ETIQUETA
   Mayúsculas pequeñas. El icono es opcional y decorativo:
   si la etiqueta ya dice qué es, no hace falta.
============================================================= */
.qp-label {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    font-size: var(--qp-fs-label);
    font-weight: 700;
    color: var(--qp-n-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.qp-label i {
    font-size: 0.68rem;
    color: var(--qp-n-400);
}

/* =============================================================
   INPUT
   No es .form-control a propósito: así no entra en la guerra de
   !important entre app.css y las utilidades de Bootstrap.
============================================================= */
.qp-input {
    width: 100%;
    padding: 0.72rem 0.9rem;
    font-size: var(--qp-fs-input);
    font-weight: 500;
    font-family: inherit;
    color: var(--qp-n-800);
    background: var(--qp-n-50);
    border: 1.5px solid var(--qp-n-200);
    border-radius: var(--qp-r-input);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    appearance: none;
    -webkit-appearance: none;
}

/* El campo se blanquea al enfocar: señal clara de "aquí escribes" */
.qp-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--accent-primary, #0ea5e9);
    box-shadow: 0 0 0 3px rgba(14,165,233,.12);
}

.qp-input::placeholder {
    color: var(--qp-n-300);
    font-weight: 400;
}

.qp-input:disabled,
.qp-input[readonly] {
    background: var(--qp-n-100);
    color: var(--qp-n-500);
    cursor: not-allowed;
}

/* Blazor marca los campos con .invalid dentro de un EditForm */
.qp-input.invalid,
.qp-input[aria-invalid="true"] {
    border-color: #fca5a5;
    background: #fef2f2;
}

.qp-input.invalid:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}

/* iOS hace zoom si la fuente del input baja de 16px */
@media (max-width: 767.98px) {
    .qp-input { font-size: 16px; }
}

.qp-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    padding-right: 2.1rem;
}

/* ── Input con botón acoplado (mostrar/ocultar contraseña) ──
   El botón va DENTRO del campo, no pegado como input-group:
   así no se rompe el radio ni aparecen dos bordes. */
.qp-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.qp-input-wrap .qp-input {
    padding-right: 3rem;
}

.qp-input-affix {
    position: absolute;
    right: 0.35rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--qp-n-400);
    border-radius: 8px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.qp-input-affix:focus-visible {
    outline: 2px solid var(--accent-primary, #0ea5e9);
    outline-offset: 1px;
}

@media (hover: hover) {
    .qp-input-affix:hover {
        color: var(--qp-n-600);
        background: var(--qp-n-100);
    }
}

/* =============================================================
   AYUDAS Y VALIDACIÓN
   El mensaje vive PEGADO al campo, no arriba de la tarjeta.
============================================================= */
.qp-hint {
    display: flex;
    align-items: center;
    gap: 0.32rem;
    font-size: var(--qp-fs-hint);
    color: var(--qp-n-400);
    line-height: 1.35;
}

.qp-hint i { font-size: 0.65rem; flex-shrink: 0; }
.qp-hint.ok  { color: #16a34a; }
.qp-hint.err { color: #dc2626; }

/* ValidationMessage de Blazor */
.qp-field .validation-message {
    font-size: var(--qp-fs-hint);
    color: #dc2626;
    line-height: 1.35;
}

/* =============================================================
   AVISOS (callouts)
   Colores hexadecimales directos — regla 37 del SKILL: las
   clases semánticas de Bootstrap están sobreescritas a nivel
   global y no son de fiar aquí.
============================================================= */
.qp-callout {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.8rem 0.95rem;
    border-radius: var(--qp-r-input);
    border: 1.5px solid var(--qp-n-200);
    background: var(--qp-n-50);
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--qp-n-700);
}

.qp-callout-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.qp-callout strong { color: var(--qp-n-800); font-weight: 700; }

.qp-callout--ok   { border-color: #bbf7d0; background: #f0fdf4; color: #14532d; }
.qp-callout--ok   .qp-callout-icon { background: #dcfce7; color: #15803d; }

.qp-callout--warn { border-color: #fed7aa; background: #fff7ed; color: #7c2d12; }
.qp-callout--warn .qp-callout-icon { background: #ffedd5; color: #c2410c; }

.qp-callout--err  { border-color: #fecaca; background: #fef2f2; color: #7f1d1d; }
.qp-callout--err  .qp-callout-icon { background: #fee2e2; color: #b91c1c; }

.qp-callout--info { border-color: #bae6fd; background: #f0f9ff; color: #075985; }
.qp-callout--info .qp-callout-icon { background: #e0f2fe; color: #0369a1; }

/* =============================================================
   FILA DE DATO (solo lectura)
   Para mostrar información, no para editarla.
============================================================= */
.qp-datarow {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.75rem 0;
}

.qp-datarow + .qp-datarow {
    border-top: 1px solid var(--qp-n-100);
}

.qp-datarow-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    background: var(--qp-n-100);
    color: var(--qp-n-500);
    flex-shrink: 0;
}

.qp-datarow-body { flex: 1; min-width: 0; }

.qp-datarow-label {
    font-size: var(--qp-fs-label);
    font-weight: 700;
    color: var(--qp-n-400);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.qp-datarow-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--qp-n-800);
    word-break: break-word;
}

/* =============================================================
   BARRA DE ACCIÓN Y BOTONES
   El botón NO ocupa el 100% en escritorio: su ancho comunica
   la importancia de la acción.
============================================================= */
.qp-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6rem;
    margin-top: var(--qp-space-5);
    padding-top: var(--qp-space-4);
    border-top: 1.5px solid var(--qp-n-200);
}

.qp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.85rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    border-radius: var(--qp-r-btn);
    cursor: pointer;
    transition: transform .2s var(--qp-ease), box-shadow .2s var(--qp-ease), background .15s ease;
    letter-spacing: 0.01em;
}

.qp-btn:focus-visible {
    outline: 2px solid var(--accent-primary, #0ea5e9);
    outline-offset: 2px;
}

.qp-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.qp-btn--primary {
    min-width: 200px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-primary, #0ea5e9), #0369a1);
    box-shadow: var(--qp-glow);
}

.qp-btn--ghost {
    color: var(--qp-n-600);
    background: var(--qp-n-100);
}

/* El hover solo existe donde hay puntero real: en táctil se
   queda pegado después del tap. */
@media (hover: hover) {
    .qp-btn--primary:hover:not(:disabled) {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 10px 28px rgba(14,165,233,.45);
    }

    .qp-btn--ghost:hover:not(:disabled) {
        background: var(--qp-n-200);
        color: var(--qp-n-800);
    }
}

.qp-btn:active:not(:disabled) { transform: translateY(0) scale(.99); }

/* =============================================================
   RESPONSIVE
============================================================= */
@media (max-width: 767.98px) {
    .qp-section {
        padding: var(--qp-space-4) var(--qp-space-4);
    }

    .qp-grid {
        grid-template-columns: 1fr;
    }

    .qp-card {
        border-radius: var(--qp-r-btn);
    }

    /* Botón a ancho completo, pero dentro de su sección:
       no es una barra fija ni tapa contenido. */
    .qp-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .qp-btn {
        width: 100%;
        min-width: 0;
        padding: 0.95rem 1.5rem;
    }
}

/* =============================================================
   ACCESIBILIDAD
============================================================= */
@media (prefers-reduced-motion: reduce) {
    .qp-card,
    .qp-btn,
    .qp-input,
    .qp-input-affix {
        animation: none !important;
        transition: none !important;
    }

    .qp-btn:hover { transform: none !important; }
}