/* ===== Verificación de producto - Machinatio Soluciones ===== */
.acciones { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin-top: 1rem; }
.acciones .btn { margin-top: 0; }
.btn-secundario { background: #fff; color: var(--primary); border: 2px solid var(--btn); padding: calc(0.8rem - 2px) calc(1.5rem - 2px); }
.btn-secundario:hover { background: #eef6e8; color: var(--primary); }

/* Ventana (dialog) para ingresar el código */
.dlg-verificar { border: none; border-radius: 12px; padding: 0; width: min(440px, calc(100% - 32px)); box-shadow: 0 20px 50px rgba(7, 20, 10, 0.3); }
.dlg-verificar::backdrop { background: rgba(7, 20, 10, 0.55); }
.dlg-verificar form { padding: 1.8rem; }
.dlg-verificar h2 { margin: 0 0 0.4rem; }
.dlg-verificar p { margin: 0 0 1rem; color: #4a5e40; }
.dlg-verificar label { font-weight: 600; color: var(--primary); display: block; margin-bottom: 0.4rem; }

/* Página de búsqueda */
.verif-buscar { max-width: 560px; margin: 1rem auto; background: #fff; padding: 2rem; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-top: 4px solid var(--accent); }
.verif-form label { font-weight: 600; color: var(--primary); display: block; margin-bottom: 0.4rem; }
.verif-fila { display: flex; gap: 0.6rem; }
.verif-fila input { margin: 0; text-transform: uppercase; }
.verif-fila .btn { margin: 0; white-space: nowrap; }
.verif-error { background: #fdecea; color: #8a1c12; border-left: 4px solid #c0392b; padding: 0.8rem 1rem; border-radius: 4px; }

/* Recuadro CÓDIGOS DEL PRODUCTO */
.verif-codigos { width: 100%; max-width: 760px; margin: 0 auto 2rem; border-collapse: collapse; background: #fff; border: 2px solid var(--primary); border-radius: 10px; overflow: hidden; }
.verif-codigos caption { background: var(--primary); color: #fff; font-weight: 700; letter-spacing: 0.08em; padding: 0.7rem; border-radius: 10px 10px 0 0; }
.verif-codigos th, .verif-codigos td { padding: 0.7rem 1rem; border-bottom: 1px solid #e3eddc; text-align: left; vertical-align: top; }
.verif-codigos th { width: 30%; background: #f2f8ee; color: var(--primary); font-weight: 600; }
.verif-codigos tr:last-child th, .verif-codigos tr:last-child td { border-bottom: none; }
.sn { font-family: Consolas, 'Courier New', monospace; font-weight: 600; letter-spacing: 0.03em; }
.estado { display: inline-block; padding: 0.2rem 0.7rem; border-radius: 99px; font-weight: 700; font-size: 0.85rem; }
.estado.ok { background: #e3f4d9; color: #275211; }
.estado.vencida { background: #fdecea; color: #8a1c12; }

/* Tabla de componentes: imagen al centro, partes a los lados */
.verif-partes { width: 100%; border-collapse: separate; border-spacing: 0.8rem; table-layout: fixed; }
.verif-partes caption { font-size: 1.3rem; font-weight: 700; color: var(--primary); text-align: left; padding: 0 0.8rem; }
.verif-partes thead th { color: #56694c; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.verif-partes .centro { width: 34%; text-align: center; vertical-align: middle; background: #fff; border-radius: 12px; padding: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.verif-partes .centro img { width: 100%; max-width: 300px; height: auto; }
.plataforma { margin: 0.5rem 0 0; font-weight: 600; color: var(--primary); }
.parte { background: #fff; border-radius: 10px; padding: 0.9rem 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-left: 4px solid var(--accent); vertical-align: top; }
.parte.vacia { background: none; box-shadow: none; border: none; }
.parte-cab { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; color: var(--primary); }
.num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--btn); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; }
.parte dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.7rem; margin: 0; font-size: 0.9rem; }
.parte dt { color: #6b7d61; font-weight: 600; }
.parte dd { margin: 0; overflow-wrap: anywhere; }

/* Celular: imagen arriba y partes en orden 1, 2, 3... */
@media (max-width: 760px) {
    .verif-fila { flex-direction: column; }
    .verif-codigos th { width: 38%; }
    .verif-partes, .verif-partes tbody { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
    .verif-partes thead { display: none; }
    .verif-partes tr { display: contents; }
    .verif-partes td { display: block; width: auto; }
    .verif-partes .centro { order: 0; width: auto; }
    .verif-partes .centro img { max-width: 240px; }
    .verif-partes .parte { order: var(--orden); }
    .verif-partes .parte.vacia { display: none; }
    .verif-partes caption { display: block; padding: 0; }
}

/* Impresión: solo el certificado */
@media print {
    header, footer, .acciones { display: none !important; }
    body { background: #fff; }
    main { max-width: none; padding: 0; }
    .parte, .verif-partes .centro { box-shadow: none; border: 1px solid #cfdcc6; border-left: 4px solid var(--accent); }
    .verif-codigos, .verif-partes { break-inside: avoid; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}