/* cliente/subir-arte.php (Camino B — arte propio). El estilo base de
   .card (fondo/borde/padding) viene de comprar.css, que ya lo extiende a
   .subir-arte-layout — ver Gotcha #13 en CLAUDE.md sobre por qué .card
   necesita eso explícito, no alcanza con cliente-tema.css. */
.subir-arte-layout {
    max-width: 640px;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.subir-arte-layout .field { margin-bottom: 12px; }
.subir-arte-layout .btn-grande { width: 100%; }

.aviso-arte-propio h2 { margin-top: 0; font-size: 16px; }
.aviso-arte-propio ul { margin: 0; padding-left: 20px; font-size: 14px; color: var(--color-muted, #6b6b63); }
.aviso-arte-propio li { margin-bottom: 6px; }

.arte-propio-preview {
    display: flex;
    justify-content: center;
    background: #f4f4f2;
    border-radius: 8px;
    padding: 12px;
}
.arte-propio-preview img {
    max-width: 100%;
    max-height: 360px;
    border-radius: 4px;
}
.arte-propio-nombre {
    text-align: center;
    font-weight: 700;
    margin: 12px 0 0;
    word-break: break-word;
}

/* Acá .medida-card sí es elegible de verdad (radio real, ver
   subir-arte.js) -- se reusa tal cual la de comprar.css, solo se centra
   el contenido porque acá no hay precio a la derecha. */
.subir-arte-layout .medida-card { align-items: center; text-align: center; }
.medida-recomendada-badge {
    align-self: center;
    background: var(--color-acento, #eab308);
    color: #18181b;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 2px;
}
.dpi-aviso { font-size: 12px; font-weight: 600; }
.dpi-aviso.dpi-mala { color: #b3261e; }
.dpi-aviso.dpi-regular { color: #7a5c00; }
.dpi-aviso.dpi-buena { color: #1e7d32; }
.relleno-aviso { font-size: 12px; font-weight: 600; color: #4b5563; }